:root {
  --ink: #102f3a;
  --deep: #073b4c;
  --teal: #0d8f91;
  /* Same hue, darkened for text. The bright teal reaches only about 3.6:1
     against the page, below the 4.5:1 that normal-sized text needs; this
     reaches 5.1:1 on paper and 4.8:1 on mist. Use --teal for rules, borders
     and other graphics, and --teal-text for anything read as words. */
  --teal-text: #08777a;
  --aqua: #5cc7c3;
  --mist: #e9f5f3;
  --paper: #f9fbfa;
  --line: #c9ddda;
  --white: #ffffff;
  --muted: #526a71;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, Aptos, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

a { color: inherit; }

.site-header {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--deep);
  text-decoration: none;
  font-size: 1.08rem;
  letter-spacing: -.02em;
}

.brand strong { color: var(--teal-text); font-weight: 650; }

.brand-mark {
  width: 78px;
  height: 78px;
  object-fit: contain;
  /* The logo is a JPEG, so it carries a white square behind it. Multiply
     drops that white against the page's off-white ground, which saves
     needing a transparent version of the file. */
  mix-blend-mode: multiply;
}

.header-contact {
  text-decoration: none;
  font-size: .84rem;
  font-weight: 650;
  border-bottom: 1px solid var(--teal);
}

.hero {
  width: min(1180px, calc(100% - 40px));
  min-height: 630px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 8vw, 110px);
  align-items: center;
  padding: 70px 0 100px;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--teal-text);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .14em;
}

h1, h2, h3 { margin-top: 0; line-height: 1.08; letter-spacing: -.04em; }

h1 {
  max-width: 720px;
  margin-bottom: 28px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 6.4vw, 6.25rem);
  font-weight: 400;
}

.hero-text {
  max-width: 660px;
  margin: 0 0 34px;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 25px;
  color: var(--white);
  background: var(--deep);
  border: 1px solid var(--deep);
  border-radius: 2px;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
  transition: transform .2s ease, background .2s ease;
}

.primary-button:hover, .primary-button:focus-visible {
  transform: translateY(-2px);
  background: var(--teal);
  border-color: var(--teal);
}

.stage-note { margin: 18px 0 0; color: var(--muted); font-size: .79rem; }

.connection-visual {
  min-height: 430px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 70% 30%, rgba(92,199,195,.24), transparent 28%),
    linear-gradient(145deg, #f3faf8, #d9efec);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.connection-visual::before {
  content: "";
  width: 240px;
  height: 240px;
  border: 1px solid rgba(13,143,145,.22);
  border-radius: 50%;
  position: absolute;
  right: -70px;
  top: -90px;
}

.visual-label {
  color: var(--muted);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.align-right { text-align: right; }

.paths { margin: 28px 0; display: grid; gap: 12px; }
.paths span { display: block; height: 1px; background: linear-gradient(90deg, transparent, var(--teal), transparent); }
.paths span:nth-child(2) { transform: scaleX(.82); }
.paths span:nth-child(3) { transform: scaleX(.62); }

.method-card {
  width: min(310px, 90%);
  margin: 0 auto 28px;
  padding: 24px;
  display: grid;
  background: rgba(255,255,255,.9);
  border-left: 4px solid var(--teal);
  box-shadow: 0 18px 50px rgba(7,59,76,.09);
}

.method-kicker { margin-bottom: 7px; color: var(--teal-text); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.method-card strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 400; }
.method-card small { margin-top: 7px; color: var(--muted); }

.principle {
  padding: 75px 20px;
  color: var(--white);
  background: var(--deep);
  text-align: center;
}

.principle p {
  max-width: 900px;
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 4vw, 3.7rem);
  line-height: 1.22;
}

.audiences {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 120px 0;
  display: grid;
  grid-template-columns: .8fr 1.1fr 1.1fr;
  gap: 24px;
}

.section-intro { padding-right: 25px; }
h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3.7vw, 3.6rem); font-weight: 400; }

.audience-card {
  min-height: 420px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
}

.provider-card { background: var(--mist); }
.buyer-card { background: var(--white); }
.card-number { color: var(--teal-text); font-size: .76rem; }
.card-label { margin: auto 0 12px; color: var(--teal-text); font-size: .76rem; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; }
.audience-card h3 { margin-bottom: 20px; font-size: clamp(1.45rem, 2.4vw, 2.05rem); font-weight: 520; }
.audience-card > p:not(.card-label) { margin: 0 0 14px; color: var(--muted); }
.audience-card > p:last-child { margin-bottom: 0; }

.focus {
  padding: 110px max(20px, calc((100% - 1180px) / 2));
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  column-gap: clamp(50px, 10vw, 140px);
  color: var(--white);
  background: #0b484f;
}

.focus .eyebrow { color: var(--aqua); }
.focus-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.25); }
.focus-list li { padding: 19px 0; display: flex; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.25); }
.focus-list span { color: var(--aqua); font-size: .74rem; }
.focus-note { grid-column: 2; margin: 35px 0 0; color: #cce2e0; font-size: .9rem; }

.contact-section {
  padding: 120px 20px;
  text-align: center;
}

.contact-section h2 { max-width: 760px; margin-left: auto; margin-right: auto; }
.contact-section > p:not(.eyebrow) { max-width: 660px; margin: 0 auto 30px; color: var(--muted); }

footer {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .75rem;
}

/* The company's LinkedIn page (founder, 2 Oct 2026). A plain link with an inline icon: no
   LinkedIn script or embed is loaded, so nothing tracks a visitor who does not click it. */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}
.footer-social svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.footer-social:hover, .footer-social:focus-visible { color: var(--teal-text); }

