/* Alex Brush is loaded via <link> in each page head (parallel, non-chained fetch) */
/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Sonder';
  src: url('assets/SonderRegular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Colus';
  src: url('assets/Colus-Regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Ovelion';
  src: url('assets/Ovelion-Regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Impact Web';
  src: url('assets/impact.woff2') format('woff2');
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --cream: #06090f;
  /* dark navy canvas */
  --cream-deep: #0a0f1a;
  --gold-1: #ffe659;
  /* highlight */
  --gold-2: #d6b34a;
  /* mid metallic */
  --gold-3: #ad803a;
  /* deep */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-bump: cubic-bezier(.34, 1.56, .64, 1);
  /* overshoot — pops past then settles */
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
  scroll-padding-top: 88px;
  /* iOS Safari paints the status-bar / home-indicator safe areas and overscroll
     with the root background — match the page so they never show as blank bars. */
  background: var(--cream);
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--cream);
  color: #2a2520;
  font-family: 'Sonder', Georgia, 'Times New Roman', serif;
  /* NO overflow on body/html: body overflow propagates to the viewport, and a clipped
     viewport stops iOS 26 Safari from compositing page pixels behind its translucent
     status bar / toolbar (the page hard-cuts at the safe areas with solid bars).
     Horizontal clipping lives on <main>/.footer instead — `clip` there prevents
     x-scroll without creating a scroll container, so .hero__pin's sticky still works. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main,
.footer,
.outro {
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

/* ---------- Hero scroll track ---------- */
.hero {
  position: relative;
  height: 250vh;
  /* scroll runway: 1.5 viewports of choreography.
     svh (not dvh): the small viewport is stable while the iOS/Android URL bar
     collapses and expands — dvh made in-flow layout resize on every scroll. */
  height: 250svh;
  background: var(--cream);
}

.hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--cream-deep), var(--cream) 60%);
}

/* The "circle window": a clip-path that grows from a circle in the lower half to the
   full screen. The clip lives on this wrapper so the image inside can translate
   independently (parallax) without dragging the window with it. */
.hero__window {
  position: absolute;
  inset: 0;
  clip-path: circle(32px at 50% 68vh);
  will-change: clip-path, transform;
  transform: translateY(12px);
  z-index: 2;
  background: #141822;
  /* premium dark gray/slate */
}

/* Scaled up so there is vertical overflow to pan through: the image slides up inside
   the fixed window as it expands, reading as parallax depth. */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  /* keep sky at the top for the motto */
  transform: scale(1);
  /* zoomed out: no overflow, motto sits in the sky */
  opacity: 0;
  will-change: transform, opacity;
}

/* Sky-toned vignette behind the motto — a darker shade of the sky,
   layered for a smooth falloff that guarantees text contrast. */
.hero__scrim {
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.18;           /* always-on base layer — no sudden pop */
  visibility: visible;
  transition: opacity 0.3s ease;
  background:
    linear-gradient(to bottom, rgba(13, 40, 66, .60) 0%, rgba(13, 40, 66, .30) 36%, rgba(13, 40, 66, 0) 100%),
    linear-gradient(to bottom, rgba(22, 60, 92, .34) 0%, rgba(22, 60, 92, 0) 62%),
    radial-gradient(125% 95% at 50% 0%, rgba(8, 28, 48, .42) 0%, rgba(8, 28, 48, 0) 58%);
}

