:root {
  --teal: #35B19F;
  --blue: #3B629A;
  --burgundy: #870058;
  --brown: #6F3A27;
  --navy: #102542;
  --ink: #1B263B;
  --muted: #66727E;
  --line: #DDE7EA;
  --soft: #F7FAFA;
  --white: #FFFFFF;
  --ice: #ECF7F5;
  --blue-soft: #EEF4FB;
  --plum-soft: #F7EEF4;
  --sand-soft: #F8F2EF;
  --shadow: 0 18px 45px rgba(16, 37, 66, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Seaford, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--soft);
  line-height: 1.6;
}

a { color: inherit; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  padding: 18px 6vw;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(221, 231, 234, 0.9);
}

.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  width: 100%;
  background: linear-gradient(90deg, var(--teal), var(--blue), var(--burgundy), var(--brown), var(--navy));
}

.brand img {
  width: 188px;
  height: auto;
  display: block;
}

.nav {
  display: flex;
  gap: 28px;
  font-size: 0.93rem;
  color: var(--navy);
}

.nav a {
  text-decoration: none;
  font-weight: 700;
  opacity: 0.85;
}

.nav a:hover {
  opacity: 1;
  color: var(--teal);
}

.hero {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 735px;
  gap: 54px;
  align-items: center;
  padding: 76px 6vw 70px;
  background:
    radial-gradient(circle at 78% 8%, rgba(53, 177, 159, 0.28), transparent 28%),
    radial-gradient(circle at 8% 30%, rgba(135, 0, 88, 0.12), transparent 28%),
    linear-gradient(135deg, var(--navy) 0%, #143153 32%, #F7FAFA 32.2%, #FFFFFF 100%);
}

.hero-copy {
  max-width: 820px;
  background: rgba(255,255,255,0.94);
  padding: 48px;
  border-radius: 34px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.75);
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 900;
}

h1, h2, h3, h4 {
  color: var(--navy);
  line-height: 1.08;
  margin: 0;
}

h1 {
  font-size: clamp(2.65rem, 4.95vw, 5.3rem);
  letter-spacing: -0.055em;
}

h2 {
  font-size: clamp(2.1rem, 3.3vw, 4rem);
  letter-spacing: -0.04em;
}

h3 {
  font-size: 1.55rem;
  letter-spacing: -0.02em;
}

h4 { font-size: 1.02rem; }

.lead {
  margin: 30px 0 0;
  font-size: clamp(1.1rem, 1.55vw, 1.38rem);
  color: #3B4B5A;
  max-width: 850px;
}

.hero-actions {
  margin-top: 38px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  font-weight: 900;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.button.primary {
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: var(--white);
  box-shadow: 0 10px 24px rgba(59, 98, 154, 0.22);
}

.button.primary:hover {
  background: linear-gradient(135deg, var(--blue), var(--navy));
}

.button.secondary {
  border-color: rgba(16, 37, 66, 0.20);
  color: var(--navy);
  background: rgba(247,250,250,0.9);
}

.button.secondary:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.hero-image {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
  border: 10px solid rgba(255,255,255,0.95);
}

.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(16,37,66,0.18));
  pointer-events: none;
}

.hero-image img {
  display: block;
  width: 100%;
  height: min(620px, 72vh);
  object-fit: cover;
  object-position: center top;
}

.credibility-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 6vw;
  transform: translateY(-30px);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
  border: 1px solid rgba(221,231,234,0.95);
}

.credibility-strip div {
  background: var(--white);
  padding: 28px;
  min-height: 122px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--line);
  position: relative;
}

.credibility-strip div:first-child { border-left: 0; }

.credibility-strip div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 7px;
  width: 100%;
}

.credibility-strip div:nth-child(1)::before { background: var(--teal); }
.credibility-strip div:nth-child(2)::before { background: var(--blue); }
.credibility-strip div:nth-child(3)::before { background: var(--burgundy); }
.credibility-strip div:nth-child(4)::before { background: var(--brown); }

.credibility-strip strong {
  color: var(--navy);
  font-size: 1.04rem;
}

.credibility-strip span {
  color: var(--muted);
  font-size: 0.96rem;
  margin-top: 4px;
}

.section {
  padding: 88px 6vw;
}

.section-heading {
  max-width: 980px;
  margin-bottom: 42px;
}

.split-section {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 48px;
  align-items: start;
  background:
    linear-gradient(90deg, rgba(53,177,159,0.08), transparent 30%),
    var(--soft);
}

