/* ============================================================
   Solvynt — Brand V4
   Ink Navy #162235 · Ignition Orange #C2572D · Warm White #FAFAF8 · Black
   Bodoni Moda (display) + Inter (body)
   ============================================================ */

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

:root {
  --navy:    #162235;
  --orange:  #C2572D;
  --warm:    #FAFAF8;
  --black:   #000000;
  --navy-70: rgba(22,34,53,0.72);
  --navy-40: rgba(22,34,53,0.42);

  --font-display: 'Bodoni Moda', Georgia, serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --container: 1180px;
  --container-media: 1760px;
  --pad: clamp(24px, 6vw, 90px);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--warm);
  color: var(--navy);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

.section-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  position: relative;
  z-index: 2;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.btn-orange {
  background: var(--orange);
  color: var(--warm);
  padding: 0.9em 2em;
  font-size: 0.85rem;
}
.btn-orange:hover { background: #a84a25; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(194,87,45,0.35); }

/* ---------- Section headings ---------- */
.section-heading {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.section-heading::before {
  content: '';
  display: inline-block;
  width: 34px;
  height: 2px;
  background: var(--orange);
  flex-shrink: 0;
}
.section-heading.dark { color: var(--navy); }

.section-heading.heading-lg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 4.65vw, 3.55rem);
  letter-spacing: 0.01em;
  line-height: 1.12;
  gap: 1.4rem;
  margin-bottom: 1.5rem;
}
.section-heading.heading-lg::before { width: 44px; height: 3px; margin-top: 0.35em; align-self: flex-start; }

#moment .section-heading.heading-lg,
#philosophy .section-heading.heading-lg,
#contact .section-heading.heading-lg {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
#moment .section-heading.heading-lg::before,
#philosophy .section-heading.heading-lg::before,
#contact .section-heading.heading-lg::before {
  margin-top: 0;
}

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 1rem 0;
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
.site-nav.scrolled {
  background: rgba(22,34,53,0.92);
  backdrop-filter: blur(8px);
  padding: 0.6rem 0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.nav-inner {
  max-width: var(--container-media);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.nav-logo { flex-shrink: 0; }
.nav-logo img { height: 92px; width: auto; transition: height 0.3s ease; }
.site-nav.scrolled .nav-logo img { height: 64px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  margin-left: auto;
}
.nav-links a {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm);
  font-weight: 600;
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 0.7; }
.nav-cta { flex-shrink: 0; }
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  margin-left: auto;
}
.nav-burger span { display: block; width: 100%; height: 2px; background: var(--warm); transition: transform 0.25s, opacity 0.25s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy);
}
.hero-media, .moment-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(22,34,53,0.55) 0%, rgba(22,34,53,0.35) 30%, rgba(22,34,53,0.55) 75%, rgba(22,34,53,0.85) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-media);
  margin: 0 auto;
  padding: 8.5rem var(--pad) 4rem;
  width: 100%;
}
.hero-mark { width: clamp(200px, 22vw, 320px); margin-left: auto; }
.hero-mark img { width: 100%; height: auto; max-width: 320px; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.35)); }

/* Copy is positioned against the VIDEO FRAME itself (a direct child of .hero,
   which is full-bleed, same coordinate space as the video) rather than inside
   the padded/centered .hero-inner. That's what lets "left" below be pinned to
   a fixed percentage of the actual video width — a guaranteed clearance from
   the subject regardless of how narrow the padded container gets — while
   "right" is calculated to land exactly on the nav's own content edge. */
.hero-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  left: calc(max(0px, (100vw - var(--container-media)) / 2) + var(--pad));
  right: 34vw;
  text-align: left;
}
.hero-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  color: var(--warm);
  line-height: 1.4;
  margin-bottom: 1.4rem;
  max-width: 480px;
}
.hero-quote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(250,250,248,0.7);
  margin-top: 0.9rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--orange);
  width: fit-content;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  line-height: 1.14;
  color: var(--warm);
  margin: 4.8rem 0 1.4rem;
}
.hero-tagline {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  white-space: nowrap;
  color: rgba(250,250,248,0.88);
}
.tagline-accent {
  font-weight: 700;
  color: var(--warm);
  border-bottom: 2px solid var(--orange);
  padding-bottom: 0.2em;
}

