/* ==========================================================================
   Opaya · Company page (and the 404 page's opening), after site.css
   Laid out like the home page: an opening statement on forest over the start
   bubbles (slower and dimmer than on the home page), then the beliefs, how we
   build, the products (the home product cards), the partner strip, the
   regulatory note and contact. Generated by tools/build.mjs from
   content/company.md.
   ========================================================================== */

/* 1. Opening: the statement over the bubbles --------------------------------------- */
.co-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center;
  min-height: min(100vh, 900px); min-height: min(100svh, 900px);
  margin-top: calc(-1 * var(--header));
  padding: calc(var(--header) + 88px) 0 112px;
  background:
    radial-gradient(60% 75% at 74% 52%, #1C4842 0%, rgba(22, 59, 55, 0) 72%),
    linear-gradient(180deg, var(--forest-deep) 0%, var(--forest) 34%, #133632 100%);
  color: var(--white);
}
.co-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 72px); align-items: center; width: 100%; }
.co-hero-copy { position: relative; z-index: 1; }
.co-kicker { color: var(--mist); --sq: var(--mist); }
.co-title {
  margin-top: 26px; max-width: 9.6em;
  font-size: clamp(42px, calc(14px + 5.2vw), 100px); line-height: .92;
  color: var(--stone); text-wrap: balance;
}
.co-lead { margin-top: 30px; max-width: 29em; font: 600 clamp(19px, calc(15px + .45vw), 22px)/1.42 var(--sans); letter-spacing: -0.02em; color: rgba(246, 245, 243, .9); text-wrap: pretty; }
/* The bubbles: the home scene's still and canvas, dimmed (reduced intensity). */
.co-visual { position: relative; min-height: 540px; pointer-events: none; }
.co-visual .smark { opacity: .62; }

/* 2. Why Opaya exists ----------------------------------------------------------------- */
.co-why { padding: var(--section) 0 calc(var(--section) * .8); }
.co-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 112px); align-items: start; }
.co-split-body { display: grid; gap: 24px; max-width: 38em; }
.co-big { font: 600 clamp(21px, calc(16px + .55vw), 25px)/1.32 var(--sans); letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; }
.co-text { font: 500 17px/27px var(--sans); color: #3A3733; text-wrap: pretty; }

/* 3. What we believe ---------------------------------------------------------------- */
.co-beliefs { padding: 136px 0 144px; background: var(--white); }
.co-belief-list { margin-top: 72px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.co-belief { position: relative; padding-top: 30px; }
.co-belief::before { content: ""; display: block; width: 8px; height: 8px; margin-bottom: 26px; background: var(--sage); }
.co-belief::after, .co-principle::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; pointer-events: none; }
.co-belief-title { max-width: 11em; font-size: clamp(28px, calc(12px + 1.5vw), 36px); line-height: .98; color: var(--ink); text-wrap: balance; }
.co-belief-text { margin-top: 20px; max-width: 22em; font: 500 17px/26px var(--sans); color: #3A3733; }

/* 4. How we build ---------------------------------------------------------------- */
.co-build { padding: var(--section) 0; }
.co-roles { margin-top: 72px; }
.co-roles-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 112px); align-items: baseline; }
.co-roles-head .co-text { max-width: 30em; }
.co-sub { font: 600 22px/28px var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.co-agents { margin-top: 40px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.co-agent { display: flex; flex-direction: column; min-height: 286px; padding: 26px 22px 24px; background: var(--white); border-radius: var(--r); }
.co-agent-glyph { width: 84px; height: auto; margin: 6px 0 40px; fill: var(--forest-2); }
.co-agent-name { color: var(--ink); }
.co-agent-line { margin-top: 12px; font: 600 16px/22px var(--sans); letter-spacing: -0.012em; color: var(--ink); }
.co-principles { margin-top: 96px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.co-principle { position: relative; padding-top: 30px; }
.co-principle .co-text { margin-top: 14px; max-width: 26em; }

/* 5. Our products: the home page's product cards -------------------------------------- */
.co-products { padding: 24px 0 0; }
.co-audience { margin-top: 64px; }
.co-card .aud-for { max-width: 20em; margin-bottom: 20px; }
.co-card .mini-btn { margin-top: auto; }   /* the buttons line up across the row */

/* 6. Partners: the note under the strip ------------------------------------------------ */
.company .partners { padding-top: 120px; }
.co-partner-note { margin-top: 6px; }
.co-partner-note p { margin-inline: auto; max-width: 48em; text-align: center; font: 500 14px/22px var(--sans); color: var(--grey-text); text-wrap: balance; }

/* 7. Regulatory information ------------------------------------------------------------ */
.co-reg { padding: 112px 0 var(--section); }
.co-reg-card { max-width: 780px; margin-inline: auto; padding: 38px 42px 40px; background: var(--white); border-radius: var(--r); }
.co-reg-card p:not(.label) { margin-top: 16px; font: 500 15.5px/25px var(--sans); color: #3A3733; }
.co-reg-title { margin-bottom: 4px; }
.co-reg-card .gbtn { margin-top: 26px; }

/* 8. Contact: on forest, like the home page's Start with Opaya ------------------------- */
.co-contact { position: relative; padding: var(--section) 0; background: var(--forest); color: var(--white); }
.co-contact-rows { position: relative; margin: 64px auto 0; max-width: 820px; border-top: 1px solid transparent; }
.co-contact-rows::before, .co-contact-row::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line-dark); transform-origin: 0 50%; pointer-events: none; }
.co-contact-rows::before { top: -1px; }
.co-contact-row::after { bottom: -1px; }
.co-contact-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; row-gap: 8px; padding: 28px 0; }
.co-contact-row .label { color: var(--mist); --sq: var(--mist); }
.co-contact-link, .co-contact-text { font: 600 22px/28px var(--sans); letter-spacing: -0.02em; color: var(--white); text-align: right; }
.co-contact-link { position: relative; text-decoration: none; }
.co-contact-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 220ms var(--ease); }
.co-contact-link:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .co-contact-link:hover::after { transform: scaleX(1); } }

