/* ==========================================================================
   Irene Chung | SIX Real Estate
   ========================================================================== */

:root {
  --ink:        #1c1c34;
  --ink-soft:   #4a4a63;
  --ink-mute:   #6f6f86;
  --blue:       #0099ce;
  --blue-dark:  #007ca8;
  --line:       #e4e6ec;
  --bg:         #ffffff;
  --bg-soft:    #f7f8fa;
  --bg-deep:    #14141f;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --header-h: 104px;
  --wrap: 1200px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing — without it the width/height HTML attributes
   apply as presentational hints and override any aspect-ratio we set. */
img { max-width: 100%; height: auto; display: block; }

address { font-style: normal; }

a { color: var(--blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

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

.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section--soft { background: var(--bg-soft); }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 1rem;
}

.lede { font-size: 1.12rem; color: var(--ink-soft); }

.rule {
  width: 56px; height: 2px; background: var(--blue);
  border: 0; margin: 0 0 1.75rem;
}

/* Skip link ------------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 0.85rem 1.4rem;
}
.skip:focus { left: 0; }

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1.05rem 2.3rem;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; text-decoration: none; }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn--light { background: transparent; border-color: #fff; color: #fff; }
.btn--light:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* ==========================================================================
   Header — transparent over the hero, solid white once scrolled
   ========================================================================== */

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease), height 0.35s var(--ease);
}

.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}

/* Solid state: applied on scroll, and permanently on interior pages */
.site-header.is-solid,
.site-header--solid {
  /* No backdrop-filter here. It would make the header a containing block for
     position:fixed descendants, trapping the full-screen mobile menu inside
     the header bar. At 0.97 opacity the blur was invisible anyway. */
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: var(--line);
  box-shadow: 0 2px 18px rgba(20, 20, 31, 0.07);
  height: 84px;
}

/* Logo swap --------------------------------------------------------------
   The lockup is two separate images: "Irene Chung" links home, the SIX mark
   links to the brokerage. Splitting them beats one image with an invisible
   hotspot — each link gets its own alt text and hit area. */
.logo-lockup { display: flex; align-items: center; flex-shrink: 0; }
.logo { display: block; flex-shrink: 0; line-height: 0; }
.logo-six { transition: opacity 0.25s var(--ease); }
.logo-six:hover { opacity: 0.7; }
.logo img { height: 70px; width: auto; transition: height 0.35s var(--ease); }
.logo .logo--white { filter: drop-shadow(0 1px 12px rgba(0, 0, 0, 0.55)); }
.logo .logo--navy { display: none; }
.logo .logo--white { display: block; }

.site-header.is-solid .logo--navy,
.site-header--solid .logo--navy { display: block; }
.site-header.is-solid .logo--white,
.site-header--solid .logo--white { display: none; }
.site-header.is-solid .logo img,
.site-header--solid .logo img { height: 58px; }

/* Navigation ------------------------------------------------------------ */
.nav { display: flex; align-items: center; gap: 2.4rem; }

.nav a {
  position: relative;
  font-size: 0.76rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  padding: 0.4rem 0;
  transition: color 0.25s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.nav a:hover { text-decoration: none; }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.site-header.is-solid .nav a,
.site-header--solid .nav a { color: var(--ink); text-shadow: none; }
.site-header.is-solid .nav a:hover,
.site-header--solid .nav a:hover { color: var(--blue); }

/* Mobile toggle --------------------------------------------------------- */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 0; background: transparent; cursor: pointer;
  padding: 10px; margin-right: -10px;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%; background: #fff;
  margin: 4px 0; border-radius: 2px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), background 0.35s var(--ease);
}
.site-header.is-solid .nav-toggle span,
.site-header--solid .nav-toggle span { background: var(--ink); box-shadow: none; }

