/* ==========================================================================
   Home — scan scene, about, bento, route, research, path, videos, desk, FAQ
   ========================================================================== */

/* ---------- SCAN: pinned 3D stage beside the scrolling steps ---------- */
.scan {
  position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: clamp(24px, 4vw, 64px);
}
.scan::before { /* tile-hall seams behind the whole scene */
  content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--seam) 1px, transparent 1px) 0 0 / 100% 96px,
    linear-gradient(90deg, var(--seam) 1px, transparent 1px) 50% 0 / 96px 100%;
  mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent);
}
.scan__stage { overflow: clip; container-type: inline-size; /* the chapter word is sized to the stage width */
  grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100svh; align-self: start;
  display: grid; place-items: center;
}
.scan__canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; } /* pinned to the stage: the drawing buffer size must never feed back into layout */
.scan__chip {
  z-index: 2; position: absolute; left: 50%; bottom: clamp(24px, 6vh, 56px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1px var(--seam-2), 0 8px 24px -14px rgb(13 17 23 / .3);
  font-size: .86rem; font-weight: 500; color: var(--ink-2); white-space: nowrap;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.scan__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-w); }
.scan__flow { grid-column: 1; grid-row: 1; }
.scan__step { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 64px; }

.hero__h { margin-bottom: 26px; }
.display {
  display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(3rem, 1.5rem + 5.6vw, 6rem); line-height: .98; letter-spacing: -.04em;
  text-wrap: balance;
}
.hero__by { display: block; margin-top: 22px; font-size: clamp(1rem, .95rem + .2vw, 1.12rem); font-weight: 500; color: var(--ink-2); letter-spacing: -.01em; }
.hero__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.creds { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--seam-2); }
.creds li { font-size: .92rem; font-weight: 500; color: var(--ink-3); }



.zone__h { font-family: var(--f-display); font-size: clamp(3.2rem, 2rem + 4.6vw, 6rem); font-weight: 400; line-height: .95; letter-spacing: -.04em; }
.zone__lead { margin: 18px 0 30px; max-width: 46ch; color: var(--ink-2); font-size: 1.08rem; }
.cond { border-top: 1px solid var(--seam-2); margin-bottom: 26px; }
.cond a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; padding: 18px 44px 18px 0; position: relative;
  border-bottom: 1px solid var(--seam-2); text-decoration: none;
}
.cond a > * { transition: transform var(--t-mid) var(--ease); }
.cond a:hover > * { transform: translateX(8px); }
.cond a::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  background: currentColor; color: var(--ink-3);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-mid) var(--ease), color var(--t-fast) var(--ease);
}
.cond a:hover::after { color: var(--cobalt); transform: translate(3px, -3px); }
.cond b { font-weight: 600; font-size: 1.08rem; letter-spacing: -.015em; }
.cond span { color: var(--ink-2); text-align: right; font-size: .95rem; }
.cond small { grid-column: 1 / -1; font-size: .76rem; color: var(--cobalt); }

/* ---------- ABOUT ---------- */
.about { padding: var(--sec) 0; }
.about__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 110px); align-items: stretch; }
/* copy spans exactly the photo's height: heading on the photo's top edge, link on its bottom edge */
.about__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding-block: 6px; }
.about .h2 { font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); margin: 0; }
.about__creds { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 22px; border-top: 1px solid var(--seam); }
.about__creds li { display: grid; gap: 4px; }
.about__creds b { font-family: var(--f-display); font-size: 1.05rem; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.about__creds span { font-size: .86rem; line-height: 1.45; color: var(--ink-3); }
.about__frame { overflow: hidden; aspect-ratio: 4 / 5; }
/* photo keeps 4:5 at minimum, and grows with the copy if the copy is taller: both columns end on one line */
.about__photo { display: flex; flex-direction: column; margin: 0; }
.about__photo .about__frame { flex: 1 1 auto; }
.about__frame .ph { border-radius: var(--r-core); }
.focus { font-size: clamp(1.08rem, .92rem + .5vw, 1.38rem); line-height: 1.5; letter-spacing: -.012em; font-weight: 400; margin: 0; }
.focus .w { transition: color .35s var(--ease); color: rgb(13 17 23 / .47); } /* ≥3:1 on milk even unlit */
.focus .w.is-lit { color: var(--ink); }
.about__facts { display: flex; flex-wrap: wrap; gap: 10px 34px; margin-bottom: 30px; color: var(--ink-2); }
.about__facts b { font-size: 1.6rem; font-weight: 500; color: var(--ink); margin-right: 6px; }

/* ---------- BENTO ---------- */
.bento { padding: var(--sec) 0; background: var(--white); border-block: 1px solid var(--seam); }
.bento__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.bento__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 56px; }
.bento__head .h2 { margin: 0; }
.bento__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tile { grid-column: span 3; display: block; text-decoration: none; transition: transform var(--t-mid) var(--ease); }
.tile:nth-child(n+5) { grid-column: span 2; }
.tile__core {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 20px; overflow: hidden;
  transition: box-shadow var(--t-mid) var(--ease);
}
.tile:hover { transform: translateY(-4px); }
.tile:hover .tile__core { box-shadow: var(--shadow-lift), inset 0 1px 0 rgb(255 255 255 / .9); }
.tile__h { margin: 0 12px; font-family: var(--f-display); font-size: clamp(1.35rem, 1.1rem + .6vw, 1.7rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.tile__core p { margin: 0 12px; color: var(--ink-2); max-width: 40ch; }
.tile__zone { margin: 10px 12px 0; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); }
.tile__go {
  order: 6; margin: auto 12px 0 auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  font-size: .86rem; font-weight: 600; color: var(--cobalt);
}
.tile__go svg { width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: var(--cobalt-w); fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform var(--t-mid) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.tile:hover .tile__go svg { background: var(--cobalt); color: var(--white); transform: translate(2px, -2px); }
.tile__art { width: min(78%, 340px); margin: auto 0 26px auto; fill: none; stroke: rgb(13 17 23 / .22); stroke-width: 1.4; stroke-linecap: round; }
.tile__art .tile__hot { stroke: var(--cobalt); stroke-width: 3; }

/* ---------- ROUTE (career globe, light) ---------- */
.route { padding: var(--sec) 0; }
.route__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.route__globe { position: relative; aspect-ratio: 1; max-width: 580px; width: 100%; justify-self: center; }
.globe { width: 100%; height: 100%; }
.route__now {
  position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); padding: 10px 20px; border-radius: var(--r-pill);
  background: var(--white); box-shadow: inset 0 0 0 1px var(--seam-2), 0 10px 24px -14px rgb(13 17 23 / .3);
  font-weight: 600; letter-spacing: -.02em; white-space: nowrap;
}
.stops { margin-top: 30px; border-top: 1px solid var(--seam-2); }
.stop {
  width: 100%; text-align: left; display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  padding: 15px 14px; border-bottom: 1px solid var(--seam-2); border-radius: 0;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.stop__yr { font-size: .9rem; color: var(--ink-3); }
.stop__where { font-size: .82rem; color: var(--ink-3); }
.stop:hover { background: var(--white); }
.stop.is-on { background: var(--cobalt-w); }
.stop.is-on .stop__yr, .stop.is-on .stop__where { color: var(--cobalt); }

/* ---------- RESEARCH ---------- */
.research { padding: var(--sec) 0; background: var(--white); border-block: 1px solid var(--seam); }
.research__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.research__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; margin-bottom: 48px; }
.research__head .h2 { grid-row: span 2; margin: 0; }
.research__nums { display: flex; flex-wrap: wrap; gap: 8px 26px; color: var(--ink-2); }
.research__nums b { font-size: 1.5rem; font-weight: 500; color: var(--ink); margin-right: 4px; }
.papers { padding: 10px 28px 8px; overflow-x: auto; }
.papers__t { width: 100%; min-width: 560px; }
.papers__t caption { text-align: left; font-weight: 600; font-size: 1.05rem; padding: 18px 0 10px; letter-spacing: -.015em; }
.papers__t th { text-align: left; font-size: .8rem; font-weight: 500; color: var(--ink-3); padding: 0 12px 10px 0; border-bottom: 1px solid var(--seam-2); }
.papers__t td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--seam); vertical-align: baseline; }
.papers__t tbody tr:last-child td { border-bottom: 0; }
.papers__t td:first-child { width: 3.4rem; color: var(--ink-3); }
/* each study opens at its DOI (journal page); the whole row reacts */
.papers__a { color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-mid) var(--ease), color var(--t-fast) var(--ease); }
.papers__a::after { content: "\2197"; display: inline-block; margin-left: 6px; font-size: .85em; color: var(--cobalt); opacity: .55; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.papers__t tbody tr { transition: background var(--t-fast) var(--ease); }
.papers__t tbody tr:hover { background: rgb(9 44 116 / .035); }
.papers__t tbody tr:hover .papers__a, .papers__a:focus-visible { color: var(--cobalt); background-size: 100% 1px; }
.papers__t tbody tr:hover .papers__a::after, .papers__a:focus-visible::after { opacity: 1; transform: translate(2px, -2px); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.papers__n { text-align: right !important; padding-right: 0 !important; }
td.papers__n { font-size: 1.15rem; color: var(--cobalt); }
.tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--mist); font-size: .72rem; font-weight: 600; color: var(--ink-2); vertical-align: 2px; }
.research__src { margin-top: 22px; font-size: .9rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }

/* ---------- PATH (scroll-driven line) ---------- */
.path { padding: var(--sec) 0; }
.path__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.path__line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; margin: 40px 0 72px; padding-top: 34px; }
.path__line::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--seam-2); }
.path__line::after {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--cobalt);
  transform-origin: left; transform: scaleX(var(--p, 1));
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .path__line::after { animation: grow linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
    @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}
.path__dot { position: absolute; top: -34px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--cobalt), 0 0 0 6px var(--milk); }
.path__step { position: relative; }
.path__step h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.03em; margin-bottom: 10px; }
.path__step p { color: var(--ink-2); max-width: 30ch; }
.mrband__core { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; padding: clamp(26px, 3vw, 40px); }
.mrband__h { font-family: var(--f-display); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); font-weight: 500; letter-spacing: -.035em; margin-bottom: 6px; }
.mrband__core p { color: var(--ink-2); max-width: 52ch; }

/* ---------- VIDEOS ---------- */
.videos { padding: var(--sec) 0; background: var(--white); border-block: 1px solid var(--seam); }
.videos__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.videos__grid { display: grid; grid-template-columns: minmax(0, 3.16fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 30px; } /* (16/9)^2 : 1 — a 16:9 and a 9:16 frame end up the same height */
.vid__frame { position: relative; display: block; width: 100%; overflow: hidden; aspect-ratio: 16 / 9; padding: 0; }
.vid--tall .vid__frame { aspect-ratio: 9 / 16; }
.vid__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.vid__frame:hover img { transform: scale(1.04); }
.vid__play {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  display: grid; place-items: center; background: rgb(255 255 255 / .86); color: var(--cobalt);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px -12px rgb(13 17 23 / .45); transition: transform var(--t-mid) var(--ease);
}
.vid__play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 4px; }
.vid__frame:hover .vid__play { transform: scale(1.08); }
.vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid figcaption { margin-top: 14px; color: var(--ink-3); font-size: .92rem; }
.vid figcaption b { display: block; color: var(--ink); font-weight: 600; font-size: 1.02rem; }

/* ---------- DESK (appointment) ---------- */
.desk { padding: var(--sec) 0; }
.desk__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.desk__lines { margin: 34px 0; border-top: 1px solid var(--seam-2); }
.desk__lines a { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding: 18px 2px; border-bottom: 1px solid var(--seam-2); text-decoration: none; }
.desk__lines span { font-size: .88rem; color: var(--ink-3); }
.desk__lines b { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; text-align: right; margin-left: auto; } /* long labels (Russian) wrap the number onto its own line instead of widening the page */
.desk__lines a:hover b { color: var(--cobalt); }

.form { display: grid; gap: 20px; padding: clamp(22px, 3vw, 38px); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-size: .88rem; font-weight: 500; color: var(--ink-2); padding: 0; }
.field legend { margin-bottom: 10px; }
.field__opt { color: var(--ink-3); font-weight: 400; margin-left: 6px; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="url"], .field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; font: 400 1rem/1.4 var(--f-sans); color: var(--ink);
  background: var(--milk); border: 1px solid transparent; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--seam);
  transition: box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 104px; }
.field input::placeholder, .field textarea::placeholder { color: #8A94A4; }
.field input:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px var(--seam-2); }
.field input:focus, .field textarea:focus { outline: none; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--cobalt), 0 0 0 5px var(--cobalt-w); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--err); }
.field__err { color: var(--err); font-size: .88rem; }
.field--hp { position: absolute; left: -9999px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: grid; place-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  background: var(--milk); box-shadow: inset 0 0 0 1px var(--seam-2); font-size: .94rem; font-weight: 500; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.chip:hover span { color: var(--ink); box-shadow: inset 0 0 0 1px rgb(9 44 116 / .35); }
.chip input:checked + span { background: var(--cobalt); color: var(--on-cobalt); box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.check { display: flex !important; gap: 12px; align-items: flex-start; font-weight: 400 !important; font-size: .92rem !important; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.check input {
  appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; cursor: pointer; border-radius: 7px;
  background: var(--milk); box-shadow: inset 0 0 0 1px var(--seam-2); display: grid; place-items: center;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.check input::after { content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--t-fast) var(--ease); }
.check input:checked { background: var(--cobalt); box-shadow: none; }
.check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.check input:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.check input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--err); }
.form__send { justify-self: start; }
.form__send[aria-busy="true"] { opacity: .7; pointer-events: none; }
.form__status { min-height: 1.4em; font-weight: 500; }
.form__status.is-ok { color: #13733F; }
.form__status.is-err { color: var(--err); }

/* ---------- FAQ ---------- */
.faq { padding: var(--sec) 0; background: var(--white); border-top: 1px solid var(--seam); }
.faq__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(32px, 6vw, 110px); align-items: start; }
.faq__in > .h2 { grid-column: 1; grid-row: 1; margin: 0 0 18px; }
.faq__in > .faq__lead { grid-column: 1; grid-row: 2; margin: 0 0 26px; }
.faq__in > .link { grid-column: 1; grid-row: 3; justify-self: start; }
.faq__in > .faq__list { grid-column: 2; grid-row: 1 / span 4; margin-bottom: 0; }
@media (max-width: 900px) { .faq__in { grid-template-columns: 1fr; } .faq__in > * { grid-column: 1 !important; grid-row: auto !important; } .faq__in > .faq__list { margin-bottom: 24px; } }
.faq__list { border-top: 1px solid var(--seam-2); margin-bottom: 30px; }
.q { border-bottom: 1px solid var(--seam-2); }
.q summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 4px; font-size: 1.14rem; font-weight: 500; letter-spacing: -.02em;
  transition: color var(--t-fast) var(--ease);
}
.q summary::-webkit-details-marker { display: none; }
.q summary::after {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat, var(--mist);
  transition: transform var(--t-mid) var(--ease), background-color var(--t-fast) var(--ease);
}
.q[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) { .q summary:hover { color: var(--cobalt); } } /* no sticky hover colour after a tap */
.q__a { padding: 0 4px 26px; color: var(--ink-2); max-width: 70ch; }

