/* ============================================================
   The Bright Vibes Coworking — base styles
   Design tokens: strict black/white/grey UI, full-color photography
   ============================================================ */

:root {
  --ink: #141414;
  --ink-soft: #2b2b2b;
  --paper: #fcfcfc;
  --paper-dim: #f4f4f2;
  --mid: #8a8a8a;
  --line: #e4e4e2;
  --line-dark: rgba(255,255,255,0.18);

  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body: 'Karla', system-ui, sans-serif;

  --header-h: 88px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Every nav link jumps to a section id under a fixed header — without
   this, smooth-scroll lands the section's top edge exactly at the
   viewport top, which is then hidden behind the header, clipping the
   heading on arrival. */
#about, #amenities, #locations, #book, #contact { scroll-margin-top: var(--header-h); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); text-transform: uppercase; margin: 0; line-height: 1.05; }
p { margin: 0; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 12px 18px; z-index: 1000;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 15px 30px; border: 1px solid transparent;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.btn--primary { background: var(--paper); color: var(--ink); }
.btn--primary:hover { opacity: 0.85; }
.btn--ghost { border-color: rgba(255,255,255,0.7); color: var(--paper); }
.btn--ghost:hover { background: rgba(255,255,255,0.12); }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--small { padding: 11px 22px; font-size: 12px; }
.btn--nav { display: none; color: var(--paper); border-color: rgba(255,255,255,0.7); }
.btn--nav:hover { background: rgba(255,255,255,0.12); }
.site-header.is-scrolled .btn--nav { color: var(--ink); border-color: var(--ink); }
.site-header.is-scrolled .btn--nav:hover { background: var(--ink); color: var(--paper); }
.btn--disabled { opacity: 0.45; cursor: default; pointer-events: none; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
}
.header-inner {
  max-width: var(--max); margin: 0 auto;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 60px; height: 60px; }
.brand-mark--dark { display: none; }
.site-header.is-scrolled .brand-mark--light { display: none; }
.site-header.is-scrolled .brand-mark--dark { display: block; }
.brand-word {
  font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4;
  color: var(--paper);
}
.site-header.is-scrolled .brand-word { color: var(--ink); }
.brand-word em { display: block; font-style: normal; font-weight: 500; color: var(--mid); font-size: 10px; letter-spacing: 0.16em; }

.main-nav { display: none; }
.main-nav a {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper); padding: 8px 4px; opacity: 0.9;
}
.site-header.is-scrolled .main-nav a { color: var(--ink); }
.main-nav a:hover { opacity: 1; }

.nav-toggle {
  width: 40px; height: 40px; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
  width: 22px; height: 2px; background: var(--paper); transition: background 0.2s ease;
}
.site-header.is-scrolled .nav-toggle span { background: var(--ink); }

.mobile-nav {
  display: none; flex-direction: column;
  background: var(--paper); border-top: 1px solid var(--line);
  padding: 10px 20px 20px;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  padding: 12px 0; font-size: 14px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; border-bottom: 1px solid var(--line);
}
.mobile-nav .btn { margin-top: 14px; align-self: flex-start; }

/* ---------- Hero ---------- */
.hero {
  position: relative; width: 100%; min-height: 100svh;
  overflow: hidden; background: var(--ink);
  display: flex; flex-direction: column;
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 48%;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,10,10,0.55) 0%,
    rgba(10,10,10,0.15) 24%,
    rgba(10,10,10,0.25) 58%,
    rgba(10,10,10,0.86) 100%);
}
.hero-mark {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: calc(var(--header-h) + 28px) 20px 0;
}
.hero-logo { width: clamp(96px, 20vw, 190px); height: clamp(96px, 20vw, 190px); filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5)); }
.hero-wordmark {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--font-body); text-transform: uppercase; color: var(--paper);
}
.hero-wordmark span:first-child { font-weight: 600; font-size: clamp(11px, 2.4vw, 15px); letter-spacing: 0.32em; }
.hero-wordmark-sub { font-weight: 500; font-size: clamp(9px, 1.8vw, 11px); letter-spacing: 0.28em; color: rgba(255,255,255,0.75); }

.hero-content {
  position: relative; z-index: 2; margin-top: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  padding: 0 24px clamp(40px, 8vh, 80px);
}
.hero-content h1 {
  color: var(--paper); font-weight: 800;
  font-size: clamp(38px, 8vw, 84px); line-height: 0.98;
}
.rule { width: 56px; height: 3px; background: var(--paper); }
.hero-content p {
  color: rgba(255,255,255,0.9); font-size: clamp(14px, 2vw, 16px);
  max-width: 460px; line-height: 1.7;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 6px; }

