/* ============================================================
   Solari Haus — production stylesheet
   Ported from the brand's official design system (tokens + templates/website).
   Four colors only. Rooms rotate cream / espresso / burgundy. Arch is the motif.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* ---- palette (four only) ---- */
  --espresso: #1C1108;
  --burgundy: #6B1020;
  --cream:    #F0EBE2;
  --sky:      #C2DBF0;

  --espresso-90: rgba(28,17,8,0.90);
  --espresso-45: rgba(28,17,8,0.45);
  --cream-80: rgba(240,235,226,0.80);
  --cream-65: rgba(240,235,226,0.65);
  --cream-60: rgba(240,235,226,0.60);
  --cream-55: rgba(240,235,226,0.55);
  --burgundy-hover: color-mix(in srgb, var(--burgundy) 78%, var(--espresso) 22%);
  --hairline: rgba(28,17,8,0.14);
  --hairline-cream: rgba(240,235,226,0.28);

  /* solari-blue: the confirmed brand blue, same value as --sky (#C2DBF0).
     It's a pale/light color, so anywhere it's used as a background needs dark
     (espresso) text for contrast — same logic as --cream. Do not use it as
     text color on light (--cream) backgrounds, only on dark rooms, as a
     background fill, or as a border/accent element. */
  --solari-blue: #C2DBF0;
  --solari-blue-hover: color-mix(in srgb, var(--solari-blue) 70%, var(--espresso) 30%);
  --solari-blue-tint: color-mix(in srgb, var(--solari-blue) 14%, var(--cream) 86%);

  /* ---- type ---- */
  --font-display: 'Newsreader', Georgia, serif;
  --font-sans: 'Hanken Grotesk', system-ui, sans-serif;
  --display-mega: clamp(4rem, 11vw, 11.25rem);
  --display-xl:   clamp(3.5rem, 9vw, 8.75rem);
  --display-lg:   clamp(3rem, 7vw, 7.5rem);
  --display-md:   clamp(2.75rem, 6vw, 6.25rem);
  --display-sm:   clamp(1.75rem, 3.4vw, 3rem);
  --display-xs:   clamp(1.6rem, 2.6vw, 2.25rem);
  --ls-caps: 0.15em;
  --ls-caps-wide: 0.2em;

  /* ---- spacing / radii ---- */
  --section-y: clamp(4.5rem, 10vw, 9rem);
  --section-x: clamp(1.5rem, 6vw, 6rem);
  --content-max: 1320px;
  --nav-h: 72px;
  --sticky-top: 88px;
  --radius-input: 12px;
  --radius-pill: 999px;

  /* ---- textures (real photographed surfaces) ---- */
  --tex-linen: url('../assets/textures/linen-warm.jpg');
  --tex-plaster: url('../assets/textures/plaster-dark.jpg');
  --tex-burgundy: url('../assets/textures/burgundy-emboss.jpg');

  /* ---- shadows — soft, warm, low ---- */
  --shadow-card: 0 18px 44px -24px rgba(28,17,8,0.28);
  --shadow-arch: 0 30px 70px -30px rgba(28,17,8,0.40);
  --shadow-lift: 0 24px 60px -28px rgba(28,17,8,0.34);

  --ease-breath: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 700ms;
}

*{ margin:0; padding:0; box-sizing:border-box; }
/* anchor scroll is handled by an eased JS scroller (see main.js) so links feel weighted, not linear */
/* overflow-x:clip (not hidden) — hidden creates a scroll container, which silently breaks every
   position:sticky element anywhere on the page in Chrome/Firefox/Safari. clip prevents the same
   horizontal bleed without doing that. This one line was why every sticky-pin section on the site
   (hero, the-haus, mission, the-floorplan, what's-coming) was scrolling instead of pinning. */
body{ background:var(--cream); color:var(--espresso); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
main{ position:relative; }

/* ---------- ROOMS (texture is felt, not seen) ---------- */
.sh-room{ position:relative; isolation:isolate; }
.sh-room > *{ position:relative; z-index:1; }
.sh-room::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:480px; background-repeat:repeat;
}
.sh-room--cream{ background:var(--cream); color:var(--espresso); }
.sh-room--cream::before{ background-image:var(--tex-linen); opacity:0.22; mix-blend-mode:multiply; }
.sh-room--dark{ background:var(--espresso); color:var(--cream); }
.sh-room--dark::before{ background-image:var(--tex-plaster); opacity:0.24; mix-blend-mode:screen; }
.sh-room--wine{ background:var(--burgundy); color:var(--cream); }
.sh-room--wine::before{ background-image:var(--tex-burgundy); opacity:0.3; mix-blend-mode:multiply; }

.sh-eyebrow{
  font-family:var(--font-sans); font-weight:700; font-size:0.8125rem;
  text-transform:uppercase; letter-spacing:var(--ls-caps-wide); color:var(--burgundy);
}
.sh-room--dark .sh-eyebrow, .sh-room--wine .sh-eyebrow{ color:var(--sky); }
.sh-eyebrow.on-cream{ color:var(--burgundy) !important; }