/* ---------------------------------------------------------------------------
   Legal pages (the privacy policy, and any terms page later)
   Share the header, footer, palette and typefaces with the landing page. Only
   the reading column and the heading scale differ, because a policy is read
   top to bottom rather than scanned.
   --------------------------------------------------------------------------- */
.legal {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: 54px 0 90px;
}

.legal-heading {
  padding-bottom: 30px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.legal h1 { margin: 0 0 14px; font-size: clamp(2.4rem, 5.5vw, 3.4rem); }
.legal .updated { margin: 0; color: var(--muted); font-size: .85rem; }

.legal section { margin-bottom: 40px; }
.legal section:last-child { margin-bottom: 0; }

.legal h2 {
  margin: 0 0 14px;
  font-size: clamp(1.35rem, 2.4vw, 1.72rem);
  line-height: 1.25;
}

.legal h3 {
  margin: 26px 0 8px;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.01em;
}

.legal p { margin: 0 0 16px; color: var(--muted); }
.legal ul { margin: 0 0 18px; padding-left: 22px; color: var(--muted); }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--ink); font-weight: 650; }
.legal a { color: var(--teal-text); text-underline-offset: 3px; }

.legal .primary-button { margin-top: 6px; }

/* ---------------------------------------------------------------------------
   Enquiry dialog
   Opened by any element with data-inquiry. Those elements keep their mailto
   href, so the site still works with JavaScript switched off.
   --------------------------------------------------------------------------- */
.inquiry-dialog {
  width: min(640px, calc(100% - 28px));
  max-height: calc(100vh - 48px);
  padding: 0;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 30px 80px rgba(7, 59, 76, .22);
}

.inquiry-dialog::backdrop {
  background: rgba(7, 59, 76, .55);
}

.inquiry-form {
  max-height: calc(100vh - 50px);
  padding: 32px 34px 34px;
  overflow-y: auto;
}

.inquiry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.inquiry-head .eyebrow { margin-bottom: 8px; }

.inquiry-dialog h2 {
  margin: 0;
  font-size: 1.72rem;
  line-height: 1.15;
}

.inquiry-intro { margin: 0 0 26px; color: var(--muted); font-size: .88rem; }

.inquiry-close {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.inquiry-close:hover, .inquiry-close:focus-visible { color: var(--ink); border-color: var(--teal); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 17px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }

.field label, .fieldset-label {
  color: var(--ink);
  font-size: .79rem;
  font-weight: 650;
  letter-spacing: .01em;
}

.optional { color: var(--muted); font-weight: 400; }

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: 11px 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: inherit;
  font-size: .93rem;
  line-height: 1.5;
}

.field textarea { min-height: 104px; resize: vertical; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}

.field-error {
  display: none;
  color: #a5341f;
  font-size: .76rem;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #a5341f; }
.field.has-error .field-error { display: block; }

.char-count { color: var(--muted); font-size: .72rem; text-align: right; }

.conditional {
  margin-bottom: 17px;
  padding: 18px 20px;
  background: var(--mist);
  border-left: 3px solid var(--teal);
}

.conditional[hidden] { display: none; }
.conditional .fieldset-label { display: block; margin-bottom: 4px; }
.conditional .hint { margin: 0 0 12px; color: var(--muted); font-size: .76rem; }

.check-list { display: grid; gap: 9px; }

.check {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 10px;
  align-items: start;
  font-size: .86rem;
  line-height: 1.45;
  cursor: pointer;
}

.check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--teal); }

.consent {
  margin: 22px 0 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.consent .field-error { margin-top: 8px; }
.consent.has-error .field-error { display: block; }

.inquiry-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.inquiry-actions button { font-family: inherit; cursor: pointer; }
.inquiry-actions .primary-button[disabled] { opacity: .6; cursor: progress; }

.inquiry-cancel {
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  font-size: .85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.inquiry-cancel:hover, .inquiry-cancel:focus-visible { color: var(--ink); }

.form-message {
  margin: 0 0 18px;
  padding: 13px 15px;
  font-size: .85rem;
  background: #fdeceb;
  border-left: 3px solid #a5341f;
  color: #7d2717;
}

.form-message[hidden] { display: none; }

.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.inquiry-done { padding: 46px 34px 50px; text-align: center; }
.inquiry-done h2 { margin-bottom: 14px; }
.inquiry-done p { margin: 0 auto 26px; max-width: 400px; color: var(--muted); font-size: .95rem; }
.inquiry-done[hidden] { display: none; }

@media (max-width: 560px) {
  .inquiry-form { padding: 26px 22px 28px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .inquiry-dialog h2 { font-size: 1.45rem; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 45px; }
  .connection-visual { min-height: 350px; }
  .audiences { grid-template-columns: 1fr 1fr; }
  .section-intro { grid-column: 1 / -1; max-width: 720px; margin-bottom: 25px; }
  .focus { grid-template-columns: 1fr; row-gap: 35px; }
  .focus-note { grid-column: 1; }
}

@media (max-width: 620px) {
  .site-header, .hero, .audiences, footer { width: min(100% - 28px, 1180px); }
  .site-header { padding-top: 18px; }
  .hero { min-height: auto; padding: 55px 0 75px; }
  h1 { font-size: clamp(2.75rem, 14vw, 4.5rem); }
  .connection-visual { min-height: 310px; padding: 24px; }
  .audiences { padding: 85px 0; grid-template-columns: 1fr; }
  .audience-card { min-height: 360px; }
  .focus, .contact-section { padding-top: 85px; padding-bottom: 85px; }
  footer { flex-direction: column; }
}

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