:root {
  --cyan: #20B8D6;
  --cyan-hover: #1A96B0;
  --cyan-light: #E6F8FB;
  --charcoal: #3D4F5F;
  --heading: #1A1A2E;
  --body: #2E2E2E;
  --white: #FFFFFF;
  --off-white: #F7F9FA;
  --light-gray: #F2F2F2;
  --silver: #BDC7D0;
  --magenta: #E000B8;
  --yellow: #F5E400;
  --shadow-card: 0 4px 28px rgb(26 26 46 / .09);
  --shadow-hover: 0 8px 30px rgb(26 26 46 / .13);
  --radius-card: 40px;
  --section-space: 48px;
  --page-gutter: 20px;
  --speed: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--body); background: var(--white); font: 400 1rem/1.65 Montserrat, sans-serif; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; }
img, video { max-width: 100%; height: auto; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: var(--charcoal); text-underline-offset: .22em; transition: color var(--speed) ease; }
a:hover, a:active { color: var(--heading); }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--heading); outline-offset: 4px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { color: var(--heading); line-height: 1.17; }
h1, h2 { font-weight: 700; letter-spacing: -.04em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 15ch; }
h2 { font-size: clamp(1.75rem, 3vw, 2.7rem); max-width: 21ch; }
h3 { font-size: 1.13rem; font-weight: 600; letter-spacing: -.02em; }
p { max-width: 65ch; }
[hidden] { display: none !important; }
.container { width: 100%; max-width: 1204px; padding-inline: var(--page-gutter); margin-inline: auto; }
.section { padding-block: var(--section-space); scroll-margin-top: 20px; }
.section--tint { background: var(--off-white); }
.section-intro { display: grid; justify-items: start; gap: 16px; align-content: start; }
.section-intro--center { justify-items: center; text-align: center; margin: 0 auto 36px; }
.section-intro--center p { max-width: 62ch; }
.eyebrow { font-size: .78rem; line-height: 1.4; font-weight: 700; color: var(--charcoal); letter-spacing: .075em; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; border: 2px solid transparent; border-radius: 999px; padding: 12px 28px; text-align: center; text-decoration: none; line-height: 1.25; font-size: .94rem; font-weight: 700; cursor: pointer; transition: background-color var(--speed) ease, box-shadow var(--speed) ease, transform var(--speed) ease; }
.button--primary { color: var(--heading); background: var(--cyan); box-shadow: 0 5px 14px rgb(32 184 214 / .19); }
.button--primary:hover { color: var(--heading); background: var(--cyan-hover); box-shadow: 0 7px 18px rgb(26 150 176 / .22); transform: translateY(-2px); }
.button--primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgb(26 150 176 / .2); }
.icon-circle { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--light-gray); color: var(--charcoal); }
.card { min-width: 0; border-radius: var(--radius-card); background: var(--white); box-shadow: var(--shadow-card); }

.site-header { background: var(--white); }
.site-header__inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-block; border-radius: 8px; }
.brand img { width: 148px; height: auto; }
.site-header__tagline { font-size: .88rem; font-weight: 600; color: var(--charcoal); text-align: right; }
.hero { padding-block: 24px 36px; background: var(--white); }
.hero__grid { display: grid; gap: 22px; align-items: center; }
.hero__copy { display: grid; justify-items: start; gap: 18px; }
.hero__subhead { font-size: 1.04rem; line-height: 1.6; max-width: 53ch; }
.hero__note { font-size: .82rem; color: var(--charcoal); }
.hero__visual { display: flex; justify-content: center; align-items: center; min-width: 0; }
.hero__visual img { display: block; width: min(100%, 381px); object-fit: contain; }
.cmy-divider { display: flex; width: 100%; height: 4px; }
.cmy-divider span { flex: 1; }
.cmy-divider span:nth-child(1) { background: var(--cyan); }
.cmy-divider span:nth-child(2) { background: var(--magenta); }
.cmy-divider span:nth-child(3) { background: var(--yellow); }
.benefits { padding-block: 24px; background: var(--off-white); }
.benefits__grid { display: grid; gap: 20px; }
.benefit { display: flex; align-items: center; gap: 14px; font-size: .91rem; font-weight: 600; color: var(--heading); }

