/* Clarivus360 W3 Bold Blocks. Full-bleed colour bands, oversized type. */

@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../../assets/fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../../assets/fonts/Inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../../assets/fonts/Inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 500; font-display: swap; src: url('../../assets/fonts/InterTight-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 600; font-display: swap; src: url('../../assets/fonts/InterTight-600.woff2') format('woff2'); }

:root {
  --teal: #1EA5A6;
  --teal-ink: #117A7B;     /* teal text on white, 5.2:1 */
  --navy: #0B183D;
  --white: #FFFFFF;
  --lime: #D8F15A;
  --steel: #AAB8CC;        /* muted text on navy, 9.4:1 */
  --slate-ink: #4A5878;    /* muted text on white, 7.4:1 */
  --lime-ink: #485946;     /* muted text on lime, 6:1 */
  --mist: #E9EEF4;         /* light circle behind the headshot */

  --display: "Inter Tight", "Inter", Arial, sans-serif;
  --text: "Inter", Arial, sans-serif;

  --wrap: 1260px;
  --gutter: 90px;
  --pad: 144px;
  --nav-h: 52px;
  /* Headless screenshots use a very tall window, so viewport units are capped. */
  --screen: min(100svh, 940px);
  --band: min(80svh, 760px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body { margin: 0; background: var(--navy); color: var(--navy); font-family: var(--text); font-size: 19px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--white); color: var(--navy); padding: 12px 16px; border-radius: 999px; }
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* Bands */
.band { position: relative; min-height: var(--band); padding: var(--pad) 0; display: flex; flex-direction: column; justify-content: center; }
.band-teal { background: var(--teal); color: var(--white); }
.band-navy { background: var(--navy); color: var(--white); }
.band-white { background: var(--white); color: var(--navy); }
.band-lime { background: var(--lime); color: var(--navy); }

/* Type */
.mega { font-family: var(--display); font-weight: 600; font-size: 120px; line-height: 0.98; letter-spacing: -0.035em; }
.mega .line { display: block; }
.h-big { font-family: var(--display); font-weight: 600; font-size: 80px; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.sub { font-size: 26px; font-weight: 600; line-height: 1.32; max-width: 34ch; }
.sub strong { font-weight: 600; }
.label { font-family: var(--text); font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: 0; margin-bottom: 10px; }
.label-navy { color: var(--navy); }
.label-teal { color: var(--teal-ink); }
.label-lime { color: var(--lime); }
.support { font-size: 21px; font-weight: 600; line-height: 1.38; max-width: 40ch; }
.band-navy .support { color: var(--steel); }
.band-navy .support strong { color: var(--white); font-weight: 600; }
.band-white .support { color: var(--slate-ink); }
.band-white .support strong { color: var(--navy); font-weight: 600; }
.fine { font-size: 17px; font-weight: 500; }
.fine-navy { color: var(--navy); }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 11px 21px; border-radius: 999px; font-weight: 600; font-size: 17px; text-decoration: none; white-space: nowrap; transition: transform 160ms ease, background-color 160ms ease; }
.btn-white { background: var(--white); color: var(--navy); }
.btn-white:hover { background: var(--lime); }
.chev { font-weight: 600; font-size: 17px; text-decoration: none; color: var(--navy); }
.chev span { display: inline-block; margin-left: 4px; transition: transform 160ms ease; }
.chev:hover span { transform: translateX(4px); }
.chev-lime { color: var(--lime); }

/* Nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); transition: background-color 240ms ease; }
.nav.is-scrolled { background: rgb(11 24 61 / 78%); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.nav-inner { height: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 40px; color: var(--white); }
.nav-logo img { width: 120px; height: auto; }
.nav-links { display: flex; gap: 32px; margin-left: auto; font-size: 15px; font-weight: 500; }
.nav-links a { text-decoration: none; }
.nav-links a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-cta { height: 32px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--white); color: var(--navy); font-size: 14px; font-weight: 600; text-decoration: none; }
.nav-menu { display: none; margin-left: auto; background: none; border: 0; color: var(--white); font: 600 17px var(--text); padding: 8px 0; cursor: pointer; }
.menu { background: var(--navy); padding: 16px 20px 28px; display: grid; gap: 4px; }
.menu[hidden] { display: none; }
.menu a { color: var(--white); text-decoration: none; font: 600 28px/1.6 var(--display); }

/* 1. Opening */
.opening { min-height: var(--screen); padding: calc(var(--nav-h) + 72px) 0 96px; overflow: hidden; }
.opening-inner { position: relative; z-index: 1; }
.opening .label { margin-bottom: 24px; }
.opening .mega { margin-bottom: 40px; }
.opening .sub { margin-bottom: 44px; }
.opening .fine { margin-top: 24px; }
.orbit { position: absolute; z-index: 0; width: min(62vw, 880px); height: auto; right: max(-21vw, -300px); top: 50%; transform: translateY(-46%); }
.orbit-ring, .orbit-top, .orbit-mid { fill: var(--white); opacity: 0.14; }
.orbit-bot { fill: var(--lime); }

/* Strike and underline, end state by default */
.strike, .under { position: relative; display: inline-block; }
.strike::after { content: ""; position: absolute; left: -0.04em; right: -0.04em; top: 54%; height: 0.085em; background: var(--navy); border-radius: 0.05em; transform-origin: left center; }
.under::after { content: ""; position: absolute; left: 0; right: 0.02em; bottom: -0.04em; height: 0.11em; background: var(--lime); border-radius: 0.06em; transform-origin: left center; }

@media (prefers-reduced-motion: no-preference) {
  .js .opening .strike::after, .js .opening .under::after { transform: scaleX(0); }
  .js .opening.is-drawn .strike::after { transform: scaleX(1); transition: transform 600ms cubic-bezier(.6, 0, .2, 1); }
  .js .opening.is-drawn .under::after { transform: scaleX(1); transition: transform 600ms cubic-bezier(.6, 0, .2, 1) 650ms; }
  .js .opening .orbit { opacity: 0; transform: translateY(-46%) rotate(-12deg) scale(1.04); transition: opacity 1.2s ease, transform 1.6s cubic-bezier(.2, .7, .2, 1); }
  .js .opening.is-drawn .orbit { opacity: 1; transform: translateY(-46%); }
}

/* 2. Problem */
.problem { padding: var(--pad) 0 0; }
.problem-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: end; margin-bottom: 40px; }
.problem-head .support { padding-bottom: 10px; }
.bleed-photo { position: relative; height: min(100svh, 1120px); }
.bleed-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }

