/* ========================================================
   Coastal Luxury — styles.css
   ======================================================== */

:root {
  --bg:     #FAF8F4;
  --border: #E5E1D8;

  /* Five inks, each with a fixed job:
     text  — running copy, the hero line and the labels that stand alone
     deep  — section eyebrows and the serif display headings above them
     slate — the two large sans headings
     mid   — step numbers, the lifestyle line, the footer wordmark
     soft  — supporting copy, figures, placeholders, footer details */
  --text:       #000000;
  --text-deep:  #1D343A;
  --text-slate: #43646C;
  --text-mid:   #585858;
  --text-soft:  #767676;

  /* Two families carry the whole page: a serif for running copy, headings and
     the wordmark, a geometric sans for labels, UI and the display lockups. */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  --max-w: 1280px;

  /* Side padding of the hero. Shared so the open nav panel can cancel it out
     and bleed to both screen edges without repeating the clamp. */
  --hero-pad-x: clamp(20px, 4vw, 48px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; }

/* ---------- Typographic primitives ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 var(--space-4);
  font-weight: 700;
}

/* ============ NAV / HERO ============ */
.hero {
  position: relative;
  /* The bar and the menu links enter from the right. Without this the document
     is wider than the screen for as long as that animation lasts, and the page
     scrolls sideways on load. */
  overflow: hidden;
  min-height: 100vh;
  padding: var(--space-4) var(--hero-pad-x) var(--space-7);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.10) 40%, rgba(0,0,0,0.35) 100%),
    url("images/hero.jpg") center/cover no-repeat;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: none;
  margin: 0 auto;
  /* Anchor for the open menu panel, so it hangs off the real height of the
     bar instead of a hard-coded offset. */
  position: relative;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  line-height: 1;
  text-transform: uppercase;
}
.nav__logo-serif {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.nav__logo-slash {
  font-family: var(--font-serif);
  font-size: 68px;
  font-weight: 300;
  line-height: 0;
  letter-spacing: 0;
  text-transform: none;
  display: inline-block;
  transform: translateY(-1px);
}
.nav__logo-sans {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.18em;
}
.nav__menu {
  font-family: var(--font-sans);
  display: none;
  gap: var(--space-6);
  font-size: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
  margin-right: var(--space-6);
}
.nav__menu a { opacity: 0.95; transition: opacity .2s; }
.nav__menu a:hover { opacity: 0.7; }

.nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav__toggle span {
  /* Whole pixels: a fractional height lands each bar on a different sub-pixel
     boundary, so on a 1x screen they render at visibly different weights. */
  width: 24px;
  height: 2px;
  background: #fff;
}

.hero__inner {
  margin: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.hero__eyebrow {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 32px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text-deep);
  margin: 0;
}
.hero__title {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(2.5rem, 11vw, 150px);
  line-height: 1;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  text-transform: uppercase;
}

/* ============ GRADIENT WRAPPER (Featured + About) ============ */
.gradient-section {
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    #B5C8D0 45%,
    #A0BAC4 60%,
    var(--bg) 100%
  );
  /* Full-bleed width, so clipping here absorbs the slack the About photo's
     overhang leaves beside the viewport without cutting the overhang itself. */
  overflow-x: clip;
}

/* ============ FEATURED PROPERTIES ============ */
.featured {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-8) clamp(20px, 5vw, 64px);
}
.featured__head {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-6);
  max-width: 920px;
}
.featured__head .eyebrow {
  margin: 0;
}
.featured__copy {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  max-width: 64ch;
}
.featured__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.featured__card {
  position: relative;
  overflow: hidden;
  /*border-radius: 3px;*/
  aspect-ratio: 4 / 5;
  cursor: pointer;
}
.featured__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.featured__card:hover .featured__img {
  transform: scale(1.04);
}
.featured__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.featured__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-4) var(--space-3) var(--space-5);
  color: #fff;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.featured__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.featured__price {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.9;
}
.featured__cta {
  margin-top: var(--space-5);
  display: flex;
  justify-content: flex-end;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-mid);
  transition: opacity .2s ease;
}
.link-arrow:hover { opacity: 0.6; }
.link-arrow__icon {
  display: inline-block;
  font-size: 1.1em;
  transition: transform .25s ease;
}
.link-arrow:hover .link-arrow__icon {
  transform: translateX(4px);
}

/* ============ ABOUT / CURATED SPACES ============ */
.about {
  /* Exposed as a variable because the photo cancels it to reach the page edge. */
  --page-pad: clamp(20px, 5vw, 64px);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-4) var(--page-pad) var(--space-8);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "copy"
    "media"
    "press";
  gap: var(--space-4);
  align-items: start;
}
.about__head { grid-area: head; }
.about__copy { grid-area: copy; max-width: 52ch; }
.about__media { grid-area: media; }
.press { grid-area: press; }