.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.audience-card,
.service-card,
.framework-block,
.founder-section,
.form-section,
.contact-section,
.geo-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 10px 32px rgba(16, 37, 66, 0.07);
}

.audience-card {
  padding: 34px;
  position: relative;
  overflow: hidden;
}

.audience-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 9px;
  width: 100%;
}

.audience-card:nth-child(1)::before { background: var(--teal); }
.audience-card:nth-child(2)::before { background: var(--blue); }

.audience-card p { color: var(--muted); }

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.service-card {
  overflow: hidden;
  position: relative;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 9px;
  width: 100%;
  z-index: 2;
}

.service-card:nth-child(1)::before { background: var(--teal); }
.service-card:nth-child(2)::before { background: var(--blue); }
.service-card:nth-child(3)::before { background: var(--burgundy); }
.service-card:nth-child(4)::before { background: var(--brown); }

.service-card > img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  filter: saturate(0.98) contrast(1.02);
}

.service-content { padding: 34px; }

.service-content p,
.founder-copy p,
.form-intro p,
.contact-section p {
  color: var(--muted);
}

.service-content h3 { margin-bottom: 14px; }

.expertise {
  background:
    linear-gradient(135deg, rgba(53,177,159,0.08), rgba(59,98,154,0.07)),
    var(--soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  margin: 24px 0;
}

.expertise h4 {
  margin-bottom: 12px;
  color: var(--blue);
}

.expertise ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.expertise li + li { margin-top: 9px; }

.text-link {
  display: inline-flex;
  margin-top: 14px;
  color: var(--blue);
  font-weight: 900;
  text-decoration: none;
}

.text-link:hover { color: var(--burgundy); }

.retreat-card {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  background:
    linear-gradient(135deg, rgba(16,37,66,0.02), rgba(53,177,159,0.05)),
    var(--white);
}

.retreat-card > img {
  height: 100%;
  min-height: 540px;
}

.partner-logo {
  margin: 26px 0;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  background: var(--navy);
  border-radius: 18px;
  border-left: 7px solid var(--teal);
}

.partner-logo span {
  color: rgba(255,255,255,0.76);
  font-size: 0.86rem;
  font-weight: 800;
}

.partner-logo img {
  max-width: 190px;
  height: auto;
  display: block;
}

.why-section {
  background:
    radial-gradient(circle at 12% 8%, rgba(53,177,159,0.22), transparent 24%),
    radial-gradient(circle at 88% 2%, rgba(135,0,88,0.18), transparent 25%),
    var(--navy);
}

.why-section h2,
.why-section h3,
.why-section h4 { color: var(--white); }

.why-section .eyebrow { color: var(--teal); }

.axioms { margin-top: 36px; }

.axioms h3,
.frameworks h3 { margin-bottom: 20px; }

.axiom-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.axiom-grid div {
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--white);
  border-radius: 24px;
  padding: 30px;
  min-height: 156px;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.25;
  box-shadow: 0 16px 40px rgba(0,0,0,0.09);
}

.axiom-grid div:nth-child(1) { border-top: 9px solid var(--teal); }
.axiom-grid div:nth-child(2) { border-top: 9px solid var(--blue); }
.axiom-grid div:nth-child(3) { border-top: 9px solid var(--burgundy); }
.axiom-grid div:nth-child(4) { border-top: 9px solid var(--brown); }

.frameworks { margin-top: 74px; }

.framework-block {
  margin-top: 24px;
  padding: 32px;
  background: #FFFFFF;
}

.framework-block h4 {
  color: var(--navy);
  margin-bottom: 20px;
  font-size: 1.32rem;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.framework-block h4::before {
  content: "";
  width: 12px;
  height: 30px;
  border-radius: 99px;
  background: var(--teal);
}

.framework-block:nth-of-type(2) h4::before { background: var(--blue); }
.framework-block:nth-of-type(3) h4::before { background: var(--burgundy); }
.framework-block:nth-of-type(4) h4::before { background: var(--brown); }

.framework-block img {
  width: 100%;
  display: block;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
}

.retreat-framework img {
  max-width: 900px;
  margin: 0 auto;
  border: 0;
}

.founder-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 44px;
  align-items: center;
  padding: 44px;
  background:
    linear-gradient(135deg, rgba(59,98,154,0.08), rgba(53,177,159,0.08)),
    var(--white);
}

.founder-image {
  background: linear-gradient(135deg, rgba(59, 98, 154, 0.14), rgba(53, 177, 159, 0.18));
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.85);
}