.sh-display{
  font-family:var(--font-display); font-weight:400; line-height:0.98;
  letter-spacing:-0.01em; text-transform:lowercase; text-wrap:balance;
}
.sh-body{ font-family:var(--font-sans); font-size:1.0625rem; line-height:1.85; }
.sh-body em, .sh-em{ font-family:var(--font-display); font-style:italic; font-weight:400; color:var(--burgundy); font-size:1.08em; }
.sh-room--dark .sh-body em, .sh-room--wine .sh-body em{ color:var(--sky); }

/* ---------- ARCH FRAME — the primary motif ---------- */
.arch{ position:relative; overflow:hidden; border-radius:50% 50% 16px 16px / 30% 30% 16px 16px; box-shadow:var(--shadow-arch); background:var(--espresso); }
.arch img, .arch video{ width:100%; height:100%; object-fit:cover; display:block; }
.arch.ratio-3-4{ aspect-ratio:3/4; }
.arch.ratio-4-5{ aspect-ratio:4/5; }
.arch.ratio-4-3{ aspect-ratio:4/3; }
.arch.ratio-1-1{ aspect-ratio:1/1; }
.arch.sticky{ position:sticky; top:var(--sticky-top); }

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1.25rem, 5vw, 3.5rem);
  background:transparent; border-bottom:1px solid transparent;
  transition:background var(--dur-base) var(--ease-breath), border-color var(--dur-base) var(--ease-breath);
}
nav.scrolled{ background:var(--cream); border-bottom:1px solid var(--hairline); }
.sh-navmark{ display:flex; align-items:center; }
.sh-navmark img{ height:30px; display:block; }
.sh-navmark .cream-mark{ display:block; }
.sh-navmark .espresso-mark{ display:none; }
nav.scrolled .sh-navmark .cream-mark{ display:none; }
nav.scrolled .sh-navmark .espresso-mark{ display:block; }

.sh-nav-desk{ display:flex; align-items:center; gap:clamp(1.5rem, 3vw, 2.75rem); }
.sh-navlink{
  font-family:var(--font-sans); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--cream);
  transition:color var(--dur-fast) var(--ease-breath); position:relative; padding-bottom:3px;
}
nav.scrolled .sh-navlink{ color:var(--espresso); }
.sh-navlink::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:currentColor; transition:width var(--dur-fast) var(--ease-breath); }
.sh-navlink:hover::after{ width:100%; }
.sh-nav-comein{
  font-family:var(--font-sans); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:var(--ls-caps);
  padding:11px 24px; border-radius:var(--radius-pill); border:1px solid var(--cream); color:var(--cream); background:transparent;
  transition:all var(--dur-fast) var(--ease-breath);
}
nav.scrolled .sh-nav-comein{ border-color:var(--burgundy); color:var(--espresso); }
.sh-nav-comein:hover{ background:var(--burgundy); color:var(--cream); border-color:var(--burgundy); }

.sh-nav-mob{ display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--cream); }
nav.scrolled .sh-nav-mob{ color:var(--espresso); }

@media (max-width:860px){
  .sh-nav-desk{ display:none !important; }
  .sh-nav-mob{ display:inline-flex !important; }
}

/* ---------- MOBILE OVERLAY ---------- */
.sh-mobile-overlay{
  position:fixed; inset:0; z-index:60; background:var(--solari-blue);
  display:flex; flex-direction:column; padding:clamp(1.25rem, 5vw, 2rem);
  opacity:0; visibility:hidden; transition:opacity 0.4s var(--ease-breath), visibility 0.4s var(--ease-breath);
}
.sh-mobile-overlay.is-open{ opacity:1; visibility:visible; }
.sh-mobile-head{ display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); }
.sh-mobile-head img{ height:30px; }
.sh-mobile-close{ background:none; border:none; cursor:pointer; color:var(--espresso); padding:8px; }
.sh-mobile-nav{ display:flex; flex-direction:column; gap:24px; margin-top:12vh; padding-left:4px; }
.sh-mobile-nav a{
  font-family:var(--font-display); text-transform:lowercase; font-size:clamp(2rem,9vw,2.6rem);
  color:var(--espresso); line-height:1; opacity:0; transform:translateY(14px);
  transition:opacity 0.5s var(--ease-breath), transform 0.5s var(--ease-breath);
}
.sh-mobile-overlay.is-open a{ opacity:1; transform:translateY(0); }
.sh-mobile-overlay.is-open a:nth-child(1){ transition-delay:0.05s; }
.sh-mobile-overlay.is-open a:nth-child(2){ transition-delay:0.11s; }
.sh-mobile-overlay.is-open a:nth-child(3){ transition-delay:0.17s; }
.sh-mobile-overlay.is-open a:nth-child(4){ transition-delay:0.23s; }
.sh-mobile-overlay.is-open a:nth-child(5){ transition-delay:0.29s; }
body.menu-open{ overflow:hidden; }

