/* =========================================================
   نورا — Design 1 · "City at night"
   RTL-first, logical properties, no external requests.
   ========================================================= */

/* ---------- Tokens ---------- */
body {
  /* Day / dusk palette (body without .night) */
  --bg: #EEF1F7;
  --bg-2: #E2E7F1;
  --surface: rgba(255, 255, 255, .72);
  --surface-2: rgba(255, 255, 255, .9);
  --line: rgba(11, 22, 48, .12);
  --line-strong: rgba(11, 22, 48, .22);
  --ink: #0B1630;
  --ink-soft: #33446B;
  --muted: #5A6B91;
  --amber: #D9821A;
  --amber-2: #B86A0C;
  --cyan: #0E8F97;
  --accent-ink: #0B1630;
  --btn-bg: #0B1630;
  --btn-ink: #FFF4D6;
  --shadow: 0 18px 50px -24px rgba(11, 22, 48, .35);
  --nav-bg: rgba(238, 241, 247, .78);
  --skyline: #B9C3D8;
  --windows: transparent;
  --windows-dim: transparent;
  --sky: linear-gradient(180deg, #9CC3EA 0%, #C9DDF0 38%, #F1E3D3 74%, #F6D8B8 100%);
  --stars-o: 0;
  --sun-o: 1;
  --grain-o: .05;
  --field: rgba(255, 255, 255, .85);

  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --wrap: 1200px;
}

body.night {
  --bg: #070d1f;
  --bg-2: #0B1630;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .07);
  --line: rgba(160, 190, 255, .12);
  --line-strong: rgba(160, 190, 255, .24);
  --ink: #EEF2FF;
  --ink-soft: #C9D4EE;
  --muted: #9FB3D9;
  --amber: #FFB547;
  --amber-2: #FFC861;
  --cyan: #5CE1E6;
  --accent-ink: #1A1206;
  --btn-bg: linear-gradient(180deg, #FFD27F, #FFB547 55%, #FF9F2E);
  --btn-ink: #1A1206;
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, .8);
  --nav-bg: rgba(7, 13, 31, .72);
  --skyline: #040817;
  --windows: rgba(255, 200, 97, .6);
  --windows-dim: rgba(160, 200, 255, .14);
  --sky: linear-gradient(180deg, #050a1a 0%, #0A1433 42%, #17204A 70%, #3A2A4A 88%, #5A3A3A 100%);
  --stars-o: 1;
  --sun-o: 0;
  --grain-o: .07;
  --field: rgba(7, 13, 31, .6);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Vazirmatn", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  transition: background-color .7s var(--ease), color .7s var(--ease);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; line-height: 1.35; }
h1, h2 { font-family: "El Messiri", "Vazirmatn", sans-serif; font-weight: 700; letter-spacing: 0; }
h3 { font-weight: 800; font-size: 1.15rem; }
p { margin: 0; }
::selection { background: var(--amber); color: #1A1206; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: min(var(--wrap), 100% - 2.5rem);
  margin-inline: auto;
}

/* ---------- Shared bits ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: .02em;
  margin-block-end: .9rem;
}
.eyebrow::before {
  content: "";
  inline-size: 22px;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.hero .eyebrow::before { display: none; }

.pulse {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(255, 181, 71, .6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 181, 71, .55); }
  70% { box-shadow: 0 0 0 12px rgba(255, 181, 71, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 181, 71, 0); }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-block-size: 48px;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: .98rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--glow {
  background: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: 0 10px 30px -12px rgba(11, 22, 48, .5);
}
.night .btn--glow {
  box-shadow: 0 0 0 1px rgba(255, 200, 97, .5) inset, 0 8px 30px -6px rgba(255, 159, 46, .55), 0 0 60px -10px rgba(255, 181, 71, .45);
}
.night .btn--glow:hover {
  box-shadow: 0 0 0 1px rgba(255, 230, 170, .7) inset, 0 10px 36px -4px rgba(255, 159, 46, .7), 0 0 80px -6px rgba(255, 181, 71, .6);
}
.btn--ghost {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); }

.glow-text { white-space: nowrap;
  color: var(--amber-2);
  transition: color .6s var(--ease), text-shadow .6s var(--ease);
}
.night .glow-text {
  color: #FFD27F;
  text-shadow: 0 0 6px rgba(255, 220, 150, .55), 0 0 22px rgba(255, 181, 71, .75), 0 0 54px rgba(255, 140, 40, .5);
  animation: buzz 7s infinite;
}
@keyframes buzz {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: .55; }
  94% { opacity: 1; }
  95.5% { opacity: .7; }
  96.5% { opacity: 1; }
}

/* ---------- Reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  border-block-end: 1px solid transparent;
  transition: background .35s, border-color .35s, backdrop-filter .35s, box-shadow .35s;
}
.nav--scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-block-end-color: var(--line);
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .6);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-block-size: 76px;
}
.nav__brand { display: block; flex: none; }
.nav__brand img { block-size: 54px; inline-size: auto; }
.nav__links {
  display: flex;
  gap: .25rem;
  margin-inline-start: auto;
}
.nav__links a {
  position: relative;
  padding: .45rem .8rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .25s, background .25s;
}
.nav__links a:hover { color: var(--ink); background: var(--surface-2); }
.nav__actions { display: flex; align-items: center; gap: .6rem; }

.mode {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-block-size: 44px;
  padding: .4rem .95rem .4rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: border-color .3s, background .3s, color .3s;
}
.mode:hover { border-color: var(--amber); color: var(--ink); }
.mode__dot {
  position: relative;
  inline-size: 34px;
  block-size: 18px;
  border-radius: 99px;
  background: rgba(11, 22, 48, .18);
  transition: background .4s;
}
.mode__dot::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .4s var(--ease), background .4s, box-shadow .4s;
}
.night .mode__dot { background: rgba(255, 181, 71, .22); }
.night .mode__dot::after {
  transform: translateX(-16px);
  background: #FFC861;
  box-shadow: 0 0 10px 2px rgba(255, 181, 71, .8);
}

.nav__burger {
  display: none;
  position: relative;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.nav__burger span {
  position: absolute;
  inset-inline: 12px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease), inset-block-start .3s var(--ease);
}
.nav__burger span:first-child { inset-block-start: 16px; }
.nav__burger span:last-child { inset-block-start: 25px; }
.nav__burger[aria-expanded="true"] span:first-child { inset-block-start: 20.5px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { inset-block-start: 20.5px; transform: rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  margin-block-start: -77px;           /* slide under the sticky nav */
  padding-block: calc(77px + 3.5rem) 0;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sky);
  transition: opacity .7s;
}
/* stars + sun/moon glow */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 8%, #cfe 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 34% 26%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 58% 22%, #def 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 6%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 74% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 14%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 92% 24%, #cfe 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 34%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 44%, #fff 50%, transparent 51%),
    radial-gradient(60% 40% at 18% 100%, rgba(255, 140, 60, .22), transparent 70%),
    radial-gradient(50% 35% at 85% 0%, rgba(92, 225, 230, .10), transparent 70%);
  opacity: var(--stars-o);
  transition: opacity .8s;
}
/* skyline silhouette with lit windows */
.hero__bg::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: clamp(110px, 16vw, 210px);
  background:
    radial-gradient(circle, var(--windows) 0 1px, transparent 1.5px) 3px 5px / 23px 19px,
    radial-gradient(circle, var(--windows-dim) 0 1px, transparent 1.4px) 0 0 / 11px 13px,
    var(--skyline);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0 220 V150 H0 V131 H19 V114 H25 V131 H44 V184 H63 V168 H69 V184 H88 V198 H140 V45 H168 V70 H201 V44 H207 V70 H240 V196 H268 V191 H304 V182 H376 V138 H395 V123 H401 V138 H420 V124 H480 V91 H524 V119 H568 V140 H604 V57 H648 V135 H676 V131 H720 V141 H792 V107 H836 V48 H896 V90 H915 V67 H921 V90 H940 V77 H1012 V59 H1056 V30 H1084 V191 H1112 V100 H1148 V129 H1176 V46 H1212 V97 H1284 V121 H1307 V100 H1313 V121 H1336 V182 H1369 V159 H1375 V182 H1408 V132 H1436 V110 H1440 V220 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0 220 V150 H0 V131 H19 V114 H25 V131 H44 V184 H63 V168 H69 V184 H88 V198 H140 V45 H168 V70 H201 V44 H207 V70 H240 V196 H268 V191 H304 V182 H376 V138 H395 V123 H401 V138 H420 V124 H480 V91 H524 V119 H568 V140 H604 V57 H648 V135 H676 V131 H720 V141 H792 V107 H836 V48 H896 V90 H915 V67 H921 V90 H940 V77 H1012 V59 H1056 V30 H1084 V191 H1112 V100 H1148 V129 H1176 V46 H1212 V97 H1284 V121 H1307 V100 H1313 V121 H1336 V182 H1369 V159 H1375 V182 H1408 V132 H1436 V110 H1440 V220 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  opacity: .95;
  transition: background-color .7s;
}
/* film grain over the whole hero */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-o);
  mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block-end: clamp(3rem, 6vw, 5rem);
}
.hero__copy .eyebrow {
  padding: .35rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  backdrop-filter: blur(8px);
  color: var(--ink-soft);
  font-weight: 600;
}
.hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.9rem);
  line-height: 1.38;
  margin-block-end: 1.4rem;
}
.lead {
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  color: var(--ink-soft);
  max-inline-size: 34em;
  margin-block-end: 2rem;
}
.hero__btns { display: flex; flex-wrap: wrap; gap: .8rem; margin-block-end: 2.4rem; }
.hero__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.hero__facts li {
  display: grid;
  padding: .7rem 1.1rem;
  min-inline-size: 132px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(10px);
  line-height: 1.5;
}
.hero__facts b {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--amber);
}
.hero__facts span { font-size: .82rem; color: var(--muted); }