/* ---------- Motto (upper quarter, golden) ---------- */
.motto {
  position: absolute;
  left: 50%;
  top: 14vh;
  top: 14svh;
  margin-top: -40px;
  transform: translateX(-50%);
  width: min(92vw, 1100px);
  text-align: center;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

.motto__sig {
  font-family: 'Alex Brush', cursive;
  font-size: clamp(22px, 2.25vw, 84px);
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  margin: 2.8em 0 .3em;
  letter-spacing: .01em;
}

.motto__head {
  font-family: 'Sonder', Georgia, serif;
  font-size: clamp(48px, 5.05vw, 187px);
  line-height: 1.04;
  margin: calc(0.5em - 35px) 0 0;
  font-weight: 400;
  letter-spacing: .005em;
  text-transform: capitalize;
  /* Two clipped layers: a narrow highlight band (top) that sweeps across, and the
     static vertical gold gradient (bottom) that shows through the band's transparent
     edges. Both are clipped to the text glyphs, so the gold fill stays put while a
     warm-white shine patrols horizontally. */
  --shiny-width: 1.5em;
  background-image:
    linear-gradient(110deg, transparent 35%, rgba(255, 248, 220, 0.95) 50%, transparent 65%),
    linear-gradient(180deg, var(--gold-1, #ffe659) 0%, var(--gold-2, #d6b34a) 52%, var(--gold-3, #ad803a) 100%);
  background-size: var(--shiny-width) 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: calc(-100% - var(--shiny-width)) 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.motto__head span {
  display: block;
}

/* Shiny-text sweep — adapted from Magic UI AnimatedShinyText. The band glides
   off-screen left → off-screen right (0–30%), rests (30–60%), glides back
   (60–90%), rests (90–100%), then repeats. The static gold layer's position is
   pinned to 0 0 in every keyframe so it never moves. The inline hero script
   retriggers this animation (animation:none → reflow → '') every time the motto
   appears from the intro, guaranteeing one fresh shine on arrival regardless of
   where the loop cycle happens to be. */
@media (prefers-reduced-motion: no-preference) {
  .motto__head {
    animation: motto-shine 8s infinite;
  }
  @keyframes motto-shine {
    0%, 90%, 100% {
      background-position: calc(-100% - var(--shiny-width)) 0, 0 0;
    }
    30%, 60% {
      background-position: calc(100% + var(--shiny-width)) 0, 0 0;
    }
  }
}

/* ---------- Explainer sentence (crossfades in over the motto on further scroll) ---------- */
.motto__explain-text {
  font-family: 'Sonder', Georgia, serif;
  font-weight: 400;
  font-size: clamp(17px, 2.8vw, 35px);
  line-height: 1.35;
  color: #fff;
  margin: 0 auto;
  padding-top: 4em;
  max-width: min(90vw, 920px);
}
.motto__explain-line {
  display: block;
  will-change: opacity, filter, transform;
}

/* Wide aspect ratio (landscape image): nudge the whole motto lower */
@media (min-width:769px) {
  .motto {
    top: 19vh;
    top: 19svh;
  }
}

/* Small screens: .motto__head's margin-top is a fixed -35px offset tuned for
   desktop's large em size. At mobile's clamped-min font size that goes negative
   and overlaps .motto__sig above it, so pin it to a small positive gap instead. */
@media (max-width:768px) {
  .motto__sig {
    font-size: clamp(22px, 5.5vw, 40px);
  }
  .motto__head {
    font-size: clamp(48px, 12vw, 80px);
    margin-top: 10px;
  }
  .motto__explain-text {
    font-size: clamp(16px, 4.2vw, 22px);
    padding-top: 2.5em;
    line-height: 1.55;
  }
}

/* ---------- Site nav: brand migrates center → top-left, full-width bar forms after ---------- */
/* Brand base size = its INTRO size, so it is only ever scaled DOWN for the navbar.
   Never upscaling a rasterised layer keeps the logo crisp at every step. */
.brand {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  pointer-events: none;
}

.brand__link {
  pointer-events: auto;
  cursor: pointer;
}

.sitenav__mark {
  position: absolute;
  top: 0;
  left: 0;
  height: 190px;
  width: auto;
  display: block;
  overflow: visible;
  transform-origin: center center;
  will-change: transform;
}

.sitenav__name {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-family: 'Felix Titling', 'Sonder', Georgia, serif;
  font-weight: bold;
  font-size: 50px;
  line-height: 1.06;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--gold-1, #F0D89C) 0%, var(--gold-2, #D8B062) 52%, var(--gold-3, #A97C30) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transform-origin: center center;
  opacity: 0;
  animation: nameFade 1s var(--ease-out) 1.15s forwards;
  will-change: transform, opacity;
}

.sitenav__name span {
  display: block;
}

@keyframes nameFade {
  to {
    opacity: 1;
  }
}

/* Logo reveal: outline wipes in top→bottom, then the gold floods from centre → sides.
   Two stacked copies, each clipped by an animated rect. The default (no animation /
   reduced motion / subpages) state is the finished solid mark. */
.brand:not(.is-static) .sitenav__mark .bm-stroke path {
  fill: none;
  stroke: url(#goldGrad);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.brand:not(.is-static) .sitenav__mark .bm-solid path {
  fill: url(#goldGrad);
}

.brand:not(.is-static) .sitenav__mark .bm-draw {
  height: 1506.53px;
}

.brand:not(.is-static) .sitenav__mark .bm-fill {
  x: 0px;
  width: 1505.7px;
}

/* Default state for static subpages which don't use bm-stroke / bm-solid classes */
.brand.is-static .sitenav__mark path {
  fill: url(#goldGrad);
}

@media (prefers-reduced-motion:no-preference) {
  .brand:not(.is-static) .sitenav__mark .bm-draw {
    height: 0px;
    animation: bmDrawDown 1.25s cubic-bezier(.4, 0, .2, 1) .2s forwards;
  }

  .brand:not(.is-static) .sitenav__mark .bm-fill {
    x: 752.85px;
    width: 0px;
    animation: bmFillOut .85s cubic-bezier(.45, 0, .25, 1) 1.45s forwards;
  }
}

@keyframes bmDrawDown {
  from {
    height: 0px;
  }

  to {
    height: 1506.53px;
  }
}

@keyframes bmFillOut {
  from {
    x: 752.85px;
    width: 0px;
  }

  to {
    x: 0px;
    width: 1505.7px;
  }
}

/* Floating PILL bar. It simply fades in (no rectangle→pill morph) once the hero
   fills the screen. Its vertical centre (32px) matches the brand's docked position. */
.navbar {
  position: fixed;
  /* keep the pill clear of the notch / status bar & rounded corners */
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: calc(18px + env(safe-area-inset-left, 0px));
  right: calc(18px + env(safe-area-inset-right, 0px));
  height: 72px;
  border-radius: 36px;
  z-index: 55;
  background: rgba(6, 9, 15, .6);
  border: 1px solid rgba(169, 124, 48, .24);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 36px 0 var(--brand-offset, 260px);
  box-sizing: border-box;
}

.navbar.is-on {
  opacity: 1;
  transform: none;
  backdrop-filter: blur(2px) saturate(200%);
  -webkit-backdrop-filter: blur(2px) saturate(200%);
  pointer-events: auto;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  position: relative;
  /* clear both the theme toggle and the Menu pill on the right */
  margin-right: clamp(165px, 14vw, 200px);
}

.navbar__link {
  font-family: 'Ovelion', sans-serif;
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.25s ease;
  position: relative;
  z-index: 1;
  padding: 12px 4px;
}

.navbar__link:hover {
  color: var(--gold-1);
}

.navbar__link.is-active {
  color: var(--gold-2);
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-3));
  border-radius: 1px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}

.navbar__link:hover::after {
  transform: translateX(-50%) scaleX(0.6);
}

.navbar__link.is-active::after {
  transform: translateX(-50%) scaleX(1);
}

.navbar__link.is-active:hover::after {
  transform: translateX(-50%) scaleX(1.2);
}

/* Sliding golden hover pill that follows the active nav link. Size/position
   are driven by JS; transform/opacity are interpolated for an eased, slightly
   delayed, elastic feel. */
.navbar__pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 44px;
  margin-top: -22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
  box-shadow: 0 4px 22px rgba(216, 176, 98, 0.35);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity, width;
}

/* ---------- Side menu toggle (always visible) ---------- */
.navbar__toggle {
  display: flex;
  position: fixed;
  top: calc(20px + env(safe-area-inset-top, 0px));
  right: calc(30px + env(safe-area-inset-right, 0px));
  height: 48px;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
  border: none;
  border-radius: 24px;
  cursor: pointer;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 75;
  color: #000;
  font-family: 'Ovelion', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}

.navbar__toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .67);
  outline-offset: 4px;
  border-radius: 4px;
}

/* "Menu"/"Close" cycling text */
.sm-toggle-textWrap {
  position: relative;
  display: inline-block;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  transform: translateY(1px);
}

.sm-toggle-textInner {
  position: relative;
  display: flex;
  flex-direction: column;
  line-height: 1;
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.65, .05, .36, 1);
}

.navbar__toggle.is-active .sm-toggle-textInner {
  transition: transform .85s cubic-bezier(.16, 1, .3, 1);
}

.sm-toggle-line {
  display: block;
  height: 1em;
  line-height: 1;
}

/* Plus icon — rotates 225° to become an X */
.sm-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(0deg);
  transition: transform .35s cubic-bezier(.65, .05, .36, 1);
  will-change: transform;
}

.navbar__toggle.is-active .sm-icon {
  transform: rotate(225deg);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

.sm-icon-svg {
  width: 14px;
  height: 14px;
  display: block;
  overflow: visible;
}


/* ---------- Staggered curtain menu (always enabled) ---------- */
.staggered-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 68;
  pointer-events: none;
  overflow: hidden;
  /* display:none while closed — iOS 26 Safari samples fixed elements touching the
     viewport edges to tint its Liquid-Glass bars; a permanently-mounted transparent
     full-screen overlay poisons that sample and forces solid opaque bars.
     JS flips display on before opening / off after the close transition. */
  display: none;
}

.staggered-menu.is-mounted {
  display: block;
}

/* No dedicated iOS bar "sampler" elements: Safari 26 tints its Liquid-Glass bars
   from the page pixels it composites behind them. Forcing a sampled tint with a
   fixed strip just paints the bars a flat colour again — the opposite of the
   see-through effect. The compositing itself only works when body/html have no
   overflow clipping (see the body rule above). */