/* ---------- BUTTONS & FORMS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:15px 28px; border-radius:var(--radius-pill);
  font-family:var(--font-sans); font-weight:700; font-size:13px; letter-spacing:var(--ls-caps); text-transform:uppercase;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-breath), background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.btn:hover{ transform:scale(1.02); }
.btn-burgundy{ background:var(--burgundy); color:var(--cream); }
.btn-burgundy:hover{ background:var(--burgundy-hover); }
.btn-cream{ background:var(--cream); color:var(--espresso); }
.btn-cream:hover{ background:var(--sky); }
.btn-blue{ background:var(--solari-blue); color:var(--espresso); }
.btn-blue:hover{ background:var(--solari-blue-hover); color:var(--cream); }

.field{
  font-family:var(--font-sans); font-size:15px; padding:14px 18px;
  border-radius:var(--radius-input); border:1px solid var(--hairline);
  background:var(--cream); color:var(--espresso); outline:none; width:100%;
  transition:box-shadow 0.2s ease, border-color 0.2s ease;
}
.field::placeholder{ color:var(--espresso); opacity:0.5; }
.field:focus{ border-color:var(--sky); box-shadow:0 0 0 3px var(--sky); }
.field.on-dark{ background:rgba(240,235,226,0.08); border-color:var(--hairline-cream); color:var(--cream); }
.field.on-dark::placeholder{ color:var(--cream-65); }
select.field{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231C1108' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
select.field option[value=""]{ color: rgba(28,17,8,0.5); }
textarea.field{ resize:vertical; min-height:110px; font-family:var(--font-sans); }

.sh-capture{ display:flex; gap:12px; max-width:520px; }
@media (max-width:640px){ .sh-capture{ flex-direction:column; } .sh-capture .btn{ width:100%; } }
.sh-success{ font-family:var(--font-display); font-size:26px; text-transform:lowercase; }

/* ---------- REVEAL / CASCADE ---------- */
@media (prefers-reduced-motion: no-preference){
  .sh-reveal{ opacity:0; transform:translateY(28px); transition:opacity 1.1s cubic-bezier(0.16,1,0.3,1), transform 1.1s cubic-bezier(0.16,1,0.3,1); }
  .sh-reveal.is-in{ opacity:1; transform:translateY(0); }
  .sh-reveal--late{ transition-delay:0.18s; }
  .sh-reveal--later{ transition-delay:0.32s; }
  /* asymmetric entrances — used sparingly so the choreography never feels uniform */
  .sh-reveal.sh-reveal--left{ transform:translate(-40px, 22px); }
  .sh-reveal.sh-reveal--left.is-in{ transform:translate(0,0); }
  .sh-reveal.sh-reveal--right{ transform:translate(40px, 22px); }
  .sh-reveal.sh-reveal--right.is-in{ transform:translate(0,0); }
  .sh-cascade-w{ display:inline-block; opacity:0; transform:translateY(0.5em); transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
  .sh-cascade.is-in .sh-cascade-w{ opacity:1; transform:translateY(0); }
  .sh-reveal .arch img{ transform:scale(1.06); transition:transform 1.6s cubic-bezier(0.16,1,0.3,1); }
  .sh-reveal.is-in .arch img{ transform:scale(1); }
  @keyframes sh-kenburns{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
  .sh-kenburns{ animation:sh-kenburns 26s ease-in-out infinite alternate; }
  [data-plx]{ will-change:transform; }
}

/* ---------- HOVER LIFT — arches feel touchable, not static ---------- */
.arch:not(.sticky){ transition:transform 0.5s var(--ease-breath), box-shadow 0.5s var(--ease-breath); }
.arch:not(.sticky):hover{ transform:translateY(-6px); box-shadow:0 40px 84px -30px rgba(28,17,8,0.42); }
.sh-navlink, .pill-link, .foot-social a{ transition:color var(--dur-fast) var(--ease-breath), transform var(--dur-fast) var(--ease-breath); }

/* ---------- HERO ---------- */
.hero{
  position:sticky; top:0; z-index:0; min-height:100vh; display:flex; align-items:center;
  background:var(--espresso); overflow:hidden;
}
.hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hero-overlay{ position:absolute; inset:0; background:var(--espresso-45); }
.hero-inner{ position:relative; z-index:1; width:100%; max-width:var(--content-max); margin:0 auto; padding:0 var(--section-x); display:flex; justify-content:center; }
.hero-col{ max-width:640px; text-align:center; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.hero-wordmark{ display:none; height:34px; margin-bottom:20px; }
.hero-eyebrow{ font-family:var(--font-sans); font-weight:700; font-size:clamp(15px,1.6vw,18px); letter-spacing:0.2em; text-transform:uppercase; color:var(--cream); }
.hero-title{ font-size:var(--display-xl); margin:14px 0; color:var(--cream); }
.hero-sub{ font-family:var(--font-sans); font-size:clamp(17px,2vw,20px); color:var(--cream); max-width:46ch; margin:0 auto; }
.hero-sub br{ display:block; content:''; margin-top:0.3em; }
.hero form{ margin:28px auto 0; justify-content:center; }

@media (max-width:860px){
  .hero-wordmark{ display:block; }
}
@media (max-width:520px){ .hero-title{ font-size:64px; } }

/* ---------- TICKER ---------- */
/* position:relative + z-index puts this in the same stacked layer as the sticky hero above it —
   without it, "positioned" elements (like the sticky hero) always paint over plain static blocks,
   so the ticker would let the hero bleed through instead of covering it solidly. */
.ticker-wrap{ position:relative; z-index:2; overflow:hidden; white-space:nowrap; background:var(--sky); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:14px 0; }
.ticker-track{ display:inline-flex; animation:sh-scroll 40s linear infinite; }
.ticker-wrap:hover .ticker-track{ animation-play-state:paused; }
.ticker-track span{ font-family:var(--font-sans); font-weight:700; font-size:17px; letter-spacing:0.14em; text-transform:uppercase; color:var(--espresso); padding:0 1.4rem; display:inline-flex; align-items:center; gap:1.4rem; }
.ticker-track span::after{ content:'\2726'; color:var(--burgundy); font-size:10px; }
@keyframes sh-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- SECTIONS ---------- */
.sec{ padding:var(--section-y) var(--section-x); }
.sec-inner{ max-width:var(--content-max); margin:0 auto; }

/* The Haus — asymmetric collage: the copy pins in place while photos scroll past behind it */
#the-haus{ box-shadow:0 -34px 70px rgba(28,17,8,0.22); position:relative; overflow-x:clip; }
/* same dark/plaster room as The Floorplan, but fixed to the viewport so only the collage
   photos, heading, and filmstrip move — the backdrop itself stays put as you scroll */
#the-haus.sh-room--dark::before{ opacity:0.5; background-attachment:fixed; }
@media (max-width:860px){
  /* background-attachment:fixed is unreliable on mobile browsers — fall back to normal scroll */
  #the-haus.sh-room--dark::before{ background-attachment:scroll; }
}
.haus-pin-wrap{ position:relative; min-height:140vh; }
.haus-center-sticky{ position:sticky; top:130px; z-index:1; }
@media (max-width:860px){
  .haus-pin-wrap{ min-height:auto; }
  .haus-center-sticky{ position:static; }
}
.haus-collage{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* horizontal filmstrip: vertical scroll drives horizontal translateX — one line at a time.
   Full-bleed: breaks out of the section's side padding so the background photo reaches both edges. */
/* Height + type size scaled way down per feedback — this was reading as its own
   oversized, overlong section. A shorter pinned range and smaller lines still
   deliver the one-at-a-time scroll effect without eating this much of the page. */
.haus-hscroll-wrap{ position:relative; height:140vh; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
/* sticky box now fills the full viewport (not just 60vh) so the pinned
   content is vertically centered in the whole screen — previously the box
   was shorter than the viewport, leaving a large empty strip of bare room
   background below the lines while the section was pinned. */
.haus-hscroll-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.haus-hscroll-heading{ color:var(--sky); margin-bottom:18px; text-align:center; }
.haus-hscroll-track{ position:relative; z-index:2; display:flex; align-items:center; gap:4vw; will-change:transform; padding-left:8vw; width:100%; }
.hline{
  flex:0 0 auto; max-width:min(38vw, 420px);
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1.2rem,2.8vw,1.9rem); line-height:1.3; color:var(--cream);
}
@media (max-width:860px){
  /* Per feedback, the filmstrip past the "roams" floorplan card is cut on
     mobile only — desktop keeps the full scroll sequence. The closing
     "you do not have to..." block was removed from the page entirely. */
  .haus-hscroll-wrap{ display:none; }
}
.haus-close{ text-align:center; padding-top:clamp(1rem,2vw,1.75rem); }
.haus-close .haus-copy{ display:grid; gap:0.9em; max-width:46ch; margin:0 auto; color:var(--cream); font-size:19px; line-height:1.85; }
.haus-close .haus-copy p{ margin:0; }
.haus-collage .cph{ position:absolute; }
.haus-collage .cph .arch{ width:100%; }
/* faster, tighter reveal than the site-wide 1.1s default — the long shared
   duration plus large staggered delays was letting photo 4 finish fading in
   before photo 3 (which triggers slightly earlier but was still mid-fade),
   so both are shortened and pulled much closer together in time. */
.cph-reveal{ transition-duration:0.55s !important; }
/* legibility over the busy collage comes from a soft text-shadow bloom, not a solid backdrop —
   a light tint keeps the linen texture reading through instead of going flat cream */
.haus-center{
  max-width:min(var(--content-max), 58rem); margin:0 auto; text-align:center; position:relative; z-index:1;
  padding:clamp(3rem,7vw,5.5rem) clamp(1.5rem,5vw,4rem);
}
.haus-center::before{
  content:''; position:absolute; z-index:-1; inset:-6% -2%;
  background:radial-gradient(closest-side, rgba(28,17,8,0.5) 0%, rgba(28,17,8,0.26) 55%, transparent 80%);
  filter:blur(10px); pointer-events:none;
}
.haus-center .sh-eyebrow, .haus-center h2{
  text-shadow: 0 0 14px var(--espresso), 0 0 28px var(--espresso), 0 0 46px var(--espresso);
}
/* the three floorplan cards (movement / community groups / roams) now live directly under the
   Haus intro instead of their own separate pinned-stack section — a simple 3-up row, no
   scroll-driven stacking to keep in sync. */
.haus-floorplan-cols{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1rem,2.5vw,2rem); margin:clamp(2.5rem,5vw,3.5rem) auto 0; max-width:64rem; }
.haus-floorplan-card .el-word, .haus-floorplan-card .el-tag{ text-shadow: 0 0 14px var(--espresso), 0 0 28px var(--espresso), 0 0 46px var(--espresso); }
@media (max-width:860px){
  .haus-floorplan-cols{ grid-template-columns:1fr; gap:1.75rem; }
}
.haus-copy{ display:grid; gap:0.9em; max-width:46ch; margin:48px auto 0; color:var(--espresso); font-size:19px; line-height:1.85; }
.haus-copy p{ margin:0; }
.haus-copy p.accent{ color:var(--sky); }
.haus-closing{ font-family:var(--font-display); font-size:var(--display-sm); text-transform:lowercase; margin:40px auto 0; }
.haus-mission{ max-width:min(var(--content-max), 60rem); margin:clamp(3rem,6vw,5rem) auto 0; padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--hairline); position:relative; z-index:1; }
.haus-mission p{ font-family:var(--font-display); font-size:35px; line-height:1.5; color:var(--espresso); max-width:38ch; margin:24px auto 0; }
@media (max-width:860px){
  .haus-collage{ display:none; }
}

/* Mission — simple two-column room: text pinned to the left (not centered), a single looping
   video on the right. No scroll-trick here — the video's own motion carries the section. */
#mission.sh-room--wine::before{ opacity:0.58; }
.mission-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.mission-copy-col{ text-align:left; }
.mission-line{ margin-top:22px; max-width:34ch; font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.5; color:var(--cream); text-transform:lowercase; }
.mission-video-col .arch{ width:100%; }
@media (max-width:860px){
  .mission-grid{ grid-template-columns:1fr; }
  .mission-video-col{ order:-1; max-width:360px; margin:0 auto; }
}

/* Trust line that floats over the seam between two sections, rather than
   sitting in its own boxed block — pulls up/down with negative margins so
   it visually straddles both without adding extra page height. */
/* Absolutely positioned (not negative-margin) so it adds zero extra height
   to the page — it just visually straddles the seam between the section
   before it and this one. Anchored to the section's own top edge (the seam),
   pulled up by half its height so it overlaps evenly above and below. */
.sh-trust-float{
  position:absolute; top:0; right:0; z-index:5;
  transform:translateY(-50%);
  width:clamp(340px,34vw,480px);
  aspect-ratio:3.6 / 1;
  display:flex; align-items:center; justify-content:center;
  background:var(--burgundy); color:var(--cream);
  border-radius:20px;
  padding:clamp(14px,1.8vw,24px) clamp(20px,2.4vw,32px);
  box-shadow:0 28px 60px -16px rgba(28,17,8,0.45);
}
.sh-trust-float p{
  margin:0; max-width:30ch;
  text-wrap:balance;
  font-family:var(--font-display); text-transform:lowercase;
  font-size:clamp(1.1rem,2.2vw,1.55rem); line-height:1.3;
  text-align:center;
}
@media (max-width:640px){
  .sh-trust-float{ width:min(84vw,360px); aspect-ratio:2.8 / 1; border-radius:18px; }
  .sh-trust-float p{ max-width:26ch; }
}

/* PARTNER PAGE (#page-partner) — blue leads here, so blue shows up as a
   badge, card accents, and nav treatment rather than as text color (it's
   too pale to read on cream). Linen texture removed on this page. */
#page-partner .sh-room--cream::before{ display:none; }
#build.sh-room--cream::before{ display:none; }

/* Build With Us page (#page-build) has no dark hero photo behind the nav,
   so the nav's default transparent/cream-text look (meant to sit over a
   photo) is invisible here. Force it into its "scrolled" appearance
   permanently instead of waiting for scroll to trigger nav.scrolled. */
#page-build nav{ background:var(--cream); border-bottom:1px solid var(--hairline); }
#page-build .sh-navlink{ color:var(--espresso); }
#page-build .sh-navmark .cream-mark{ display:none; }
#page-build .sh-navmark .espresso-mark{ display:block; }
#page-build .sh-nav-comein{ border-color:var(--burgundy); color:var(--espresso); }
#page-build .sh-nav-mob{ color:var(--espresso); }

/* Private Events — same nav-forcing need as #page-build, but its own id so
   the CTA can lead with blue (the site's primary color) instead of burgundy. */
#page-private nav{ background:var(--cream); border-bottom:1px solid var(--hairline); }
#page-private .sh-navlink{ color:var(--espresso); }
#page-private .sh-navmark .cream-mark{ display:none; }
#page-private .sh-navmark .espresso-mark{ display:block; }
#page-private .sh-nav-comein{ border-color:var(--solari-blue-hover); color:var(--espresso); background:var(--solari-blue); }
#page-private .sh-nav-comein:hover{ background:var(--solari-blue-hover); color:var(--cream); }
#page-private .sh-nav-mob{ color:var(--espresso); }

#page-partner .who-card{
  border:1px solid var(--hairline); border-top:3px solid var(--solari-blue);
  border-radius:var(--radius-input); padding:28px;
  background:var(--solari-blue-tint);
  display:flex; flex-direction:column; height:100%;
  transition:border-color var(--dur-fast) var(--ease-breath), box-shadow var(--dur-fast) var(--ease-breath);
}
#page-partner .who-card:hover{ border-color:var(--solari-blue-hover); box-shadow:0 20px 40px -20px rgba(28,17,8,0.25); }

#page-partner nav.scrolled .sh-nav-comein{ border-color:var(--solari-blue-hover); color:var(--espresso); }
#page-partner .sh-nav-comein:hover{ background:var(--solari-blue); color:var(--espresso); border-color:var(--solari-blue); }

/* How It Works — a connected step timeline (numbered nodes joined by a line)
   instead of a bordered card grid, so it reads differently from the "who we
   work with" cards above it. */
.hiw-title{ max-width:none; white-space:nowrap; }
.hiw-timeline{ margin-top:52px; display:flex; align-items:flex-start; }
.hiw-step{ flex:1; position:relative; padding:0 22px; text-align:center; }
.hiw-step:first-child{ padding-left:0; }
.hiw-step:last-child{ padding-right:0; }
.hiw-step:not(:last-child)::after{
  content:''; position:absolute; top:26px; left:calc(50% + 48px); right:calc(-50% + 48px);
  height:1px; background:var(--hairline-cream);
}
.hiw-node{
  width:52px; height:52px; border-radius:50%; background:var(--solari-blue); color:var(--espresso);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.25rem;
  margin:0 auto; position:relative; z-index:1;
}
.hiw-step-title{ margin-top:18px; font-size:1.25rem; color:var(--cream); }
.hiw-step-desc{ margin-top:8px; font-size:17px; font-weight:600; line-height:1.6; color:var(--cream-80); max-width:26ch; margin-left:auto; margin-right:auto; }
@media (max-width:760px){
  .hiw-title{ white-space:normal; }
  .hiw-timeline{ flex-direction:column; gap:36px; }
  .hiw-step{ text-align:left; padding:0 0 0 70px !important; }
  .hiw-node{ position:absolute; left:0; top:0; margin:0; }
  .hiw-step:not(:last-child)::after{
    left:26px; top:56px; right:auto; bottom:-36px; width:1px; height:auto;
  }
  .hiw-step-desc{ margin-left:0; margin-right:0; max-width:none; }
}
@media (max-width:1080px){
  .hiw-title{ font-size:clamp(1.4rem,3.2vw,2.4rem) !important; }
}

/* Floorplan card words, reused inside .haus-floorplan-cols above. */
/* movement / community groups / roams read as headings now, styled to match
   the blue all-caps eyebrow ("THE HAUS") rather than the italic display font
   they used before — the copy underneath is regular body text, matching
   paragraph copy used elsewhere on the site (e.g. .hiw-step-desc). */
.el-word{
  font-family:var(--font-sans); font-weight:700; font-size:0.8125rem;
  text-transform:uppercase; letter-spacing:var(--ls-caps-wide); color:var(--sky);
}
.el-tag{ margin-top:10px; font-family:var(--font-sans); font-weight:400; font-size:16px; line-height:1.6; letter-spacing:normal; text-transform:none; color:var(--cream-80); }

/* Our Why — ghost type + a floated photo. The photo floats left so copy wraps beside it at
   the top, then automatically widens to fill the full row once it clears the photo's bottom
   edge — no empty gap under the image the way a fixed two-column grid would leave. */
#our-why{ position:relative; overflow:hidden; }
.why-bg-photo{ position:absolute; z-index:0; top:8%; right:2%; width:32%; opacity:0.16; filter:grayscale(0.2); }
.why-bg-photo img{ width:100%; height:100%; object-fit:cover; border-radius:50% 50% 0 0 / 30% 30% 0 0; }
.why-flow{ position:relative; z-index:1; margin-top:clamp(2.5rem,5vw,4rem); }
.why-flow::after{ content:''; display:table; clear:both; }
.why-photo{ float:left; width:clamp(300px,42%,480px); margin:0 clamp(1.75rem,3.5vw,3rem) 1.5rem 0; }
.sh-ghost{ position:absolute; z-index:0; pointer-events:none; font-family:var(--font-display); line-height:1; text-transform:lowercase; color:transparent; -webkit-text-stroke:1px rgba(28,17,8,0.10); user-select:none; }
.sh-room--dark .sh-ghost{ -webkit-text-stroke:1px rgba(240,235,226,0.10); }
/* Was three separate, conflicting margin rules on .why-copy p — the last one
   (margin:0) was silently winning and collapsing every paragraph's spacing
   to zero, which is why sentences ran together. Switched to the same
   grid+gap pattern as .haus-copy so spacing can't collide like that again. */
.why-copy{ display:grid; gap:0.9em; color:var(--espresso); font-size:19px; line-height:1.85; }
.why-copy p{ margin:0; }
.why-copy p.accent{ color:var(--burgundy); }
.why-closing{ font-family:var(--font-display); font-size:var(--display-sm); text-transform:lowercase; margin-top:28px; clear:left; }

/* Book Club — full-bleed photo room, rises like a curtain */

/* seam ticker straddling BookClub / WhatsComing */
.ticker-seam{ height:0; position:relative; z-index:3; }
.ticker-seam-inner{ transform:translateY(-50%); }

.monogram-tile{ position:absolute; inset:0; z-index:0; pointer-events:none; background-repeat:repeat; background-size:160px; opacity:0.06; }

/* Build With Us — align-items:start is required: with stretch, the arch's aspect-ratio combined
   with a stretched height forced the image wider than its column, running over the copy. */
.build-cols{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.build-copy{ display:grid; gap:1.2em; max-width:52ch; color:var(--espresso); font-size:19px; line-height:1.8; margin-bottom:28px; }
.build-copy p{ margin:0; }
.build-copy p.accent{ color:var(--burgundy); }
.build-form{ display:grid; gap:12px; max-width:520px; }

/* Calendar / Events — list + month-grid views, toggled by js/calendar.js.
   Markup shell lives in index.html (#events); js/calendar.js renders into
   #eventsListView and #calGrid, reading from js/events-data.js (a published
   Google Sheet). */
.events-toggle{ display:inline-flex; margin-top:28px; border:1px solid var(--hairline); border-radius:var(--radius-pill); padding:4px; gap:4px; }
.events-toggle-btn{
  font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:var(--ls-caps);
  text-transform:uppercase; padding:9px 22px; border-radius:var(--radius-pill); border:none;
  background:transparent; color:var(--espresso); opacity:0.55; cursor:pointer;
  transition:all var(--dur-fast) var(--ease-breath);
}
.events-toggle-btn.is-active{ background:var(--solari-blue); color:var(--espresso); opacity:1; }
.events-toggle-btn:not(.is-active):hover{ opacity:0.85; }

/* [hidden] needs to win over the .events-list/.events-calendar display
   rules below — same specificity, so without this the toggle wouldn't
   actually hide the inactive view. */
#eventsListView[hidden], #eventsCalendarView[hidden]{ display:none; }

.events-list{ margin-top:8px; }
.events-empty{ font-size:15px; opacity:0.7; padding:24px 0; }

/* Row-list layout (per Jasmyn's mockup) — a plain date column + border-top
   separators instead of individually boxed cards. Category color-coding
   (tag-dot / event-tag) uses the two-tone system: blue is primary/default,
   wine is the accent used to make a subset of categories pop. */
.event-card{
  display:grid; grid-template-columns:72px 1fr; gap:20px;
  padding:24px 0; border-top:1px solid var(--hairline);
}
.event-card:last-child{ border-bottom:1px solid var(--hairline); }
.event-card-date{ text-align:center; }
.event-card-month{ font-family:var(--font-sans); font-weight:700; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; opacity:0.55; display:block; }
.event-card-day{ font-family:var(--font-display); font-size:2rem; line-height:1.1; display:block; }
.event-card-weekday{ font-family:var(--font-sans); font-weight:600; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.5; display:block; }
.event-card-body{ min-width:0; }
.event-card-tags{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.event-tag{
  font-family:var(--font-sans); font-weight:700; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  border-radius:var(--radius-pill); padding:4px 12px; border:1px solid transparent; display:inline-flex; align-items:center; gap:6px;
}
.event-tag--blue{ color:var(--espresso); border-color:var(--solari-blue-hover); }
.event-tag--wine{ color:var(--burgundy); border-color:var(--burgundy); }
.event-tag--espresso{ color:var(--espresso); border-color:var(--espresso); }
.event-tag--muted{ color:var(--espresso); opacity:0.5; border-color:var(--hairline); }
.event-card-title{ font-size:1.4rem; margin:0 0 4px; text-transform:lowercase; }
.event-card-meta{ font-size:13px; font-weight:600; letter-spacing:0.02em; opacity:0.65; margin-bottom:8px; }
.event-map-link{ color:inherit; text-decoration:underline; text-decoration-color:var(--solari-blue-hover); }
.event-card-desc{ font-size:15px; line-height:1.65; opacity:0.85; max-width:52ch; margin:0 0 6px; }
.event-card-repeats{ font-family:var(--font-display); font-style:italic; font-size:13px; opacity:0.55; margin:0 0 14px; }
.event-card-cta{ padding:11px 22px; font-size:11px; }
@media (max-width:520px){
  .event-card{ grid-template-columns:auto 1fr; }
  .event-card-date{ text-align:left; }
}

/* Calendar view is capped narrower than the section (a 7-col square grid
   at full section width was rendering huge, taller than the viewport) and
   centered, so it reads more like a compact widget than a full-bleed table. */
.events-calendar{ margin:32px auto 0; max-width:760px; }
.cal-nav{ display:flex; align-items:center; justify-content:center; gap:26px; margin-bottom:20px; }
.cal-nav-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--hairline); background:var(--cream);
  font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease-breath);
}
.cal-nav-btn:hover{ background:var(--solari-blue); }
.cal-month-label{ font-size:1.5rem; text-transform:lowercase; min-width:11ch; text-align:center; }
.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; opacity:0.55; margin-bottom:8px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-cell{
  aspect-ratio:1/0.9; border:1px solid var(--hairline); border-radius:10px; background:var(--cream);
  padding:8px; text-align:left; font-family:inherit; cursor:default; display:flex; flex-direction:column; gap:3px;
  min-width:0; overflow:hidden;
}
.cal-cell--empty{ border-color:transparent; background:transparent; }
.cal-cell-num{ font-family:var(--font-sans); font-weight:700; font-size:14px; opacity:0.6; }
.cal-cell.is-today{ border-color:var(--solari-blue-hover); }
.cal-cell.is-today .cal-cell-num{ color:var(--espresso); opacity:1; }
.cal-cell.has-event{ cursor:pointer; background:var(--solari-blue-tint); border-color:var(--solari-blue); transition:background var(--dur-fast) var(--ease-breath); }
.cal-cell.has-event:hover, .cal-cell.has-event:focus-visible{ background:var(--solari-blue); outline:none; }
.cal-cell-events{ display:flex; flex-direction:column; gap:2px; }
.cal-cell-event-label{ font-size:11px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-cell-more{ font-size:11px; opacity:0.6; }
.cal-cell-dots{ display:none; }
/* Category legend — small dot + label per tag color, built dynamically by
   calendar.js from whatever tags are actually in use. Color-coding is a
   mobile-only affordance (desktop cells already show full event titles),
   so the legend itself only appears at the same breakpoint as the dots. */
.cal-legend{ display:none; flex-wrap:wrap; gap:14px; margin:0 0 18px; justify-content:center; }
.cal-legend-item{ display:flex; align-items:center; gap:7px; font-family:var(--font-sans); font-weight:600; font-size:12px; text-transform:lowercase; opacity:0.75; }
.cal-legend-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
/* shared dot-color utility classes — used by the legend and the mobile
   calendar-cell dots alike */
.tag-dot--blue{ background:var(--solari-blue-hover); }
.tag-dot--wine{ background:var(--burgundy); }
.tag-dot--espresso{ background:var(--espresso); }

@media (max-width:640px){
  .events-calendar{ max-width:100%; }
  .cal-legend{ display:flex; }
  /* Text labels don't fit in a 7-col grid on a phone, so instead of trying
     to cram event titles in, cells show the day number plus one, two, or
     three small color-coded dots (matching the legend above) if something's
     happening — tap opens the full detail below, same as desktop. */
  .cal-cell{ padding:4px; aspect-ratio:1/1; gap:2px; align-items:center; justify-content:center; position:relative; }
  .cal-cell-num{ font-size:13px; }
  .cal-cell-events, .cal-cell-more{ display:none; }
  .cal-cell.has-event{ background:var(--cream); }
  .cal-cell-dots{ display:flex; gap:4px; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); }
  .cal-cell-dots span{ display:block; width:5px; height:5px; border-radius:50%; }
}
@media (max-width:400px){
  .cal-weekdays{ font-size:10px; }
  .cal-month-label{ font-size:1.2rem; }
}