/* ---------- Bus shelter ---------- */
.shelter {
  --metal: linear-gradient(90deg, #5D6880, #C9D2E3 45%, #8B96AD 60%, #4B556C);
  --metal-v: linear-gradient(180deg, #D7DEEB, #8E99B0 50%, #59647C);
  position: relative;
  isolation: isolate;
  inline-size: min(100%, 520px);
  margin-inline: auto;
  padding-block-start: 10px;
}

/* canopy */
.shelter__roof {
  position: relative;
  z-index: 3;
  block-size: 34px;
  margin-inline: -7%;
  background: linear-gradient(180deg, #2B3756 0%, #18223D 60%, #0E1630 100%);
  clip-path: polygon(0 38%, 100% 0, 100% 72%, 0 100%);
  transform: translateZ(0);
}
.shelter__roof::after {             /* cyan edge strip */
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 5px;
  background: var(--cyan);
  transform-origin: left;
  transform: skewY(-2.6deg) translateY(-4px);
  box-shadow: 0 0 14px var(--cyan);
  opacity: .9;
}
/* the canopy is clipped, so the glow under it lives on the body */
.shelter__body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: start;
  gap: 14px;
  padding: 16px 16px 0;
  margin-block-start: -6px;
}
/* posts */
.shelter__body::before,
.shelter__body::after {
  content: "";
  position: absolute;
  inset-block: -4px 0;
  inline-size: 9px;
  border-radius: 3px;
  background: var(--metal);
  z-index: 2;
}
.shelter__body::before { inset-inline-start: -2px; }
.shelter__body::after { inset-inline-end: -2px; }

.shelter__glass {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid rgba(200, 225, 255, .22);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .16) 0 12%, transparent 12% 30%, rgba(255, 255, 255, .08) 30% 36%, transparent 36%),
    linear-gradient(180deg, rgba(150, 200, 255, .10), rgba(150, 200, 255, .04));
  backdrop-filter: blur(2px);
  box-shadow: inset 0 0 0 4px rgba(10, 18, 40, .25);
}