.about__eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  color: var(--text-slate);
  margin: 0 0 var(--space-3);
  letter-spacing: 0.01em;
}
.about__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.5vw + 0.5rem, 58px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-slate);
  margin: 0;
}
.about__lede {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}
.about__media img {
  width: 100%;
  height: auto;
  /*border-radius: 3px;*/
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* AS SEEN IN — press strip */
.press {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}
.press__label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0;
}
.press__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5vw, 56px);
  list-style: none;
  padding: 0;
  margin: 0;
}
.press__list li {
  display: inline-flex;
  align-items: center;
}
.press__logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1) brightness(0);
  opacity: 0.7;
  transition: opacity .2s ease;
}
.press__logo:hover { opacity: 1; }
.press__logo--lg { height: 104px; }

/* ============ EXPERIENCE MALIBU ============ */
.experience {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-8) clamp(20px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.experience .eyebrow { color: var(--text-slate); margin-bottom: var(--space-3); }
.experience__gallery {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr 1fr;
}
/* No height: 100% here. The row it sits in is sized by its content, so asking
   the image for the full row height makes the two depend on each other; the
   result is left to the engine, and WebKit collapses the row and lets the
   photographs spill over the text below. The ratio alone fixes the height. */
.experience__gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
  /*border-radius: 3px;*/
  aspect-ratio: 3 / 4;
}
.experience__content {
  display: flex;
  flex-direction: column;
}
.experience__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw + 0.55rem, 2rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-slate);
  margin: 0 0 var(--space-5);
  max-width: 23ch;
}

/* Accordion */
.accordion {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}
.accordion li { border-bottom: 1px solid var(--border); }
.accordion details {
  width: 100%;
}
.accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-slate);
  position: relative;
  user-select: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1;
  margin-left: var(--space-4);
  transition: transform .25s ease;
  color: var(--text-slate);
}
.accordion details[open] summary::after {
  content: "−";
}
.accordion details p {
  margin: 0 0 var(--space-3);
  padding-right: var(--space-5);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 56ch;
}

/* ============ LIFESTYLE / EXPERIENCE BASED ============ */
.lifestyle {
  width: 100%;
  margin: 0 auto;
  padding: var(--space-8) 0;
}
.lifestyle__head {
  margin-bottom: var(--space-6);
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding: 0 clamp(20px, 5vw, 64px);
}
.lifestyle__head .eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--text);
}
.lifestyle__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw + 0.5rem, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-soft);
  margin: 0;
  max-width: 28ch;
}
.lifestyle__grid {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr;
}
.lifestyle__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--text);
  overflow: hidden;
}
.lifestyle__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 3px;
  transition: transform .5s ease;
}
.lifestyle__card:hover .lifestyle__img {
  transform: scale(1.02);
}
.lifestyle__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text);
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.lifestyle__arrow {
  display: inline-block;
  width: 26px;
  height: 10px;
  color: var(--text-soft);
  transition: transform .25s ease;
  flex-shrink: 0;
}
.lifestyle__card:hover .lifestyle__arrow {
  transform: translateX(4px);
}

/* ============ PROCESS ============ */
.process .eyebrow { color: var(--text-slate); margin-bottom: var(--space-4); }
.process {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-8) clamp(20px, 5vw, 64px) var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
.process__content {
  display: flex;
  flex-direction: column;
}
.process__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw + 0.55rem, 28px);
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-slate);
  margin: 0 0 var(--space-8);
  /* In px, not ch: the serif's zero width sets ch, so the wrap would shift with
     any change of family. This width keeps the heading on three lines. */
  max-width: 520px;
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
/* Inline with the step heading, so the description below starts flush with the
   number instead of being indented past it. */
.step__num {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  margin-right: 8px;
}
.step__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: var(--text-slate);
}
.step__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-soft);
  max-width: 520px;
}
.process__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 3px;
}

/* ============ STATS STRIP ============ */
.stats-strip {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-4) clamp(20px, 5vw, 64px) var(--space-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  text-align: center;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.stat__num {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw + 0.5rem, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-soft);
}
.stat__num sup {
  font-size: 0.4em;
  font-weight: 400;
  vertical-align: super;
  margin-left: 4px;
}
.stat__label {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ============ TESTIMONIALS ============ */
.testimonials {
  width: 100%;
  margin: 0 auto;
  padding: var(--space-8) clamp(20px, 5vw, 64px) var(--space-9);
}
.testimonials__strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  max-width: 1280px;
  margin: 0 auto var(--space-7);
}
.testimonials__strip img {
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 312;
  object-fit: cover;
}
.testimonials__head {
  max-width: var(--max-w);
  margin: 0 auto var(--space-6);
  text-align: left;
}
.testimonials__head .eyebrow { margin-bottom: var(--space-3); color: var(--text-slate); }
.testimonials__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-slate);
  margin: 0;
  max-width: 22ch;
}
.testimonials__grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.testimonial {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.testimonial__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}
.testimonial__quote {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 30px;
  color: var(--text);
  max-width: 42ch;
}
.testimonial__name {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-top: var(--space-1);
}