body.nav-open .nav-toggle span { background: var(--ink); box-shadow: none; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */

/* The tagline "Healthy Living Starts at Home" is part of the hero image
   itself. The height formula below guarantees the horizontal crop never
   clips that text at any viewport width. If you ever swap in a hero photo
   WITHOUT baked-in text, delete the `min()` and use `height: 82vh`, then
   un-hide .hero__title below. */
.hero {
  position: relative;
  height: min(86vh, 100vw / 1.06);
  min-height: 340px;
  background: url("../assets/hero.jpg") center 38% / cover no-repeat #dcd9d4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,20,31,0.58) 0%, rgba(20,20,31,0.28) 22%, rgba(20,20,31,0) 48%),
    linear-gradient(0deg,   rgba(20,20,31,0.55) 0%, rgba(20,20,31,0.18) 26%, rgba(20,20,31,0) 50%);
  pointer-events: none;
}

/* Real text for search engines and screen readers; the visual tagline
   lives in the photo. Unhide this if you get a text-free hero image. */
.hero__title {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Open house overlay ------------------------------------------------------
   Sits in the lower half of the hero, clear of the tagline baked into the
   photo. Self-contained: deleting the markup leaves the hero untouched. */
.openhouse {
  position: relative;      /* above .hero::after */
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 0 1.25rem clamp(1.1rem, 3.2vh, 2.75rem);
  width: 100%;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

/* "House" sits under "Open" and overlaps it, as on the printed flyer.
   Every clamp() floor is small enough that narrow phones scale DOWN —
   a floor above the vw value would make type grow on small screens. */
.openhouse__title { margin: 0; line-height: 1; }

.oh-open {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(2rem, 10.5vw, 5.4rem);
  letter-spacing: 0.05em;
  line-height: 0.92;
  /* offset the letter-spacing added after the final letter */
  margin-right: -0.05em;
}
.oh-house {
  display: block;
  font-family: "Great Vibes", var(--serif);
  font-size: clamp(1.75rem, 9vw, 4.6rem);
  line-height: 1;
  margin-top: -0.16em;          /* rests on the base of "OPEN", barely kissing it */
}

.openhouse__stats {
  margin: clamp(0.35rem, 1.4vh, 0.9rem) 0 0;
  font-size: clamp(0.82rem, 3.5vw, 1.3rem);
  line-height: 1.35;
  font-weight: 400;
}

.openhouse__when {
  margin: 0.35rem 0 0;
  font-size: clamp(0.85rem, 3.2vw, 1.1rem);
  letter-spacing: 0.04em;
}

/* Solid fill + lift, so it reads as a button rather than a caption */
.openhouse__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.7rem;
  margin-top: clamp(0.8rem, 2.2vh, 1.5rem);
  padding: 0.8rem 1.4rem;
  border: 0;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-size: clamp(0.85rem, 3.3vw, 1.05rem);
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  text-shadow: none;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: background 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.openhouse__cta:hover,
.openhouse__cta:focus-visible {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  text-decoration: none;
  color: #fff;
}
.openhouse__cta:active { transform: translateY(0); }

/* Official Zillow wordmark; inherits the button's colour via currentColor */
.openhouse__cta .zlogo {
  flex-shrink: 0;
  height: clamp(0.85rem, 3.1vw, 1.05rem);
  width: auto;
  /* optical: the wordmark's cap height sits a touch above the text baseline */
  position: relative;
  top: 0.04em;
}
.oh-addr { white-space: nowrap; }

.hero-caption {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  text-align: center;
  padding: 2.4rem 0;
}
.hero-caption p {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  color: var(--ink);
  font-style: italic;
  margin: 0;
}

/* Interior page banner --------------------------------------------------- */
.page-banner {
  position: relative;
  margin-top: 84px;   /* clears the solid header */
  height: clamp(220px, 34vw, 380px);
  background: url("../assets/banner.jpg") center 55% / cover no-repeat var(--bg-deep);
  display: flex; align-items: flex-end;
}
.page-banner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,20,31,0.35), rgba(20,20,31,0.55));
}
.page-banner h1 {
  position: relative;
  color: #fff;
  margin: 0 0 clamp(1.6rem, 4vw, 3rem);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
}

/* ==========================================================================
   Content blocks
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.portrait { position: relative; isolation: isolate; }
.portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}
/* offset frame peeking out from behind the lower-right corner */
.portrait::after {
  content: ""; position: absolute; inset: auto -14px -14px auto;
  width: 62%; height: 62%;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  z-index: 0;
}

.portrait__caption {
  margin-top: 1.1rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}

.prose h2 + .rule { margin-top: -0.2rem; }
.prose .signoff {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--ink);
  margin-top: 1.8rem;
}