/* Coloured curtain pre-layers — stagger in from the right before the panel */
.sm-prelayers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  pointer-events: none;
  z-index: 5;
}

.sm-prelayer {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.55, .085, .68, .53);
  /* close speed */
}

html.menu-open,
html.menu-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

.staggered-menu.is-open .sm-prelayer {
  transform: translateX(0);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  /* open speed */
}

.staggered-menu.is-open .sm-prelayer:nth-child(1) {
  transition-delay: 0s;
}

.staggered-menu.is-open .sm-prelayer:nth-child(2) {
  transition-delay: .07s;
}

.staggered-menu.is-open .sm-prelayer:nth-child(3) {
  transition-delay: .14s;
}

/* Main panel */
.sm-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  min-width: 220px;
  height: 100%;
  background: linear-gradient(180deg, #0a0f1a, #06090f);
  display: flex;
  flex-direction: column;
  padding: 5.5em 2.5em 2em;
  overflow-y: auto;
  z-index: 10;
  pointer-events: auto;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.55, .085, .68, .53);
  /* close */
}

.staggered-menu.is-open .sm-panel {
  transform: translateX(0);
  transition: transform .65s cubic-bezier(.16, 1, .3, 1);
  /* open */
  transition-delay: .22s;
}

.sm-panel-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Menu items */
.sm-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.sm-panel-itemWrap {
  position: relative;
  overflow: hidden;
  line-height: 1;
}

.sm-panel-item {
  position: relative;
  color: #fff;
  text-decoration: none;
  font-family: 'Sonder', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  display: inline-block;
  transition: color .25s ease;
}

.sm-panel-item:hover {
  color: var(--gold-1);
}

.sm-panel-itemLabel {
  display: inline-block;
  transform: translateY(140%) rotate(10deg);
  transform-origin: 50% 100%;
  transition: transform .32s cubic-bezier(.55, .085, .68, .53);
  will-change: transform;
}

.staggered-menu.is-open .sm-panel-itemLabel {
  transform: translateY(0) rotate(0);
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--sm-item-delay, 0s);
}

.sm-panel-itemWrap:nth-child(1) .sm-panel-itemLabel {
  --sm-item-delay: .35s;
}

.sm-panel-itemWrap:nth-child(2) .sm-panel-itemLabel {
  --sm-item-delay: .45s;
}

.sm-panel-itemWrap:nth-child(3) .sm-panel-itemLabel {
  --sm-item-delay: .55s;
}

.sm-panel-itemWrap:nth-child(4) .sm-panel-itemLabel {
  --sm-item-delay: .65s;
}

.sm-panel-itemWrap:nth-child(5) .sm-panel-itemLabel {
  --sm-item-delay: .75s;
}

/* Socials */
.sm-socials {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  border-top: 1px solid rgba(216, 176, 98, .15);
}

.sm-socials-title {
  margin: 0;
  font-size: .85rem;
  font-weight: 500;
  color: var(--gold-2);
  font-family: system-ui, -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: 0;
  transition: opacity .32s ease;
}

.staggered-menu.is-open .sm-socials-title {
  opacity: 1;
  transition: opacity .5s ease;
  transition-delay: .5s;
}

.sm-socials-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.sm-socials-list:hover .sm-socials-link {
  opacity: .35;
}

.sm-socials-list:hover .sm-socials-link:hover {
  opacity: 1;
}

.sm-socials-link {
  font-size: 1.1rem;
  font-weight: 500;
  color: #a0a6b2;
  text-decoration: none;
  position: relative;
  padding: 2px 0;
  display: inline-block;
  transform: translateY(25px);
  opacity: 0;
  transition: color .3s ease, opacity .32s ease, transform .32s ease;
}

.sm-socials-link:hover {
  color: var(--gold-1);
}

.staggered-menu.is-open .sm-socials-link {
  transform: translateY(0);
  opacity: 1;
  transition: color .3s ease, opacity .55s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--sm-social-delay, 0s);
}

.sm-socials-item:nth-child(1) .sm-socials-link {
  --sm-social-delay: .54s;
}

.sm-socials-item:nth-child(2) .sm-socials-link {
  --sm-social-delay: .62s;
}

.sm-socials-item:nth-child(3) .sm-socials-link {
  --sm-social-delay: .70s;
}

.sm-socials-item:nth-child(4) .sm-socials-link {
  --sm-social-delay: .78s;
}


@media (max-width:768px) {
  .sitenav__mark {
    height: 150px;
  }

  .sitenav__name {
    font-size: 38px;
    letter-spacing: .04em;
  }

  .navbar {
    top: calc(7px + env(safe-area-inset-top, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    height: 60px;
    border-radius: 30px;
    padding: 0 24px 0 0;
    justify-content: flex-end;
  }

  .navbar__links {
    display: none;
  }

  /* icon-only on phones: the "Menu" text is hidden so the brand has room */
  .navbar__toggle {
    top: calc(17px + env(safe-area-inset-top, 0px));
    right: calc(22px + env(safe-area-inset-right, 0px));
    height: 40px;
    width: 40px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .navbar__toggle .sm-toggle-textWrap { display: none; }

  .sm-prelayers {
    width: 50%;
  }

  .sm-panel {
    width: 50%;
    padding: 5.5em 1em 2em;
  }

  /* portrait: initial circle (JS uses matching center) */
  .hero__window {
    clip-path: circle(25px at 50% 64vh);
  }
}

@media (prefers-reduced-motion:reduce) {
  .navbar {
    opacity: 1;
    transform: none;
  }

  .sitenav__name {
    opacity: 1;
    animation: none;
  }

  .sm-prelayer,
  .sm-panel,
  .sm-panel-itemLabel,
  .sm-icon,
  .sm-toggle-textInner,
  .sm-socials-link,
  .sm-socials-title {
    transition: none !important;
  }
}

/* ---------- Circle portal decorative ring ---------- */
.hero__portal-ring {
  position: absolute;
  z-index: 3;
  border: 1.5px solid rgba(216, 176, 98, 0.85);
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
  transform: translateY(12px);
}

@keyframes portalPulse {

  0%,
  100% {
    box-shadow:
      0 0 12px rgba(216, 176, 98, 0.25),
      inset 0 0 8px rgba(216, 176, 98, 0.12);
    border-color: rgba(216, 176, 98, 0.65);
  }

  50% {
    box-shadow:
      0 0 20px rgba(216, 176, 98, 0.45),
      inset 0 0 12px rgba(216, 176, 98, 0.25);
    border-color: rgba(216, 176, 98, 0.9);
  }
}

/* ---------- Circle portal scroll indicator bobbing ---------- */
.hero.is-static .hero__window {
  animation: portalBobWindow 2.4s ease-in-out infinite;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5));
}

.hero.is-static .hero__portal-ring {
  animation:
    portalPulse 3.5s ease-in-out infinite,
    portalBobRing 2.4s ease-in-out infinite;
}

@keyframes portalBobWindow {

  0%,
  100% {
    transform: translateY(12px);
  }

  50% {
    transform: translateY(0);
  }
}

@keyframes portalBobRing {

  0%,
  100% {
    transform: translateY(12px) scale(1);
  }

  50% {
    transform: translateY(0) scale(1.02);
  }
}

/* ---------- Circle portal inner down arrow ---------- */
.hero__portal-arrow {
  position: absolute;
  width: 20px;
  height: 20px;
  color: var(--gold-2);
  z-index: 4;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
  transform: translateY(12px);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.hero.is-static .hero__portal-arrow {
  animation: portalBobArrow 2.4s ease-in-out infinite;
}

@keyframes portalBobArrow {

  0%,
  100% {
    transform: translateY(12px);
  }

  50% {
    transform: translateY(0);
  }
}

/* ---------- Rolling text marquee ---------- */
.rolling-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 56px;
  top: auto;
  width: 92%;
  max-width: 1000px;
  overflow: hidden;
  padding: 8px 0;
  border-top: 2.5px solid rgba(216, 176, 98, 0.55);
  border-bottom: 2.5px solid rgba(216, 176, 98, 0.55);
  pointer-events: none;
  z-index: 1;
  /* behind hero__window (z-index 2) */
  mask-image: linear-gradient(to right, transparent 0%, #fff 8%, #fff 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #fff 8%, #fff 92%, transparent 100%);
}

@media (max-width: 768px) {
  .rolling-text {
    bottom: 32px;
  }
}

.rolling-text__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee 25s linear infinite;
}

.rolling-text__content {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: clamp(10px, 1.8vw, 13px);
  letter-spacing: 0.18em;
  color: var(--gold-2);
  font-family: 'Ovelion', sans-serif;
  text-transform: uppercase;
}

.rolling-text__sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  color: var(--gold-1);
  margin: 0 12px;
}