/* ============ CONTACT ============ */
.contact {
  width: 100%;
  margin: 0;
  padding: var(--space-7) clamp(20px, 5vw, 64px) var(--space-9);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
.contact .eyebrow {
  color: var(--text-slate);
  margin-bottom: var(--space-3);
}
.contact__title {
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.6vw + 0.5rem, 2.25rem);
  line-height: 1.2;
  color: var(--text-slate);
  margin: 0 0 var(--space-5);
  max-width: 26ch;
}
.contact__media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: 3px;
  object-fit: cover;
}
.contact__panel {
  background: transparent;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form {
  display: grid;
  gap: var(--space-3);
}
.form__row {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
.form__field {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #D9D4C8;
  border-radius: 2px;
  padding: 0 18px;
  min-height: 56px;
  transition: border-color .2s;
}
.form__field:focus-within {
  border-color: var(--text);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.form__field input,
.form__field select,
.form__field textarea {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  resize: vertical;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
}
.form__field input::placeholder,
.form__field textarea::placeholder {
  color: var(--text-soft);
  opacity: 1;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 400;
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
}
.form__field select {
  color: var(--text-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%236B6B6B' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 12px;
  padding-right: 24px;
  cursor: pointer;
}
.form__field select:valid { color: var(--text); }
.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--space-3);
}
.btn--dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--text);
  color: #fff;
  padding: 14px 36px;
  border: 1px solid var(--text);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease;
}
.btn--dark:hover { background: #000; }
.form__success {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-deep);
}

/* ============ FOOTER ============ */
.footer {
  padding: var(--space-6) clamp(20px, 5vw, 64px);
  background: var(--bg);
}
.footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
  text-align: center;
}
.footer__logo { color: var(--text-soft); }
.footer__socials {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__socials a {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-soft);
  transition: color .2s, opacity .2s;
}
.footer__socials a:hover { color: var(--text-mid); }
.footer__address {
  font-style: normal;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.footer__address strong {
  color: var(--text-soft);
  font-weight: 500;
  display: block;
  margin-bottom: 2px;
}
.footer__phone-label {
  margin: 0 0 4px;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.footer__phone-num {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}

/* ============ Mobile nav (toggle) ============ */
/* Capped below the desktop switch on purpose: `.nav__menu.is-open` outweighs
   the plain `.nav__menu` rule that restores the inline row, so left unscoped
   the open panel would survive a widening viewport. */
@media (max-width: 991.98px) {
  .nav__menu.is-open {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    /* Tighter than the inline row: at 0.22em the four items overflow the
       narrowest phones and break onto a second line. */
    letter-spacing: 0.1em;
    margin-top:15px;

    position: absolute;
    top: 100%;
    /* Negative insets cancel the hero side padding, so the band reaches both
       screen edges while the links stay on the text margin. */
    left: calc(-1 * var(--hero-pad-x));
    right: calc(-1 * var(--hero-pad-x));
    margin-right: 0;
    padding: var(--space-3) var(--hero-pad-x);

    /* Tinted veil, not a solid panel: the hero photo stays visible through it. */
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 5;
  }

  /* Laid out in a row the links are only about 22px tall. The hit area is
     grown with a pseudo element so the band keeps its height, and stays narrow
     sideways so neighbouring targets cannot overlap inside the gap. */
  .nav__menu.is-open a { position: relative; }
  .nav__menu.is-open a::after {
    content: "";
    position: absolute;
    inset: -14px -4px;
  }
}

/* ============ HERO ENTRANCE ============
   Keyframes here, not the scroll reveal below. The wordmark, the burger and the
   menu links are each hidden at one width or the other, so they would never
   cross the viewport and would hold the reveal's zero opacity the moment they
   came back. Fill mode is backwards: once the animation ends, every element
   falls back to its own rules and keeps its hover. */
@keyframes enter-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: none; }
}
@keyframes enter-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .anim .nav__logo,
  .anim .nav__toggle,
  .anim .nav__menu a,
  .anim .hero__eyebrow,
  .anim .hero__title {
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-fill-mode: backwards;
  }
  .anim .nav__logo     { animation-name: enter-left; }
  .anim .hero__title   { animation-name: enter-left;  animation-delay: 0.3s; }
  .anim .nav__toggle   { animation-name: enter-right; }
  .anim .hero__eyebrow { animation-name: enter-right; animation-delay: 0.18s; }
  .anim .nav__menu a   { animation-name: enter-right; }
  .anim .nav__menu li:nth-child(2) a { animation-delay: 0.08s; }
  .anim .nav__menu li:nth-child(3) a { animation-delay: 0.16s; }
  .anim .nav__menu li:nth-child(4) a { animation-delay: 0.24s; }
}