.cal-day-detail{ margin-top:24px; padding:22px; border:1px solid var(--solari-blue); border-radius:var(--radius-input); background:var(--solari-blue-tint); }
.cal-detail-date{ font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; opacity:0.6; margin-bottom:12px; }
.cal-detail-event{ padding:12px 0; border-top:1px solid var(--hairline); }
.cal-detail-event:first-of-type{ border-top:none; padding-top:0; }
.cal-detail-title{ font-size:1.2rem; }
.cal-detail-cta{ margin-top:10px; padding:9px 20px; font-size:12px; }

/* Footer */
footer{ text-align:center; position:relative; overflow:hidden; }
.foot-inner{ max-width:620px; margin:0 auto; display:flex; flex-direction:column; align-items:center; position:relative; z-index:1; }
.foot-inner img.mono{ height:72px; margin-bottom:26px; }
.foot-label{ font-family:var(--font-sans); font-weight:700; font-size:13px; letter-spacing:0.15em; text-transform:uppercase; color:var(--cream-60); }
.foot-heading{ font-family:var(--font-display); font-size:var(--display-sm); color:var(--cream); text-transform:lowercase; margin:14px 0 18px; }
.foot-sub{ font-family:var(--font-sans); font-size:18px; line-height:1.7; color:var(--cream-80); max-width:44ch; }
.foot-social{ display:flex; gap:20px; margin-top:34px; font-size:16px; }
.foot-social span{ color:var(--cream-55); }
.foot-fine{ font-family:var(--font-sans); font-size:15px; color:var(--cream-55); margin-top:16px; }