/* 3. Method */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin: 56px 0 56px; }
.num { display: block; font-family: var(--display); font-weight: 600; font-size: 200px; line-height: 0.82; letter-spacing: -0.05em; color: var(--teal); }
.bar { display: block; height: 12px; width: 100%; margin: 28px 0 28px; background: var(--mist); border-radius: 6px; overflow: hidden; position: relative; }
.bar::after { content: ""; position: absolute; inset: 0; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform 700ms cubic-bezier(.6, 0, .2, 1); }
.step.is-active .bar::after { transform: scaleX(1); }
.step p { max-width: 24ch; }
.step strong { font-weight: 600; }
.closing { font-weight: 600; font-size: 21px; color: var(--teal-ink); }

/* 4. What changes */
.statements { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 72px; margin-top: 80px; }
.statements li { font-family: var(--display); font-weight: 500; font-size: 48px; line-height: 1.08; letter-spacing: -0.025em; padding-top: 24px; border-top: 3px solid var(--navy); }
.statements li { color: var(--lime-ink); }
.statements strong { font-weight: 600; display: block; color: var(--navy); }

/* 5. Who it is for */
.who { padding: var(--pad) 0 0; justify-content: flex-start; }
.who-head { margin-bottom: 40px; }
.who-head .h-big { max-width: 14ch; }
.duo { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
.duo-item { position: relative; height: min(100svh, 840px); overflow: hidden; }
.duo-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo-s1 img { object-position: 50% 30%; }
.duo-s3 img { object-position: 55% 30%; }
.duo-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 140px 56px 52px; color: var(--white);
  background: linear-gradient(to top, rgb(11 24 61 / 92%) 0%, rgb(11 24 61 / 80%) 45%, rgb(11 24 61 / 0%) 100%); }
.duo-item h3 { font-family: var(--display); font-weight: 600; font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 14px; max-width: 16ch; }
.duo-item p { font-size: 21px; font-weight: 600; line-height: 1.38; max-width: 34ch; }

/* 6. Andres */
.andres-grid { display: grid; grid-template-columns: 600px 1fr; gap: 72px; align-items: center; }
.portrait { aspect-ratio: 1; border-radius: 50%; background: var(--mist); display: grid; place-items: center; }
.portrait img { width: 94%; height: 94%; border-radius: 50%; object-fit: cover; }
.andres-text .label { margin-bottom: 24px; }
.quote p { font-family: var(--display); font-weight: 500; font-size: 56px; line-height: 1.08; letter-spacing: -0.025em; }
.quote em { font-style: normal; color: var(--lime); }
.caption { margin-top: 32px; color: var(--steel); font-size: 21px; font-weight: 600; }
.andres-text .chev { display: inline-block; margin-top: 14px; }