/* ---------- responsive ---------- */
/* tablets keep the desktop bento, just scaled down (tablet rules live after the bento motion block) */
@media (max-width: 900px) {
  .scan { grid-template-columns: 1fr; }
  .scan__stage { grid-column: 1; height: 100svh; top: 0; z-index: 0; }
  .scan__flow { grid-column: 1; grid-row: 1; position: relative; z-index: 1; margin-top: 0; }
  .scan__step { min-height: auto; padding: 0 0 56px; }
  .scan__step.hero { min-height: 100svh; justify-content: flex-end; padding: 46svh 0 40px; }
  .scan__step.zone { min-height: 100svh; justify-content: flex-end; padding: 0 0 92px; }
  .zone__card {
    padding: 22px 20px 16px; border-radius: var(--r-shell);
    background: rgb(255 255 255 / .95); box-shadow: inset 0 0 0 1px var(--seam), var(--shadow-soft);
  }
  .zone__card .zone__lead { display: none; }
  .zone__card .cond { margin: 12px 0 8px; }
  .zone__card .cond li:last-child a { border-bottom: 0; }
  .zone__h { font-size: 2.6rem; }
  .zone__lead { margin: 8px 0 14px; font-size: .96rem; }
  .cond a { padding: 12px 34px 12px 0; }
  .cond b { font-size: 1rem; }
  .cond span { font-size: .88rem; }
  .scan__chip { top: calc(var(--nav-h) + 24px); bottom: auto; }
  .hero__cue { display: none; }
  .about__in, .route__in, .desk__in, .research__head, .bento__head { grid-template-columns: 1fr; }
  .research__head .h2 { grid-row: auto; }
  .about__photo { max-width: 420px; }
  .about__copy { justify-content: flex-start; }
  .about__creds { grid-template-columns: 1fr; gap: 14px; }
  .path__line { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .videos__grid { grid-template-columns: minmax(0, 3.16fr) minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .creds { margin-top: 36px; gap: 6px 18px; }
  .creds li { font-size: .84rem; }
  .cond a { grid-template-columns: 1fr; padding-right: 36px; }
  .cond span { text-align: left; }
  .bento__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .tile, .tile:nth-child(n+5) { grid-column: 1 / -1; }
  .tile__core { min-height: 170px; }
  .stop { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .stop__where { display: none; }
  .path__line { grid-template-columns: 1fr; padding-top: 0; padding-left: 34px; }
  .path__line::before, .path__line::after { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .path__line::after { transform-origin: top; transform: scaleY(var(--p, 1)); }
  .path__dot { top: 4px; left: -34px; }
  @supports (animation-timeline: view()) {
    .path__line::after { animation-name: growy; }
    @keyframes growy { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
  .videos__grid { grid-template-columns: 1fr; }
  .vid--tall .vid__frame { aspect-ratio: 4 / 5; }
  .form__row { grid-template-columns: 1fr; }
  .form__send { width: 100%; justify-content: space-between; }
}

/* phones: numbers never break, the papers table reflows instead of scrolling */
.desk__lines b { white-space: nowrap; }
@media (max-width: 680px) {
  .papers { padding: 6px 18px; }
  .papers__t { min-width: 0; }
  .papers__t th:nth-child(3), .papers__t td:nth-child(3) { display: none; }
  .papers__t td:first-child { width: 2rem; }
}

/* chapters last longer: each zone step is tall and its card stays put while the figure holds */
@media (min-width: 901px) {
  .scan__step.zone { min-height: 190svh; justify-content: flex-start; padding: 0; }
  .zone__card { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 110px 0 60px; }
}
@media (max-width: 900px) {
  .scan__step.zone { min-height: 170svh; justify-content: flex-end; padding: 0 0 92px; }
  .zone__card { position: sticky; bottom: 92px; }
}
/* the intro ("Hareketinize geri dönün.") holds like the chapters: a tall step with the copy pinned */
@media (min-width: 901px) {
  .scan__step.hero { min-height: 190svh; justify-content: flex-start; padding: 0; }
  .hero__card { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 64px; }
}
@media (max-width: 900px) {
  .scan__step.hero { min-height: 170svh; padding: 46svh 0 40px; }
  .hero__card { position: sticky; bottom: 40px; }
}
.about__frame .portrait { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-core); }
.about__frame:has(.portrait--cut) { background: radial-gradient(120% 80% at 50% 100%, rgb(9 44 116 / .10), transparent 62%), linear-gradient(180deg, var(--milk), var(--white)); }
.about__frame .portrait--cut { object-fit: contain; object-position: 50% 100%; padding-top: 7%; }

/* ---------- bento motion ----------
   Enter: each tile draws its anatomy once, the lit structure follows, then one scan pass (run by site.js
   with the Web Animations API, so hovering never restarts a neighbour). Nothing loops.
   Hover (this tile only): the reticle locks onto the treated structure, the label turns cobalt,
   the drawing leans toward the cursor, a soft light follows the pointer.
   Only transform / opacity / stroke-dashoffset animate. */
.tile__core { isolation: isolate; }
.tile__fig {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 12px 12%; border-radius: 16px; pointer-events: none;
  background:
    linear-gradient(rgb(9 44 116 / .05) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgb(9 44 116 / .05) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(120% 90% at 50% 40%, #fff, #EEF2FB);
  box-shadow: inset 0 0 0 1px rgb(9 44 116 / .08);
}
.tile__fig .tile__tag { position: absolute; left: 10px; bottom: 10px; }
/* card drawings: darker contours at a fixed 1.5px whatever the card width, finer inner anatomy */
.tile__fig .tile__ico { stroke: rgb(13 17 23 / .8); stroke-width: 1.9; }
.tile__ico * { vector-effect: non-scaling-stroke; }
.tile__ico .tile__fine { stroke: rgb(13 17 23 / .42); stroke-width: 1; }
/* bones: one clean contour over a shaded fill (gradients defined once, in the first drawing) so curves read as volume */
.tile__ico .tile__bone { fill: url(#sgBone); }
.tile__ico .tile__metal { fill: url(#sgMetal); }
[data-bento].is-armed .tile .tile__ico > .tile__bone, [data-bento].is-armed .tile .tile__ico > .tile__metal { fill-opacity: 0; }
[data-bento].is-armed .tile.is-on .tile__ico > .tile__bone, [data-bento].is-armed .tile.is-on .tile__ico > .tile__metal { fill-opacity: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1) calc(var(--d, 0ms) + 100ms), fill-opacity .7s ease calc(var(--d, 0ms) + 700ms); }
.tile__fig .tile__ico .tile__hot { stroke-width: 3; }
.tile:hover .tile__fig .tile__hot, .tile:focus-visible .tile__fig .tile__hot { stroke-width: 3.8; }
.tile:nth-child(-n+4) .tile__fig { aspect-ratio: 5 / 2; padding: 12px 22%; } /* the wider cards of the first two rows */
.tile__ico {
  width: 100%; height: auto; overflow: visible;
  fill: none; stroke: rgb(13 17 23 / .36); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .9s var(--ease);
}
.tile__ico .tile__hot { stroke: var(--cobalt); stroke-width: 3; transition: stroke-width var(--t-mid) var(--ease); }
.tile__ico .tile__ghost { stroke-dasharray: .03 .03; opacity: .6; }
.tile__tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px 4px 7px; border-radius: 999px;
  font-size: .72rem; font-weight: 500; letter-spacing: .01em; color: var(--ink-3); background: rgb(246 247 249 / .9);
  box-shadow: inset 0 0 0 1px var(--seam); transition: color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.tile__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--cobalt); opacity: .5; transition: opacity var(--t-fast) var(--ease); }

/* the draw: strokes start hidden only once JS has armed the section */
[data-bento].is-armed .tile__ico > :not(.tile__ret):not(.tile__ghost) { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-bento].is-armed .tile__ico > .tile__ghost { opacity: 0; }
[data-bento].is-armed .tile__tag { opacity: 0; transform: translateY(4px); }
[data-bento].is-armed .tile.is-on .tile__ico > :not(.tile__ret):not(.tile__ghost) {
  stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1) calc(var(--d, 0ms) + 100ms);
}
[data-bento].is-armed .tile.is-on .tile__ico > .tile__hot { transition: stroke-dashoffset .6s cubic-bezier(.65, 0, .35, 1) calc(var(--d, 0ms) + 1000ms), stroke-width var(--t-mid) var(--ease); }
[data-bento].is-armed .tile.is-on .tile__ico > .tile__ghost { opacity: .6; transition: opacity .6s ease calc(var(--d, 0ms) + 1300ms); }
[data-bento].is-armed .tile.is-on .tile__tag { opacity: 1; transform: none; transition: opacity .5s ease calc(var(--d, 0ms) + 1400ms), transform .5s var(--ease) calc(var(--d, 0ms) + 1400ms), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }

/* reticle: hidden until this tile is hovered or focused */
.tile__ret { fill: none; stroke: var(--cobalt); stroke-width: 1.2; }
.tile__ret > g { opacity: 0; transform: scale(1.7) rotate(-45deg); transition: opacity .35s ease, transform .6s var(--ease); }
.tile:hover .tile__ret > g, .tile:focus-visible .tile__ret > g { opacity: 1; transform: none; }
.tile:hover .tile__hot, .tile:focus-visible .tile__hot { stroke-width: 4; }
.tile:hover .tile__tag, .tile:focus-visible .tile__tag { color: var(--cobalt); box-shadow: inset 0 0 0 1px rgb(9 44 116 / .28); }
.tile:hover .tile__tag i, .tile:focus-visible .tile__tag i { opacity: 1; }

/* scan line: moved by site.js (element.animate) */
.tile__scan {
  position: absolute; inset: -24% 0 auto; height: 24%; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent 0%, rgb(9 44 116 / .025) 60%, rgb(9 44 116 / .08) 96%, rgb(9 44 116 / .45) 99.4%, transparent 100%);
}

/* cursor light: only the hovered tile */
.tile__core::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgb(9 44 116 / .06), transparent 62%);
  transition: opacity var(--t-mid) var(--ease);
}
.tile:hover .tile__core::after { opacity: 1; }

@media (max-width: 640px) {
  .tile__fig, .tile:nth-child(-n+4) .tile__fig { aspect-ratio: 2 / 1; padding: 10px 24%; }
}
@media (prefers-reduced-motion: reduce) {
  .tile__scan { display: none; }
  .tile__ico { transform: none; transition: none; }
  .tile__ret > g { transition: opacity .2s ease; transform: none; }
}

/* ---------- bento on tablets: two columns on a portrait tablet, three above that ---------- */
@media (min-width: 540px) and (max-width: 1100px) {
  .bento__grid { gap: 12px; }
  .tile__h { font-size: clamp(1.12rem, .85rem + .8vw, 1.4rem); }
  .tile__core p { font-size: .9rem; }
  .tile__go { font-size: .8rem; }
  .tile__go svg { width: 30px; height: 30px; padding: 8px; }
  .tile__fig { padding: 10px 16%; }
}
@media (min-width: 540px) and (max-width: 1100px) { /* every tablet: two per row, the seventh across */
  .bento__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile, .tile:nth-child(n+5) { grid-column: span 3; }
  .tile:last-child { grid-column: 1 / -1; }
  .tile__fig, .tile:nth-child(-n+4) .tile__fig { aspect-ratio: 2 / 1; padding: 10px 22%; }
  .tile:last-child .tile__fig { aspect-ratio: 3 / 1; padding: 10px 32%; }
}

/* ---------- booking: "after the form" card fills the left column down to the form's bottom edge ---------- */
.desk__in { align-items: stretch; }
.desk__side { display: flex; flex-direction: column; }
.desk__side .desk__lines { margin-bottom: 28px; }
.next { margin-top: auto; }
.next__core { padding: 22px 24px 8px; }
.next__who { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--seam); }
.next__av { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: linear-gradient(180deg, var(--milk), rgb(9 44 116 / .14)); box-shadow: inset 0 0 0 1px var(--seam); }
.next__av img { display: block; width: 100%; height: auto; transform: scale(2.1); transform-origin: 50% 14%; } /* crop the full-length photo to the face */
.next__av--face img { height: 100%; object-fit: cover; transform: none; } /* a real face crop: drawn at its own resolution, no upscaling blur */
.next__who b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -.02em; }
.next__who span { font-size: .84rem; color: var(--ink-3); }
.next__h { margin: 18px 0 6px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cobalt); }
.next__list { list-style: none; position: relative; }
.next__list::before { content: ""; position: absolute; left: 13px; top: 18px; bottom: 30px; width: 1px; background: linear-gradient(var(--cobalt), rgb(9 44 116 / .15)); }
.next__list li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 12px 0; }
.next__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--white); color: var(--cobalt); font-size: .8rem; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--cobalt); }
.next__list b { display: block; font-size: .98rem; font-weight: 600; color: var(--ink); margin-top: 3px; }
.next__list p { font-size: .88rem; line-height: 1.5; color: var(--ink-3); margin-top: 3px; }
@media (max-width: 900px) { .next { margin-top: 8px; } }