/* 404: the opening only, with the way back. */
.co-hero--404 { min-height: min(100vh, 860px); min-height: min(100svh, 860px); }
.nf-links { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.nf-products { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px 30px; color: var(--stone); }

/* Responsive ------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .co-agents { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .co-belief-list, .co-principles { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .co-belief, .co-principle { padding: 30px 0 34px; }
  .co-belief::before { margin-bottom: 18px; }
  .co-belief-text, .co-principle .co-text { max-width: 34em; }
  .co-principles { margin-top: 72px; }
}
@media (max-width: 899px) {
  .co-hero { display: block; min-height: 0; padding-bottom: 0; }
  .co-hero-grid { grid-template-columns: minmax(0, 1fr); }
  /* The bubbles become a full-bleed band under the copy (the scene's band framing). */
  .co-visual { min-height: 0; width: 100vw; margin: 40px 0 0 calc(50% - 50vw); height: clamp(210px, 60vw, 480px); }
  .co-visual .smark { inset: 0; }
  .co-hero--404 { padding-bottom: 24px; }
  .co-split, .co-roles-head { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .co-agents { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .co-agent { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; align-items: center; min-height: 0; padding: 20px; }
  .co-agent-glyph { grid-row: 1 / 3; width: 64px; margin: 0; }
  .co-agent-line { margin-top: 6px; }
}
@media (max-width: 767px) {
  .co-hero { padding-top: calc(var(--header) + 56px); }
  .co-title { font-size: clamp(38px, calc(10px + 8vw), 58px); line-height: .98; }
  .co-lead { margin-top: 22px; font-size: 18px; line-height: 26px; }
  .co-why { padding-top: 96px; }
  .co-big { font-size: 20px; line-height: 27px; }
  .co-text { font-size: 16.5px; line-height: 26px; }
  .co-beliefs { padding: 96px 0; }
  .co-belief-list { margin-top: 44px; }
  .co-build { padding: 96px 0; }
  .co-roles { margin-top: 48px; }
  .co-sub { font-size: 20px; line-height: 26px; }
  .co-audience { margin-top: 44px; }
  .company .partners { padding-top: 88px; }
  .co-reg { padding: 80px 0 96px; }
  .co-reg-card { padding: 26px 22px 28px; }
  .co-contact { padding: 96px 0; }
  .co-contact-rows { margin-top: 44px; }
  .co-contact-row { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
  .co-contact-link, .co-contact-text { text-align: left; font-size: 20px; line-height: 26px; overflow-wrap: anywhere; }
}