@font-face {
  font-family:Montserrat;
  src:url('assets/montserrat.ttf') format('truetype');
  font-weight:100 900;
  font-display:swap
}

@font-face {
  font-family:'DM Sans';
  src:url('assets/dm-sans.ttf') format('truetype');
  font-weight:100 900;
  font-display:swap
}

:root {
  --accent:#35b8be;
  --ink:#012446;
  --orange:#ff6b1a;
  --gutter:6.5vw;
  --body:clamp(18px,1.12vw,21px);
  --heading:clamp(30px,2.5vw,44px);
  --section-space:clamp(40px,4vw,76px)
}

* {
  box-sizing:border-box
}
html {
  background:var(--join);
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--join);
  color:#fff;
  font-family:'DM Sans',sans-serif;
  font-size:var(--body);
  font-weight:300;
  line-height:1.5
}
main {
  overflow:hidden
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
img {
  max-width:100%
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:Montserrat,sans-serif
}
h1,h2 {
  line-height:1.12;
  letter-spacing:-.045em;
  font-weight:700;
  text-wrap:balance
}
h2 {
  font-size:var(--heading)
}
h3 {
  font-size:clamp(17px,1.4vw,24px);
  line-height:1.25;
  letter-spacing:-.025em
}
em {
  font-style:normal;
  color:var(--accent)
}
p {
  margin-top:1em
}
strong {
  font-weight:600
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px
}
button {
  border:0;
  background:none
}
.content-width {
  padding-inline:var(--gutter)
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  background:white;
  color:var(--ink);
  padding:12px
}
.skip-link:focus {
  top:12px
}

/* The approved desktop artwork keeps its original geometry. */
.hero,.care-scene {
  position:relative;
  isolation:isolate;
  height:62vw;
  min-height:580px;
  max-height:1420px;
  background:var(--join)
}

.hero-art,.care-art {
  position:absolute;
  inset:0;
  overflow:hidden;
  isolation:isolate
}
.hero-art {
  background:var(--ink)
}

.background-plane {
  position:absolute;
  inset:-3%;
  z-index:0;
  will-change:transform
}
.background-image {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block
}

.doctor-plane {
  position:absolute;
  z-index:1;
  width:43vw;
  height:45vw;
  right:3.5vw;
  bottom:9vw
}
.doctor-image {
  display:block;
  position:absolute;
  height:100%;
  width:auto;
  max-width:none;
  right:-17.2%;
  bottom:0
}

.wave-plane {
  position:absolute;
  z-index:2;
  left:-4%;
  width:108%;
  bottom:-.2vw;
  pointer-events:none
}
.wave-image {
  display:block;
  width:100%;
  max-width:none;
  height:auto
}

.seam {
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  bottom:-1px;
  height:9vw;
  min-height:65px;
  background:linear-gradient(transparent,var(--join) 83%,var(--join));
  pointer-events:none
}

.site-header {
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:1.5vw var(--gutter);
  padding-left:9.5vw
}
.brand {
  display:block;
  width:clamp(120px,9.5vw,180px);
  flex-shrink:0
}
.brand img {
  display:block;
  width:100%;
  height:auto
}
nav {
  display:flex;
  align-items:center;
  gap:2.1vw;
  font-size:clamp(13px,1vw,17px)
}
nav a,nav button {
  padding:12px 0;
  white-space:nowrap
}
nav a:hover,nav button:hover {
  color:var(--accent)
}
.menu-toggle {
  display:none
}

.hero-copy {
  position:absolute;
  z-index:5;
  left:9.5vw;
  top:9.5vw;
  width:49vw
}
.hero-copy h1 {
  font-size:clamp(40px,3.4vw,66px)
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:clamp(11px,.9vw,16px);
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin:0
}
.eyebrow:before {
  content:'';
  height:2px;
  width:34px;
  flex:none;
  background:var(--accent)
}
.hero-copy .eyebrow {
  margin-bottom:1.2vw
}
.intro {
  max-width:44vw;
  line-height:1.5;
  text-wrap:balance;
  font-size:clamp(20px,1.25vw,24px);
  font-weight:300
}
.cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  padding:18px 32px;
  margin-top:1vw;
  border:1px solid rgba(255,182,89,.42);
  border-radius:999px;
  background:linear-gradient(180deg,#ffb04b,#ff8a24 20%,#ff7417 49%,#e94b00);
  box-shadow:inset 0 2px 2px rgba(255,234,191,.45),inset 0 -4px 6px rgba(126,29,0,.25),0 8px 0 rgba(101,29,0,.3),0 17px 25px rgba(0,0,0,.43),0 14px 32px rgba(255,92,0,.35);
  color:#000;
  font-size:clamp(14px,1.2vw,20px);
  font-weight:700;
  text-transform:uppercase;
  line-height:1.25;
  transition:filter .24s ease
}

.cta,button {
  animation:medoptim-heartbeat 2.4s ease-in-out infinite;
  transform-origin:center
}

@keyframes medoptim-heartbeat {
  0%,36%,100% {
  transform:translateY(0) scale(1)
}
10% {
  transform:translateY(-3px) scale(1.035)
}
18% {
  transform:translateY(0) scale(1)
}
26% {
  transform:translateY(-2px) scale(1.02)
}

}

.cta:hover,.cta:focus-visible,button:hover,button:focus-visible {
  animation:none;
  transform:translateY(-3px)
}
.cta:hover {
  filter:brightness(1.07) saturate(1.06)
}
.cta:active,button:active {
  animation:none;
  transform:translateY(1px)
}

.reassurance {
  list-style:none;
  display:flex;
  position:relative;
  isolation:isolate;
  gap:1.7vw;
  padding:0;
  margin:26px 0 0;
  font-size:clamp(11px,.95vw,16px)
}
.reassurance li {
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap
}
.reassurance svg {
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.3;
  flex:none
}

.definition {
  padding-block: 24px var(--section-space);
  background: radial-gradient(ellipse at 80% 45%, rgba(53,184,190,.065), transparent 60%), var(--join);
}
.definition h2 {max-width:1200px; margin:0 auto 28px; text-align:center}
.definition-intro {display:block; max-width:1080px; margin-inline:auto; text-align:center}
.definition-intro p {margin:0; line-height:1.6; text-wrap:pretty}
.definition-intro p + p {margin-top:14px}
.comparison {display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px}
.comparison-card {
  padding:30px 32px 32px;
  border:1px solid rgba(87,190,210,.3);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.008)),rgba(1,25,47,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 30px rgba(0,12,26,.24),0 3px 9px rgba(0,12,26,.12);
  backdrop-filter:blur(10px);
}
.comparison-card--selarl {
  border-color:rgba(53,184,190,.7);
  background:radial-gradient(ellipse at 100% 0%,rgba(53,184,190,.13),transparent 65%),linear-gradient(145deg,rgba(255,255,255,.04),transparent),rgba(1,25,47,.3);
}
.comparison-header {display:flex; align-items:center; gap:18px; padding-bottom:24px; border-bottom:1px solid rgba(99,192,209,.2)}
.comparison-icon {display:block; color:var(--accent); flex:none}
.comparison-icon svg {display:block; width:46px; height:46px}
.comparison-header .comparison-label {margin:0 0 7px; color:#c3dfe6; font-size:13px; font-weight:400; letter-spacing:.075em; text-transform:uppercase; line-height:1.5}
.comparison-header h3 {font-size:clamp(24px,1.9vw,32px); font-weight:650; letter-spacing:-.025em}
.comparison-card--selarl h3 {color:var(--accent)}
.comparison-body {padding-top:22px}
.comparison-body p {margin:0; line-height:1.6}
.comparison-body p + p {margin-top:14px}
.definition-outcome {display:flex; align-items:center; gap:22px; margin-top:24px; padding:22px 28px; border:1px solid rgba(53,184,190,.35); border-radius:14px; background:linear-gradient(90deg,rgba(53,184,190,.09),rgba(1,25,47,.23))}
.outcome-icon {flex:none; color:var(--accent)}
.outcome-icon svg {display:block; width:36px; height:36px}
.definition-outcome p {max-width:1100px; margin:0; line-height:1.6}
.definition h2:before {margin-inline:auto}
.definition h2:before,.care-copy h2:before,.journey h2:before {
  content:'';
  display:block;
  width:34px;
  height:2px;
  background:var(--accent);
  margin-bottom:18px
}

.care-background {
  position:absolute;
  inset:0;
  z-index:0;
  background:var(--join);
  overflow:hidden
}
.care-background img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:translateY(-7vw)
}
.care-entry {
  position:absolute;
  inset:0 0 auto;
  height:14vw;
  min-height:90px;
  z-index:1;
  background:linear-gradient(var(--join),rgba(1,48,88,.95) 10%,transparent);
  pointer-events:none
}
.care-wave {
  position:absolute;
  z-index:3;
  width:112%;
  left:-10%;
  bottom:-2vw;
  pointer-events:none
}
.care-wave img {
  display:block;
  width:100%;
  max-width:none;
  height:auto
}
.care-scene .seam {
  height:10vw
}
.care-ball {
  position:absolute;
  z-index:2;
  display:block;
  width:27vw;
  height:auto;
  left:-4vw;
  bottom:7vw;
  pointer-events:none
}
.care-copy {
  position:absolute;
  z-index:5;
  left:54%;
  top:6%;
  width:39.5%;
  max-width:760px
}
.care-copy p {
  line-height:1.55;
  font-weight:250;
  font-size:var(--body)
}