/* phones: chapter cards stay short so the scan stays visible — sources and the arrow gutter go */
@media (max-width: 640px) {
  .zone__card { padding: 18px 18px 10px; }
  .zone__card .zone__h { margin-bottom: 0; font-size: 2rem; }
  .zone__card .cond { margin: 8px 0 4px; }
  .zone__card .cond small { display: none; }
  .zone__card .cond a { padding: 10px 30px 10px 0; gap: 2px; }
  .zone__card .cond b { font-size: .95rem; }
  .zone__card .cond span { font-size: .82rem; }
  .zone__card > .link { margin-top: 4px; font-size: .9rem; }
}
/* tablets have no bottom dock, so the chapter card sits near the bottom edge instead of clearing one */
@media (min-width: 641px) and (max-width: 900px) {
  .scan__step.zone { padding-bottom: 24px; }
  .zone__card { bottom: 24px; }
}

/* career globe: a little smaller on tablets; phones read each stop on one line (institution only) */
@media (min-width: 641px) and (max-width: 900px) { .route__globe { max-width: 420px; } }
@media (max-width: 680px) {
  .stop { grid-template-columns: 3.9rem minmax(0, 1fr); gap: 10px; padding-left: 8px; padding-right: 8px; }
  .stop__what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: .86rem; letter-spacing: -.01em; }
  .stop__yr { font-size: .8rem; }
  .stop__more { display: none; }
}
/* both frames share grid row 1 and both captions row 2 (subgrid), so the frames are always one height,
   whatever the captions wrap to; the short-form video fills the height set by the 16:9 one */