/* ---------- Trust strip ---------- */
.strip { background: var(--ink); color: var(--paper); padding: 16px 0; overflow-x: auto; }
.strip-inner {
  max-width: var(--max); margin: 0 auto; width: max-content; min-width: 100%;
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  padding: 0 20px;
}
.strip .dot { color: var(--mid); }

@media (min-width: 720px) {
  .strip-inner { justify-content: center; }
}

/* ---------- Section shells ---------- */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mid); margin-bottom: 10px;
}
.eyebrow--center { text-align: center; }
.section-title { font-size: clamp(28px, 5vw, 44px); margin-bottom: 40px; }

/* ---------- About ---------- */
.about {
  max-width: var(--max); margin: 0 auto; padding: 70px 20px 80px;
  display: grid; grid-template-columns: 1fr; gap: 44px;
}

/* Photo montage: three frames, one per branch, each auto-cycling through
   real photos of that branch. A plain aligned grid at every breakpoint —
   no rotation, no floating/overlapping elements — main photo large on the
   left (spans both rows from the desktop breakpoint up), the other two
   branches stacked beside it, stat badges in their own row underneath.

   The zoom ("Ken Burns") animation lives on .montage-media — the one
   element that's never recreated — so both the outgoing and incoming
   photo layers scale together as a single unit. Putting it on the <img>
   layers instead (an earlier version did) meant a freshly-cloned incoming
   layer restarted its zoom from scale(1) while the outgoing layer was
   already zoomed in, so for the crossfade's duration the two photos were
   visibly different sizes at once — that mismatch was the "not smooth"
   glitch. */
/* min-width/min-height: 0 down this whole chain — without it, a grid or
   flex track sizes itself to its content's intrinsic size, and a <img>'s
   natural pixel dimensions count as that content, so the photos were
   blowing their columns out past the copy text instead of sitting inside
   their assigned share of the row. */
.about-media-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.about-montage {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
  align-items: start; gap: 12px; min-width: 0;
}
.montage-frame--main { grid-column: 1 / -1; grid-row: 1; }
.montage-frame--top { grid-column: 1; grid-row: 2; }
.montage-frame--bottom { grid-column: 2; grid-row: 2; }
.montage-frame { overflow: hidden; box-shadow: 0 14px 30px rgba(20,20,20,0.13); min-width: 0; min-height: 0; }

.montage-media {
  position: relative; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 11;
  animation: montage-kenburns 9s ease-in-out infinite alternate;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.about.is-visible .montage-media { opacity: 1; transform: translateY(0); }
.about.is-visible .montage-frame--top .montage-media { transition-delay: 0.08s; }
.about.is-visible .montage-frame--bottom .montage-media { transition-delay: 0.16s; }
.montage-frame--main .montage-media { aspect-ratio: 16 / 9; }

.montage-img, .montage-img--incoming {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.montage-img--incoming { opacity: 0; transition: opacity 0.45s ease; }
.montage-img--incoming.is-visible { opacity: 1; }

@keyframes montage-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.about-stats { display: flex; gap: 12px; }
.montage-badge {
  flex: 1;
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper);
  padding: 14px 18px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 0.3s;
}
.about.is-visible .montage-badge { opacity: 1; transform: translateY(0); }
.montage-badge-num { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1; }
.montage-badge-label { font-size: 10.5px; line-height: 1.35; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.7); }

.about-copy h2 { font-size: clamp(28px, 5vw, 42px); margin-bottom: 18px; }
.about-copy p { font-size: 15px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 26px; }

@media (prefers-reduced-motion: reduce) {
  .montage-media { animation: none; }
  .montage-media, .montage-badge { transition: none; opacity: 1; transform: none; }
}

/* ---------- Amenities ---------- */
.amenities { background: var(--paper-dim); padding: 80px 0; text-align: center; }
.amenities .eyebrow, .amenities .section-title { padding: 0 20px; }

.amenity-index { text-align: left; border-top: 1px solid var(--line-dark); }

.amenity-row { border-bottom: 1px solid var(--line-dark); }
.amenity-row[data-tone="dark"] {
  background: var(--ink); color: rgba(255,255,255,0.92); border-bottom-color: transparent;
}

.amenity-row-inner { max-width: var(--max); margin: 0 auto; padding: 46px 20px; }