/* ============ REVEAL ON SCROLL ============
   Declared in the markup with data-reveal, so adding a section needs no change
   here and none in the script. */
@media (prefers-reduced-motion: no-preference) {
  .anim [data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-out, transform 1s ease-out;
  }
  .anim [data-reveal="left"]  { transform: translateX(-40px); }
  .anim [data-reveal="right"] { transform: translateX(40px); }
  .anim [data-reveal="fade"],
  .anim [data-reveal="zoom"]  { transform: none; }
  .anim [data-reveal].is-visible { opacity: 1; transform: none; }

  /* The photo settles out of a slight enlargement. Driven by `scale` rather than
     `transform` so it multiplies with the hover zoom instead of replacing it. */
  .anim [data-reveal="zoom"] img {
    scale: 1.08;
    transition: scale 1.6s ease-out;
  }
  .anim [data-reveal="zoom"].is-visible img { scale: 1; }
}

/* The enlarged photo has to be clipped by its own frame; the card wrappers
   already clip, these three did not. */
.about__media,
.process__media,
.contact__media {
  overflow: hidden;
  border-radius: 3px;
}

/* ============================
   BREAKPOINTS
   ============================ */

/* Tablet ≥ 640px */
@media (min-width: 576px) {
  .featured__grid { grid-template-columns: repeat(2, 1fr); }
  .lifestyle__grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials__strip { grid-template-columns: repeat(4, 1fr); }
  .form__row { grid-template-columns: 1fr 1fr; }
}

/* Desktop ≥ 1024px */
@media (min-width: 992px) {
  .nav__menu { display: flex; }
  .nav__toggle { display: none; }

  .featured__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .about {
    grid-template-columns: minmax(0, 380px) 1fr;
    grid-template-areas:
      "head  head"
      "copy  media"
      "press press";
    gap: var(--space-7);
  }
  .about__copy { align-self: start; }
  /* Runs off the right page edge: the negative margin cancels the page padding
     plus the room the centred column leaves beside it. */
  .about__media {
    margin-right: calc(-1 * (var(--page-pad) + (100vw - min(100vw, var(--max-w))) / 2));
  }
  .about__media img { aspect-ratio: 1.83; }
  /* Row gap plus this margin reproduce the single 128px step the press strip
     had before the heading became its own row. */
  .press { margin-top: var(--space-7); }

  .experience {
    grid-template-columns: 1.1fr 0.85fr;
    gap: var(--space-7);
    align-items: center;
  }
  /* The column is centred against the gallery, so the extra bottom margin
     lifts the text by half its value rather than adding space below. The
     subtraction cancels the accordion's top margin, which would otherwise
     make the column taller and pull the heading back up. */
  .experience__content {
    padding-top: 0;
    margin-bottom: calc(var(--space-9) - var(--space-6));
  }

  .lifestyle__grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }

  .process {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
  }
  .stats-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

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

  .contact {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-6);
    padding-left: 0;
  }
  .contact__panel { padding: var(--space-6) var(--space-7); }

  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-7);
    text-align: left;
  }
  /* Offset rather than a negative margin: a margin would free space that
     space-between hands back to the row, dragging the other items left too. */
  .footer__logo {
    flex-shrink: 0;
    position: relative;
    left: calc(var(--space-6) * -1);
  }
  .footer__socials { justify-content: center; flex-shrink: 0; }
  .footer__address { text-align: left; flex: 1; max-width: 32ch; }
  .footer__phone { text-align: right; flex-shrink: 0; }
}

/* Large desktop ≥ 1280px */
@media (min-width: 1200px) {
  .hero { padding-bottom: var(--space-8); }
  .featured, .experience, .lifestyle, .contact { padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .process { padding-top: var(--space-9); padding-bottom: var(--space-4); }
  .stats-strip { padding-top: var(--space-4); padding-bottom: var(--space-9); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ PHONE REFINEMENTS ============
   Touch areas and minimum type sizes. The hit area is grown with a pseudo
   element so nothing moves; only the sizes that fell below 13px are raised. */
@media (max-width: 767.98px) {
  .footer__socials a,
  .footer__phone-num,
  .nav__logo,
  .link-arrow { position: relative; }
  .footer__socials a::after,
  .footer__phone-num::after,
  .nav__logo::after,
  .link-arrow::after {
    content: "";
    position: absolute;
    inset: -13px;
  }
  .nav__toggle { padding: 14px 10px; box-sizing: content-box; }

  .eyebrow { font-size: 13px; }
  .press__label { font-size: 13px; }
  .footer__phone-label { font-size: 13px; }
  .stat__label { font-size: 13px; }
}