/* ============================================================
   THE MOMENT
   ============================================================ */
.moment {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy);
  padding: 6rem 0;
}
.moment-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(22,34,53,0.94) 0%, rgba(22,34,53,0.88) 38%, rgba(22,34,53,0.55) 60%, rgba(22,34,53,0.15) 78%, rgba(22,34,53,0) 100%);
}
.moment .section-inner { max-width: var(--container-media); }
.moment-inner { width: 100%; }
.moment-copy { max-width: min(56%, 720px); color: var(--warm); }
.moment-copy p { font-size: clamp(1.05rem, 1.35vw, 1.2rem); margin-bottom: 1.3rem; color: rgba(250,250,248,0.92); }
.moment-copy sup { font-weight: 700; }
.moment-copy .citation {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--orange);
  font-size: 0.95rem;
  margin-top: 1.6rem;
}

/* ============================================================
   PHILOSOPHY
   ============================================================ */
.philosophy {
  position: relative;
  background: var(--warm);
  padding: 7rem 0;
  overflow: hidden;
}
.philosophy .section-inner {
  max-width: var(--container-media);
  margin-left: max(clamp(24px, 3vw, 60px), calc((100vw - var(--container-media)) / 2));
  margin-right: auto;
}
.watermark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.watermark-contact { top: -280px; left: -9%; width: 62%; max-width: 980px; opacity: 0.16; }
.watermark-philosophy { top: -100px; left: -9%; width: 67%; max-width: 950px; opacity: 0.07; transform: rotate(9deg); }

.philosophy-inner {
  display: grid;
  grid-template-columns: minmax(480px, 0.62fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  position: relative;
  z-index: 1;
}
.philosophy-left { width: fit-content; }
.philosophy-right { margin-top: clamp(3.5rem, 2rem + 3.2vw, 5.2rem); }
.philosophy-mark-wrap { position: relative; width: 68%; max-width: 260px; margin: 1rem auto 0; }
.philosophy-mark {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin-top: 0;
}
.point-card {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  background: var(--warm);
  border: 1px solid rgba(22,34,53,0.12);
  border-radius: 6px;
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.4rem;
}
.point-icon { width: 46px; height: 46px; flex-shrink: 0; }
.point-card p { font-size: clamp(1rem, 1.25vw, 1.15rem); color: var(--navy); font-weight: 500; }
.payoff-line {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.575rem, 1.75vw, 2.2rem);
  line-height: 1.3;
  color: var(--navy);
  margin-top: 0;
  padding-top: 2rem;
  max-width: none;
}
.payoff-word {
  color: var(--orange);
  font-style: italic;
}
/* Below 1440px the payoff line's available width (either the squeezed
   right column of the 2-col grid, or the full-width single-column mobile
   layout) is narrow enough relative to the clamp's flat minimum that
   "...PATTERN RECOGNITION GAME." wraps with a lone orphan word on its
   own line. A flat, smaller size here keeps every wrap balanced. */
@media (max-width: 1439px) {
  .payoff-line { font-size: 1.05rem; }
}

/* ============================================================
   PEOPLE
   ============================================================ */
.people {
  background: var(--navy);
  padding: 7rem 0;
}
.people .section-inner {
  max-width: var(--container-media);
  margin-left: max(clamp(24px, 3vw, 60px), calc((100vw - var(--container-media)) / 2));
  margin-right: auto;
}
.people-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.people-right { margin-top: clamp(8rem, 5rem + 5vw, 11rem); }
.people-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--warm);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.18;
  margin-bottom: 2rem;
}
.people-title-img { line-height: 0; }
.people-title-img img { display: block; width: 100%; max-width: 430px; height: auto; }
.world-map { width: 100%; max-width: 620px; }
.people-right p { color: rgba(250,250,248,0.92); font-size: clamp(0.95rem, 1.15vw, 1.05rem); margin-bottom: 1.4rem; text-align: justify; text-wrap: pretty; }