.shelter__box {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  padding: 11px;
  border-radius: 8px;
  background: linear-gradient(145deg, #E9EEF7, #9AA5BC 40%, #CDD5E4 60%, #6E7891);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .35),
    0 20px 40px -18px rgba(0, 0, 0, .7);
  transition: box-shadow .8s var(--ease);
}
.shelter__box::before {            /* inner shadow line of the bezel */
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(20, 28, 48, .55);
  pointer-events: none;
  z-index: 2;
}
.night .shelter__box {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .35),
    0 0 26px 2px rgba(255, 200, 110, .55),
    0 0 80px 10px rgba(255, 170, 60, .35),
    0 0 160px 30px rgba(255, 150, 50, .18);
}

.shelter__poster {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: #1a1f2e;
}
.shelter__poster img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: brightness(.62) saturate(.7) contrast(.95);
  transition: filter .8s var(--ease), opacity .25s;
}
.night .shelter__poster img { filter: brightness(1.08) saturate(1.12) contrast(1.02); }
/* diffuser: backlight sheen + day glare */
.shelter__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .28) 0 18%, transparent 18% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .25));
  transition: background .8s, opacity .8s;
}
.night .shelter__poster::after {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 246, 220, .28), transparent 60%),
    linear-gradient(125deg, rgba(255, 255, 255, .08) 0 18%, transparent 18% 100%);
  mix-blend-mode: screen;
}
.poster__copy {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  display: grid;
  gap: .1rem;
  padding: 2.4rem 1rem 1rem;
  background: linear-gradient(0deg, rgba(5, 8, 20, .9), rgba(5, 8, 20, .55) 55%, transparent);
  color: #fff;
  line-height: 1.5;
  transition: opacity .25s;
}
.poster__copy small {
  justify-self: start;
  padding: .05rem .6rem;
  border-radius: 99px;
  background: #FFB547;
  color: #1A1206;
  font-size: .72rem;
  font-weight: 800;
}
.poster__copy strong {
  font-family: "El Messiri", "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.4;
}
.poster__copy span { font-size: .78rem; color: rgba(255, 255, 255, .78); }
.shelter__poster.is-flicker img,
.shelter__poster.is-flicker .poster__copy { animation: tube .62s steps(1, end); }
@keyframes tube {
  0% { opacity: 1; }
  10% { opacity: .15; }
  22% { opacity: .9; }
  30% { opacity: .05; }
  46% { opacity: .05; }
  56% { opacity: .75; }
  64% { opacity: .3; }
  76% { opacity: 1; }
  86% { opacity: .7; }
  100% { opacity: 1; }
}