.rolling-text__sep svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ---------- Residential plots: blueprint circular-arc carousel ---------- */
/* Reproduces React-Bits CircularGallery in pure DOM: cards ride a circle (bend),
   so the centre card sits highest and neighbours drop + tilt tangent to the arc.
   Manual scrolling only (touch/drag/wheel), always settling on a smooth JS
   scrollTo() to dead-centre (see settle() in the script below) rather than
   native CSS scroll-snap, which some browsers correct with an abrupt jump.
   A rAF loop maps each card's distance from screen centre onto a
   GPU-composited transform (translateY + rotateZ + scale). Cards are real
   HTML → crisp text, click-to-flip, active-card focus, zero framework. */
.plots {
  --bp-1: #0c4a8f;
  /* blueprint blue — light */
  --bp-2: #062f5c;
  /* blueprint blue — deep  */
  --bp-ink: #dbeafe;
  /* drawing / label ink    */
  --bp-ink-soft: rgba(219, 234, 254, .5);
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(56px, 9vh, 110px) 0;
  /* No section-local gradient: the whole page shares body's flat --cream canvas, so
     sections never re-brighten at their top / darken at their bottom (that banding at
     each boundary was the cross-section inconsistency). Depth comes from the aura only. */
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  /* never let the tilted cards cause page-wide x-scroll */
}

.plots__head {
  text-align: center;
  padding: 0 24px clamp(28px, 5vh, 54px);
}

.plots__eyebrow {
  font-family: 'Alex Brush', cursive;
  font-size: clamp(22px, 4.4vw, 44px);
  line-height: 1;
  margin: 0 0 .18em;
  color: #fff;
}

.plots__title {
  font-family: 'Sonder', Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 5.6vw, 64px);
  line-height: 1.05;
  margin: 0;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 52%, var(--gold-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.plots__desc {
  margin: 1.5em auto 0;
  max-width: 800px;
  color: #fff;
  font-family: 'Ovelion', sans-serif;
  font-size: clamp(15px, 1.8vw, 21px);
  line-height: 1.6;
}

/* Section aura — identical to Facilities/Map so all three read the same. Gold, top-lit. */
.plots__glow {
  position: absolute;
  left: 50%;
  top: 6%;
  width: min(900px, 120vw);
  aspect-ratio: 1.5/1;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 40%,
      rgba(216, 176, 98, .10) 0%, rgba(169, 124, 48, .05) 40%, transparent 68%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

/* Scroller: the only thing that actually scrolls. Manual only — no autoplay. */
.carousel {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* no native scrollbars — scrolling is driven only by JS drag / touch swipe */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  outline: none;
  /* Let the browser own vertical panning (page scroll) but hand horizontal
     panning to JS so touch drags use the same momentum physics as mouse drag. */
  touch-action: pan-y;
  /* Vertical room so the dropped + tilted arc cards are never clipped at the
     bottom (drop is capped in JS to stay within this padding). */
  padding: 74px 0 182px;
}

.carousel:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(240, 216, 156, .4);
  border-radius: 24px;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel.is-drag {
  cursor: grabbing;
}

.carousel__track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 5.5vw, 64px);
  width: max-content;
}

/* Spacers let the first & last card scroll all the way to the centre. Real elements,
   not ::before/::after — Safari/Firefox don't reliably count empty flex pseudo-elements
   in a `width: max-content` track, so a pseudo trailing spacer gave no scroll room and
   the last card could never reach centre. Width is set in JS (from clientWidth). */
.carousel__spacer {
  flex: 0 0 auto;
  width: max(12px, calc(50vw - 165px));   /* pre-JS fallback; JS overrides exactly */
  align-self: stretch;
}

.pcard {
  position: relative;
  flex: 0 0 auto;
  width: clamp(236px, 76vw, 320px);
  /* < viewport so neighbours peek on phones */
  height: clamp(366px, 70vh, 452px);
  perspective: 1300px;
  /* depth for the flip */
  cursor: pointer;
  opacity: 0;
  /* entrance: faded until section is in view */
  transition: opacity .6s var(--ease-out);
  will-change: transform, opacity;
  /* JS writes transform every scroll frame → GPU layer */
  -webkit-tap-highlight-color: transparent;
}

.plots.is-in .pcard {
  opacity: 1;
}

.plots.is-in .pcard:nth-child(1) {
  transition-delay: .05s;
}

.plots.is-in .pcard:nth-child(2) {
  transition-delay: .13s;
}

.plots.is-in .pcard:nth-child(3) {
  transition-delay: .21s;
}

.plots.is-in .pcard:nth-child(4) {
  transition-delay: .29s;
}

.pcard__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .72s var(--ease-bump);
}

.pcard.is-flipped .pcard__inner {
  transform: rotateY(180deg);
}