.journey {
  position:relative;
  background:var(--join);
  padding-block:12px var(--section-space)
}
.benefits {
  list-style:none;
  margin:0 0 var(--section-space);
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr)
}
.benefits li {
  display:flex;
  align-items:center;
  flex-direction:column;
  text-align:center;
  gap:15px;
  padding:0 24px;
  border-right:1px solid #35b8be80;
  font-size:clamp(15px,1.25vw,21px);
  line-height:1.35
}
.benefits li:last-child {
  border:0
}
.benefits svg {
  width:56px;
  height:56px;
  color:var(--accent)
}
.benefits span {
  max-width:190px
}
.steps {
  list-style:none;
  padding:0;
  margin:2.4vw 0 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px
}
.step-number {
  display:block;
  font-family:Montserrat,sans-serif;
  color:var(--accent);
  font-size:clamp(32px,3.5vw,56px);
  font-weight:750;
  line-height:1;
  margin-bottom:22px
}
.steps p {
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.6;
  margin-top:12px
}

.team-scene {
  position:relative;
  isolation:isolate;
  aspect-ratio:1683/935;
  background:var(--join)
}
.team-art {
  position:absolute;
  inset:0;
  overflow:hidden
}
.team-image {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.team-art:before,.team-art:after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  z-index:1;
  height:6vw;
  pointer-events:none
}
.team-art:before {
  top:0;
  background:linear-gradient(var(--join),transparent)
}
.team-art:after {
  bottom:0;
  background:linear-gradient(transparent,var(--join))
}
.team-copy {
  position:absolute;
  z-index:2;
  left:var(--gutter);
  top:8%;
  bottom:5%;
  width:34%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px
}

