/* ============================================================
   JMREY · Website — site styles
   Pixel-proportional to the reference home (1055 × 1491).
   Sections preserve their relative height; type and spacing
   scale with viewport width via clamp().
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: var(--font-sans);
  color: var(--fg-2);
  font-size: var(--fz-body);
  line-height: 1.6;
  /* Air around the page when the window grows wider than the
     canvas (page is capped at 1100px). */
  background: #ECE7DD;
}
.page {
  max-width: 935px;
  margin: 0 auto;
  background: var(--bg);
  overflow-x: hidden;
}

/* ============================================================
   HEADER  — reference: ~110px tall on 1055px wide canvas
   ============================================================ */
.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  padding: clamp(4px, 0.6vw, 8px) clamp(16px, 3vw, 36px);
  background: var(--bg);
}
.site-logo { display: inline-block; border: 0; line-height: 0; }
.site-logo img {
  height: clamp(46px, 4.8vw, 64px);
  width: auto;
  display: block;
}

.site-nav {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  justify-content: center;
}
.site-nav a {
  font-family: var(--font-sans);
  font-size: clamp(9.5px, 0.95vw, 11.5px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-1);
  border-bottom: none;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--accent-strong); }

.site-cta {
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.85vw, 10px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  padding: clamp(8px, 1vw, 12px) clamp(17px, 2.1vw, 27px);
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out-soft),
              color var(--dur-base) var(--ease-out-soft);
}
.site-cta:hover { background: var(--accent); color: #fff; }

.site-burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.site-burger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--fg-1); margin: 5px 0;
}

/* ============================================================
   HERO  — reference: 1055 × 660 px → aspect ratio 1.6:1
   Background photo fills the section; text overlays the left.
   ============================================================ */