.amenity-row-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 26px; }
.amenity-num {
  font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 0.9;
  color: var(--ink); opacity: 0.16; flex-shrink: 0;
}
.amenity-row[data-tone="dark"] .amenity-num { color: var(--paper); opacity: 0.28; }
.amenity-row-title {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 800;
  font-size: 24px; letter-spacing: 0.01em; margin-bottom: 6px;
}
.amenity-row-tag { font-size: 13px; color: var(--mid); font-style: italic; }
.amenity-row[data-tone="dark"] .amenity-row-tag { color: rgba(255,255,255,0.55); }

.amenity-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line-dark); border-radius: 999px;
  padding: 10px 18px 10px 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pill svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink); }
.amenity-row[data-tone="dark"] .pill { border-color: rgba(255,255,255,0.3); }
.amenity-row[data-tone="dark"] .pill svg { color: var(--paper); }
@media (hover: hover) {
  .pill:hover { border-color: var(--ink); background: rgba(20,20,20,0.03); }
  .amenity-row[data-tone="dark"] .pill:hover { border-color: var(--paper); background: rgba(255,255,255,0.06); }
}

.amenity-extras {
  font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; line-height: 2;
  color: var(--mid); padding-top: 20px; border-top: 1px solid var(--line);
}
.amenity-row[data-tone="dark"] .amenity-extras { color: rgba(255,255,255,0.58); border-top-color: rgba(255,255,255,0.18); }

.amenity-note { max-width: var(--max); margin: 36px auto 0; padding: 0 20px; font-size: 13px; color: var(--mid); font-style: italic; }

/* ---------- Locations ---------- */
.locations { max-width: var(--max); margin: 0 auto; padding: 80px 20px; text-align: center; }
.location-grid { display: grid; grid-template-columns: 1fr; gap: 28px; text-align: left; }
.location-card { background: var(--paper); border: 1px solid var(--line); }
.location-media { position: relative; height: 220px; overflow: hidden; background: var(--ink); }
.location-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.location-img--incoming {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.location-img--incoming.is-visible { opacity: 1; }
.location-card-body { padding: 26px 24px 28px; }
.location-card-body h3 { font-size: 24px; margin-bottom: 12px; }
.location-card-body p { font-size: 14px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 20px; }

/* ---------- Reviews ---------- */
.reviews { background: var(--ink); color: var(--paper); padding: 80px 20px; text-align: center; }
.reviews .eyebrow { color: rgba(255,255,255,0.55); }
.reviews-placeholder {
  max-width: 560px; margin: 0 auto; border: 1px dashed rgba(255,255,255,0.3);
  padding: 30px 24px; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.75);
}
/* Two rows of real Google reviews, drifting in opposite directions —
   deliberately a different motion pattern from the crossfades used
   elsewhere on the site (About montage, Locations cards), so this
   section reads as its own thing worth pausing on. Each row's markup
   is duplicated once (aria-hidden on the copy) so the CSS animation
   can loop seamlessly by translating exactly -50%. */
.review-marquee {
  width: auto; margin: 0 -20px; overflow: hidden;
  display: flex; flex-direction: column; gap: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.review-track {
  display: flex; gap: 20px; width: max-content;
  animation: marquee-left 52s linear infinite;
}
.review-track--b { animation-name: marquee-right; animation-duration: 46s; }
.review-track:hover { animation-play-state: paused; }

@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.review-card {
  margin: 0; padding: 28px 24px; border: 1px solid rgba(255,255,255,0.16);
  display: flex; flex-direction: column; gap: 20px; justify-content: space-between;
  flex: 0 0 320px; width: 320px; text-align: left;
}
.review-stars { color: #e8c34a; font-size: 13px; letter-spacing: 2px; }
.review-card blockquote {
  margin: 0; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.88);
}
.review-card figcaption {
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55);
}

/* Each track's second half (the aria-hidden figures) exists purely so
   the loop has something to scroll into — screen readers should hear
   the 15 real reviews exactly once, not thirty, and reduced-motion
   users (no animation, so no loop to fill) should see them exactly
   once too. */
@media (prefers-reduced-motion: reduce) {
  .review-marquee { -webkit-mask-image: none; mask-image: none; }
  .review-track {
    animation: none; flex-wrap: wrap; width: 100%; max-width: var(--max);
    margin: 0 auto; justify-content: center;
  }
  .review-card[aria-hidden="true"] { display: none; }
}

/* ---------- Book / CTA ---------- */
.book { max-width: 720px; margin: 0 auto; padding: 90px 24px; text-align: center; }
.book h2 { font-size: clamp(28px, 5vw, 42px); margin-bottom: 16px; }
.book > p { font-size: 15px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 32px; }