.offer__grid { display: grid; gap: 36px; align-items: center; }
.offer__card { padding: 30px; }
.offer__card h3 { margin-bottom: 24px; }
.deliverables { display: grid; gap: 20px; list-style: none; margin: 0; padding: 0; }
.deliverables li { display: flex; align-items: flex-start; gap: 14px; }
.deliverables svg { flex: 0 0 24px; color: var(--charcoal); }
.product-grid { display: grid; gap: 20px; }
.product-card { overflow: hidden; border: 1px solid var(--light-gray); box-shadow: none; transition: box-shadow var(--speed) ease, transform var(--speed) ease; }
.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.product-card__image { display: flex; align-items: center; justify-content: center; height: 190px; padding: 16px 24px 0; background: var(--white); overflow: hidden; }
.product-card__image img { max-height: 170px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.product-card__image--pair { gap: 8px; }
.product-card__image--pair img { max-width: calc(50% - 4px); }
.product-card__copy { padding: 16px 28px 30px; }
.product-card__copy .icon-circle { margin-bottom: 16px; }
.product-card h3 { margin-bottom: 8px; }
.product-card p { font-size: 1rem; }

.evidence-grid { display: grid; gap: 20px; }
.evidence-photo { overflow: hidden; padding: 12px 12px 20px; text-align: center; }
.evidence-photo img { width: auto; max-width: 100%; height: auto; margin-inline: auto; border-radius: 26px; object-fit: contain; }
.evidence-photo figcaption { padding: 16px 12px 0; font-size: .88rem; font-weight: 600; color: var(--charcoal); }
.story-grid { display: grid; gap: 20px; margin-top: 36px; align-items: start; }
.case-study { overflow: hidden; }
.case-study__trigger { width: 100%; position: relative; display: grid; gap: 14px; text-align: left; border: 0; padding: 32px 60px 28px 32px; background: var(--white); cursor: pointer; transition: background-color var(--speed) ease; }
.case-study__trigger:hover, .case-study__trigger:active { background: var(--cyan-light); }
.case-study__label { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--charcoal); }
.case-study__title { color: var(--heading); font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.case-study__teaser { font-size: 1rem; line-height: 1.6; color: var(--body); }
.case-study__indicator { position: absolute; right: 30px; top: 44px; width: 11px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(225deg); transition: transform var(--speed) ease; }
.case-study__trigger[aria-expanded="false"] .case-study__indicator { transform: rotate(45deg); }
.case-study__panel { padding: 0 32px 32px; }
.case-study__panel p { margin-top: 22px; }
.case-study__stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-study__stats div { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 18px; border-radius: 20px; background: var(--off-white); }
.case-study__stats span, .case-study__stats small { color: var(--charcoal); font-size: .75rem; }
.case-study__stats strong { overflow-wrap: anywhere; color: var(--heading); font-size: clamp(1.18rem, 3.2vw, 1.7rem); line-height: 1.2; }
.case-study__panel .fine-print { color: var(--charcoal); font-size: .78rem; margin-top: 12px; }
.video-story { display: grid; gap: 20px; padding: 20px; }
.video-story__frame { width: min(100%, 260px); margin-inline: auto; }
.video-story video { width: 100%; aspect-ratio: 480 / 850; border-radius: 22px; background: var(--heading); object-fit: contain; }
.video-story figcaption { display: grid; gap: 6px; font-size: 1rem; }
.video-story figcaption strong { color: var(--heading); }

.process-grid { display: grid; gap: 20px; list-style: none; padding: 0; margin: 0; }
.process-card { position: relative; padding: 30px; background: var(--off-white); box-shadow: none; }
.process-card__number { position: absolute; right: 30px; top: 28px; color: var(--charcoal); font-size: .9rem; font-weight: 700; }
.process-card .icon-circle { background: var(--white); margin-bottom: 20px; }
.process-card h3 { margin-bottom: 10px; }
.process-card p { font-size: 1rem; }
.process__action { margin-top: 30px; text-align: center; }
.section--contact { background: var(--charcoal); }
.contact-card { display: grid; gap: 32px; padding: 32px; }
.contact-card__intro { display: grid; gap: 18px; align-content: center; }
.contact-card__actions { display: grid; justify-items: start; align-content: center; gap: 12px; padding-top: 28px; border-top: 1px solid var(--silver); }
.contact-card__note, .contact-card__address-label, .contact-card__status { font-size: .82rem; color: var(--charcoal); }
.contact-card__address-label { margin-top: 14px; }
.contact-card__address { color: var(--heading); font-weight: 600; overflow-wrap: anywhere; user-select: text; }
.text-button { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--charcoal); text-decoration: underline; text-underline-offset: .2em; font-weight: 600; cursor: pointer; transition: color var(--speed) ease; }
.text-button:hover, .text-button:active { color: var(--heading); }
.contact-card__status { min-height: 1.4em; }
#contact-heading:focus { outline: none; }
#contact-heading:focus-visible { outline: 3px solid var(--heading); outline-offset: 6px; }
.faq__grid { display: grid; gap: 32px; }
.faq__list { border-top: 1px solid var(--silver); }
.faq__list details { border-bottom: 1px solid var(--silver); }
.faq__list summary { padding: 20px 36px 20px 0; color: var(--heading); font-weight: 600; cursor: pointer; transition: color var(--speed) ease; }
.faq__list summary:hover, .faq__list summary:active { color: var(--charcoal); }
.faq__list details p { padding: 0 26px 20px 0; font-size: 1rem; }
.footer { padding-block: 44px; background: var(--off-white); }
.footer__grid { display: grid; gap: 30px; }
.brand--footer img { width: 150px; }
.footer__grid > div:first-child p { font-size: .85rem; margin-top: 12px; }
.footer__links { display: grid; align-content: start; justify-items: start; gap: 12px; font-size: .88rem; }
.footer__disclosure { font-size: .78rem; color: var(--charcoal); }
.sticky-cta { position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--silver); background: var(--white); box-shadow: 0 -5px 20px rgb(26 26 46 / .1); }
.sticky-cta .button { width: 100%; }

@media (max-width: 767px) {
  .hero__copy .button, .offer__grid .button, .process__action .button, .contact-card__actions .button { width: 100%; }
  .hero__copy { justify-items: stretch; }
  .hero__copy .eyebrow, .hero__copy h1, .hero__copy p { justify-self: start; }
  body:has(.sticky-cta:not([hidden])) { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) {
  :root { --page-gutter: 32px; --section-space: 80px; }
  .benefits__grid, .evidence-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header__inner { min-height: 106px; }
  .brand img { width: 180px; }
  .hero { padding-block: 64px 80px; }
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; }
  .hero__copy { gap: 24px; }
  .hero__subhead { font-size: 1.13rem; }
  .hero__visual img { max-width: 381px; }
  .benefits { padding-block: 28px; }
  .benefit { flex-direction: row; text-align: left; }
  .offer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; }
  .story-grid { grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); }
  .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-card { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 48px; padding: 54px; }
  .contact-card__actions { border-top: 0; border-left: 1px solid var(--silver); padding: 0 0 0 48px; }
  .faq__grid { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); gap: 64px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__disclosure { grid-column: 1 / -1; }
  .sticky-cta { display: none !important; }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .button:hover, .button:active, .product-card:hover { transform: none; }
}