.founder-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 660px;
  object-fit: contain;
}

.credentials {
  margin-top: 18px;
  color: var(--blue) !important;
  font-weight: 900;
}

.role-line {
  color: var(--navy) !important;
  font-weight: 900;
}

.form-section {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 40px;
  align-items: start;
  background:
    radial-gradient(circle at 86% 12%, rgba(53,177,159,0.16), transparent 30%),
    linear-gradient(135deg, rgba(135,0,88,0.04), rgba(59,98,154,0.08)),
    var(--white);
  border-top: 10px solid var(--teal);
}

.interest-form {
  display: grid;
  gap: 20px;
}

.interest-form label {
  display: grid;
  gap: 8px;
  color: var(--navy);
  font-weight: 900;
}

input[type="text"],
input[type="email"],
input[type="url"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  background: var(--white);
  color: var(--ink);
}

input:focus {
  outline: 3px solid rgba(53, 177, 159, 0.22);
  border-color: var(--teal);
}

fieldset {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  margin: 0;
  background: rgba(255,255,255,0.78);
}

legend {
  font-weight: 900;
  color: var(--navy);
  padding: 0 8px;
}

legend span {
  display: block;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 4px;
}

.checkbox-row {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 14px !important;
  align-items: start;
  margin-top: 18px;
  font-weight: 500 !important;
  color: var(--muted) !important;
  border-radius: 16px;
  padding: 14px;
  background: var(--soft);
  border: 1px solid transparent;
}

.checkbox-row:hover {
  border-color: rgba(53,177,159,0.45);
}

.checkbox-row input {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  accent-color: var(--teal);
}

.checkbox-row strong {
  display: block;
  color: var(--navy);
}

.hidden { display: none; }

.contact-section {
  display: grid;
  grid-template-columns: 1fr 0.6fr;
  gap: 34px;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(59,98,154,0.08), rgba(53,177,159,0.05)),
    var(--white);
}

.contact-email {
  display: inline-flex;
  margin-top: 12px;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--blue);
  text-decoration: none;
}

.contact-email:hover { color: var(--teal); }

.geo-card {
  padding: 30px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  border: 0;
}

.geo-card h3,
.geo-card p { color: var(--white); }

.geo-card p {
  margin-bottom: 0;
  color: rgba(255,255,255,0.86);
  font-weight: 800;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 6vw;
  border-top: 1px solid var(--line);
  background: var(--navy);
  color: rgba(255,255,255,0.78);
  font-size: 0.92rem;
}

.site-footer p { margin: 0; }