.profession,.final-copy {
  position:relative;
  width:100%
}

.profession-list {
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:0 20px;
  font-size:clamp(14px,1vw,17px);
  font-weight:400;
  color:#d7eff1
}

.profession-list li {
  padding:8px 0;
  border-bottom:1px solid #35b8be70
}
.profession h2,.final-copy h2 {
  font-size:clamp(28px,2.3vw,42px)
}
.profession p,.final-copy>p:not(.eyebrow) {
  font-size:var(--body);
  line-height:1.6
}
.final-copy .eyebrow {
  margin-bottom:18px;
  font-size:clamp(10px,.75vw,13px)
}
.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:var(--join);
  padding:28px var(--gutter) 36px;
  font-size:14px;
  border-top:1px solid #35b8be30
}

.footer-brand {
  width:88px;
  flex:none
}
.footer-brand img {
  display:block;
  width:100%;
  height:auto
}
.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:16px 28px
}
.site-footer a:hover {
  text-decoration:underline
}

#faq {
  background:var(--ink);
  color:white;
  border:1px solid var(--accent);
  border-radius:18px;
  padding:32px;
  width:min(680px,calc(100% - 32px));
  max-height:85svh
}
#faq::backdrop {
  background:#001222c9
}
#faq h2 {
  font-size:30px;
  margin:25px 0
}
#faq details {
  border-top:1px solid #35b8be55;
  padding:18px 0
}
#faq summary {
  font-weight:700;
  cursor:pointer
}
#faq p {
  font-size:17px
}
.dialog-close {
  display:block;
  margin-left:auto;
  font-size:16px
}

