/* =====================================================================
   SOLANO RESIDENCES — shell: tokens, navigation, hero
   Everything below the hero lives in sections.css.
   ===================================================================== */

:root{
  /* colour */
  --ink:        #05142b;
  --ink-2:      #0d2b57;
  --blue:       #1c62e0;
  --blue-deep:  #0a3a94;
  --blue-soft:  #dce9fb;
  --sky:        #8dbdf5;
  --sun:        #e2a33f;   /* brass — matches the fixtures */
  --sun-2:      #f3c374;
  --sun-soft:   #f6e9d4;
  --cream:      #eef3fa;   /* cool paper, not warm */
  --paper:      #ffffff;
  --line:       rgba(5,20,43,.12);

  /* type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* rhythm */
  --gut: clamp(20px, 4vw, 72px);
  --sec: clamp(88px, 12vw, 180px);
  --r:   18px;

  --ease: cubic-bezier(.22,.68,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
em{ font-style:normal; color:var(--blue); }

::selection{ background:var(--sun); color:var(--ink); }

/* ---------------------------------------------------------------
   MEDIA WRAPPERS
   Every image/video sits in .media. Until the real file lands in
   /assets, JS marks it .is-missing and a labelled gradient shows.
   --------------------------------------------------------------- */
.media{
  position:relative;
  overflow:hidden;
  background:linear-gradient(150deg,#0c2f6e 0%,#1c62e0 34%,#7fb2ea 66%,#f3c374 100%);
}
.media__el{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.media.is-missing .media__el{ opacity:0; }
.media.is-missing::after{
  content:attr(data-asset);
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--body);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(5,20,43,.62);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  padding:8px 14px; border-radius:100px;
  white-space:nowrap;
  backdrop-filter:blur(6px);
}

/* ---------------------------------------------------------------
   NAV
   --------------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:18px var(--gut);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(238,243,250,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
  padding-top:12px; padding-bottom:12px;
}

.nav__mark{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:800;
  font-size:18px; letter-spacing:-.02em;
  color:#fff;
  mix-blend-mode:difference;
  transition:color .3s var(--ease);
}
.nav.is-stuck .nav__mark{ color:var(--ink); mix-blend-mode:normal; }
.nav__mark-dot{
  width:11px; height:11px; border-radius:50%;
  background:var(--sun);
  box-shadow:0 0 0 4px rgba(226,163,63,.3);
}

.nav__pills{ display:flex; align-items:center; gap:8px; }
.pill{
  font-size:13.5px; letter-spacing:-.01em;
  padding:10px 18px;
  border-radius:100px;
  color:#fff;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
  transition:all .3s var(--ease);
  white-space:nowrap;
}
.pill:hover{ background:rgba(255,255,255,.28); transform:translateY(-1px); }
.pill--solid{
  background:var(--sun); color:var(--ink);
  border-color:transparent; font-weight:500;
}
.pill--solid:hover{ background:var(--sun-2); }

.nav.is-stuck .pill{
  color:var(--ink);
  background:rgba(5,20,43,.05);
  border-color:var(--line);
}
.nav.is-stuck .pill:hover{ background:rgba(5,20,43,.1); }
.nav.is-stuck .pill--solid{ background:var(--sun); border-color:transparent; }

.nav__burger{
  display:none;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  cursor:pointer;
  padding:0;
}
.nav__burger span{
  display:block; width:18px; height:1.5px; margin:4px auto;
  background:#fff; transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav.is-stuck .nav__burger{ border-color:var(--line); background:rgba(5,20,43,.05); }
.nav.is-stuck .nav__burger span{ background:var(--ink); }
.nav__burger.is-open span:first-child{ transform:translateY(3px) rotate(45deg); }
.nav__burger.is-open span:last-child{ transform:translateY(-3px) rotate(-45deg); }

/* ---------------------------------------------------------------
   01 — HERO
   --------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  padding:calc(84px + var(--gut)) var(--gut) var(--gut);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
  color:#fff;
  isolation:isolate;
  /* the sky above the photograph, continued in CSS from its own top edge
     (#035094 left, #1c5280 right) so the join is invisible */
  background:
    linear-gradient(90deg, rgba(3,80,148,0) 42%, rgba(34,86,128,.55) 100%),
    linear-gradient(180deg,#01142a 0%,#01274d 34%,#023f79 70%,#04539a 100%);
}
/* -- the three-layer stack ------------------------------------------
   0  .hero__media   the photo
   1  .hero__glow    soft dark wash so the wordmark holds up on sky
   2  .hero__title   the wordmark
   3  .hero__fg      the same photo, foreground only, on top of the type
   4  .hero__scrim   one grade over everything (keeps the silhouette seamless)
   5  content        lede, cards, scroll cue
   ------------------------------------------------------------------- */
/* Full bleed, anchored to the bottom edge. The photograph carries its own sky
   headroom (see tools/extend-sky.py), so on a wide screen the crop takes sky
   off the top and the tower still sits low, with its roofline crossing the
   wordmark instead of burying it. */
.hero__media{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(165deg,#071e4a 0%,#0f47b4 30%,#4b8fe6 52%,#a9c9e8 74%,#f0c17c 100%);
  will-change:transform;
}
.hero__media .media__el{ height:100%; object-position:50% 55%; }

.hero__glow{
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(86% 58% at 10% 4%, rgba(2,12,30,.5), rgba(2,12,30,0) 62%);
}

.hero__fg{
  position:absolute; inset:0; z-index:3;
  pointer-events:none;
  will-change:transform;
}
.hero__fg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 55%;   /* must match .hero__media .media__el exactly */
}
.hero__fg.is-empty{ display:none; }

.hero__scrim{
  position:absolute; inset:0; z-index:4;
  pointer-events:none;
  background:
    radial-gradient(64% 46% at 0% 100%, rgba(2,12,30,.5), rgba(2,12,30,0) 66%),
    linear-gradient(180deg, rgba(4,14,34,.34) 0%, rgba(4,14,34,.04) 30%, rgba(4,14,34,.06) 52%, rgba(4,14,34,.58) 100%);
}

.hero__title{
  position:relative; z-index:2;
  grid-row:1;
  font-size:clamp(3.4rem, 13.2vw, 12.5rem);
  line-height:.84;
  letter-spacing:-.045em;
  font-weight:800;
  text-shadow:0 4px 60px rgba(4,14,34,.28);
  margin-left:-.02em;
}
.hero__line{ display:block; overflow:hidden; }
.hero__line--indent{ padding-left:.1em; }
.hero__line > span,
.hero__line{ will-change:transform; }

/* title entrance */
.hero__line{ opacity:0; transform:translateY(.28em); animation:rise 1.1s var(--ease) forwards; }
.hero__line--indent{ animation-delay:.12s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

.hero__lede{
  position:relative; z-index:5;
  grid-row:3;
  max-width:390px;
  align-self:end;
}
.hero__statement{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.25rem,2.1vw,1.7rem);
  line-height:1.14;
  letter-spacing:-.025em;
  margin-bottom:.85em;
}
.hero__body{
  font-size:14.5px; line-height:1.62;
  color:rgba(255,255,255,.84);
  max-width:330px;
  text-indent:2.2em;
}
.tag{
  display:inline-block;
  font-size:12px; letter-spacing:.1em;
  color:rgba(255,255,255,.66);
  font-family:var(--display);
}

/* floating hotspot cards */
.hotspot{ position:absolute; z-index:5; }
.hotspot--a{ right:clamp(20px,7vw,120px); top:34%; }
.hotspot--b{ left:38%;  bottom:8%; }

.hotspot__dot{
  position:absolute;
  width:11px; height:11px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 6px rgba(255,255,255,.18);
}
.hotspot--a .hotspot__dot{ left:14px; bottom:-54px; }
.hotspot--a::before{
  content:''; position:absolute; left:19px; bottom:-48px;
  width:1px; height:48px; background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));
}
.hotspot--b .hotspot__dot{ left:22%; top:-58px; }
.hotspot--b::before{
  content:''; position:absolute; left:calc(22% + 5px); top:-52px;
  width:1px; height:52px; background:linear-gradient(0deg,rgba(255,255,255,.7),rgba(255,255,255,0));
}

.card{
  display:flex; gap:14px;
  width:clamp(280px,26vw,330px);
  padding:14px;
  border-radius:20px;
  background:rgba(10,22,44,.38);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 24px 60px -22px rgba(4,14,34,.6);
  transition:transform .5s var(--ease), background .5s var(--ease);
}
.card:hover{ transform:translateY(-4px); background:rgba(10,22,44,.5); }
.card__thumb{ flex:0 0 74px; height:88px; border-radius:12px; }
.card__text h3{
  font-size:15.5px; font-weight:700; letter-spacing:-.02em;
  line-height:1.15; margin-bottom:8px;
}
.card__text p{ margin:0; font-size:12.6px; line-height:1.5; color:rgba(255,255,255,.76); }
.card--reverse .card__thumb{ order:2; }

/* scroll cue */
.scrollcue{
  position:absolute; right:var(--gut); bottom:var(--gut);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:12px; color:rgba(255,255,255,.8);
  z-index:5;
}
.scrollcue__btn{
  width:62px; height:62px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.scrollcue__btn svg{ width:20px; height:20px; animation:nudge 1.9s var(--ease) infinite; }
.scrollcue:hover .scrollcue__btn{ background:var(--sun); color:var(--ink); border-color:transparent; transform:translateY(3px); }
@keyframes nudge{ 0%,100%{ transform:translateY(-2px);} 50%{ transform:translateY(3px);} }

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width:1180px){
  .hotspot--a{ top:30%; }
  .hotspot--b{ left:auto; right:clamp(20px,7vw,120px); bottom:22%; }
  .hotspot--b::before, .hotspot--b .hotspot__dot{ display:none; }
}

@media (max-width:980px){
  .nav__pills{
    position:fixed; inset:74px 16px auto 16px;
    flex-direction:column; align-items:stretch;
    padding:14px; gap:6px;
    background:rgba(238,243,250,.96);
    backdrop-filter:blur(18px);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 30px 60px -30px rgba(5,20,43,.45);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:all .35s var(--ease);
  }
  .nav__pills.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav__pills .pill{ color:var(--ink); background:transparent; border-color:transparent; text-align:center; font-size:15px; padding:12px; }
  .nav__pills .pill--solid{ background:var(--sun); margin-top:6px; }
  .nav__burger{ display:block; }

  .hero__lede{ max-width:none; }
  .hero__body{ max-width:44ch; }
  .hotspot--a{ display:none; }
  .hotspot--b{ position:static; margin-top:26px; }
  .hotspot--b .card{ width:min(420px,100%); }
  .scrollcue span:first-child{ display:none; }

}

@media (max-width:600px){
  .hero{ grid-template-rows:auto auto auto; gap:34px; }
  .hero__title{ font-size:clamp(2.5rem,15.2vw,5rem); letter-spacing:-.05em; }
  .hero__line--indent{ padding-left:0; }
  .scrollcue{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}