/* 7. Final call */
.final { min-height: var(--band); }
.mega-final { font-size: 152px; line-height: 0.96; margin-bottom: 48px; }
.under-static::after { transform: none; }
.final .sub { margin-bottom: 44px; max-width: 36ch; }
.final .demo-note { margin-top: 28px; }

/* 8. Footer */
.footer { padding: 96px 0 40px; color: var(--white); font-size: 16px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 48px; }
.footer-brand img { width: 220px; height: auto; margin-bottom: 24px; }
.footer-brand p { color: var(--steel); max-width: 34ch; }
.footer h3 { font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); margin-bottom: 16px; }
.footer li { margin-bottom: 8px; color: var(--steel); }
.footer a { text-decoration: none; color: var(--white); }
.footer a:hover { text-decoration: underline; }
.footer-bottom { display: flex; gap: 12px; margin-top: 72px; color: var(--steel); font-size: 14px; }
.footer-bottom a { color: var(--steel); }

/* Reveal */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; transition-delay: var(--d, 0ms); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar::after { transition: none; }
}

/* Tablet */
@media (max-width: 1100px) {
  :root { --gutter: 48px; --pad: 112px; }
  .mega { font-size: 96px; }
  .mega-final { font-size: 104px; }
  .h-big { font-size: 64px; }
  .num { font-size: 150px; }
  .statements li { font-size: 38px; }
  .andres-grid { grid-template-columns: 320px 1fr; gap: 56px; }
  .problem-head { gap: 40px; }
  .quote p { font-size: 44px; }
}

/* Phone */
@media (max-width: 760px) {
  :root { --gutter: 20px; --pad: 88px; --screen: min(100svh, 860px); }
  body { font-size: 17px; }
  .nav-links, .nav-cta { display: none; }
  .nav-menu { display: block; }
  .nav-logo img { width: 112px; }

  .mega { font-size: 56px; line-height: 1; letter-spacing: -0.03em; }
  .h-big { font-size: 40px; line-height: 1.06; }
  .sub { font-size: 21px; }
  .label { font-size: 19px; }
  .support { font-size: 19px; }

  .opening { padding: calc(var(--nav-h) + 188px) 0 64px; }
  .opening .label { margin-bottom: 20px; }
  .opening .mega { margin-bottom: 28px; }
  .opening .sub { margin-bottom: 32px; }
  .orbit { width: 168px; right: -28px; top: calc(var(--nav-h) + 12px); transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    .js .opening .orbit { transform: rotate(-12deg); }
    .js .opening.is-drawn .orbit { transform: none; }
  }

  .actions { flex-direction: column; align-items: stretch; gap: 20px; }
  .btn { width: 100%; }
  .chev { text-align: center; padding: 6px 0; }

  .problem { min-height: 0; }
  .problem-head { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 44px; }
  .bleed-photo { height: auto; aspect-ratio: 1 / 1; }
  .bleed-photo img { object-position: 56% 30%; }

  .steps { grid-template-columns: 1fr; gap: 48px; margin: 48px 0; }
  .num { font-size: 120px; }
  .bar { height: 10px; margin: 18px 0; }
  .step p { max-width: none; }
  .closing { font-size: 19px; }

  .statements { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }
  .statements li { font-size: 30px; padding-top: 18px; }

  .who-head { margin-bottom: 40px; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo-item { height: auto; background: var(--white); }
  .duo-item img { position: static; aspect-ratio: 4 / 3; height: auto; }
  .duo-s1 img { object-position: 50% 30%; aspect-ratio: 4 / 5; }
  .duo-s3 img { object-position: 60% 30%; }
  .duo-item figcaption { position: static; background: none; color: var(--navy); padding: 24px 20px 56px; }
  .duo-item:last-child figcaption { padding-bottom: 88px; }
  .duo-item h3 { font-size: 30px; }
  .duo-item p { font-size: 19px; color: var(--slate-ink); }

  .andres-grid { grid-template-columns: 1fr; gap: 40px; }
  .portrait { width: 320px; }
  .quote p { font-size: 32px; line-height: 1.12; }
  .caption { margin-top: 24px; font-size: 19px; }

  .mega-final { font-size: 56px; line-height: 1; margin-bottom: 28px; }
  .final .sub { margin-bottom: 32px; }
  .final .demo-note { text-align: center; }
  .opening .fine { text-align: center; }

  .footer { padding: 64px 0 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer-brand, .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-wrap: wrap; margin-top: 48px; }
}