.pcard__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 30px;
  /* CircularGallery borderRadius 0.25 → generous */
  /* Clip the corner ribbon to the rounded card. NOT overflow:hidden — Safari/Firefox
     flatten backface-visibility on any element that also clips overflow, leaking both
     faces through each other. clip-path clips identically without that side effect. */
  clip-path: inset(0 round 30px);
  padding: 22px 22px 12px;
  color: var(--bp-ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(219, 234, 254, .07) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(219, 234, 254, .07) 23px 24px),
    linear-gradient(158deg, var(--bp-1), var(--bp-2));
  border: 1px solid rgba(219, 234, 254, .28);
  box-shadow:
    0 34px 66px -28px rgba(0, 0, 0, .85),
    inset 0 1px 0 rgba(219, 234, 254, .18);
  /* top-edge sheen */
  transition: box-shadow .5s var(--ease-out);
}

/* Blueprint title-block frame: thin inset border with clipped corners. */
.pcard__face::before {
  content: '';
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(219, 234, 254, .26);
  border-radius: 20px;
  pointer-events: none;
}

.pcard__back {
  transform: rotateY(180deg);
  background: linear-gradient(158deg, var(--bp-1), var(--bp-2));
}

/* Diagonal corner ribbon for front-face tags. The ribbon is nudged outside
   the top-right corner and rotated 45° around its centre, so the band crosses
   the corner cleanly. Text is centred via flexbox so it stays dead-centre
   regardless of display or card width. */
.pcard__front::after {
  position: absolute;
  top: 28px;
  right: -45px;
  width: 180px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bp-2);
  transform: rotate(45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  pointer-events: none;
  z-index: 2;
}

/* Commercial plots get a gold ribbon. */
.pcard--com .pcard__front::after {
  content: 'Commercial';
  background: linear-gradient(90deg, var(--gold-3), var(--gold-1));
}

/* Residential plots get a matching silver ribbon. */
.pcard:not(.pcard--com) .pcard__front::after {
  content: 'Residential';
  background: linear-gradient(90deg, #94a3b8, #e2e8f0);
}

/* Centred card earns a golden focus ring + lift — the one primary card. */
.pcard.is-active .pcard__front {
  box-shadow:
    0 44px 80px -26px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(240, 216, 156, .5),
    0 0 42px -6px rgba(216, 176, 98, .45),
    inset 0 1px 0 rgba(219, 234, 254, .22);
}

/* ---- Front face ---- */
.pcard__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.pcard__size {
  font-family: 'Colus', Georgia, serif;
  font-size: clamp(24px, 6.4vw, 32px);
  letter-spacing: .04em;
  line-height: 1;
  color: #fff;
}

.pcard__tag {
  font-family: system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bp-ink-soft);
  border: 1px solid rgba(219, 234, 254, .35);
  border-radius: 999px;
  padding: 4px 9px;
}

/* Commercial plots read apart with a gold tag. */
.pcard__tag--com {
  color: var(--gold-1);
  border-color: rgba(240, 216, 156, .5);
  background: rgba(240, 216, 156, .08);
}

.blueprint {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 14px 6px 10px;
  position: relative;
  z-index: 1;
}

.blueprint svg {
  width: 100%;
  height: 100%;
  color: var(--bp-ink);
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(120, 190, 255, .35));
}

.pcard__tapHint {
  position: relative;
  z-index: 1;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bp-ink-soft);
  text-align: center;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(219, 234, 254, .22);
  width: 100%;
  box-sizing: border-box;
}

.pcard__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 10px 0;
}

.pcard__size-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pcard__sqft {
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--bp-ink-soft);
  margin-top: 4px;
}

.pcard__priceLabel {
  font-family: system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bp-ink-soft);
  margin: 0 0 3px;
}

.pcard__price {
  font-family: 'Colus', Georgia, serif;
  font-size: clamp(19px, 4.8vw, 24px);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}

.pcard__price small {
  font-size: .58em;
  letter-spacing: .08em;
  color: var(--bp-ink-soft);
  margin-right: .35em;
}

/* ---- Back face ---- */
.pcard__back .pcard__size {
  font-size: clamp(20px, 5.4vw, 26px);
}

.pcard__backHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.plan {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(6, 1fr);
  flex: 1 1 auto;
  margin: 10px 0 8px;
  position: relative;
  z-index: 1;
}

.plan__row {
  display: contents;
}

.plan__label-cell {
  grid-column: 1;
  padding: clamp(4px, 1vh, 6px) 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid rgba(219, 234, 254, 0.15);
  border-right: 1px solid rgba(219, 234, 254, 0.15);
}

.plan__value-cell {
  grid-column: 2;
  padding: clamp(4px, 1vh, 6px) 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid rgba(219, 234, 254, 0.15);
}

.plan__row:last-child .plan__label-cell,
.plan__row:last-child .plan__value-cell {
  border-bottom: none;
}

.plan__k {
  font-family: system-ui, sans-serif;
  font-size: clamp(11.5px, 2.8vw, 13px);
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  line-height: 1.2;
}

.plan__desc {
  font-family: system-ui, sans-serif;
  font-size: clamp(8px, 2vw, 9px);
  color: var(--bp-ink-soft);
  margin-top: 1px;
  line-height: 1.2;
}

.plan__v {
  font-family: system-ui, sans-serif;
  font-size: clamp(14px, 3.6vw, 18px);
  font-weight: 700;
  color: var(--bp-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.plan__v small {
  font-size: .62em;
  font-weight: 400;
  color: var(--bp-ink-soft);
}

.pcard__backHint {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid rgba(219, 234, 254, .22);
  font-family: system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bp-ink-soft);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

/* ---- Nav dots (which plot is centred) ---- */
/* Pulled up into the carousel's bottom padding so they sit just under the centred
   card. Safe because the centred card never drops and the dropped edge cards live
   at the horizontal edges, not the centre column where the dots are. */
.dots {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: -148px;
}

.dots button {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(219, 234, 254, .28);
  transition: width .4s var(--ease-bump), background .4s var(--ease-out);
}

.dots button:hover {
  background: rgba(219, 234, 254, .55);
}

.dots button.is-active {
  width: 30px;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-3));
}

.dots button:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 3px;
}

@media (prefers-reduced-motion:reduce) {
  .pcard {
    opacity: 1;
    transition: none;
  }

  .pcard__inner {
    transition: none;
  }

  .pcard__face {
    transition: none;
  }
}

/* ---------- Reduced motion: static premium hero, no scroll choreography ---------- */
@media (prefers-reduced-motion:reduce) {
  .hero {
    height: 100vh;
    height: 100svh;
  }

  .hero__window {
    clip-path: inset(0 0 0 0 round 0 0 24px 24px);
    transform: none;
    background: transparent;
    filter: none;
  }

  .hero__img {
    opacity: 1;
  }

  .hero__scrim,
  .motto {
    opacity: 1;
  }

  .hero__portal-ring,
  .hero__portal-arrow {
    display: none;
  }
}

/* ---------- Footer ---------- */
.footer {
  background: #06090f;
  /* premium deep slate background */
  border-top: 1px solid rgba(169, 124, 48, 0.24);
  color: #eaeaea;
  padding: clamp(56px, 9vh, 110px) 0 calc(24px + env(safe-area-inset-bottom, 0px));
  position: relative;
  z-index: 10;
  /* ensure it stays on top */
}