@media (min-width: 681px) {
  .videos__grid { grid-template-rows: auto auto; row-gap: 0; align-items: stretch; }
  .videos__grid .vid { display: grid; grid-row: span 2; grid-template-rows: subgrid; margin: 0; }
  .videos__grid .vid .shell { display: flex; }
  .videos__grid .vid__frame { height: 100%; }
  .videos__grid .vid--tall .vid__frame { aspect-ratio: auto; min-height: 0; }
}
/* phones and tablets: no "Tarama hazır / Scan ready" chip on the intro; chapter labels still show */
@media (max-width: 900px) {
  .scan__chip { transition: opacity .3s ease; }
  .scan__chip[data-state="ready"], .scan__chip:not([data-state]) { opacity: 0; visibility: hidden; }
}

/* ---------- touch: a slow scroll settles on intro, hip, knee, shoulder, then the next section; a fast flick passes through
   (proximity, no forced stops: mandatory snapping halted fast scrolls on iOS and made them jump) ---------- */
html.snap-scan { scroll-snap-type: y proximity; scroll-padding-top: 0; } /* marks are placed for the viewport top, not the anchor offset */
html.snap-scan .scan__step.hero { scroll-snap-align: start; }
html.snap-scan .snap-exit { scroll-snap-align: start; }
.scan__step.zone { position: relative; }
/* a mark at the middle of each chapter's hold (playhead mid-line 72% on single column, 50% on two columns) */
.snapmark { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; top: 35.5svh; }
html.snap-scan .snapmark { scroll-snap-align: start; }
@media (max-width: 900px) { .snapmark { top: 4.5svh; } }