/* Lead form: kept to the site's plain black/white/grey system — no colored
   validation states, just monochrome text and borders. Underline-style
   inputs rather than boxed ones, matching the editorial rest of the site. */
.book-form { text-align: left; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 22px; margin-bottom: 22px; }
.form-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form-field label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid);
}
.form-field input, .form-field select {
  width: 100%; font-family: var(--font-body); font-size: 15.5px; color: var(--ink);
  background: transparent; border: none; border-bottom: 1.5px solid var(--line);
  padding: 9px 2px; border-radius: 0; appearance: none; -webkit-appearance: none;
  transition: border-color 0.2s ease;
}
.form-field input::placeholder { color: var(--mid); opacity: 0.8; }
.form-field input:focus, .form-field select:focus { outline: none; border-bottom-color: var(--ink); }
.form-field input:invalid:not(:placeholder-shown) { border-bottom-color: var(--mid); }
.form-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; background-size: 15px; padding-right: 22px;
}
.form-field select:invalid { color: var(--mid); }

.form-submit { width: 100%; margin-top: 6px; }
.form-submit:disabled { opacity: 0.55; cursor: default; }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { opacity: 0.85; }

.form-status { margin-top: 18px; font-size: 14px; line-height: 1.6; display: none; }
.form-status.is-visible { display: block; }
.form-status.is-error { font-weight: 600; }

.form-fallback { margin-top: 20px; font-size: 13px; color: var(--mid); text-align: center; }
.form-fallback a { color: var(--ink); font-weight: 600; text-decoration: underline; }

@media (min-width: 560px) {
  .form-row { grid-template-columns: 1fr 1fr; gap: 26px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.85); padding: 60px 20px 0; }
.footer-inner {
  max-width: var(--max); margin: 0 auto; padding-bottom: 50px;
  display: grid; grid-template-columns: 1fr; gap: 36px;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-logo { width: 168px; height: auto; }
.footer-col h4 { font-family: var(--font-body); text-transform: uppercase; font-size: 12px; letter-spacing: 0.16em; color: var(--mid); margin-bottom: 14px; }
.footer-col a, .footer-col p { display: block; font-size: 14px; margin-bottom: 10px; color: rgba(255,255,255,0.85); }
.footer-col a:hover { color: var(--paper); }
.footer-col .footer-contact-item {
  display: flex; align-items: center; gap: 12px;
}
.footer-contact-item svg {
  width: 19px; height: 19px; flex-shrink: 0; color: rgba(255,255,255,0.5);
  transition: color 0.2s ease;
}
.footer-contact-item:hover svg { color: var(--paper); }
.footer-bottom {
  border-top: 1px solid var(--line-dark); padding: 20px; text-align: center;
  font-size: 12px; color: rgba(255,255,255,0.5);
}

/* ============================================================
   Tablet and up
   ============================================================ */
@media (min-width: 720px) {
  .main-nav { display: flex; gap: 30px; }
  .btn--nav { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }

  .about { grid-template-columns: 1fr 1fr; align-items: center; padding: 110px 20px; gap: 60px; }

  .location-grid { grid-template-columns: repeat(3, 1fr); }

  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-logo { width: 208px; }
}

@media (min-width: 900px) {
  /* Same aligned grid as mobile, just given room to breathe: the main
     branch photo gets more width and a fixed max-height so the montage
     doesn't sprawl on wide screens, with the other two branches beside
     it and the stat badges in their own tidy row underneath. */
  .about-montage {
    grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; height: 460px;
  }
  .montage-frame--main { grid-column: 1; grid-row: 1 / 3; }
  .montage-frame--top { grid-column: 2; grid-row: 1; }
  .montage-frame--bottom { grid-column: 2; grid-row: 2; }
  .montage-frame { height: 100%; }
  /* Matching the base rules' specificity (two classes) so these actually
     win over .montage-frame--main .montage-media { aspect-ratio: 16/9 }
     etc. — a bare .montage-media override here loses that fight even
     though it comes later in the file, and aspect-ratio + height:100%
     was computing a width far past the grid column (clipped invisibly by
     overflow:hidden, but still wrong). */
  .montage-frame--main .montage-media,
  .montage-frame--top .montage-media,
  .montage-frame--bottom .montage-media {
    width: 100%; height: 100%; aspect-ratio: unset;
  }

  .amenity-row-inner {
    padding: 64px 40px;
    display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start;
  }
  .amenity-row-head { flex-direction: column; margin-bottom: 0; gap: 14px; }
  .amenity-num { font-size: 68px; }
  .amenity-row-title { font-size: 28px; }
  .amenity-pills { margin-bottom: 26px; }
}