@media (max-width: 1100px) {
  .nav { display: none; }

  .hero,
  .split-section,
  .founder-section,
  .form-section,
  .contact-section {
    grid-template-columns: 1fr;
  }

  .hero {
    background:
      radial-gradient(circle at 78% 8%, rgba(53, 177, 159, 0.18), transparent 34%),
      linear-gradient(180deg, var(--navy) 0%, #143153 22%, var(--soft) 22.2%, #FFFFFF 100%);
  }

  .credibility-strip,
  .axiom-grid { grid-template-columns: 1fr 1fr; }

  .service-grid { grid-template-columns: 1fr; }

  .retreat-card {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }

  .retreat-card > img {
    min-height: auto;
    height: 320px;
  }
}

@media (max-width: 720px) {
  .site-header {
    min-height: 70px;
    padding: 14px 22px;
  }

  .brand img { width: 154px; }

  .hero,
  .section {
    padding-left: 22px;
    padding-right: 22px;
  }

  .hero {
    padding-top: 46px;
    min-height: auto;
  }

  .hero-copy {
    padding: 30px;
  }

  .hero-image img { height: 480px; }

  .credibility-strip {
    margin-left: 22px;
    margin-right: 22px;
    grid-template-columns: 1fr;
    transform: translateY(-16px);
  }

  .audience-grid,
  .axiom-grid { grid-template-columns: 1fr; }

  .service-content,
  .audience-card,
  .framework-block,
  .founder-section,
  .form-section,
  .contact-section {
    padding: 24px;
  }

  .service-card > img { height: 245px; }

  .framework-block { overflow-x: auto; }

  .framework-block img { min-width: 900px; }

  .retreat-framework img { min-width: 650px; }

  .site-footer { flex-direction: column; }
}


/* =========================
   V3 refinements from feedback
   ========================= */

.site-header {
  min-height: 54px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.site-header::before {
  height: 3px;
}

.brand {
  display: inline-flex;
  align-items: center;
  background: var(--teal);
  border-radius: 8px;
  padding: 4px 8px;
}

.brand img {
  width: 146px;
}

.nav {
  gap: 22px;
  font-size: 0.88rem;
}

.hero {
  grid-template-columns: 1.65fr 0.75fr;
  min-height: 760px;
  gap: 46px;
  padding-top: 64px;
}

.hero-copy {
  max-width: 980px;
  padding: 44px 52px;
}

h1 {
  font-size: clamp(2.35rem, 4.1vw, 4.65rem);
  letter-spacing: -0.052em;
}

.hero-image img {
  height: min(690px, 78vh);
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .site-header {
    min-height: 56px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .brand img {
    width: 132px;
  }

  .hero-copy {
    padding: 28px;
  }
}


/* =========================
   V4 refinements from feedback
   ========================= */

/* Header: thinner physical banner + uploaded green logo */
.site-header {
  min-height: 44px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.site-header::before {
  height: 2px;
}

.brand {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.brand img {
  width: 132px !important;
  max-height: 42px;
  object-fit: contain;
}

/* Hero: align text box and image box heights; widen text; reduce headline */
.hero {
  grid-template-columns: minmax(0, 1.58fr) minmax(360px, 0.82fr);
  align-items: stretch;
  min-height: 690px;
  gap: 44px;
  padding-top: 58px;
  padding-bottom: 58px;
}

.hero-copy,
.hero-image {
  height: 100%;
  min-height: 610px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  padding: 42px 54px;
}

h1 {
  font-size: clamp(2.25rem, 3.65vw, 4.25rem);
  letter-spacing: -0.05em;
}

.lead {
  font-size: clamp(1.05rem, 1.35vw, 1.24rem);
  max-width: 760px;
}

.hero-image img {
  height: 100%;
  min-height: 610px;
  object-fit: cover;
  object-position: center top;
}

/* Credibility strip: same color, same size, centered text */
.credibility-strip div {
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.credibility-strip strong,
.credibility-strip span {
  color: var(--blue) !important;
  font-size: 1.02rem !important;
  line-height: 1.35;
  font-weight: 800;
  margin: 0;
}

/* Services: two-by-two cards with consistent image heights */
.service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.service-card {
  display: flex;
  flex-direction: column;
}

.service-card > img {
  height: 285px;
}

.service-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.service-content .button,
.service-content .service-button {
  margin-top: auto;
  align-self: flex-start;
}

.retreat-card {
  grid-column: span 1 !important;
  display: flex !important;
  flex-direction: column;
}

.retreat-card > img {
  min-height: auto !important;
  height: 285px !important;
}

.service-button {
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: var(--white);
  box-shadow: 0 10px 24px rgba(59, 98, 154, 0.22);
}

.service-button:hover {
  background: linear-gradient(135deg, var(--blue), var(--navy));
  color: var(--white);
}

/* Remove old inline link styling from service buttons */
.text-link.button,
.button.service-button {
  text-decoration: none;
}

/* Make services less vertically uneven where possible */
.service-card:nth-child(1) > img,
.service-card:nth-child(2) > img {
  height: 270px;
}

.service-card:nth-child(3) > img,
.service-card:nth-child(4) > img {
  height: 300px;
}

/* Mobile adjustments */
@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .hero-copy,
  .hero-image {
    height: auto;
    min-height: auto;
  }

  .hero-image img {
    min-height: auto;
    height: 620px;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .site-header {
    min-height: 44px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .brand img {
    width: 118px !important;
    max-height: 38px;
  }

  .hero-copy {
    padding: 28px;
  }

  .hero-image img {
    height: 520px;
  }
}


/* =========================
   V5 refinements from feedback
   ========================= */

/* 1. Header: same practical height direction as bilandsadek.com, with larger logo */
.site-header {
  min-height: 68px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.site-header::before {
  height: 3px;
}

.brand img {
  width: 166px !important;
  max-height: 54px;
}

/* 2. Hero: no eyebrow, headline already punctuated in HTML */
.hero-copy {
  justify-content: center;
}

/* 4. Areas of expertise color */
.expertise h4 {
  color: var(--teal) !important;
}

/* 5. Axioms: white boxes, larger Rationalitas blue text */
.axiom-grid div {
  background: var(--white) !important;
  color: var(--blue) !important;
  font-size: 1.42rem !important;
  line-height: 1.22;
  font-weight: 900;
  min-height: 170px;
  border: 1px solid rgba(255,255,255,0.28);
}

/* 6. Framework explanatory text: increase Coachsulting and Meeting Facilitation body by one point.
   These SVGs contain their own text, so this targets rendered SVG object scaling slightly for readability
   without distorting the homepage layout too much. */
.framework-block:nth-of-type(2) img,
.framework-block:nth-of-type(3) img {
  transform: scale(1.012);
  transform-origin: center;
}

/* 7. About Founder: green eyebrow/title styling, rectangular background, white image frame */
.founder-section {
  border-radius: 0 !important;
  background:
    linear-gradient(135deg, rgba(59,98,154,0.06), rgba(53,177,159,0.06)),
    var(--white) !important;
}

.founder-section .eyebrow {
  color: var(--teal) !important;
}

.founder-image {
  background: var(--white) !important;
  border: 10px solid var(--white) !important;
  border-radius: 34px !important;
  box-shadow: var(--shadow);
}

/* 8. Contact: final section, green heading, regular rectangle background, no geo card */
.contact-section {
  display: block !important;
  border-radius: 0 !important;
  background:
    linear-gradient(135deg, rgba(53,177,159,0.08), rgba(59,98,154,0.06)),
    var(--white) !important;
}

.contact-section .eyebrow {
  color: var(--teal) !important;
}

.contact-main {
  max-width: 920px;
  margin-bottom: 42px;
}

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 10px 32px rgba(16, 37, 66, 0.07);
  padding: 44px;
  max-width: 980px;
}

.form-card .form-intro .eyebrow {
  display: none;
}

.form-card .form-intro h2 {
  font-size: clamp(1.9rem, 2.6vw, 3rem);
}

.form-section {
  display: block;
}

/* Hide geo-card if older markup remains */
.geo-card {
  display: none !important;
}

@media (max-width: 720px) {
  .site-header {
    min-height: 60px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .brand img {
    width: 142px !important;
    max-height: 48px;
  }

  .form-card {
    padding: 24px;
  }
}


/* =========================
   V6 refinements from feedback
   ========================= */

/* 1. Increase all Rationalitas-green section heading labels */
.eyebrow {
  font-size: 0.94rem !important;
  letter-spacing: 0.13em;
}

/* 2. Reduce height of Axiom boxes */
.axiom-grid div {
  min-height: 112px !important;
  padding: 22px 24px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 3. Founder section: image height aligned more closely to text height */
.founder-section {
  align-items: stretch;
}

.founder-image {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 560px;
}

.founder-image img {
  max-height: 520px !important;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.credentials {
  display: none !important;
}

/* 4. Contact now ends homepage cleanly without form card */
.contact-section {
  min-height: 360px;
}

.contact-main {
  margin-bottom: 0 !important;
}

/* Separate Register Interest page */
.interest-page {
  background:
    radial-gradient(circle at 90% 10%, rgba(53,177,159,0.22), transparent 30%),
    linear-gradient(135deg, #F7FAFA 0%, #FFFFFF 60%, rgba(59,98,154,0.10) 100%);
}

.interest-hero {
  padding-top: 70px;
}

.back-link {
  display: inline-flex;
  margin-bottom: 28px;
  color: var(--blue);
  font-weight: 900;
  text-decoration: none;
}

.back-link:hover {
  color: var(--teal);
}

.interest-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 44px;
  align-items: start;
}

.interest-copy {
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 44px;
  box-shadow: var(--shadow);
}

.interest-copy h1 {
  font-size: clamp(2.4rem, 4.5vw, 4.8rem);
}

.interest-copy p:not(.eyebrow):not(.lead) {
  color: var(--muted);
}

.interest-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 44px;
  box-shadow: 0 10px 32px rgba(16, 37, 66, 0.09);
  display: grid;
  gap: 20px;
}

.success-section {
  min-height: 680px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-card {
  max-width: 860px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 34px;
  padding: 56px;
  box-shadow: var(--shadow);
  text-align: center;
}

.success-card h1 {
  font-size: clamp(2.2rem, 4.6vw, 4.8rem);
}

.success-card .button {
  margin-top: 24px;
}

@media (max-width: 1100px) {
  .interest-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .interest-copy,
  .interest-form,
  .success-card {
    padding: 28px;
  }
}


/* =========================
   V7 refinements from feedback
   ========================= */

/* Founder section: reduce image further and create hero-like white frame */
.founder-section {
  grid-template-columns: 0.72fr 1.28fr;
  align-items: center;
}

.founder-image {
  max-height: 500px !important;
  background: var(--white) !important;
  border: 12px solid var(--white) !important;
  border-radius: 34px !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
}

.founder-image img {
  max-height: 460px !important;
  width: 100%;
  height: 460px !important;
  object-fit: contain;
}

/* Interest page: no back button needed because full menu remains visible */
.back-link {
  display: none !important;
}

.interest-hero {
  padding-top: 58px;
}

@media (max-width: 1100px) {
  .founder-section {
    grid-template-columns: 1fr;
  }

  .founder-image {
    max-width: 520px;
    margin: 0 auto;
  }
}


/* =========================
   V8 refinements from feedback: About Founder
   ========================= */

.founder-section {
  grid-template-columns: 0.72fr 1.28fr;
  align-items: stretch;
}

.founder-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.founder-image {
  align-self: stretch;
  height: auto !important;
  max-height: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.founder-image img {
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center;
  background: var(--white);
  border: 12px solid var(--white);
  border-radius: 34px;
  box-shadow: var(--shadow);
  display: block;
}

/* LinkedIn block under founder biography */
.linkedin-block {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--blue);
  font-weight: 900;
}

.linkedin-block a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.linkedin-block a:hover {
  transform: translateY(-2px);
  opacity: 0.88;
}

.linkedin-block img {
  width: 42px;
  height: 42px;
  display: block;
}

/* On narrower screens, keep the image framed but not overly tall */
@media (max-width: 1100px) {
  .founder-section {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .founder-image {
    align-self: center;
    max-width: 520px;
    width: 100%;
  }

  .founder-image img {
    height: auto !important;
    max-height: 560px !important;
  }
}


/* =========================
   V9 refinement: Founder image frame aligned with Hero image
   ========================= */

.founder-section {
  grid-template-columns: 0.72fr 1.28fr;
  align-items: center !important;
}

.founder-image {
  align-self: center !important;
  height: auto !important;
  max-height: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder-image img {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: 560px !important;
  object-fit: contain;
  object-position: center;
  background: transparent !important;
  border: 10px solid var(--white) !important;
  border-radius: 34px !important;
  box-shadow: var(--shadow) !important;
}

/* Keep the text column natural; the image frame should be driven by the portrait, like the Hero */
.founder-copy {
  display: block !important;
}

@media (max-width: 1100px) {
  .founder-section {
    grid-template-columns: 1fr;
  }

  .founder-image {
    max-width: 520px;
    margin: 0 auto;
  }

  .founder-image img {
    max-height: 560px !important;
  }
}


/* =========================
   V10 refinement: use DBS Grey without background and tighter natural frame
   ========================= */

.founder-section {
  grid-template-columns: 0.62fr 1.38fr;
  align-items: center !important;
}

.founder-image {
  align-self: center !important;
  width: fit-content !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.founder-image img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 500px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: var(--white) !important;
  border: 10px solid var(--white) !important;
  border-radius: 34px !important;
  box-shadow: var(--shadow) !important;
  display: block !important;
}

@media (max-width: 1100px) {
  .founder-section {
    grid-template-columns: 1fr;
  }

  .founder-image {
    max-width: 420px !important;
  }

  .founder-image img {
    max-height: 520px !important;
  }
}

/* =========================
   V11 Hero Background - Option 3
   Refined textured gradient
   ========================= */

.hero {
  background:
    radial-gradient(circle at 20% 20%, rgba(53,177,159,0.18), transparent 35%),
    radial-gradient(circle at 65% 15%, rgba(59,98,154,0.10), transparent 30%),
    linear-gradient(90deg,
      #f4f8f7 0%,
      #dcefed 28%,
      #bfe3df 45%,
      #7ea8cf 72%,
      #3b629a 88%,
      #102542 100%);
  position: relative;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)),
    radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08), transparent 40%);
  pointer-events:none;
}

.hero-copy{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
}


/* =========================
   V13 - Extend Hero gradient behind credibility strip
   ========================= */

/* The credibility strip is outside the hero in the HTML.
   This pulls it visually into the hero gradient zone and removes the white gap. */

.hero {
  padding-bottom: 150px !important;
  margin-bottom: 0 !important;
}

.credibility-strip {
  margin-top: -112px !important;
  margin-bottom: 0 !important;
  transform: none !important;
  position: relative;
  z-index: 3;
}

/* Create the same refined gradient background behind the strip area */
.credibility-strip::before {
  content: "";
  position: absolute;
  inset: -120px -6vw -40px -6vw;
  z-index: -2;
  background:
    radial-gradient(circle at 20% 20%, rgba(53,177,159,0.18), transparent 35%),
    radial-gradient(circle at 65% 15%, rgba(59,98,154,0.10), transparent 30%),
    linear-gradient(90deg,
      #f4f8f7 0%,
      #dcefed 28%,
      #bfe3df 45%,
      #7ea8cf 72%,
      #3b629a 88%,
      #102542 100%);
}

/* Gentle fade into Who We Serve, without creating a white band before the strip */
.credibility-strip::after {
  content: "";
  position: absolute;
  left: -6vw;
  right: -6vw;
  bottom: -58px;
  height: 58px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(247,250,250,0), rgba(247,250,250,1));
  pointer-events: none;
}

#serve {
  padding-top: 96px !important;
  margin-top: 0 !important;
}

/* Maintain clean spacing on smaller screens */
@media (max-width: 1100px) {
  .hero {
    padding-bottom: 110px !important;
  }

  .credibility-strip {
    margin-top: -78px !important;
  }
}

@media (max-width: 720px) {
  .hero {
    padding-bottom: 72px !important;
  }

  .credibility-strip {
    margin-top: -40px !important;
  }

  .credibility-strip::before {
    inset: -80px -22px -30px -22px;
  }

  .credibility-strip::after {
    left: -22px;
    right: -22px;
  }
}


/* =========================
   V14 - Hero as one complete visual block
   ========================= */

/* Enlarge hero so it comfortably contains the top-left text, top-right image,
   and the credibility banner underneath. */
.hero {
  min-height: 900px !important;
  padding-top: 76px !important;
  padding-bottom: 235px !important;
  margin-bottom: 0 !important;
  align-items: center !important;
}

/* Keep the top Hero content visually balanced */
.hero-copy,
.hero-image {
  min-height: 610px !important;
}

/* Position the credibility strip as the bottom row of the Hero block */
.credibility-strip {
  margin-top: -185px !important;
  margin-bottom: 0 !important;
  transform: none !important;
  position: relative;
  z-index: 4;
}

/* Extend the exact Hero refined gradient behind the entire credibility strip zone */
.credibility-strip::before {
  content: "";
  position: absolute;
  inset: -235px -6vw -72px -6vw;
  z-index: -3;
  background:
    radial-gradient(circle at 20% 20%, rgba(53,177,159,0.18), transparent 35%),
    radial-gradient(circle at 65% 15%, rgba(59,98,154,0.10), transparent 30%),
    linear-gradient(90deg,
      #f4f8f7 0%,
      #dcefed 28%,
      #bfe3df 45%,
      #7ea8cf 72%,
      #3b629a 88%,
      #102542 100%);
}

/* Clear transition into Who We Serve after the full Hero block */
.credibility-strip::after {
  content: "";
  position: absolute;
  left: -6vw;
  right: -6vw;
  bottom: -72px;
  height: 72px;
  z-index: -2;
  background: linear-gradient(180deg, rgba(247,250,250,0), rgba(247,250,250,1));
  pointer-events: none;
}

#serve {
  padding-top: 112px !important;
  margin-top: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .hero {
    min-height: auto !important;
    padding-bottom: 150px !important;
  }

  .hero-copy,
  .hero-image {
    min-height: auto !important;
  }

  .credibility-strip {
    margin-top: -105px !important;
  }

  .credibility-strip::before {
    inset: -165px -6vw -60px -6vw;
  }
}

@media (max-width: 720px) {
  .hero {
    padding-top: 44px !important;
    padding-bottom: 105px !important;
  }

  .credibility-strip {
    margin-top: -64px !important;
  }

  .credibility-strip::before {
    inset: -120px -22px -42px -22px;
  }

  .credibility-strip::after {
    left: -22px;
    right: -22px;
    bottom: -42px;
    height: 42px;
  }

  #serve {
    padding-top: 76px !important;
  }
}


/* =========================
   V20 Legal & Privacy Modal
   ========================= */

body.modal-open {
  overflow: hidden;
}

.legal-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(16, 37, 66, 0.62);
  backdrop-filter: blur(6px);
}

.legal-modal-overlay.is-open {
  display: flex;
}

.legal-modal {
  position: relative;
  width: min(920px, 94vw);
  max-height: 84vh;
  overflow: hidden;
  background: #ffffff;
  border-radius: 30px;
  box-shadow: 0 24px 80px rgba(16, 37, 66, 0.28);
}

.legal-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #F7FAFA;
  color: var(--navy, #102542);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.legal-modal-close:hover {
  background: #ECF7F5;
}

.legal-modal-content {
  max-height: 84vh;
  overflow-y: auto;
  padding: 58px 64px 52px;
  color: var(--muted, #66727E);
}

.legal-modal-content h1 {
  color: var(--navy, #102542);
  font-size: clamp(2.4rem, 4vw, 4.4rem);
  margin: 0 56px 32px 0;
}

.legal-modal-content h2 {
  color: var(--teal, #35B19F);
  font-size: 1.2rem;
  margin: 28px 0 8px;
  letter-spacing: -0.01em;
}

.legal-modal-content p,
.legal-modal-content li {
  font-size: 1.02rem;
  line-height: 1.75;
}

.legal-modal-content a {
  color: var(--blue, #3B629A);
  font-weight: 700;
}

#privacyPolicyContent {
  display: none;
}

@media (max-width: 720px) {
  .legal-modal-overlay {
    padding: 14px;
  }

  .legal-modal {
    width: 100%;
    max-height: 90vh;
    border-radius: 22px;
  }

  .legal-modal-content {
    padding: 44px 24px 32px;
    max-height: 90vh;
  }

  .legal-modal-content h1 {
    font-size: 2.2rem;
  }
}


/* =========================
   V21 Retreat form consent + single CTA
   ========================= */

.privacy-consent {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 12px;
  margin: 22px 0 26px;
}

.privacy-consent input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin: 4px 0 0;
  accent-color: var(--teal, #35B19F);
}

.privacy-consent label {
  margin: 0;
  color: var(--navy, #102542);
  font-weight: 700;
  line-height: 1.55;
  display: block;
}

.privacy-consent a {
  color: var(--navy, #102542);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-submit {
  width: 100%;
  border: 0;
  margin-top: 0;
  font: inherit;
  font-weight: 900;
}

@media (max-width: 720px) {
  .privacy-consent {
    grid-template-columns: 20px 1fr;
    gap: 10px;
  }
}


/* =========================
   V22 Form consent validation
   ========================= */

.form-submit:disabled,
.form-submit[aria-disabled="true"] {
  opacity: 0.46;
  cursor: not-allowed;
  filter: grayscale(0.15);
  box-shadow: none;
}

.form-submit:not(:disabled) {
  opacity: 1;
  cursor: pointer;
}


/* V23 privacy policy link pointer */
.modal-policy-link {
  cursor: pointer;
}


/* =========================
   V24 Dedicated Privacy Modal for Interest Form
   ========================= */

body.privacy-modal-open {
  overflow: hidden;
}

.privacy-modal-root {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.privacy-modal-root.open {
  display: flex;
}

.privacy-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 37, 66, 0.64);
  backdrop-filter: blur(7px);
}

.privacy-modal-card {
  position: relative;
  z-index: 100001;
  width: min(920px, 94vw);
  max-height: 86vh;
  background: #ffffff;
  border-radius: 30px;
  box-shadow: 0 28px 90px rgba(16, 37, 66, 0.36);
  overflow: hidden;
}

.privacy-modal-scroll {
  max-height: 86vh;
  overflow-y: auto;
  padding: 58px 64px 52px;
  color: var(--muted, #66727E);
  line-height: 1.75;
}

.privacy-modal-scroll h1 {
  color: var(--navy, #102542);
  font-size: clamp(2.35rem, 4vw, 4.2rem);
  line-height: 1.05;
  margin: 0 58px 30px 0;
}

.privacy-modal-scroll h2 {
  color: var(--teal, #35B19F);
  font-size: 1.2rem;
  margin: 28px 0 8px;
}

.privacy-modal-scroll p,
.privacy-modal-scroll li {
  font-size: 1.02rem;
}

.privacy-modal-scroll a {
  color: var(--blue, #3B629A);
  font-weight: 800;
}

.privacy-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 100002;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #F7FAFA;
  color: var(--navy, #102542);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.privacy-modal-close:hover {
  background: #ECF7F5;
}

@media (max-width: 720px) {
  .privacy-modal-root {
    padding: 14px;
  }

  .privacy-modal-card {
    border-radius: 22px;
    max-height: 90vh;
  }

  .privacy-modal-scroll {
    max-height: 90vh;
    padding: 44px 24px 32px;
  }

  .privacy-modal-scroll h1 {
    font-size: 2.15rem;
  }
}