/* ---------- phones: career section fits one screen — heading, small globe, compact stops ---------- */
@media (max-width: 680px) {
  .route { padding: 64px 0; }
  .route__in { gap: 0; }
  .route__list { display: contents; }
  .route__list > .h2 { order: 1; margin-bottom: 10px; }
  .route__list > .lead { order: 2; margin-bottom: 14px; font-size: 1rem; }
  .route__globe { order: 3; max-width: 220px; margin: 0 auto 6px; }
  .route__now { padding: 6px 14px; font-size: .85rem; bottom: 0; }
  .route__list > .stops { order: 4; margin-top: 10px; }
  .stop { padding-top: 10px; padding-bottom: 10px; }
}
/* stats: number first everywhere; on phones a 2 x 2 grid, number above its label */
@media (max-width: 680px) {
  .research__nums, .stat-line { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .research__nums span, .stat-line span { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; line-height: 1.3; }
  .research__nums b, .stat-line b { margin: 0; line-height: 1.05; }
}

/* =====================================================================
   DOC — first screen: the doctor on the theme blue, then the scan
   ===================================================================== */
.doc {
  position: relative; overflow: hidden; color: #fff; isolation: isolate;
  background: radial-gradient(70% 60% at 85% 10%, #1479A8 0%, transparent 60%), radial-gradient(60% 70% at 0% 100%, #061A47 0%, transparent 65%), var(--cobalt);
}
.doc::before { /* the scan's tile grid, in light, so the two screens read as one piece */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px);
  background-size: 96px 96px; mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
}
.doc__in { max-width: var(--wrap); margin: 0 auto; padding: 138px var(--gut) 84px; min-height: min(100svh, 900px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.doc__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 500; color: rgb(255 255 255 / .82); margin-bottom: 22px; }
.doc__dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgb(255 255 255 / .18); }
.doc__h { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.8rem, 1.6rem + 4.2vw, 5.6rem); line-height: .98; letter-spacing: -.045em; margin-bottom: 24px; }
.doc__l { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; } /* mask for the line rise */
.doc__l > span { display: block; }
.doc__lead { font-size: clamp(1.04rem, .98rem + .3vw, 1.2rem); line-height: 1.6; color: rgb(255 255 255 / .86); max-width: 54ch; }
.doc__creds { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 34px 0 34px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .2); }
.doc__creds li { display: grid; gap: 4px; }
.doc__creds b { font-family: var(--f-display); font-weight: 500; font-size: 1.08rem; letter-spacing: -.02em; }
.doc__creds span { font-size: .86rem; line-height: 1.45; color: rgb(255 255 255 / .72); }
.doc__act { display: flex; flex-wrap: wrap; gap: 12px; }
.doc__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .35); padding-bottom: 2px; }
.doc__more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform var(--t-fast) var(--ease); }
.doc__more:hover svg { transform: translateX(3px); }
.doc__photo { position: relative; justify-self: end; width: 100%; max-width: 470px; margin: 0; }
.doc__frame { padding: 8px; border-radius: 34px; background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), 0 40px 80px -40px rgb(8 20 90 / .7); }
.doc__frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: 27px; }
.doc__tag { position: absolute; left: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-size: .84rem; font-weight: 600; box-shadow: 0 12px 28px -14px rgb(8 20 90 / .6); }
.doc__tag span { width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt); }
/* pills on blue */
.pill--light { --bg: #fff; --fg: var(--cobalt); --dot: var(--cobalt-w); }
.pill--light:hover { background: #fff; box-shadow: 0 16px 34px -14px rgb(8 20 90 / .55); }
.pill--line { --bg: transparent; --fg: #fff; --dot: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45); }
.pill--line:hover { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px #fff; }
@media (max-width: 900px) {
  .doc__in { grid-template-columns: 1fr; padding-top: 104px; padding-bottom: 56px; min-height: 0; gap: 28px; }
  .doc__photo { order: -1; justify-self: center; max-width: min(78vw, 360px); }
  .doc__creds { grid-template-columns: 1fr; gap: 12px; margin: 26px 0; }
  .doc__creds li { grid-template-columns: 8.2rem 1fr; align-items: baseline; }
}


/* research on the theme blue: the papers card stays white and reads as a sheet on top */
.research { background: radial-gradient(60% 70% at 100% 0%, #1479A8 0%, transparent 60%), var(--cobalt); color: #fff; border-block: 0; }
.research .h2 { color: #fff; }
.research .h2 em { color: #8FD3F4; }
.research .lead, .research__nums, .research__src { color: rgb(255 255 255 / .84); }
.research__nums b { color: #fff; }
.research__src .link { color: #fff; }
.research .shell { background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
/* treatments: a light blue field instead of plain white */
.bento { background: linear-gradient(180deg, #EEF2FE 0%, #F4F6FF 100%); border-block-color: rgb(9 44 116 / .1); }
.research .papers { color: var(--ink); } /* the white sheet keeps dark text */

/* desktop: the intro is exactly one screen */
@media (min-width: 901px) { .doc__in { min-height: 100svh; } }

/* ---------- opening sequence (runs once on load; transform / opacity / clip-path only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .doc::before { animation: doc-fade 1s ease 0s both; }
  .doc__kicker { animation: doc-up .6s var(--ease) .05s both; }
  .doc__l > span { animation: doc-rise .75s cubic-bezier(.2, .8, .2, 1) both; }
  .doc__l:nth-child(1) > span { animation-delay: .1s; }
  .doc__l:nth-child(2) > span { animation-delay: .2s; }
  .doc__lead { animation: doc-up .65s var(--ease) .35s both; }
  .doc__creds { animation: doc-line .6s var(--ease) .42s both; }
  .doc__creds li { animation: doc-up .6s var(--ease) both; }
  .doc__creds li:nth-child(1) { animation-delay: .46s; }
  .doc__creds li:nth-child(2) { animation-delay: .52s; }
  .doc__creds li:nth-child(3) { animation-delay: .58s; }
  .doc__act { animation: doc-up .6s var(--ease) .62s both; }
  .doc__more { animation: doc-up .6s var(--ease) .7s both; }
  .doc__frame { animation: doc-open .95s cubic-bezier(.7, 0, .2, 1) .1s both; }
  .doc__frame img { animation: doc-settle 1.4s cubic-bezier(.2, .8, .2, 1) .1s both; }
  .doc__tag { animation: doc-pop .55s cubic-bezier(.3, 1.4, .5, 1) .85s both; }
}
@keyframes doc-fade { from { opacity: 0; } }
@keyframes doc-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes doc-rise { from { transform: translateY(105%); } }
@keyframes doc-line { from { border-top-color: transparent; } }
@keyframes doc-open { from { clip-path: inset(100% 0 0 0 round 34px); } to { clip-path: inset(0 0 0 0 round 34px); } }
@keyframes doc-settle { from { transform: scale(1.14); } }
@keyframes doc-pop { from { opacity: 0; transform: translateY(10px) scale(.92); } }
/* shorter desktop screens (13" laptops): keep the whole intro inside one screen */
@media (min-width: 901px) {
  .doc__frame img { max-height: calc(100svh - 190px); }
}
@media (min-width: 901px) and (max-height: 860px) {
  .doc__in { padding-top: 108px; padding-bottom: 36px; }
  .doc__kicker { margin-bottom: 14px; }
  .doc__h { font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.4rem); margin-bottom: 16px; }
  .doc__lead { line-height: 1.5; }
  .doc__creds { margin: 22px 0; padding-top: 16px; }
  .doc__more { margin-top: 14px; }
}

/* tablet + phone: "book" and "contact" sit side by side in both intros */
@media (max-width: 900px) {
  .doc__act, .hero__act { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; }
  .doc__act .pill, .hero__act .pill { width: 100%; min-width: 0; justify-content: space-between; padding-left: 18px; font-size: .95rem; }
  .doc__act .pill--tel, .hero__act .pill--tel { justify-content: center; padding-right: 14px; }
}
@media (max-width: 400px) {
  .doc__act .pill, .hero__act .pill { font-size: .88rem; padding-left: 14px; gap: 8px; }
  .doc__act .pill .pill__ico, .hero__act .pill .pill__ico { width: 34px; height: 34px; }
  .doc__act .pill--tel svg, .hero__act .pill--tel svg { width: 16px; height: 16px; }
}

/* ---------- intro background: the specialty in line — hip, knee, shoulder draw themselves in turn,
   and a slow scan line passes like an MRI slice. Faint white, behind everything. ---------- */
.doc__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.doc__art { position: absolute; fill: none; stroke: rgb(255 255 255 / .36); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.doc__art .tile__hot { stroke: rgb(165 200 255 / .85); stroke-width: 2.8; }
.doc__art .art__in { stroke: rgb(255 255 255 / .26); stroke-width: 1.2; }   /* folds inside the outline */
.doc__art .art__shade { stroke: rgb(190 210 255 / .17); stroke-width: .9; } /* volume lines on the shaded side */
.doc__art .tile__ghost { stroke: rgb(255 255 255 / .3); }
.doc__art .art__dots { stroke: rgb(255 255 255 / .3); stroke-width: 1.5; }
.doc__art .art__lig { stroke: rgb(255 255 255 / .3); stroke-width: .9; }       /* ligaments and tendons: fibre bundles */
.doc__art .tile__hot.art__fib { stroke-width: 1.2; }                            /* the treated ligament, fibre by fibre */ /* bone texture: engraving stipple, round caps make the dots */
.doc__art .tile__ghost { stroke-dasharray: .03 .03; }
.doc__art--a { width: min(46vw, 640px); left: -4%; bottom: -6%; }
.doc__art--b { width: min(22vw, 300px); left: 38%; top: 12%; }
.doc__art--c { width: min(26vw, 360px); right: -3%; bottom: 4%; }
/* one 9 s cycle; desktop shows the three drawings in three places, one after another (3 s apart).
   Tablets/phones stack them in ONE spot: each fades out before the next starts drawing. */
@media (prefers-reduced-motion: no-preference) {
  .doc__art :is(path, circle, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: doc-draw 9s cubic-bezier(.65, 0, .35, 1) infinite; }
  /* dashed x-ray lines and the stipple fade in with their drawing; hidden until then (they used to show during the delay) */
  .doc__art :is(.tile__ghost, .art__dots) { stroke-dashoffset: 0; opacity: 0; animation: doc-ghost 9s ease infinite both; }
  .doc__art .tile__ghost { stroke-dasharray: .03 .03; }
  .doc__art .art__dots { stroke-dasharray: none; }
  .doc__art--a :is(path, circle, ellipse) { animation-delay: .3s; }
  .doc__art--b :is(path, circle, ellipse) { animation-delay: 3.3s; }
  .doc__art--c :is(path, circle, ellipse) { animation-delay: 6.3s; }
  /* the dashed (x-ray) lines keep their own drawing's timing: their animation shorthand would reset the delay */
  .doc__art--a :is(.tile__ghost, .art__dots) { animation-delay: .3s; }
  .doc__art--b :is(.tile__ghost, .art__dots) { animation-delay: 3.3s; }
  .doc__art--c :is(.tile__ghost, .art__dots) { animation-delay: 6.3s; }
}
/* the drawings wait for the page: started by site.js (.is-drawing) once loading is over, so the first one is
   seen being drawn ~1 s after the page appears instead of finishing unseen while the browser is still busy */
@media (prefers-reduced-motion: no-preference) {
  html.js .doc:not(.is-drawing) .doc__art :is(path, circle, ellipse) { animation: none; }
}
/* each drawing: draw 0-12%, hold to 26%, fade by 32%, rest hidden -> exactly one visible at a time */
@keyframes doc-draw {
  0% { stroke-dashoffset: 1; opacity: 1; }
  12% { stroke-dashoffset: 0; opacity: 1; }
  26% { stroke-dashoffset: 0; opacity: 1; }
  32% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes doc-ghost { 0%, 8% { opacity: 0; } 14%, 26% { opacity: 1; } 32%, 100% { opacity: 0; } }
/* desktop: each drawing stays on until the next one is half drawn, so two are on screen at once
   (draw 0-12%, hold to 56%, fade by 64%) and the background reads fuller */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .doc__art :is(path, circle, ellipse) { animation-name: doc-draw-long; }
  .doc__art :is(.tile__ghost, .art__dots) { animation-name: doc-ghost-long; }
}
@keyframes doc-draw-long {
  0% { stroke-dashoffset: 1; opacity: 1; }
  12% { stroke-dashoffset: 0; opacity: 1; }
  56% { stroke-dashoffset: 0; opacity: 1; }
  64% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes doc-ghost-long { 0%, 8% { opacity: 0; } 14%, 56% { opacity: 1; } 64%, 100% { opacity: 0; } }
@media (max-width: 900px) {
  /* one shared spot, right side, behind the text */
  .doc__art--a, .doc__art--b, .doc__art--c { display: block; left: auto; bottom: auto; top: min(52svh, 520px); right: -6%; width: min(62vw, 360px); }
  .doc__art--b { width: min(48vw, 280px); right: 0; }
  .doc__art--c { width: min(52vw, 300px); right: -2%; }
}

/* ---------- intro buttons: lift, a light sweep, icon replies ---------- */
.doc__act .pill { position: relative; overflow: hidden; isolation: isolate; transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), background var(--t-fast) var(--ease); }
.doc__act .pill::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.doc__act .pill--light::after { background: linear-gradient(105deg, transparent 30%, rgb(9 44 116 / .12) 50%, transparent 70%); }
.doc__act .pill--line::after { background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .22) 50%, transparent 70%); }
@media (hover: hover) {
  .doc__act .pill:hover { transform: translateY(-3px); }
  .doc__act .pill:hover::after { transform: translateX(120%); }
  .doc__act .pill--light:hover { box-shadow: 0 22px 40px -18px rgb(8 20 90 / .7); }
  .doc__act .pill--light:hover .pill__ico { background: var(--cobalt); color: #fff; transform: translate(3px, -2px) rotate(-8deg); }
  .doc__act .pill--line:hover { background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px #fff, 0 20px 36px -20px rgb(8 20 90 / .7); }
  .doc__act .pill--tel:hover svg { animation: doc-ring .6s ease-in-out 2; }
  .doc__more:hover { border-bottom-color: #fff; }
}
.doc__act .pill--light .pill__ico { transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-mid) var(--ease); }
@keyframes doc-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .doc__act .pill::after { display: none; } .doc__act .pill--tel:hover svg { animation: none; } }

/* ---------- LAPTOP SCALE ----------
   Short, wide viewports (1280x720, 1366x768, 1440x900, 1536x864 - i.e. laptops, incl. 1080p at 125%):
   sections were 1.5-2 screens tall. Tighten rhythm, headings and the three heaviest blocks
   (treatments bento, Chicago -> Istanbul route, research) so each reads in about one screen. */
@media (min-width: 1025px) and (max-height: 960px) {
  :root { --sec: clamp(56px, 8vh, 88px); }
  .h2 { font-size: clamp(2.2rem, .9rem + 2.6vw, 3.5rem); }

  /* treatments bento */
  .bento__head { margin-bottom: 32px; }
  .bento__grid { gap: 14px; }
  .tile__h { font-size: clamp(1.2rem, .95rem + .55vw, 1.5rem); }
  .tile__core p { font-size: .93rem; }
  .tile__fig { aspect-ratio: 2 / 1; padding: 10px 22%; }
  .tile:nth-child(-n+4) .tile__fig { aspect-ratio: 3 / 1; padding: 10px 32%; }

  /* Chicago -> Istanbul */
  .route__globe { max-width: min(460px, 60vh); }
  .route__in { gap: clamp(28px, 4vw, 64px); }
  .stops { margin-top: 20px; }
  .stop { padding: 10px 12px; }
  .stop__what { font-size: .95rem; }

  /* research */
  .research__head { margin-bottom: 28px; }
  .research__nums b { font-size: 1.3rem; }
  .papers__t caption { padding: 12px 0 6px; }
  .papers__t td { padding: 10px 12px 10px 0; }
  td.papers__n { font-size: 1.05rem; }
}

/* ---------- booking desk, desktop: the two left cards sit together (no push-down gap) and the form is
   compacted so its bottom edge lines up with the left column instead of running ~140px past it ---------- */
@media (min-width: 901px) {
  :is(#randevu-masasi, #booking-desk) .desk__in { align-items: start; }
  :is(#randevu-masasi, #booking-desk) .desk__in > .shell { align-self: stretch; }
  /* the white form fills its frame, so the frame never shows a thick empty band under the form */
  :is(#randevu-masasi, #booking-desk) .desk__in > .shell { display: flex; flex-direction: column; }
  :is(#randevu-masasi, #booking-desk) .desk__in > .shell > .form { flex: 1; align-content: start; }
  :is(#randevu-masasi, #booking-desk) .desk__side .desk__lines { margin-bottom: 18px; }
  :is(#randevu-masasi, #booking-desk) .next { margin-top: 0; }
  :is(#randevu-masasi, #booking-desk) .form { gap: 14px; padding: 26px 30px 24px; }
  :is(#randevu-masasi, #booking-desk) .form__row { gap: 14px; }
  :is(#randevu-masasi, #booking-desk) .field { gap: 6px; }
  :is(#randevu-masasi, #booking-desk) .field legend { margin-bottom: 8px; }
  /* the form ends level with the left column by spreading the spare height evenly between its rows
     (no single stretched field), so both sides read with the same even rhythm */
  :is(#randevu-masasi, #booking-desk) .form { display: flex; flex-direction: column; justify-content: space-between; }
  :is(#randevu-masasi, #booking-desk) .field textarea { min-height: 112px; }
  :is(#randevu-masasi, #booking-desk) .form__send { align-self: flex-start; }
  :is(#randevu-masasi, #booking-desk) .form__status:empty { display: none; }
  :is(#randevu-masasi, #booking-desk) .field__hint { margin-top: 2px; }
  :is(#randevu-masasi, #booking-desk) .mrup { gap: 8px; margin: -2px 0 0; }
  :is(#randevu-masasi, #booking-desk) .form__status:empty { display: none; }
}

/* ---------- scan: the treatment drawing beside the joint being scanned (replaces the big background word) ----------
   scan.js projects the joint to the screen every frame and moves the figure, leader line and pin with it. */
.scan__art { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.scan__fig {
  position: absolute; left: 0; top: 0; margin: 0; width: clamp(150px, 13vw, 200px); opacity: 0; will-change: transform, opacity;
  display: grid; gap: 8px; justify-items: start; padding: 14px 14px 12px; border-radius: 20px;
  background: rgb(255 255 255 / .78); box-shadow: inset 0 0 0 1px var(--seam), 0 18px 40px -24px rgb(13 17 23 / .35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.scan__fig .tile__ico, .txc__fig .tile__ico, .zonenav__fig .tile__ico, .facts__fig .tile__ico, .pmedia__art .tile__ico { stroke: rgb(13 17 23 / .8); stroke-width: 1.7; }
.scan__fig .tile__ico { width: 100%; }
.scan__fig .txc__tag { position: static; justify-self: end; font-size: .72rem; }
/* one-shot draw-in when the chapter arrives; nothing loops */
.scan__fig .tile__ico > :not(.tile__ret):not(.tile__ghost) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1) .1s; }
.scan__fig .tile__ico > .tile__hot { transition-delay: .9s; }
.scan__fig.is-on .tile__ico > :not(.tile__ret):not(.tile__ghost) { stroke-dashoffset: 0; }
.scan__lead {
  position: absolute; left: 0; top: -1px; width: 1px; height: 2px; opacity: 0; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgb(9 44 116 / .9), rgb(9 44 116 / .35));
}
.scan__pin {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; opacity: 0;
  background: var(--cobalt); box-shadow: 0 0 0 5px rgb(9 44 116 / .18), 0 0 0 1px #fff inset;
}
@media (max-width: 900px) {
  .scan__fig { width: 118px; padding: 10px 10px 8px; border-radius: 16px; gap: 6px; }
  .scan__fig .txc__tag { font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .scan__fig .tile__ico > :not(.tile__ret):not(.tile__ghost) { stroke-dashoffset: 0; transition: none; }
}

/* ---------- 3D treatment visuals (joint.js) ----------
   Every treatment card shows a 3D close-up of the scan figure's bones in a `.jv` slot; it starts empty (no SVG
   flash on reload) and joint.js draws it in on entry. Hover/focus on the card shows the reticle; nothing moves. */
.jv { position: relative; display: block; width: 100%; aspect-ratio: 10 / 7; }
.jv__cv { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.tile__fig > .jv, .txc__fig > .jv, .facts__fig > .jv { position: absolute; inset: 0; width: auto; aspect-ratio: auto; border-radius: inherit; }
.txc__fig { position: relative; }
.zonenav__fig > .jv { height: 100%; aspect-ratio: auto; }
.jv__ret { position: absolute; left: 0; top: 0; width: 48px; height: 48px; margin: -24px 0 0 -24px; pointer-events: none; }
.jv__ret svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--cobalt); stroke-width: 1.2; opacity: 0; transform: scale(1.7) rotate(-45deg); transition: opacity .35s ease, transform .6s var(--ease); }
a:hover .jv__ret svg, a:focus-visible .jv__ret svg, .facts:hover .jv__ret svg { opacity: 1; transform: none; }
.zonenav__fig .jv__ret, .scan__fig .jv__ret, .pmedia__art .jv__ret { display: none; } /* too small for a reticle */
@media (prefers-reduced-motion: reduce) { .jv__ret svg { transition: opacity .2s ease; transform: none; } }

/* ---------- intro line art v2 (anatomical, from the 3D bones): portrait-shaped drawings need their own places ---------- */
@media (min-width: 901px) {
  .doc__art--a { width: min(38vw, 540px); left: -13%; right: auto; top: auto; bottom: -20%; }   /* pelvis + hips, lower left */
  .doc__art--b { width: min(14vw, 200px); left: 45%; right: auto; top: 9%; bottom: auto; }     /* knee, between the columns */
  .doc__art--c { width: min(21vw, 300px); right: -5%; left: auto; top: auto; bottom: -12%; }   /* shoulder, lower right */
}

/* ---------- 3D figure: drag to turn (mouse / pen only; scan.js) ---------- */
.scan__canvas.is-turnable { cursor: grab; touch-action: pan-y; }
.scan__canvas.is-dragging { cursor: grabbing; }
.scan__hint {
  position: absolute; z-index: 2; left: 50%; top: calc(var(--nav-h) + 40px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .78); box-shadow: inset 0 0 0 1px var(--seam-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .8rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.scan__hint svg { width: 18px; height: 18px; fill: none; stroke: var(--cobalt); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scan__hint.is-gone, .scan__hint.is-away { opacity: 0; transform: translate(-50%, -6px); }

/* ---------- "Who is Prof. Gürsoy?": bridges the blue hero into the white scan below ----------
   The band's background runs from the hero's cobalt down to the page's milk; the card sits across the change,
   photo and text in two equal columns. */
.who { position: relative; background: linear-gradient(180deg, var(--cobalt) 0%, #0E3C8F 18%, #3F6FB8 38%, #A9C0E2 58%, #E4EBF5 76%, var(--milk) 100%); }
.who__in { max-width: var(--wrap); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gut) clamp(56px, 8vw, 112px); }
.who__core { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; padding: clamp(18px, 2.2vw, 28px); }
.who__fig { margin: 0; aspect-ratio: 1; border-radius: calc(var(--r-core) - 4px); overflow: hidden; background: var(--mist); }
.who__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.who__copy { padding: clamp(4px, 1vw, 16px) clamp(4px, 2vw, 28px) clamp(4px, 1vw, 16px) 0; }
.who__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 500; color: var(--ink-2); margin-bottom: 18px; }
.who__kicker .doc__dot { background: var(--cobalt); box-shadow: 0 0 0 5px rgb(9 44 116 / .12); }
.who__h { font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.3rem); line-height: 1.02; letter-spacing: -.035em; margin-bottom: 20px; }
.who__h em { font-style: normal; color: var(--cobalt); }
.who__copy p:not(.who__kicker) { color: var(--ink-2); line-height: 1.65; margin-bottom: 14px; }
.who__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 26px; padding: 18px 0; border-top: 1px solid var(--seam); border-bottom: 1px solid var(--seam); }
.who__stats dt { font-family: var(--f-display); font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); letter-spacing: -.03em; color: var(--ink); }
.who__stats dd { margin: 2px 0 0; font-size: .82rem; color: var(--ink-3); }
@media (max-width: 900px) {
  .who__core { grid-template-columns: 1fr; }
  .who__fig { max-width: 520px; width: 100%; margin: 0 auto; }
  .who__copy { padding: 4px 6px 8px; }
}
.who__card.shell { background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28), 0 30px 60px -30px rgb(6 26 71 / .45); }
/* the hero's last 140px settle on plain cobalt, so it runs into the band below without a seam */
.doc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(9 44 116 / 0), var(--cobalt)); }
/* symmetric: the photo is exactly as tall as the text beside it */
.who__core { align-items: stretch; }
.who__fig { aspect-ratio: auto; min-height: 420px; }
.who__fig img { object-position: 50% 20%; }
.who__copy { align-self: center; }
@media (max-width: 900px) { .who__fig { aspect-ratio: 1; min-height: 0; } }

/* who v2 (user: keep the hero's tile grid going, softer colour change).
   One 96px grid runs hero → who → scan: vertical lines centred like the scan's seams, horizontal lines anchored to
   each section's bottom edge (site.js rounds the band's height to whole tiles, so the rows line up across the joins).
   White lines on the blue fade out as ink seams fade in on the light part. */
.doc::before { background-position: 50% 100%, 50% 100%; mask-image: linear-gradient(180deg, #000 30%, #000 100%); }
.who {
  isolation: isolate;
  background: linear-gradient(180deg,
    var(--cobalt) 0%, #0B3280 8%, #123C8C 16%, #1E4C9A 24%, #3363AB 32%, #4E7CBC 40%, #6E97CC 48%, #90B1DA 56%,
    #B1C8E6 64%, #CDDBEF 72%, #E2EAF5 80%, #EEF2F8 88%, var(--milk) 100%);
}
.who::before, .who::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: 100% 96px, 96px 100%; background-position: 0 100%, 50% 0; }
.who::before { background-image: linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px); mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 70%); }
.who::after { background-image: linear-gradient(var(--seam) 1px, transparent 1px), linear-gradient(90deg, var(--seam) 1px, transparent 1px); mask-image: linear-gradient(180deg, transparent 40%, #000 80%); }
.who__card.shell { background: rgb(255 255 255 / .2); }
.who__fig img { object-position: 50% 30%; }
/* the hero's grid runs to its bottom edge unfaded: the cobalt settle (::after) now sits under the grid lines, not over them */
.doc::before { z-index: -1; }
.doc::after { z-index: -2; }
.doc__bg { z-index: -1; }

/* tablets 540–680px: the care path in two columns on its horizontal rail, the two videos side by side */
@media (min-width: 540px) and (max-width: 680px) {
  .path__line { grid-template-columns: 1fr 1fr; row-gap: 48px; padding-top: 34px; padding-left: 0; }
  .path__line::before, .path__line::after { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 1px; }
  .path__line::after { transform-origin: left; transform: scaleX(var(--p, 1)); }
  .path__dot { top: -34px; left: 0; }
  @supports (animation-timeline: view()) { .path__line::after { animation-name: grow; } }
  .videos__grid { grid-template-columns: minmax(0, 3.16fr) minmax(0, 1fr); }
  .vid--tall .vid__frame { aspect-ratio: 9 / 16; }
}