@media(min-width:2200px) {
  .doctor-plane {
  height:1000px;
  width:950px;
  bottom:190px
}
.wave-plane {
  bottom:-20px
}
.seam {
  height:200px
}
.hero-copy {
  top:260px;
  max-width:950px
}
.intro {
  max-width:850px
}

}

/* Separate small-screen composition: readable text in flow, artwork below. */
@media(max-width:1100px) {
  :root {
  --gutter:6vw;
  --body:18px;
  --heading:clamp(28px,4.5vw,38px)
}
.hero,.care-scene {
  height:auto;
  min-height:0;
  max-height:none;
  display:flex;
  flex-direction:column
}
.site-header {
  order:0;
  padding:25px var(--gutter);
  min-height:88px
}
.brand {
  width:125px
}
.menu-toggle {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  padding:10px 0
}
.site-header nav {
  display:none;
  position:absolute;
  top:100%;
  left:var(--gutter);
  right:var(--gutter);
  background:var(--ink);
  border:1px solid #35b8be80;
  border-radius:12px;
  padding:12px 22px;
  box-shadow:0 12px 30px #0005;
  font-size:17px
}
.site-header nav.is-open {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0
}
.hero-copy {
  position:relative;
  order:1;
  left:auto;
  top:auto;
  width:auto;
  padding:30px var(--gutter) 0;
  max-width:760px
}
.hero-copy h1 {
  font-size:clamp(35px,5.5vw,56px)
}
.hero-copy .eyebrow {
  margin-bottom:24px
}
.intro {
  max-width:630px;
  font-size:var(--body)
}
.cta {
  font-size:14px;
  margin-top:26px;
  padding:17px 25px
}
.reassurance {
  gap:20px;
  font-size:12px;
  margin-top:28px
}
.hero-art {
  position:relative;
  order:2;
  inset:auto;
  height:62vw;
  min-height:350px;
  margin-top:24px
}
.hero-art:before {
  content:'';
  position:absolute;
  inset:0 0 auto;
  z-index:1;
  height:70px;
  background:linear-gradient(var(--join),transparent);
  pointer-events:none
}
.doctor-plane {
  height:55vw;
  width:60vw;
  right:7vw;
  bottom:6vw
}
.wave-plane {
  bottom:-2vw
}
.definition {
  padding-block:28px 40px
}
.comparison {gap:20px}
.definition-outcome {
  margin-top:24px
}
.care-copy {
  position:relative;
  order:0;
  left:auto;
  top:auto;
  width:auto;
  max-width:760px;
  padding:10px var(--gutter) 24px
}
.care-copy h2 br {
  display:none
}
.care-art {
  position:relative;
  order:1;
  inset:auto;
  height:62vw;
  min-height:350px
}
.care-entry {
  height:80px
}
.journey {
  padding-block:25px 40px
}
.benefits {
  margin-bottom:50px
}
.benefits li {
  font-size:15px;
  padding:0 12px
}
.steps {
  grid-template-columns:repeat(2,1fr);
  gap:32px;
  margin-top:30px
}
.steps p {
  font-size:17px
}
.steps h3 {
  font-size:21px
}
.step-number {
  font-size:40px;
  margin-bottom:16px
}
.team-scene {
  display:flex;
  flex-direction:column;
  aspect-ratio:auto
}
.team-copy {
  display:contents
}
.team-art {
  position:relative;
  inset:auto;
  order:1;
  aspect-ratio:1683/935
}
.profession,.final-copy {
  position:relative;
  left:auto;
  top:auto;
  width:auto;
  padding:28px var(--gutter);
  max-width:760px
}
.profession {
  order:0
}
.final-copy {
  order:2
}
.profession h2,.final-copy h2 {
  font-size:var(--heading)
}
.profession p,.final-copy>p:not(.eyebrow) {
  font-size:var(--body)
}
.final-copy .eyebrow {
  font-size:11px
}
.site-footer {
  justify-content:space-between;
  font-size:13px
}
.team-art:before,.team-art:after {
  height:45px
}

}