/* ============================================================
   CLOSING
   ============================================================ */
.closing {
  position: relative;
  background: var(--warm);
  padding: 6rem 0;
}
.closing .section-inner {
  max-width: var(--container-media);
  margin-left: max(clamp(24px, 3vw, 60px), calc((100vw - var(--container-media)) / 2));
  margin-right: auto;
}
.closing-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.closing-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  font-size: clamp(2.65rem, 4.65vw, 3.75rem);
  line-height: 1.2;
}
/* Two swappable break points: default reads "Ready to see / how this can
   work for you?"; the tablet single-column range (481-899px) swaps to
   "Ready to see how this / can work for you?" for a more even 2-line split. */
.closing-break-b { display: none; }
.closing-cta { flex-shrink: 0; padding: 1.1em 2.6em; font-size: 0.9rem; }
.closing-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; flex-shrink: 0; }
.closing-social { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.closing-social-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(22,34,53,0.5);
}
.closing-social-icons { display: flex; gap: 0.8rem; }
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(194,87,45,0.45);
  color: var(--navy);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.social-icon svg { width: 17px; height: 17px; }
.social-icon:hover { border-color: var(--orange); color: var(--orange); background: rgba(194,87,45,0.08); }

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
.contact {
  position: relative;
  background: var(--black);
  padding: 7rem 0 0;
  overflow: hidden;
}
.contact .section-inner {
  max-width: var(--container-media);
  margin-left: max(clamp(24px, 3vw, 60px), calc((100vw - var(--container-media)) / 2));
  margin-right: auto;
}
.contact-inner {
  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding-bottom: 5rem;
}
.contact .section-heading.heading-lg { margin-bottom: 0; }

.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--navy);
  background: var(--warm);
}
.contact-form select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23162235'><path d='M5 7l5 6 5-6z'/></svg>"); background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 14px; }
.contact-form textarea { min-height: 120px; resize: vertical; font-family: var(--font-body); }
.contact-form ::placeholder { color: rgba(22,34,53,0.55); }
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--warm);
  font-size: 0.9rem;
}
.checkbox-row input { width: 16px; height: 16px; accent-color: var(--orange); flex-shrink: 0; }
.form-checkbox-group { display: flex; flex-direction: column; gap: 0.6rem; }
.submit-btn { align-self: flex-start; margin-top: 0.4rem; padding: 1em 3.2em; }

.form-state-hidden { display: none; }
.success-message-box {
  max-width: 480px;
  padding: 2.5rem 2rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  text-align: center;
}
.success-message-box .success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--warm);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.success-message-box h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--warm);
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}
.success-message-box p { color: rgba(250,250,248,0.8); font-size: 0.95rem; }