.hero {
  /* Saturated gold used only in the hero (tagline + triplet)
     for extra contrast against the warm photo backdrop. */
  --accent-hero: #9C6620;
  position: relative;
  width: 100%;
  aspect-ratio: 1055 / 347;
  /* Floor on height so the text never overflows the section
     when the viewport is narrow. */
  min-height: 310px;
  /* Same colour as the left edge of both hero photos —
     so the seam between bg colour and photo is invisible. */
  background-color: #EFE9E5;
  /* Image is shown at full height (no crop), aligned to the right.
     If the hero is wider than the photo's natural ratio, the bg
     colour above fills the left side seamlessly. */
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.hero--male   { background-image: url('hero-male.png'); }
.hero--female { background-image: url('hero-female.png'); }

.hero-text {
  position: absolute;
  top: 0; left: 0;
  width: 56%;
  height: 100%;
  /* Text block indented further from the left so it sits in
     the optical center of the ivory side, not flush with the
     hero edge. */
  padding: 0 clamp(20px, 4.5vw, 78px) 0 clamp(20px, 6.5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

/* Headline — reference at 1055px wide → ~58px */
.hero-headline {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(20px, 3.9vw, 42px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0;
}

.hero .rule-gold {
  width: clamp(18px, 2.25vw, 28px);
  height: 1px;
  background: var(--accent);
  border: 0;
  margin: clamp(18px, 2.5vw, 30px) 0 clamp(16px, 2.2vw, 26px);
}

.hero-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 2.4vw, 27px);
  line-height: 1.05;
  color: var(--accent-hero);
  margin: 0 0 clamp(14px, 2vw, 24px);
  letter-spacing: -0.005em;
}

.hero-lede {
  font-family: var(--font-sans);
  font-size: clamp(11px, 1.3vw, 14px);
  color: var(--fg-1);
  margin: 0 0 clamp(16px, 2.15vw, 29px);
  line-height: 1.55;
  max-width: 44ch;
}

.hero-triplet {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 1.9vw, 22px);
  color: var(--accent-hero);
  margin: 0;
}
.hero-triplet span { margin-right: 6px; }

/* ============================================================
   QUESTION  — reference: 1055 × 210 → ~20% of hero height
   ============================================================ */
.question {
  background: #F8F7F5;
  text-align: center;
  padding: clamp(10px, 1.4vw, 18px) 24px clamp(10px, 1.4vw, 18px);
}
.question .rule-gold.center {
  display: inline-block;
  width: clamp(36px, 4.5vw, 55px);
  height: 1px;
  background: var(--accent);
  border: 0;
  margin: 0 auto clamp(6px, 0.8vw, 10px);
}
.question-headline + .rule-gold.center {
  margin: clamp(6px, 0.8vw, 10px) auto 0;
}
.question-headline {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(14px, 2.35vw, 26px);
  line-height: 0.96;
  color: var(--fg-1);
  margin: 0 auto;
  max-width: 32ch;
  letter-spacing: -0.005em;
}

/* ============================================================
   TEAM  — reference: row of 4 portraits, square-ish, gap ~16px
   ============================================================ */
.team {
  background: #F8F7F5;
  padding: 0 clamp(20px, 4vw, 56px) clamp(8px, 1vw, 14px);
}
.team-grid {
  display: grid;
  /* minmax(0, 1fr) forces all 4 columns to equal width regardless
     of intrinsic content size — otherwise a longer name with
     `white-space: nowrap` widens its column. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.45vw, 22px);
  max-width: 600px;
  margin: 0 auto;
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.3vw, 4px);
}
.team-photo {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: 2px;
  background: var(--jmrey-ivory-200);
  filter: grayscale(1) contrast(1.02);
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.team-photo .team-photo-img--john {
  object-position: center 32%;
}
.team-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(9.5px, 1vw, 11px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-1);
  line-height: 1.1;
  margin: clamp(4px, 0.5vw, 7px) 0 0;
  text-align: center;
  white-space: nowrap;
}
.team-role {
  font-family: var(--font-sans);
  font-size: clamp(11px, 1.2vw, 13px);
  color: var(--fg-3);
  line-height: 1.1;
  margin: 0;
  text-align: center;
}

/* ============================================================
   CONVERTIMOS  — reference: navy band ~210px tall on 1055 wide
   ============================================================ */
.convertimos {
  background: var(--jmrey-navy-900);
  color: var(--fg-on-dark);
  padding: clamp(14px, 1.6vw, 22px) clamp(20px, 5vw, 80px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(18px, 3vw, 42px);
  position: relative;
}
.convertimos-text { display: block; }
.convertimos-headline {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(16px, 2.2vw, 26px);
  line-height: 1.18;
  margin: 0;
  color: #FFFFFF;
  letter-spacing: -0.005em;
  max-width: 32ch;
}
.convertimos-rule {
  /* Sits flush under the headline. */
  width: clamp(36px, 4.5vw, 55px);
  height: 1px;
  background: var(--accent);
  border: 0;
  margin: 8px 0 0;
}
.convertimos-cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(7px, 0.9vw, 11px);
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.9vw, 11px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: clamp(7px, 0.9vw, 10px) clamp(13px, 1.75vw, 22px);
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out-soft),
              color var(--dur-base) var(--ease-out-soft);
}
.convertimos-cta .arr { transition: transform var(--dur-base) var(--ease-out-soft); }
.convertimos-cta:hover { background: var(--accent); color: #fff; }
.convertimos-cta:hover .arr { transform: translateX(3px); }

.convertimos-rule {
  position: absolute;
  bottom: clamp(14px, 2vw, 24px);
  left: clamp(20px, 5vw, 80px);
  width: 48px;
  height: 2px;
  background: var(--accent);
  border: 0;
  margin: 0;
  display: none; /* superseded by the inline rule below the headline */
}

/* ============================================================
   VERY LARGE SCREENS — page is already capped at 1100px so on
   anything wider we just see ivory air on each side. No special
   rules needed beyond the cap on .page above.
   ============================================================ */

@media (min-width: 761px) {
  .page {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }

  .hero {
    aspect-ratio: auto;
    height: clamp(310px, calc(100svh - 590px), 400px);
    min-height: 310px;
  }

  .page > main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .question {
    flex: 1 1 auto;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .team {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    padding-bottom: 40px;
  }

  .convertimos {
    margin-top: 0;
  }
}

@media (min-width: 1100px) and (max-width: 1700px) {
  .hero {
    height: clamp(350px, calc(100svh - 545px), 400px);
    min-height: 350px;
  }
}

@media (min-width: 761px) and (max-width: 1099px) {
  .question .rule-gold.center {
    margin-bottom: clamp(18px, 2.4vw, 28px);
  }

  .question-headline + .rule-gold.center {
    margin-top: clamp(18px, 2.4vw, 28px);
    margin-bottom: 0;
  }

  .team-grid {
    width: 100%;
  }

  .question-headline {
    font-size: clamp(28px, 4.7vw, 52px);
  }

  .convertimos {
    padding-block: clamp(28px, 3.2vw, 44px);
  }

  .convertimos-headline {
    font-size: clamp(24px, 3.3vw, 39px);
  }
}

/* ============================================================
   TABLET — stack hero photo BELOW the text
   ============================================================ */
@media (max-width: 760px) {
  .site-nav { display: none; }
  .site-nav.is-open {
    display: flex;
    position: absolute;
    top: 80px; left: 0; right: 0;
    background: var(--bg);
    flex-direction: column;
    padding: 24px clamp(20px, 4vw, 64px);
    gap: 18px;
    box-shadow: var(--shadow-sm);
    z-index: 5;
  }
  .site-burger { display: inline-flex; flex-direction: column; }
  .site-cta { padding: 12px 20px; font-size: 11px; }

  /* On tablet/mobile: drop the fixed aspect-ratio so the hero
     grows to fit text. Text occupies the left ~60%; photo bg
     fills the remaining right side (aligned right, auto height
     so the person doesn't stretch). */
  .hero {
    aspect-ratio: auto;
    min-height: 390px;
  }
  .hero-text {
    position: relative;
    width: 60%;
    height: auto;
    padding: clamp(32px, 5.5vw, 52px) clamp(16px, 4vw, 28px);
  }

  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .convertimos { grid-template-columns: 1fr; gap: 20px; }
  .convertimos-cta { justify-self: start; }
}

@media (max-width: 520px) {
  .site-logo img { height: 40px; }
  .site-cta { display: none; }
  .hero {
    min-height: 460px;
    background-position: 58% center;
  }
  .hero-text {
    width: 64%;
    padding: clamp(40px, 7vw, 64px) clamp(16px, 4vw, 28px);
  }
  .hero-headline    { font-size: 22px; }
  .hero-tagline     { font-size: 18px; }
  .hero-lede        { font-size: 13px; }
  .hero-triplet     { font-size: 16px; }
  .question-headline{ font-size: 20px; }
  .team-name        { font-size: 10.5px; }
  .team-role        { font-size: 12px; }
  .convertimos { gap: 28px; }
  .convertimos-headline { font-size: 22px; }
  .convertimos-cta { font-size: 11.5px; padding: 16px 28px; }
}