/* Cards ----------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 2.2rem 1.9rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(20, 20, 31, 0.09);
  border-color: transparent;
}
.card h3 { margin-bottom: 0.55rem; }
.card p { font-size: 0.96rem; margin: 0; }
.card__num {
  font-family: var(--serif);
  font-size: 2.1rem;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 0.9rem;
  display: block;
}

.center { text-align: center; }
.center .rule { margin-inline: auto; }
.measure { max-width: 62ch; }
.measure.center { margin-inline: auto; }

/* Placeholder notice ----------------------------------------------------- */
.coming-soon {
  border: 1px dashed var(--line);
  background: var(--bg-soft);
  padding: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
.coming-soon h2 { font-size: 1.9rem; }

/* CTA band --------------------------------------------------------------- */
.cta {
  background: var(--bg-deep);
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  padding: clamp(4rem, 8vw, 6rem) 0;
}
.cta h2 { color: #fff; }
.cta .rule { margin-inline: auto; }
.cta p { max-width: 54ch; margin-inline: auto; }
.cta .btn { margin-top: 2rem; }

/* Contact ---------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

.contact-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.contact-list li { margin-bottom: 1.6rem; }
.contact-list .label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.contact-list .value { font-size: 1.06rem; color: var(--ink); }
.contact-list a.value:hover { color: var(--blue); }

/* Form ------------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.field label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 0;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 153, 206, 0.14);
}
.field textarea { resize: vertical; min-height: 130px; }

.consent {
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-size: 0.8rem; line-height: 1.6; color: var(--ink-mute);
}
.consent input { margin-top: 0.28rem; flex-shrink: 0; }

.form-note {
  font-size: 0.8rem;
  color: var(--ink-mute);
  margin: 0;
}
.form-status { font-size: 0.9rem; margin: 0; }
.form-status[data-state="ok"]   { color: #17794d; }
.form-status[data-state="err"]  { color: #b4232a; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--bg-deep); color: rgba(255, 255, 255, 0.62); font-size: 0.9rem; }

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding: clamp(3.5rem, 7vw, 5rem) 0 3rem;
}
.site-footer address { font-style: normal; }
.site-footer .muted { color: rgba(255, 255, 255, 0.5); }
.footer-logo .logo-lockup { margin-bottom: 1.5rem; }
.footer-logo img { height: 56px; width: auto; }

.footer h4 {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  margin: 0 0 1.2rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.7rem; }
.site-footer a { color: rgba(255, 255, 255, 0.7); }
.site-footer a:hover { color: #fff; text-decoration: none; }

.footer-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.6rem 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem;
  align-items: center;
  font-size: 0.82rem;
}
.footer-bar .sep { opacity: 0.35; }

.legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.8rem 0 3rem;
  font-size: 0.74rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.42);
}
.legal p { margin-bottom: 0.9rem; }
.legal .badges {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1rem;
}
.legal .badges svg { flex-shrink: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .split, .contact-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 380px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-logo { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  :root { --header-h: 76px; }

  .nav-toggle { display: block; }

  /* Full-screen menu. Hidden with opacity/visibility rather than an
     off-screen transform — a translated fixed element widens the document
     and creates horizontal scroll on small viewports. */
  .nav {
    position: fixed; inset: 0;
    flex-direction: column; justify-content: center;
    gap: 0;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0s linear 0.28s;
    overflow-y: auto;
  }
  body.nav-open .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0s;
  }
  body.nav-open { overflow: hidden; }

  .nav a {
    color: var(--ink);
    text-shadow: none;
    font-size: 1rem;
    letter-spacing: 0.2em;
    padding: 1.15rem 2rem;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--line);
  }
  .nav a:first-child { border-top: 1px solid var(--line); }
  .nav a::after { display: none; }

  /* Keep the logo and close button above the full-screen menu panel */
  .logo-lockup, .nav-toggle { position: relative; z-index: 2; }
  .nav { z-index: 1; }

  /* With the menu open the panel is white, so force the header into its
     solid treatment — otherwise the white logo vanishes against it. */
  body.nav-open .site-header {
    background: #fff;
    border-bottom-color: var(--line);
  }
  body.nav-open .logo--navy  { display: block; }
  body.nav-open .logo--white { display: none; }

  .site-header.is-solid, .site-header--solid { height: 70px; }
  .page-banner { margin-top: 70px; }
  .logo img,
  .site-header.is-solid .logo img,
  .site-header--solid .logo img { height: 48px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { width: min(100% - 2.4rem, var(--wrap)); }
  .footer-top { grid-template-columns: 1fr; }
  .portrait::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}