.footer__container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer__col {
  display: flex;
  flex-direction: column;
}

.footer__logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.footer__logo {
  height: 32px;
  width: auto;
  color: var(--gold-2);
  /* gold color fill */
}

.footer__brand-name {
  font-family: 'Felix Titling', 'Sonder', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
}

.footer__project {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-2);
  margin: 0 0 12px 0;
}

.footer__desc {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: #a0a6b2;
  margin: 0;
}

.footer__title {
  font-family: 'Sonder', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 20px 0;
  border-bottom: 1px solid rgba(169, 124, 48, 0.15);
  padding-bottom: 8px;
  display: inline-block;
  width: fit-content;
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: #a0a6b2;
}

.footer__icon {
  width: 16px;
  height: 16px;
  color: var(--gold-2);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer__link {
  color: #a0a6b2;
  text-decoration: none;
  transition: color 0.3s;
}

.footer__link:hover {
  color: var(--gold-2);
}

/* ---------- Eye-follow social pill (replaces the icon row) ---------- */
.footer__socials {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 14px;
  padding: 8px 14px 8px 18px;
  border-radius: 999px;
  background: rgba(12, 15, 22, 0.85);
  border: 1px solid rgba(169, 124, 48, 0.35);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.footer__socials:hover {
  transform: translateY(-2px);
  border-color: rgba(216, 176, 98, 0.55);
  box-shadow: 0 14px 34px -10px rgba(216, 176, 98, 0.18), 0 10px 30px -10px rgba(0, 0, 0, 0.55);
}

.eye-pill__icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.eye-pill__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--gold-2);
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s ease;
}

.eye-pill__icon:hover {
  color: var(--gold-1);
  transform: translateY(-2px) scale(1.1);
}

.eye-pill__icon svg {
  width: 16px;
  height: 16px;
}

.eye-pill__eyes {
  display: flex;
  align-items: center;
  gap: 4px;
}

.eye {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

.eye__pupil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #0a0f1a;
  transform: translate(0, 0);
  will-change: transform;
  transition: transform 0.06s linear;
  z-index: 1;
}

.eye__lid {
  position: absolute;
  inset: 0;
  background: #0c1016;
  border-radius: 50%;
  transform: scaleY(0);
  transform-origin: center;
  animation: eye-blink 3.5s infinite ease-in-out;
  z-index: 2;
  pointer-events: none;
}

@keyframes eye-blink {
  0%, 92%, 100% { transform: scaleY(0); }
  96% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .eye__lid { animation: none; }
  .eye__pupil { transition: none; }
}

/* Desktop: scale the social icons 2× while keeping the compact mobile size. */
@media (min-width: 769px) {
  .footer__socials {
    padding: 12px 20px 12px 26px;
    gap: 18px;
  }
  .eye-pill__icons { gap: 10px; }
  .eye-pill__icon {
    width: 44px;
    height: 44px;
  }
  .eye-pill__icon svg {
    width: 32px;
    height: 32px;
  }
  .eye-pill__eyes { gap: 8px; }
  .eye {
    width: 36px;
    height: 36px;
  }
  .eye__pupil {
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
  }
}

.footer__bottom {
  border-top: 1px solid rgba(169, 124, 48, 0.12);
  padding-top: 24px;
  display: flex;
  justify-content: center;
}

.footer__copy {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  color: #717784;
  margin: 0;
}

@media (max-width: 768px) {
  .footer {
    padding: clamp(56px, 9vh, 110px) 0 20px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 36px;
  }

  .footer__col--social {
    align-items: flex-start;
  }
}

@media (min-width: 769px) {
  .footer__container {
    max-width: 1220px;
  }

  .footer__brand-name {
    font-size: 21px;
  }

  .footer__project {
    font-size: 13.5px;
  }

  .footer__desc {
    font-size: 15.5px;
  }

  .footer__title {
    font-size: 16px;
  }

  .footer__list {
    gap: 20px;
  }

  .footer__list li {
    font-size: 15.5px;
  }

  .footer__icon {
    width: 18px;
    height: 18px;
  }
}

/* ---------- Feature highlights marquee ---------- */
.feature-marquee {
  position: relative;
  padding: 0 0 clamp(14px, 2vh, 24px) 0;
  overflow: hidden;
  background: transparent;
}

.feature-marquee__row {
  display: flex;
  align-items: center;
  padding: 0.35em 0;
}

.feature-marquee__row--top {
  border-top: 1px solid rgba(169, 124, 48, 0.22);
}

.feature-marquee__row--bottom {
  border-bottom: 1px solid rgba(169, 124, 48, 0.22);
}

.feature-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  font-family: 'Impact Web', Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: clamp(26px, 4.3vw, 55px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  animation: marquee 30s linear infinite;
  animation-play-state: paused;
}

.feature-marquee__row--bottom .feature-marquee__track {
  animation-direction: reverse;
}

.feature-marquee.is-ready .feature-marquee__track {
  animation-play-state: running;
}

.fm-sep {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffe659;
  margin: 0 20px;
  flex-shrink: 0;
}

/* 2D vertical push hover — front (white) slides up and out, back (gold) slides
   up from below into view. No perspective or rotation. */
.push-word {
  position: relative;
  display: inline-block;
  height: 1.1em;
  line-height: 1.1;
  overflow: hidden;
  cursor: default;
  flex-shrink: 0;
}