.shelter__bench {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  position: relative;
  z-index: 2;
  margin-block-end: 54px;
  margin-inline: 8% 4%;
  block-size: 12px;
  border-radius: 3px;
  background: linear-gradient(180deg, #C5CEDF, #6F7A92);
  box-shadow: 0 -8px 0 -4px #A8B2C6, 0 6px 10px -4px rgba(0, 0, 0, .6);
}
.shelter__bench::before,
.shelter__bench::after {
  content: "";
  position: absolute;
  inset-block-start: 10px;
  inline-size: 5px;
  block-size: 46px;
  background: var(--metal-v);
  border-radius: 2px;
}
.shelter__bench::before { inset-inline-start: 12%; }
.shelter__bench::after { inset-inline-end: 12%; }

.shelter__sign {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  position: relative;
  z-index: 2;
  margin-block-start: 22px;
  padding: .3rem .8rem .3rem .7rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 8px;
  background: #0B1630;
  color: #EAF6FF;
  border: 1px solid rgba(92, 225, 230, .55);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.6;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6);
}
.shelter__sign::before {            /* bus roundel */
  content: "";
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  border: 3px solid #5CE1E6;
  box-shadow: 0 0 8px rgba(92, 225, 230, .6);
}

.shelter__floor {
  position: relative;
  z-index: 0;
  block-size: 64px;
  margin-inline: -12%;
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(150, 165, 200, .35), rgba(150, 165, 200, 0));
  transition: background .8s;
}
.night .shelter__floor {
  background:
    radial-gradient(34% 130% at 34% 0%, rgba(255, 196, 100, .6), rgba(255, 150, 50, .2) 50%, transparent 78%),
    linear-gradient(180deg, rgba(120, 140, 190, .22), transparent);
}
.shelter__floor::before {           /* kerb line */
  content: "";
  position: absolute;
  inset-inline: 8%;
  inset-block-start: 0;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, rgba(200, 215, 240, .5), transparent);
}

.shelter__halo {
  position: absolute;
  z-index: -1;
  inset-block: -2% 14%;
  inset-inline-end: -16%;
  inline-size: 86%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 190, 90, .55), rgba(255, 150, 60, .2) 55%, transparent);
  filter: blur(26px);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  pointer-events: none;
}
.night .shelter__halo { opacity: 1; transform: none; }