.site-footer { position: relative; z-index: 2; background: var(--black); border-top: 1px solid rgba(255,255,255,0.12); }
.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}
.footer-logo { height: 62px; width: auto; justify-self: start; }
.footer-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--warm);
  font-size: 0.95rem;
  line-height: 1.5;
  justify-self: center;
  text-align: center;
}
.footer-links-wrap { justify-self: end; text-align: right; }
.footer-links { font-size: 0.8rem; color: rgba(255,255,255,0.75); margin-bottom: 0.4rem; }
.footer-links a:hover { color: var(--warm); }
.footer-copy { font-size: 0.72rem; color: rgba(255,255,255,0.4); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Below this width there isn't enough room to keep the copy clear of the
   subject AND flush against the CTA's right edge at a legible size, so the
   hero drops to a stacked layout: icon on top, full-width copy below it
   (over his torso/the background, never his face). Kept separate from the
   900px breakpoint below, which is about the nav and other sections.
   (Threshold is 1600, not 1300: the side-by-side copy column is pinned
   between the subject's edge and the nav's right edge, and that gap is
   actually narrower just above 1300px than the stacked column is below
   it, so the stacked layout is kept a bit longer to avoid a cramped
   title there.) */
@media (max-width: 1600px) {
  .hero { flex-direction: column; padding: 0; }
  .hero-inner { padding: 13rem var(--pad) 0; }
  .hero-mark { width: 45%; max-width: 240px; margin-left: 0; }
  .hero-copy {
    position: static;
    top: auto; left: auto; right: auto;
    transform: none;
    text-align: left;
    max-width: 640px;
    padding: 2rem var(--pad) 4rem;
  }
  .hero-quote { max-width: 100%; margin-left: 0; }
  .hero-quote cite { margin-left: 0; }
  .hero-title { font-size: clamp(2rem, 4.2vw, 2.5rem); margin-top: 1.8rem; }
  .hero-tagline { white-space: normal; }
}

@media (max-width: 900px) {
  .nav-logo img, .site-nav.scrolled .nav-logo img { height: 56px; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .site-nav.menu-open .nav-links {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: rgba(22,34,53,0.98);
    padding: 1.5rem var(--pad) 2rem;
    gap: 1.2rem;
  }
  .site-nav.menu-open .nav-links .nav-cta {
    margin-top: 0.6rem;
  }

  .hero-mark { width: 55%; max-width: 220px; }

  .moment { min-height: auto; padding: 5rem 0; }
  .moment-scrim { background: linear-gradient(180deg, rgba(22,34,53,0.4) 0%, rgba(22,34,53,0.92) 42%, rgba(22,34,53,0.98) 100%); }
  .moment-copy { max-width: 100%; }

  .philosophy-inner, .people-inner, .contact-inner { grid-template-columns: 1fr; }
  .philosophy-mark-wrap { width: 46%; max-width: 200px; margin: 0 auto 2rem; }
  .philosophy-left { text-align: left; margin-bottom: 2rem; }
  .philosophy-right { margin-top: 0; }
  .watermark-philosophy { top: 14%; left: 50%; transform: translateX(-50%); width: 78%; max-width: 340px; }

  .people-left { margin-bottom: 2.5rem; }
  .people-right { margin-top: 0; }
  .world-map { max-width: 100%; margin-top: 1.5rem; }
  /* At mobile/tablet widths "PHILOSOPHY" and "THE MOMENT" sit at the
     heading-lg clamp's floor (~37px), but this headline image only
     scaled down to the single-column width (~430px cap), reading
     noticeably larger than the other section titles. Match the scale. */
  .people-title-img img { max-width: 270px; }

  .watermark-contact { top: -70px; left: -12%; width: 77%; max-width: 364px; }

  .closing-inner { flex-direction: column; align-items: flex-start; }
  /* At the single-column layout's full width, "how this can work for you?"
     just barely wraps with a lone "You?" orphaned on its own 3rd line
     (worst around 700-850px). Sizing down keeps it to a clean 2 lines. */
  .closing-title { font-size: 2.25rem; }

  .contact-inner { padding-bottom: 3rem; }
  .form-row { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 1.2rem; }
  .footer-logo, .footer-tagline, .footer-links-wrap { justify-self: center; }
}

@media (min-width: 580px) and (max-width: 899px) {
  .closing-break-a { display: none; }
  .closing-break-b { display: block; }
}

@media (max-width: 480px) {
  .hero-quote { font-size: 1.05rem; }
  /* At the closing-title's clamp floor, "Ready to see" itself no longer
     fits on one line on narrow phones, so the forced <br> plus a second
     wrap produces 5 uneven lines with an orphan word. Sizing down here
     restores the clean 3-line balance seen on slightly wider screens. */
  .closing-title { font-size: 2rem; }
}