.push-word__face {
  display: block;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.push-word__front {
  transform: translateY(0);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.push-word__back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
  pointer-events: none;
  background: linear-gradient(180deg, var(--gold-1, #ffe659) 0%, var(--gold-2, #d8b062) 52%, var(--gold-3, #a97c30) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (hover: hover) {
  .push-word:hover .push-word__front {
    transform: translateY(-100%);
  }

  .push-word:hover .push-word__back {
    transform: translateY(0);
  }
}

.push-word:focus-visible .push-word__front {
  transform: translateY(-100%);
}

.push-word:focus-visible .push-word__back {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .push-word__face {
    transition: none;
  }
  .push-word__back {
    display: none;
  }
}

/* ---------- Outro motto (hand-drawn Urdu) ---------- */
.outro {
  position: relative;
  overflow: hidden;
  background: #06090f;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(12px, 2vh, 24px) 20px clamp(40px, 7vh, 80px);
}
.outro__svg {
  width: min(86vw, 640px);
  height: auto;
  overflow: visible;
}
.outro__stroke {
  --ink: url(#motto-grad);   /* fill of the glyph */
  --stroke-c: var(--gold-2); /* pen colour */
  --glow: 255, 224, 92;      /* bloom colour (rgb triplet) */
  fill: var(--ink);
  fill-opacity: 0;
  stroke: var(--stroke-c);
  stroke-width: 22;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* A gold bloom hugs each glyph exactly as it inks (same per-glyph delay),
     so the glow travels around the word with the pen, then settles soft. */
  animation: outro-draw .8s var(--ease-out) both,
             outro-ink .9s ease-out both,
             outro-bloom 1.05s ease-out;  /* no fill-mode: filter fully clears at rest (no lingering layer) */
  animation-play-state: paused;
}
.outro.is-writing .outro__stroke { animation-play-state: running; }
/* "اسی کا ہے" rendered in white (fill, pen and glow) */
.outro__white {
  --ink: #fff;
  --stroke-c: #f4f4f4;
  --glow: 255, 255, 255;
}
@keyframes outro-draw {
  0%   { stroke-dashoffset: 1; }
  72%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes outro-ink {
  0%, 55% { fill-opacity: 0; }
  100%    { fill-opacity: .96; }
}
/* Wide ambient bloom radiates into the background as each glyph inks,
   then fades fully so finished text is left clean (no resting glow). */
@keyframes outro-bloom {
  0%, 48% { filter: drop-shadow(0 0 0 rgba(var(--glow), 0)); }
  70%     { filter: drop-shadow(0 0 420px rgba(var(--glow), .85)); }
  100%    { filter: drop-shadow(0 0 0 rgba(var(--glow), 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .outro__stroke {
    animation: none;
    stroke-dashoffset: 0;
    fill-opacity: .96;
    filter: none;
  }
}

/* =====================================================================
   LIGHT THEME — html.light overrides. Dark stays the default; nothing
   above this line changes. Toggled by the .theme-toggle button.
   ===================================================================== */
html.light {
  /* Porcelain canvas + ink-navy text + bronze gold. The dark theme's golds
     (#ffe659 family) are tuned for dark navy and read neon on ivory, so light
     mode gets its own bronze trio: lightest stop ≥3:1 on the canvas (display
     text), mid stop ≥4.3:1 (accents / small text). */
  --cream: #f7f4ec;          /* warm porcelain canvas */
  --cream-deep: #ece7d9;
  --gold-1: #b08a2e;         /* bronze — light stop */
  --gold-2: #8f6f22;         /* bronze — mid (accent-safe) */
  --gold-3: #6e5417;         /* bronze — deep */
  /* shared light-surface recipe */
  --lt-ink: #1c2430;         /* headings / primary */
  --lt-body: #414b5a;        /* body copy */
  --lt-mute: #5b6472;        /* secondary */
  --lt-surface: rgba(255, 253, 248, .85);
  --lt-border: rgba(120, 90, 35, .22);
  --lt-border-hover: rgba(143, 111, 34, .48);
  --lt-shadow: 0 1px 2px rgba(70, 55, 20, .05), 0 14px 34px -18px rgba(70, 55, 20, .18);
}

html.light body { color: #2a2520; }

/* Brand mark + motto SVG gradients are hardcoded defs — restate their stops
   in bronze so the logo doesn't glow yellow on porcelain. */
html.light #goldGrad stop:nth-of-type(1) { stop-color: var(--gold-1); }
html.light #goldGrad stop:nth-of-type(2) { stop-color: var(--gold-2); }
html.light #goldGrad stop:nth-of-type(3) { stop-color: var(--gold-3); }
/* motto-grad is a moving shine: dark edges, bright centre */
html.light #motto-grad stop:nth-of-type(1),
html.light #motto-grad stop:nth-of-type(3) { stop-color: var(--gold-2); }
html.light #motto-grad stop:nth-of-type(2) { stop-color: var(--gold-1); }

/* ---- Navbar / chrome ---- */
html.light .navbar {
  background: rgba(252, 250, 244, .78);
  border-color: rgba(143, 111, 34, .28);
  box-shadow: 0 10px 30px -18px rgba(70, 55, 20, .25);
}
html.light .navbar__link { color: var(--lt-ink); }
html.light .navbar__link:hover { color: var(--gold-3); }
html.light .navbar__link.is-active { color: var(--gold-2); }
/* JS hover pill: a solid bronze gradient behind dark link text kills contrast —
   use a soft bronze tint instead. */
html.light .navbar__pill {
  background: rgba(176, 138, 46, .16);
  box-shadow: inset 0 0 0 1px rgba(143, 111, 34, .22);
}
html.light .navbar__toggle { color: #fff; }
html.light .navbar__toggle:focus-visible { outline-color: rgba(28, 36, 48, .6); }

/* ---- Staggered curtain menu ---- */
html.light .sm-prelayer:nth-child(1) { background: #e3dac5 !important; }
html.light .sm-panel {
  background: linear-gradient(180deg, #fbf8f1, #f0ebdd);
  box-shadow: -18px 0 44px -24px rgba(70, 55, 20, .3);
}
html.light .sm-panel-item { color: var(--lt-ink); }
html.light .sm-panel-item:hover { color: var(--gold-2); }
html.light .sm-socials { border-top-color: rgba(143, 111, 34, .28); }
html.light .sm-socials-link { color: var(--lt-mute); }
html.light .sm-socials-link:hover { color: var(--gold-2); }

/* ---- Hero: light sky treatment. The scrim becomes an ivory fog so dark
   text stays readable over the photo's sky. ---- */
html.light .hero__pin {
  background: radial-gradient(120% 80% at 50% -10%, var(--cream-deep), var(--cream) 60%);
}
html.light .hero__scrim {
  background:
    linear-gradient(to bottom, rgba(247, 244, 236, .78) 0%, rgba(247, 244, 236, .42) 36%, rgba(247, 244, 236, 0) 100%),
    linear-gradient(to bottom, rgba(236, 231, 217, .5) 0%, rgba(236, 231, 217, 0) 62%),
    radial-gradient(125% 95% at 50% 0%, rgba(247, 244, 236, .55) 0%, rgba(247, 244, 236, 0) 58%);
}
/* The circular portal window flips to a bright ivory disc */
html.light .hero__window { background: #fffdf7; }
html.light .motto__sig { color: var(--lt-ink); }
html.light .motto__explain-text { color: var(--lt-ink); }
/* The shine band is warm-white tuned for dark; over bronze glyphs on porcelain
   it bleaches the text — soften it. */
html.light .motto__head {
  background-image:
    linear-gradient(110deg, transparent 35%, rgba(255, 244, 205, 0.55) 50%, transparent 65%),
    linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 52%, var(--gold-3) 100%);
}
html.light .hero.is-static .hero__window { filter: drop-shadow(0 12px 30px rgba(70, 55, 20, .25)); }
html.light .hero__portal-ring { border-color: rgba(143, 111, 34, .7); }
html.light .hero__portal-arrow { filter: drop-shadow(0 2px 4px rgba(70, 55, 20, .3)); }

/* ---- Rolling text marquee ---- */
html.light .rolling-text {
  border-top-color: rgba(143, 111, 34, .45);
  border-bottom-color: rgba(143, 111, 34, .45);
}
html.light .rolling-text__content { color: var(--gold-3); }
html.light .rolling-text__sep { color: var(--gold-2); }

/* ---- Plots: light blueprint — architect's paper: near-white blue sheet,
   slate-blue ink. Desaturated on purpose; the saturated sky-blue read candy. ---- */
html.light .plots {
  --bp-1: #eef3fa;               /* blueprint paper — light */
  --bp-2: #cfdded;               /* blueprint paper — deep  */
  --bp-ink: #263650;             /* drawing / label ink — slate blue */
  --bp-ink-soft: rgba(38, 54, 80, .62);
}
html.light .plots__eyebrow { color: var(--lt-ink); }
html.light .plots__desc { color: var(--lt-body); }
html.light .pcard__face {
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(38, 54, 80, .06) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(38, 54, 80, .06) 23px 24px),
    linear-gradient(158deg, var(--bp-1), var(--bp-2));
  border-color: rgba(38, 54, 80, .18);
  box-shadow: 0 30px 60px -30px rgba(50, 60, 80, .35), inset 0 1px 0 rgba(255, 255, 255, .8);
  color: var(--bp-ink);
}
html.light .pcard__face::before { border-color: rgba(38, 54, 80, .16); }
html.light .pcard__back { background: linear-gradient(158deg, var(--bp-1), var(--bp-2)); }
html.light .pcard__size,
html.light .pcard__price,
html.light .plan__k { color: #1d2b42; }
html.light .pcard__tag { border-color: rgba(38, 54, 80, .25); }
html.light .pcard__tag--com {
  color: var(--gold-3);
  border-color: rgba(143, 111, 34, .5);
  background: rgba(143, 111, 34, .08);
}
html.light .blueprint svg { filter: none; }
html.light .pcard__tapHint,
html.light .pcard__backHint { border-color: rgba(38, 54, 80, .16); color: var(--bp-ink-soft); }
html.light .plan__label-cell,
html.light .plan__value-cell { border-color: rgba(38, 54, 80, .12); }
html.light .pcard__front::after { color: #1c2430; }
/* Commercial ribbon turns bronze in light — dark text drowns on it */
html.light .pcard--com .pcard__front::after { color: #fff; }
html.light .pcard.is-active .pcard__front {
  box-shadow:
    0 40px 70px -28px rgba(50, 60, 80, .4),
    0 0 0 1px rgba(143, 111, 34, .55),
    0 0 34px -8px rgba(143, 111, 34, .3),
    inset 0 1px 0 rgba(255, 255, 255, .85);
}
html.light .carousel:focus-visible { box-shadow: inset 0 0 0 2px rgba(143, 111, 34, .4); }
/* :not(.is-active) so the active dot keeps its gold gradient */
html.light .dots button:not(.is-active) { background: rgba(143, 111, 34, .3); }
html.light .dots button:not(.is-active):hover { background: rgba(143, 111, 34, .55); }
html.light .dots button.is-active { background: linear-gradient(90deg, var(--gold-1), var(--gold-3)); }

/* ---- Feature marquee ---- */
html.light .push-word__front { color: var(--lt-ink); -webkit-text-fill-color: #1c2430; }
html.light .fm-sep { background: var(--gold-2); }
html.light .feature-marquee__row--top { border-top-color: rgba(143, 111, 34, .32); }
html.light .feature-marquee__row--bottom { border-bottom-color: rgba(143, 111, 34, .32); }

/* ---- Footer: parchment panel, clearly separated from the porcelain page ---- */
html.light .footer {
  background: linear-gradient(180deg, #efeadb, #e7e0cc);
  border-top-color: rgba(143, 111, 34, .35);
  color: #2a2520;
}
html.light .footer__brand-name { color: var(--lt-ink); }
html.light .footer__desc,
html.light .footer__list li { color: #565f6d; }
html.light .footer__link { color: #565f6d; }
html.light .footer__link:hover { color: var(--gold-3); }
html.light .footer__title { color: var(--lt-ink); border-bottom-color: rgba(143, 111, 34, .3); }
html.light .footer__copy { color: #7a7263; }
html.light .footer__bottom { border-top-color: rgba(143, 111, 34, .22); }
html.light .footer__socials {
  background: rgba(255, 253, 248, .8);
  border-color: rgba(143, 111, 34, .35);
  box-shadow: 0 10px 30px -12px rgba(70, 55, 20, .2), inset 0 1px 0 rgba(255, 255, 255, .7);
}
html.light .footer__socials:hover {
  border-color: rgba(143, 111, 34, .55);
  box-shadow: 0 14px 34px -12px rgba(70, 55, 20, .28);
}
html.light .eye-pill__icon:hover { color: var(--gold-3); }
html.light .eye { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18); border: 1px solid rgba(28, 36, 48, .15); }
html.light .eye__lid { background: #d4ccb8; }

/* ---- Outro (hand-drawn Urdu motto) ---- */
html.light .outro { background: var(--cream); }
/* Use url(#motto-grad) so the stroke matches the fill gradient exactly in light mode,
   hiding the pen outlines completely. Bloom shifts from yellow to bronze —
   a yellow glow just washes out on porcelain. */
html.light .outro__stroke {
  --stroke-c: url(#motto-grad);
  --glow: 176, 138, 46;
}
html.light .outro__white {
  --ink: #1c2430;
  --stroke-c: #1c2430; /* Match --ink exactly to hide outlines */
  --glow: 60, 70, 90;
}

/* =====================================================================
   Theme toggle button + circular view-transition reveal
   ===================================================================== */
.theme-toggle {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top, 0px));
  right: calc(148px + env(safe-area-inset-right, 0px));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(216, 176, 98, .45);
  background: rgba(6, 9, 15, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--gold-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 75;
  padding: 0;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.theme-toggle:hover { border-color: var(--gold-2); transform: scale(1.06); }
.theme-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, .67); outline-offset: 4px; }
.theme-toggle svg { width: 20px; height: 20px; display: block; }
.theme-toggle .tt-sun { display: none; }
html.light .theme-toggle {
  background: rgba(252, 250, 244, .8);
  border-color: rgba(143, 111, 34, .45);
  color: var(--gold-2);
}
html.light .theme-toggle .tt-sun { display: block; }
html.light .theme-toggle .tt-moon { display: none; }
html.light .theme-toggle:focus-visible { outline-color: rgba(28, 36, 48, .6); }

@media (max-width: 768px) {
  .theme-toggle {
    top: calc(17px + env(safe-area-inset-top, 0px));
    right: calc(72px + env(safe-area-inset-right, 0px));
    width: 40px;
    height: 40px;
  }
  .theme-toggle svg { width: 17px; height: 17px; }
}

/* Circular reveal: the new theme expands as a growing circle from the toggle.
   Default view-transition crossfade is disabled; the clip-path animation is
   driven from JS (needs the button's coordinates). */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* Keep lower-page work out of the initial render. The intrinsic size prevents
   scroll jumps while the browser skips paint/layout for off-screen sections. */
.facs, .lmap, .plots, .faq, footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* Avoid keeping unnecessary compositor layers allocated on constrained CPUs. */
html.low-power [style*="will-change"],
html.low-power .fac,
html.low-power .carousel__track {
  will-change: auto !important;
}