.shelter figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem .8rem;
  margin-block-start: .4rem;
  font-size: .86rem;
  color: var(--muted);
}
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  min-block-size: 38px;
  padding: .3rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  backdrop-filter: blur(8px);
  font-size: .86rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: all .3s var(--ease);
}
.chip:hover { border-color: var(--amber); color: var(--ink); }
.chip.is-on {
  border-color: var(--amber);
  background: rgba(255, 181, 71, .16);
  color: var(--ink);
}
.night .chip.is-on { box-shadow: 0 0 18px -4px rgba(255, 181, 71, .7); }

/* ---------- Marquee ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: rgba(7, 13, 31, .55);
  backdrop-filter: blur(10px);
  padding-block: 1rem;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body:not(.night) .marquee { background: rgba(255, 255, 255, .55); }
.marquee__track {
  display: flex;
  align-items: center;
  inline-size: max-content;
  animation: marquee 38s linear infinite;
}
.marquee__track span {
  font-family: "El Messiri", "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  white-space: nowrap;
  color: var(--ink);
  padding-inline: 1.6rem;
}
.marquee__track i {
  flex: none;
  inline-size: 9px;
  block-size: 9px;
  transform: rotate(45deg);
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber);
}
.marquee:hover .marquee__track { animation-play-state: paused; }
/* RTL: the track overflows to the left; moving it right by half reveals the duplicate seamlessly */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}
[dir="ltr"] .marquee__track { animation-name: marquee-ltr; }
@keyframes marquee-ltr {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
}
.section--alt {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(92, 225, 230, .07), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgba(255, 181, 71, .06), transparent 70%),
    var(--bg-2);
  transition: background-color .7s;
}
.sec-head {
  max-inline-size: 860px;
  margin-block-end: clamp(2.2rem, 5vw, 3.5rem);
}
.sec-head h2,
.why h2,
.contact h2 {
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  margin-block-end: .9rem;
}
.sec-head > p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; }

/* ---------- Service cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(14px);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .45s var(--ease), border-color .45s, box-shadow .45s, opacity .8s var(--ease);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(70% 60% at 100% 0%, rgba(255, 181, 71, .12), transparent 60%);
  opacity: 0;
  transition: opacity .45s;
}
.card:hover { transform: translateY(-6px); border-color: rgba(255, 181, 71, .45); }
.card:hover::after { opacity: 1; }
.night .card:hover { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 50px -20px rgba(255, 181, 71, .45); }
.card__img { position: relative; overflow: hidden; min-block-size: 100%; }
.card__img img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.card:hover .card__img img { transform: scale(1.06); }
.card__body { padding: 1.6rem 1.5rem 1.7rem; }
.tag {
  display: inline-block;
  font-family: "El Messiri", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--amber);
  margin-block-end: .4rem;
}
.night .tag { text-shadow: 0 0 14px rgba(255, 181, 71, .6); }
.card h3 { margin-block-end: .55rem; font-size: 1.12rem; }
.card p { color: var(--muted); font-size: .92rem; line-height: 1.85; margin-block-end: 1rem; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ticks li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .58em;
  inline-size: 11px;
  block-size: 6px;
  border-left: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg);
}

/* ---------- Tabs ---------- */
.tabs {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.tabs__list {
  display: flex;
  gap: .4rem;
  padding: .6rem;
  border-block-end: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__list [role="tab"] {
  flex: 1 0 auto;
  min-block-size: 46px;
  padding: .55rem 1.2rem;
  border: 0;
  border-radius: 14px;
  background: transparent;
  font-weight: 700;
  font-size: .95rem;
  color: var(--muted);
  white-space: nowrap;
  transition: background .3s, color .3s, box-shadow .3s;
}
.tabs__list [role="tab"]:hover { color: var(--ink); background: var(--surface-2); }
.tabs__list [role="tab"][aria-selected="true"] {
  background: var(--btn-bg);
  color: var(--btn-ink);
}
.night .tabs__list [role="tab"][aria-selected="true"] { box-shadow: 0 0 26px -6px rgba(255, 181, 71, .7); }
.tabs__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.8rem);
  animation: panelIn .5s var(--ease);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } }
.spec h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); margin-block-end: .7rem; }
.spec p { color: var(--ink-soft); margin-block-end: 1.4rem; }
.spec dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin: 0;
}
.spec dl div {
  padding: .75rem .9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  line-height: 1.6;
}
.spec dt { font-size: .78rem; color: var(--muted); }
.spec dd { margin: 0; font-weight: 800; font-size: .92rem; }