@media(max-width:600px) {
  .comparison {grid-template-columns:1fr;gap:18px}.comparison-card{padding:24px}.comparison-header{gap:14px;padding-bottom:20px}.comparison-header .comparison-label{font-size:11px}.comparison-icon svg{width:38px;height:38px}.definition-outcome{align-items:flex-start;gap:14px;padding:20px}.outcome-icon svg{width:28px;height:28px}
.comparison {margin-top:24px}
.definition h2 {
  margin-bottom:24px
}
.profession-list {
  font-size:15px;
  gap:0 18px
}
.site-footer {
  align-items:flex-start
}
.footer-brand {
  width:70px
}
.footer-links {
  flex-direction:column;
  gap:12px
}
.brand {
  width:110px
}
.hero-copy {
  padding-top:20px
}
.hero-copy h1 {
  font-size:clamp(32px,8.5vw,45px)
}
.hero-copy h1 br {
  display:none
}
.eyebrow {
  font-size:10px;
  gap:10px;
  letter-spacing:.12em
}
.reassurance {
  gap:12px;
  justify-content:space-between;
  font-size:10px
}
.reassurance li {
  flex-direction:column;
  gap:7px
}
.hero-art {
  height:110vw;
  min-height:370px
}
.background-plane {
  inset:-2% -30%
}
.background-image {
  object-position:67% center
}
.doctor-plane {
  width:90vw;
  height:90vw;
  right:2vw;
  bottom:60px
}
.wave-plane {
  width:200%;
  left:-55%;
  bottom:0
}
.seam {
  height:70px
}
.care-art {
  height:125vw;
  min-height:410px
}
.care-background img {
  object-position:25% center;
  transform:translateY(-35px)
}
.care-entry {
  height:65px
}
.care-ball {
  width:36.3vw;
  left:-7vw;
  bottom:55px
}
.care-wave {
  width:200%;
  left:-45%;
  bottom:0
}
.care-scene .seam {
  height:70px
}
.benefits {
  grid-template-columns:repeat(2,1fr);
  gap:30px 0
}
.benefits li:nth-child(2) {
  border:0
}
.benefits svg {
  width:48px;
  height:48px
}
.steps {
  grid-template-columns:1fr;
  gap:26px
}
.steps li {
  position:relative;
  padding-left:64px
}
.step-number {
  position:absolute;
  left:0;
  top:0;
  font-size:32px
}
.team-art {
  aspect-ratio:1
}
.team-image {
  object-position:90% center
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
.background-plane {
  will-change:auto
}
.cta,button,.cta:hover,button:hover {
  animation:none;
  transform:none
}

}