@media (max-width:860px){
  .haus-cols, .build-cols{ grid-template-columns:1fr !important; }
  .why-photo{ float:none; width:100%; max-width:280px; margin:0 auto 2rem; }
  .sh-ghost{ display:none; }
  /* Photo/video column reads as an afterthought when it lands below all the
     copy on mobile — same fix already used for .mission-video-col: pull it
     to the top of the stack and drop the desktop-only offset margin. */
  .build-cols > .sh-reveal--right{ order:-1; margin-top:0 !important; max-width:360px; margin-left:auto; margin-right:auto; margin-bottom:32px; }
}

/* ---------- LINKS PAGE ---------- */
.links-page{ min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:56px 24px; position:relative; }
.links-page .mono{ height:56px; margin-bottom:40px; position:relative; z-index:1; }
.links-list{ width:100%; max-width:420px; display:grid; gap:14px; position:relative; z-index:1; }
.pill-link{
  display:flex; align-items:center; justify-content:center; width:100%; padding:18px 24px;
  border-radius:var(--radius-pill); border:1px solid var(--hairline);
  font-family:var(--font-sans); font-weight:700; font-size:13px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--espresso); background:var(--cream); transition:transform var(--dur-fast) var(--ease-breath), background 0.2s ease, color 0.2s ease;
}
.pill-link:hover{ transform:scale(1.02); background:var(--burgundy); color:var(--cream); border-color:var(--burgundy); }
.links-page .wm{ height:26px; margin-top:auto; padding-top:48px; opacity:0.85; position:relative; z-index:1; }