.meter {
  display: grid;
  gap: 1.3rem;
  padding: 1.6rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(92, 225, 230, .06), transparent 60%), var(--surface);
}
.meter span {
  position: relative;
  display: block;
  padding-block-end: 16px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.meter span::before,
.meter span::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  block-size: 8px;
  border-radius: 99px;
}
.meter span::before { inline-size: 100%; background: var(--line); }
.meter span::after {
  inline-size: calc(var(--v, .5) * 100%);
  background: linear-gradient(270deg, var(--amber-2), var(--amber) 60%, #FF9F2E);
  animation: fill 1.1s var(--ease) both;
}
.night .meter span::after { box-shadow: 0 0 14px rgba(255, 181, 71, .6); }
@keyframes fill { from { inline-size: 0; } }

/* ---------- Why ---------- */
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.why__img {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow);
}
.why__img::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  background: linear-gradient(0deg, rgba(7, 13, 31, .45), transparent 45%);
}
.why__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.night .why__img { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(92, 225, 230, .35); }
.why h2 { margin-block-end: 2rem; }
.benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.benefits > div {
  position: relative;
  padding: 1.3rem 1.3rem 1.4rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color .3s, transform .3s var(--ease);
}
.benefits > div:hover { border-color: rgba(92, 225, 230, .45); transform: translateY(-3px); }
.benefits > div::before {
  content: "";
  display: block;
  inline-size: 30px;
  block-size: 4px;
  border-radius: 4px;
  margin-block-end: .9rem;
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber);
}
.benefits > div:nth-child(even)::before { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.benefits h3 { font-size: 1.02rem; margin-block-end: .35rem; }
.benefits p { color: var(--muted); font-size: .9rem; line-height: 1.8; }

/* ---------- Steps ---------- */
.steps {
  --dot: 58px;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.2rem;
}
.steps::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--dot) / 2);
  inset-inline: 10%;
  block-size: 2px;
  background: linear-gradient(270deg, var(--amber), var(--cyan));
  opacity: .55;
}
.steps li { position: relative; text-align: center; }
.steps li > span {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--dot);
  block-size: var(--dot);
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 181, 71, .55);
  background: var(--bg-2);
  font-family: "El Messiri", sans-serif;
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--amber);
  transition: box-shadow .4s, transform .4s var(--ease);
}
.night .steps li > span { box-shadow: 0 0 0 6px rgba(255, 181, 71, .07), 0 0 28px -4px rgba(255, 181, 71, .6); }
.steps li:hover > span { transform: scale(1.08); }
.steps h3 { font-size: 1.02rem; margin-block-end: .4rem; }
.steps p { font-size: .88rem; color: var(--muted); line-height: 1.8; max-inline-size: 18em; margin-inline: auto; }

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 17vw, 220px);
  grid-auto-flow: dense;
  gap: clamp(.6rem, 1.4vw, 1rem);
}
.g {
  position: relative;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-2);
  cursor: zoom-in;
  transition: transform .45s var(--ease), box-shadow .45s, border-color .45s, opacity .8s var(--ease);
}
.g--tall { grid-row: span 2; }
.g--wide { grid-column: span 2; }
.g:last-child { grid-column: span 3; }
.g img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease), filter .6s;
}
.g > span {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 2.2rem 1rem .85rem;
  background: linear-gradient(0deg, rgba(5, 8, 20, .88), transparent);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  text-align: start;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.g:hover,
.g:focus-visible { border-color: rgba(255, 181, 71, .5); }
.night .g:hover { box-shadow: 0 0 40px -12px rgba(255, 181, 71, .5); }
.g:hover img,
.g:focus-visible img { transform: scale(1.06); }
.g:hover > span,
.g:focus-visible > span { opacity: 1; transform: none; }
@media (hover: none) {
  .g > span { opacity: 1; transform: none; }
}

/* ---------- Stats ---------- */
.stats {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  border-block: 1px solid var(--line);
  background:
    radial-gradient(40% 120% at 80% 50%, rgba(255, 181, 71, .14), transparent 70%),
    radial-gradient(40% 120% at 15% 50%, rgba(92, 225, 230, .10), transparent 70%),
    var(--bg-2);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  text-align: center;
}
.stats__grid > div { display: grid; gap: .2rem; padding: .5rem; }
.stats__grid > div + div { border-inline-start: 1px solid var(--line); }
.stats b {
  font-family: "El Messiri", "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.3;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.night .stats b { color: #FFD27F; text-shadow: 0 0 24px rgba(255, 181, 71, .55); }
.stats span { color: var(--muted); font-weight: 600; font-size: .95rem; }
.stats__note { margin-block-start: 1.6rem; text-align: center; font-size: .78rem; color: var(--muted); opacity: .75; }

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.faq .sec-head { position: sticky; inset-block-start: 110px; }
.faq__list { display: grid; gap: .8rem; }
.faq details {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color .3s, background .3s, opacity .8s var(--ease), transform .8s var(--ease);
}
.faq details[open] { border-color: rgba(255, 181, 71, .4); background: var(--surface-2); }
.faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 1.4rem;
  padding-inline-end: 3.6rem;
  font-weight: 800;
  font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 1.4rem;
  inset-block-start: 50%;
  inline-size: 14px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--amber);
  transition: transform .35s var(--ease);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 1.4rem 1.3rem; color: var(--muted); line-height: 1.95; }

/* ---------- Contact ---------- */
.contact {
  background:
    radial-gradient(42% 42% at 80% 50%, rgba(255, 181, 71, .10), transparent 100%),
    radial-gradient(36% 40% at 15% 60%, rgba(92, 225, 230, .07), transparent 100%);
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.contact__copy > p:not(.eyebrow) { color: var(--ink-soft); margin-block-end: 2rem; font-size: 1.05rem; }
.contact__info { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.contact__info li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-weight: 600;
}
.contact__info span {
  flex: none;
  min-inline-size: 4.2em;
  font-size: .8rem;
  font-weight: 700;
  color: var(--cyan);
}
.contact__info a { text-decoration: none; }
.contact__info a:hover { color: var(--amber); }

.form {
  display: grid;
  gap: 1.05rem;
  padding: clamp(1.4rem, 3.5vw, 2.3rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}
.night .form { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 181, 71, .08), 0 0 90px -40px rgba(255, 181, 71, .35); }
.form label { display: grid; gap: .4rem; font-size: .88rem; font-weight: 700; color: var(--ink-soft); }
.form input,
.form select,
.form textarea {
  inline-size: 100%;
  min-block-size: 50px;
  padding: .7rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--field);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  transition: border-color .25s, box-shadow .25s;
}
.form textarea { resize: vertical; min-block-size: 96px; line-height: 1.8; }
.form select {
  appearance: none;
  padding-inline-end: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239FB3D9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: left 1rem center;
  background-size: 12px 8px;
  background-repeat: no-repeat;
}
[dir="rtl"] .form select { padding-inline-end: 1rem; padding-inline-start: 2.6rem; }
.night .form select option { background: #0B1630; color: #EEF2FF; }
.form ::placeholder { color: var(--muted); opacity: .7; }
.form [dir="ltr"]::placeholder { text-align: right; }
.form [dir="ltr"] { text-align: right; }
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(92, 225, 230, .18);
}
.form .is-invalid,
.form .is-invalid:focus {
  border-color: #FF6B6B;
  box-shadow: 0 0 0 4px rgba(255, 107, 107, .18);
}
.form button[type="submit"] { justify-self: start; min-inline-size: 200px; margin-block-start: .3rem; }
.form__ok {
  padding: .9rem 1.1rem;
  border-radius: var(--r-sm);
  border: 1px solid rgba(92, 225, 230, .5);
  background: rgba(92, 225, 230, .1);
  color: var(--ink);
  font-weight: 600;
  font-size: .92rem;
  animation: panelIn .5s var(--ease);
}

/* ---------- Footer ---------- */
.foot {
  padding-block: 2.6rem 2.2rem;
  border-block-start: 1px solid var(--line);
  background: var(--bg-2);
  font-size: .88rem;
  color: var(--muted);
}
.foot__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .6rem 2rem;
}
.foot__grid img { grid-row: span 2; block-size: 54px; inline-size: auto; }
.foot__credits a { color: var(--cyan); text-underline-offset: 3px; }

/* ---------- Viewer ---------- */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  padding: 4.5rem 1.2rem 2rem;
  background: rgba(3, 6, 15, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.viewer.is-open { opacity: 1; }
.viewer img {
  max-inline-size: min(1200px, 100%);
  max-block-size: 78vh;
  inline-size: auto;
  border-radius: var(--r-md);
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(255, 181, 71, .4);
  transform: scale(.96);
  transition: transform .4s var(--ease);
}
.viewer.is-open img { transform: none; }
.viewer p { color: #E6ECFA; font-weight: 600; text-align: center; }
.viewer__close {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  transition: background .25s, transform .25s;
}
.viewer__close:hover { background: rgba(255, 181, 71, .25); transform: rotate(90deg); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .card { grid-template-columns: 1fr; }
  .shelter__roof { margin-inline: -3%; }
  .shelter__floor { margin-inline: -6%; }
  .card__img { aspect-ratio: 16 / 9; min-block-size: 0; }
}

@media (max-width: 900px) {
  .nav__burger { display: inline-block; }
  .nav__links {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline: 1rem;
    flex-direction: column;
    gap: .2rem;
    padding: .7rem;
    border-radius: var(--r-md);
    border: 1px solid var(--line-strong);
    background: var(--nav-bg);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
  }
  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
  }
  .nav__links a { padding: .8rem 1rem; font-size: 1.02rem; }
  .nav__actions { margin-inline-start: auto; }

  .hero { padding-block-start: calc(77px + 2rem); }
  .hero__grid { grid-template-columns: 1fr; text-align: start; }
  .shelter { inline-size: min(100%, 430px); }

  .tabs__panel { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; }
  .why__img { aspect-ratio: 16 / 10; }
  .faq { grid-template-columns: 1fr; }
  .faq .sec-head { position: static; }
  .contact__grid { grid-template-columns: 1fr; }

  .steps { grid-template-columns: 1fr; gap: 0; max-inline-size: 560px; }
  .steps::before {
    inset-block: calc(var(--dot) / 2) calc(var(--dot) / 2 + 1.5rem);
    inset-inline: calc(var(--dot) / 2 - 1px) auto;
    inline-size: 2px;
    block-size: auto;
    background: linear-gradient(180deg, var(--amber), var(--cyan));
  }
  .steps li {
    display: grid;
    grid-template-columns: var(--dot) 1fr;
    column-gap: 1.1rem;
    text-align: start;
    padding-block-end: 1.6rem;
  }
  .steps li > span { grid-row: span 2; margin: 0; }
  .steps h3 { align-self: end; margin-block: .55rem .2rem; }
  .steps p { margin-inline: 0; max-inline-size: none; }

  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
  .stats__grid > div:nth-child(3) { border-inline-start: 0; }

  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 34vw, 230px); }
  .g:last-child { grid-column: span 1; }
}

@media (max-width: 640px) {
  .nav__cta { display: none; }
  .cards { grid-template-columns: 1fr; }
  .spec dl { grid-template-columns: 1fr; }
  .spec dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .benefits { grid-template-columns: 1fr; }
  .hero__facts li { flex: 1 1 0; min-inline-size: 0; padding: .6rem .7rem; }
  .hero__facts b { font-size: 1.02rem; }
  .hero__facts span { font-size: .74rem; }
  .foot__grid { grid-template-columns: 1fr; text-align: start; }
  .foot__grid img { grid-row: auto; }
  .form button[type="submit"] { justify-self: stretch; }
}

@media (max-width: 420px) {
  .wrap { width: min(var(--wrap), 100% - 2rem); }
  .nav__brand img { block-size: 40px; }
  .mode { padding-inline: .7rem; gap: .45rem; }
  .mode__label { font-size: .8rem; }
  .hero__btns .btn { flex: 1 1 auto; }
  .shelter__body { padding-inline: 12px; gap: 10px; }
  .shelter__sign { font-size: .68rem; padding-inline: .5rem; }
  .poster__copy { padding: 2rem .75rem .75rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .marquee__track { animation: none !important; flex-wrap: wrap; justify-content: center; inline-size: auto; row-gap: .6rem; }
  .marquee__track > :nth-child(n + 13) { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Mobile tap targets: footer and contact links get ~44px hit area */
@media (max-width: 640px) {
  footer a, a[href^="tel:"], a[href^="mailto:"] { display: inline-block; padding-block: .6rem; }
}