/* Tolin design tokens. Blue and orange sampled from opaque logo pixels. */
@font-face {
    font-family: Outfit;
    src: url('./fonts/Outfit-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap
}

@font-face {
    font-family: Rabar;
    src: url('./fonts/Rabar_022.ttf') format('truetype');
    font-weight: 400 500;
    font-display: swap
}

@font-face {
    font-family: Rabar;
    src: url('./fonts/Rabar_021.ttf') format('truetype');
    font-weight: 600 900;
    font-display: swap
}

:root {
    --primary: #1f3a72;
    --primary-dark: #14294f;
    --secondary: #546a94;
    --accent: #f5741e;
    --accent-pale: #fff0e5;
    --background: #fff;
    --surface: #f3f6fa;
    --surface-blue: #eaf0f8;
    --ink: #192944;
    --muted: #657186;
    --border: #dce3ed;
    --font: Outfit, Arial, sans-serif;
    --radius: 16px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --duration: 280ms;
    --section-space: 104px;
    --story-stage: 0;
    color-scheme: light
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 108px
}

body {
    margin: 0;
    background: var(--background);
    color: var(--ink);
    font: 400 16px/1.65 var(--font);
    -webkit-font-smoothing: antialiased
}

body.dialog-open {
    overflow: hidden
}

button,
input,
select {
    font: inherit
}

button,
a,
input,
select,
summary {
    -webkit-tap-highlight-color: transparent
}

button,
a,
summary {
    touch-action: manipulation
}

button {
    color: inherit;
    cursor: pointer
}

a {
    color: inherit;
    text-decoration: none
}

button {
    border: 0
}

img {
    display: block;
    max-width: 100%;
    height: auto
}

svg {
    display: block
}

p,
h1,
h2,
h3 {
    margin: 0
}

h1,
h2,
h3 {
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.045em
}

p {
    color: var(--muted);
    line-height: 1.8
}

button:disabled {
    opacity: .35;
    cursor: not-allowed
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 5px
}

::selection {
    color: var(--primary);
    background: #ffe1cb
}

[hidden] {
    display: none !important
}

.wrap {
    width: min(1240px, calc(100% - 96px));
    margin-inline: auto
}

.section-space {
    padding-block: var(--section-space)
}

.eyebrow {
    font-size: 10px;
    letter-spacing: .14em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
    color: var(--primary)
}

.section-index {
    color: #8592a8;
    font-size: 10px;
    margin-inline-end: 6px
}

.small-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    flex-shrink: 0
}

.button {
    display: inline-flex;
    gap: 26px;
    align-items: center;
    justify-content: space-between;
    background: var(--primary);
    color: white;
    padding: 18px 23px;
    min-height: 54px;
    border-radius: 7px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    transition: background var(--duration), transform var(--duration);
    text-align: start
}

.button svg,
.link-button svg,
.circle-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    flex-shrink: 0;
    transition: transform var(--duration)
}

.button:hover {
    background: #284987;
    transform: translateY(-2px)
}

.button:hover svg,
.link-button:hover svg {
    transform: translateX(3px)
}

.button.compact {
    padding: 12px 16px;
    min-height: 44px;
    font-size: 12px;
    gap: 18px
}

.button-row {
    display: flex;
    align-items: center;
    gap: 27px;
    flex-wrap: wrap
}

.link-button {
    display: inline-flex;
    gap: 17px;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary)
}

.link-button>span:last-child {
    font-size: 19px
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #ffffffed;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid #e8edf3
}

.header-inner {
    max-width: 1440px;
    padding-inline: 48px;
    margin: auto;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    flex-shrink: 0
}

.brand img {
    width: 46px;
    height: 46px;
    object-fit: contain
}

.brand>span {
    font-size: 34px;
    line-height: .85;
    font-weight: 600;
    letter-spacing: -.06em
}

.brand>span>span {
    display: block;
    font-size: 7px;
    letter-spacing: .12em;
    font-weight: 500;
    margin-top: 9px;
    line-height: 1.2
}

.site-header nav {
    display: flex;
    gap: 30px;
    align-items: center
}

.site-header nav a {
    position: relative;
    font-size: 12px;
    padding-block: 12px;
    color: #516078;
    white-space: nowrap;
    transition: color .2s
}

.site-header nav a:after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: 5px;
    height: 2px;
    width: 0;
    background: var(--accent);
    transition: width .2s
}

.site-header nav a:hover,
.site-header nav a[aria-current] {
    color: var(--primary)
}

.site-header nav a[aria-current]:after {
    width: 18px
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 24px
}

.language-control {
    display: flex;
    align-items: center;
    gap: 4px
}

.language-control svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.5
}

.language-control select {
    max-width: 77px;
    font-size: 11px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--primary);
    padding: 9px 0
}

.menu-toggle {
    display: none
}

.hero {
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    gap: 58px;
    padding-top: 62px;
    padding-bottom: 62px;
    align-items: center
}

.hero-copy {
    padding-bottom: 6px
}

.hero h1 {
    font-size: clamp(52px, 5.2vw, 76px);
    line-height: 1.065;
    margin-top: 24px;
    letter-spacing: -.055em
}

.text-accent {
    color: var(--primary)
}

.hero h1 .text-accent {
    position: relative;
    display: inline-block
}

.hero h1 .text-accent:after {
    content: '';
    position: absolute;
    inset-inline-start: 2px;
    bottom: -8px;
    height: 4px;
    background: var(--accent);
    width: 42%;
    border-radius: 100%
}

.hero-description {
    max-width: 395px;
    margin-top: 34px;
    font-size: 15px;
    line-height: 1.8
}

.hero .button-row {
    margin-top: 30px
}

.hero-location {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: 11px;
    margin-top: 29px
}

.hero-location svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--secondary);
    stroke-width: 1.5
}

.hero-visual {
    position: relative;
    padding-bottom: 40px;
    padding-inline-start: 5px
}

.image-frame {
    height: 520px;
    border-radius: 120px 16px 16px 16px;
    overflow: hidden;
    position: relative;
    background: var(--surface-blue)
}

.image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 48% center
}

.image-frame:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #14294f28, transparent 40%)
}

.photo-tag {
    position: absolute;
    bottom: 27px;
    inset-inline-start: 30px;
    z-index: 1;
    display: flex;
    gap: 8px;
    align-items: center;
    color: white;
    font-size: 8px;
    letter-spacing: .14em
}

.photo-tag .small-dot {
    background: #fff
}

.care-note {
    position: absolute;
    bottom: 0;
    inset-inline-start: -25px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 12px;
    background: white;
    padding: 21px 24px;
    box-shadow: 0 8px 40px #14294f0b;
    border: 1px solid var(--border)
}

.care-note-icon {
    background: var(--accent-pale);
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--accent)
}

.care-note svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2
}

.care-note div>span {
    display: block;
    font-size: 8px;
    letter-spacing: .13em;
    color: var(--muted);
    margin-bottom: 4px
}

.care-note strong {
    display: block;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -.035em
}

.care-note>span:last-child {
    margin-inline-start: auto;
    font-size: 23px;
    color: var(--primary)
}

.hero-image-index {
    position: absolute;
    inset-inline-end: 0;
    bottom: -23px;
    letter-spacing: .12em;
    font-size: 8px;
    color: #8190a4
}

.trust-line {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.2fr;
    border-block: 1px solid var(--border);
    padding-block: 24px;
    gap: 25px
}

.trust-line>span {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: #506078
}

.trust-line i {
    font-size: 9px;
    font-style: normal;
    color: var(--accent)
}

.trust-line>a {
    font-size: 12px;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px
}

.trust-line>a>span:last-child {
    font-size: 18px
}

h2 {
    font-size: clamp(36px, 3.65vw, 52px)
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px;
    margin-bottom: 42px
}

.section-heading h2 {
    margin-top: 17px
}

.section-heading>p {
    max-width: 320px;
    font-size: 14px
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--border);
    border-inline-start: 1px solid var(--border)
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: white;
    border-inline-end: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 30px;
    text-align: start;
    min-height: 286px;
    transition: background .3s
}

.service-card:hover,
.service-card:focus-visible {
    background: var(--surface)
}

.service-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 29px
}

.service-top>svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .35s
}

.service-card:hover .service-top>svg {
    transform: translateY(-4px)
}

.service-top>span {
    font-size: 9px;
    color: #7b889d
}

.service-card h3 {
    font-size: 21px;
    letter-spacing: -.035em;
    margin-bottom: 11px;
    line-height: 1.3
}

.service-card p {
    font-size: 13px;
    max-width: 260px;
    line-height: 1.75
}

.service-bottom {
    margin-top: auto;
    padding-top: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--primary);
    font-size: 10px
}

.service-bottom svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    transition: transform .25s
}

.service-card:hover .service-bottom svg {
    transform: translateX(5px)
}

.explorer-section {
    background: var(--surface);
    border-block: 1px solid var(--border);
    padding-top: 90px
}

.explorer-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 45px;
    gap: 50px
}

.explorer-heading h2 {
    margin-top: 18px
}

.explorer-heading>p {
    max-width: 320px;
    font-size: 14px
}

.body-story {
    height: 300vh;
    position: relative
}

.body-sticky {
    position: sticky;
    top: 92px;
    padding-top: 20px;
    padding-bottom: 20px
}

.stage-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 17px
}

.stage-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    padding: 9px 0;
    text-align: start;
    font-size: 10px;
    color: #78869a;
    transition: color .25s
}

.stage-button>span:first-child {
    font-size: 9px;
    color: #98a4b4
}

.stage-button[aria-pressed=true] {
    color: var(--primary);
    font-weight: 500
}

.stage-button[aria-pressed=true]>span:first-child {
    color: var(--accent)
}

.stage-progress {
    position: absolute;
    width: calc(100% / 6);
    height: 2px;
    bottom: -1px;
    background: var(--accent);
    inset-inline-start: calc(var(--story-stage)*100% / 6);
    transition: inset-inline-start .4s var(--ease)
}

.explorer-layout {
    display: grid;
    grid-template-columns: .92fr 1.32fr .7fr;
    gap: 35px;
    align-items: center;
    min-height: 570px
}

.body-copy {
    padding-block: 25px
}

.outline-label {
    display: inline-block;
    border: 1px solid #cbd6e6;
    padding: 6px 9px;
    border-radius: 4px;
    font-size: 7px;
    letter-spacing: .1em;
    color: var(--secondary)
}

.story-number {
    font-size: 46px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--primary);
    margin-top: 32px;
    letter-spacing: -.04em
}

.story-number>span {
    font-size: 11px;
    color: #8592a5;
    margin-inline-start: 8px;
    letter-spacing: 0
}

.body-copy h3 {
    font-size: 34px;
    line-height: 1.18;
    margin-top: 17px;
    letter-spacing: -.04em
}

.body-copy>p {
    font-size: 13px;
    margin-top: 17px;
    max-width: 275px;
    min-height: 92px
}

.body-detail {
    font-size: 10px;
    color: var(--secondary);
    line-height: 1.8;
    display: flex;
    gap: 9px;
    margin-top: 24px;
    max-width: 265px
}

.detail-line {
    width: 14px;
    height: 1px;
    background: var(--accent);
    margin-top: 8px;
    flex-shrink: 0
}

.stage-arrows {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px
}

.stage-arrows button {
    width: 38px;
    height: 38px;
    border: 1px solid #cbd6e6;
    border-radius: 50%;
    background: transparent;
    color: var(--primary);
    font-size: 18px
}

.stage-arrows button:not(:disabled):hover {
    background: white;
    border-color: var(--primary)
}

.stage-arrows>span:last-child {
    font-size: 9px;
    color: var(--muted);
    margin-inline-start: 6px
}

.anatomy-panel {
    align-self: stretch;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0
}

.view-label {
    position: absolute;
    top: 22px;
    inset-inline-start: 20px;
    font-size: 7px;
    color: #8491a5;
    letter-spacing: .14em;
    z-index: 1
}

.anatomy-grid {
    position: absolute;
    inset: 25px 0;
    background-image: linear-gradient(#1f3a7206 1px, transparent 1px), linear-gradient(90deg, #1f3a7206 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse, black 40%, transparent 73%)
}

.body-art {
    position: relative;
    height: 510px;
    aspect-ratio: 360/640;
    margin-top: 15px;
    direction: ltr;
    transition: transform .7s var(--ease)
}

.anatomy-svg {
    width: 100%;
    height: 100%;
    overflow: visible
}

.muscle-layer {
    opacity: .04;
    transition: opacity .85s var(--ease)
}

.muscle-layer [data-muscle] {
    transition: fill .5s, stroke .5s
}

.spine-bones {
    opacity: .15;
    transition: opacity .7s
}

.recovery-lines {
    opacity: 0;
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    transition: opacity .6s, stroke-dashoffset 1s
}

.hotspots {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s
}

.body-point {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    display: grid;
    place-items: center;
    background: transparent;
    border-radius: 50%
}

.body-point>span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid white;
    box-shadow: 0 0 0 5px #f5741e20
}

.body-point[aria-pressed=true]>span {
    background: var(--primary);
    box-shadow: 0 0 0 6px #1f3a7220
}

.body-point:after {
    position: absolute;
    content: '';
    width: 18px;
    height: 18px;
    border: 1px solid #f5741e80;
    border-radius: 50%;
    animation: pulse 3s ease-out 3;
    pointer-events: none
}

.body-point:nth-child(2n):after {
    animation-delay: .5s
}

@keyframes pulse {
    0% {
        transform: scale(.7);
        opacity: .7
    }

    100% {
        transform: scale(1.7);
        opacity: 0
    }
}

.body-legend {
    position: absolute;
    bottom: 14px;
    inset-inline-start: 15px;
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 8px;
    color: var(--secondary)
}

.body-legend>span:first-child {
    width: 5px;
    height: 5px;
    background: #a4b5ce;
    border-radius: 50%
}

.body-coordinate {
    position: absolute;
    bottom: 14px;
    inset-inline-end: 5px;
    font-size: 6px;
    letter-spacing: .08em;
    color: #929eb0
}

.region-picker {
    padding-inline-start: 5px
}

.region-picker>.eyebrow {
    font-size: 8px;
    margin-bottom: 18px
}

.region-list {
    display: flex;
    flex-direction: column
}

.region-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: start;
    width: 100%;
    border-bottom: 1px solid var(--border);
    background: transparent;
    padding: 12px 8px 12px 0;
    font-size: 13px;
    color: var(--muted);
    transition: padding .3s, color .3s, background .3s
}

.region-button>span:last-child {
    color: #9aa6b7;
    font-size: 18px
}

.region-button:hover {
    color: var(--primary)
}

.region-button[aria-pressed=true] {
    background: white;
    color: var(--primary);
    padding-inline: 10px;
    border-radius: 5px;
    border-bottom-color: transparent
}

.region-button[aria-pressed=true]>span:last-child {
    color: var(--accent)
}

.explorer-note {
    font-size: 9px;
    line-height: 1.8;
    margin-top: 20px;
    max-width: 185px
}

.explorer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 9px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: 17px
}

.explorer-footer>span {
    display: flex;
    align-items: center;
    gap: 8px
}

.explorer-footer>a {
    display: flex;
    gap: 15px;
    color: var(--primary)
}

.explorer-cta {
    margin-top: 20px;
    font-size: 12px;
    padding: 13px 17px;
    min-height: 44px
}

.explorer-layout:not([data-active-stage="0"]) .muscle-layer {
    opacity: .83
}

.explorer-layout:not([data-active-stage="0"]) .spine-bones {
    opacity: 1
}

.explorer-layout:is([data-active-stage="2"], [data-active-stage="3"], [data-active-stage="4"], [data-active-stage="5"]) .hotspots {
    visibility: visible;
    opacity: 1
}

.muscle-layer .selected-muscle {
    fill: #f5a871;
    stroke: var(--accent)
}

.explorer-layout:is([data-active-stage="4"], [data-active-stage="5"]) .recovery-lines {
    opacity: 1;
    stroke-dashoffset: 0
}

.explorer-layout[data-active-stage="5"] .body-point:after {
    animation: none
}

.lab-shell {
    display: grid;
    grid-template-columns: 285px 1fr;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden
}

.lab-sidebar {
    padding: 26px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.lab-tabs {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.lab-tabs button {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: start;
    background: transparent;
    border-radius: 6px;
    font-size: 13px;
    padding: 17px 13px;
    color: var(--muted);
    transition: background .2s, color .2s
}

.lab-tabs button>span:first-child {
    font-size: 9px;
    color: #8290a5
}

.lab-tabs button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    margin-inline-start: auto
}

.lab-tabs button[aria-selected=true] {
    background: var(--primary);
    color: white
}

.lab-tabs button[aria-selected=true]>span:first-child {
    color: #b9c7e2
}

.lab-note {
    font-size: 10px;
    margin-top: 50px;
    max-width: 220px
}

.lab-panels {
    min-width: 0
}

.lab-panels [role=tabpanel] {
    height: 100%
}

.simulation-art {
    height: 250px;
    position: relative;
    padding: 15px 25px;
    background: linear-gradient(0deg, #f7f9fc, white)
}

.simulation-art svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    direction: ltr
}

.sim-label {
    position: absolute;
    top: 20px;
    inset-inline-start: 25px;
    font-size: 8px;
    color: #8996a9;
    letter-spacing: .12em
}

.sim-guide {
    stroke: #d8e1ed;
    stroke-dasharray: 3 6;
    fill: none;
    stroke-width: 1
}

.sim-bone {
    stroke: #bdcce1;
    stroke-width: 26;
    stroke-linecap: round;
    fill: none
}

.sim-joint {
    stroke: #92a8c7;
    fill: #eef3f9;
    stroke-width: 1.5
}

.sim-center {
    fill: var(--accent)
}

.sim-fiber {
    stroke: var(--primary);
    stroke-width: 1.5;
    stroke-linecap: round;
    fill: none
}

#joint-lower {
    transform-origin: 240px 130px;
    transition: transform .08s linear
}

.simulation-control {
    border-top: 1px solid var(--border);
    padding: 28px 30px;
    display: flex;
    gap: 28px;
    justify-content: space-between;
    align-items: center;
    min-height: 130px
}

.simulation-control h3 {
    font-size: 19px;
    letter-spacing: -.025em;
    margin-bottom: 7px
}

.simulation-control p {
    font-size: 12px;
    max-width: 275px;
    line-height: 1.7
}

.range-control {
    display: block;
    min-width: 170px;
    width: 190px;
    flex-shrink: 0
}

.range-control>span:first-child {
    font-size: 10px;
    display: block;
    color: var(--primary)
}

input[type=range] {
    accent-color: var(--primary);
    width: 100%;
    height: 28px;
    cursor: pointer;
    margin: 5px 0;
    direction: ltr
}

.range-ends {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--muted)
}

.muscle-tendon {
    stroke: #c7d3e4;
    stroke-width: 15;
    stroke-linecap: round;
    fill: none
}

.sim-muscle-fiber {
    stroke: #839bc3;
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: d .6s var(--ease), stroke .6s
}

.segmented {
    display: flex;
    border: 1px solid var(--border);
    padding: 4px;
    border-radius: 6px;
    flex-shrink: 0
}

.segmented button {
    font-size: 11px;
    padding: 10px;
    background: transparent;
    border-radius: 4px
}

.segmented button[aria-pressed=true] {
    background: var(--primary);
    color: white
}

.spine-cord {
    stroke: var(--accent);
    fill: none;
    stroke-width: 3
}

#lab-vertebrae rect {
    fill: #d5e0ee;
    stroke: #839bc3;
    stroke-width: 1
}

.about-section {
    background: var(--surface)
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center
}

.about-visual {
    position: relative
}

.about-visual img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: 45% center;
    border-radius: 12px 12px 90px 12px
}

.about-image-label {
    position: absolute;
    bottom: 25px;
    inset-inline-start: 25px;
    background: #ffffffeb;
    padding: 13px 18px;
    border-radius: 5px;
    font-size: 8px;
    letter-spacing: .12em
}

.about-copy h2 {
    margin-top: 18px
}

.about-lead {
    font-size: 19px !important;
    color: var(--primary);
    line-height: 1.55;
    margin-top: 25px !important;
    max-width: 400px
}

.about-copy>p {
    margin-top: 20px;
    font-size: 14px
}

.practitioner {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 28px 0;
    padding-block: 21px;
    border-block: 1px solid var(--border)
}

.practitioner img {
    width: 44px;
    height: 44px;
    object-fit: contain
}

.practitioner strong {
    display: block;
    font-size: 13px;
    font-weight: 500
}

.practitioner div>span {
    display: block;
    font-size: 10px;
    color: var(--muted);
    margin-top: 4px
}

.process-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    margin-top: 50px
}

.process-track:before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 23px;
    height: 1px;
    background: var(--border)
}

.process-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    background: transparent;
    text-align: start;
    font-size: 16px;
    padding: 0
}

.step-dot {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 11px;
    background: white;
    color: var(--muted);
    transition: background .25s, border-color .25s
}

.process-step[aria-pressed=true] .step-dot {
    background: var(--primary);
    color: white;
    border-color: var(--primary)
}

.process-step[aria-pressed=true] {
    color: var(--primary)
}

.process-content {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-top: 30px;
    padding: 28px 32px;
    background: var(--surface);
    border-radius: 10px;
    min-height: 137px
}

.process-large-number {
    font-size: 52px;
    font-weight: 400;
    color: #b7c5da;
    line-height: 1
}

.process-content h3 {
    font-size: 23px;
    margin-bottom: 8px
}

.process-content p {
    font-size: 13px;
    max-width: 640px;
    line-height: 1.8
}

.circle-button {
    display: grid;
    place-items: center;
    background: white;
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    margin-inline-start: auto;
    flex-shrink: 0
}

.faq-section {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
    padding-bottom: 110px
}

.faq-intro h2 {
    margin-top: 20px;
    font-size: 42px
}

.faq-intro .link-button {
    margin-top: 28px
}

.faq-list details {
    border-bottom: 1px solid var(--border)
}

.faq-list details:first-child {
    border-top: 1px solid var(--border)
}

.faq-list summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    font-weight: 500;
    padding-block: 24px
}

.faq-list summary::-webkit-details-marker {
    display: none
}

.faq-list summary svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.5;
    flex-shrink: 0;
    transition: transform .25s
}

.faq-list details[open] summary svg {
    transform: rotate(45deg)
}

.faq-list details p {
    font-size: 13px;
    padding-bottom: 23px;
    padding-inline-end: 25px;
    line-height: 1.8
}

.contact-section {
    background: var(--primary);
    color: white;
    padding-block: 85px 60px;
    position: relative;
    overflow: hidden
}

.contact-top {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 80px;
    align-items: center
}

.contact-top .eyebrow {
    color: #d0dbec
}

.contact-top h2 {
    font-size: clamp(54px, 5.4vw, 76px);
    margin-top: 23px
}

.contact-top h2 span {
    color: #ffc69f
}

.contact-top p {
    color: #d5deed;
    font-size: 16px;
    max-width: 340px
}

.button-light {
    background: white;
    color: var(--primary);
    margin-top: 25px
}

.button-light:hover {
    background: #edf2f9
}

.contact-bottom {
    display: grid;
    grid-template-columns: 1.05fr 1fr .85fr;
    gap: 50px;
    padding-top: 37px;
    margin-top: 65px;
    border-top: 1px solid #ffffff2b
}

.contact-label {
    display: block;
    font-size: 9px;
    letter-spacing: .13em;
    color: #b9c9e3;
    margin-bottom: 16px
}

.phone {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -.025em;
    width: fit-content;
    line-height: 1.6
}

.phone span {
    font-size: 20px;
    color: #ffc69f
}

.contact-bottom h3 {
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -.025em
}

.contact-bottom p {
    font-size: 12px;
    line-height: 1.8;
    color: #c7d4e9;
    margin-top: 10px
}

.contact-map {
    display: flex;
    gap: 20px;
    align-items: center;
    width: fit-content;
    font-size: 11px;
    margin-top: 16px;
    border-bottom: 1px solid #92a8cb;
    padding-bottom: 5px
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding-block: 39px
}

.footer-top>p {
    font-size: 14px;
    color: var(--secondary)
}

.back-top {
    display: flex;
    gap: 15px;
    font-size: 11px;
    color: var(--primary)
}

.footer-bottom {
    border-top: 1px solid var(--border);
    padding-block: 21px 30px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 9px;
    color: var(--muted)
}

dialog {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 42px;
    width: min(540px, calc(100% - 32px));
    color: var(--ink);
    max-height: calc(100dvh - 48px);
    overflow: auto
}

dialog::backdrop {
    background: #10234780;
    backdrop-filter: blur(4px)
}

.dialog-close {
    position: absolute;
    top: 13px;
    inset-inline-end: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface);
    font-size: 26px;
    color: var(--primary)
}

dialog .eyebrow {
    font-size: 8px;
    margin-top: 12px
}

dialog h2 {
    font-size: 36px;
    margin-top: 20px;
    padding-inline-end: 15px
}

dialog>p {
    font-size: 14px;
    margin-top: 20px
}

#dialog-content {
    margin-top: 25px
}

.dialog-phones {
    display: grid;
    gap: 10px
}

.dialog-phones a {
    border: 1px solid var(--border);
    padding: 15px 18px;
    border-radius: 7px;
    font-size: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    direction: ltr
}

.dialog-phones a span {
    color: var(--accent)
}

.dialog-note {
    font-size: 11px;
    margin-top: 20px
}

.dialog-location {
    display: block;
    font-size: 12px;
    color: var(--primary);
    margin-top: 18px;
    text-decoration: underline;
    text-underline-offset: 4px
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.skip-link {
    position: fixed;
    top: -100px;
    inset-inline-start: 20px;
    z-index: 100;
    padding: 12px 18px;
    background: white;
    color: var(--primary);
    border: 2px solid var(--primary)
}

.skip-link:focus {
    top: 12px
}

.motion-ready .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease), transform .7s var(--ease)
}

.motion-ready .reveal.is-visible {
    opacity: 1;
    transform: translateY(0)
}

.hero-copy,
.hero-visual {
    animation: enter .8s var(--ease) both
}

.hero-visual {
    animation-delay: .1s
}

@keyframes enter {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

:lang(ar),
:lang(ckb) {
    font-family: Rabar, 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
    letter-spacing: 0 !important
}

:lang(ar) h1,
:lang(ckb) h1,
:lang(ar) h2,
:lang(ckb) h2,
:lang(ar) h3,
:lang(ckb) h3 {
    line-height: 1.45;
    letter-spacing: 0;
    font-weight: 700
}

[dir=rtl] .brand>span {
    font-family: Outfit, Arial, sans-serif
}

[dir=rtl] .brand>span>span {
    font-family: Rabar, Tahoma, sans-serif
}

[dir=rtl] .hero h1 {
    font-size: clamp(42px, 4.6vw, 65px);
    line-height: 1.45
}

[dir=rtl] .hero h1 .text-accent:after {
    bottom: 0
}

[dir=rtl] .hero .eyebrow {
    font-size: 11px
}

[dir=rtl] .hero-visual {
    padding-inline-start: 0
}

[dir=rtl] .care-note {
    left: 24px;
    right: -25px
}

[dir=rtl] .button svg,
[dir=rtl] .link-button svg,
[dir=rtl] .service-bottom svg,
[dir=rtl] .lab-tabs svg,
[dir=rtl] .circle-button svg {
    transform: scaleX(-1)
}

[dir=rtl] .region-button {
    padding-inline: 0 8px
}

[dir=rtl] .range-ends {
    direction: ltr
}

[dir=rtl] .body-copy h3 {
    font-size: 30px
}

[dir=rtl] .contact-top h2 {
    line-height: 1.35
}

@media(min-width:1600px) {
    .wrap {
        width: 1280px
    }

    .header-inner {
        max-width: 1376px
    }

    .hero {
        padding-block: 75px
    }

    .image-frame {
        height: 570px
    }
}

@media(max-width:1150px) {
    .wrap {
        width: calc(100% - 64px)
    }

    .header-inner {
        padding-inline: 32px
    }

    .site-header nav {
        gap: 20px
    }

    .header-actions {
        gap: 15px
    }

    .hero {
        gap: 32px
    }

    .image-frame {
        height: 480px
    }

    .hero h1 {
        font-size: 61px
    }

    .hero .button-row {
        gap: 18px
    }

    .button {
        padding: 16px 18px;
        gap: 18px
    }

    .care-note {
        inset-inline-start: -12px;
        padding: 18px
    }

    .service-card {
        padding: 26px
    }

    .explorer-layout {
        grid-template-columns: .95fr 1.15fr .65fr;
        gap: 20px
    }

    .body-copy h3 {
        font-size: 30px
    }

    .body-art {
        height: 485px
    }

    .explorer-layout {
        min-height: 540px
    }

    .region-button {
        font-size: 12px
    }

    .stage-button {
        font-size: 9px
    }

    .lab-shell {
        grid-template-columns: 250px 1fr
    }

    .lab-sidebar {
        padding: 20px
    }

    .simulation-control {
        gap: 20px;
        padding: 25px
    }

    .range-control {
        width: 155px;
        min-width: 155px
    }

    .about-grid {
        gap: 55px
    }

    .about-visual img {
        height: 460px
    }

    .contact-bottom {
        gap: 35px
    }

    .phone {
        font-size: 22px
    }
}

@media(max-width:960px) {
    :root {
        --section-space: 80px
    }

    .header-inner {
        height: 80px
    }

    .header-actions>.button {
        display: none
    }

    .site-header nav {
        gap: 23px
    }

    .hero {
        gap: 28px;
        padding-top: 42px;
        padding-bottom: 50px
    }

    .hero h1 {
        font-size: 53px
    }

    .hero .eyebrow {
        font-size: 8px
    }

    .hero-description {
        font-size: 14px
    }

    .hero .button-row {
        gap: 17px
    }

    .hero .button {
        font-size: 11px;
        gap: 14px;
        padding: 15px
    }

    .hero .link-button {
        font-size: 11px;
        gap: 10px
    }

    .image-frame {
        height: 450px;
        border-top-left-radius: 85px
    }

    .care-note strong {
        font-size: 16px
    }

    .care-note-icon {
        width: 38px;
        height: 38px
    }

    .care-note {
        gap: 12px;
        right: 10px
    }

    .hero-image-index {
        font-size: 7px
    }

    .trust-line {
        gap: 15px;
        grid-template-columns: repeat(3, 1fr)
    }

    .trust-line>a {
        display: none
    }

    .section-heading>p,
    .explorer-heading>p {
        max-width: 265px;
        font-size: 13px
    }

    .service-card {
        padding: 24px;
        min-height: 278px
    }

    .service-card h3 {
        font-size: 19px
    }

    .explorer-heading {
        margin-bottom: 28px
    }

    .explorer-section {
        padding-top: 70px
    }

    .body-story {
        height: auto
    }

    .body-sticky {
        position: relative;
        top: auto
    }

    .stage-button {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        line-height: 1.4
    }

    .explorer-layout {
        grid-template-columns: 1fr 1.3fr;
        gap: 25px;
        min-height: 0
    }

    .body-art {
        height: 480px
    }

    .body-copy {
        padding-top: 30px
    }

    .region-picker {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 100px 1fr;
        align-items: center;
        gap: 15px;
        padding: 0;
        margin-bottom: 22px
    }

    .region-picker>.eyebrow {
        margin: 0
    }

    .region-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px
    }

    .region-button {
        width: auto;
        gap: 7px;
        font-size: 11px;
        border: 1px solid var(--border);
        border-radius: 5px;
        padding: 7px 10px;
        min-height: 40px
    }

    .region-button>span:last-child {
        font-size: 14px
    }

    .explorer-note {
        grid-column: 2;
        font-size: 9px;
        max-width: 100%;
        margin: 0
    }

    .lab-shell {
        grid-template-columns: 220px 1fr
    }

    .lab-sidebar {
        padding: 15px
    }

    .lab-tabs button {
        font-size: 12px;
        padding: 14px 10px;
        gap: 8px
    }

    .simulation-control {
        flex-direction: column;
        align-items: stretch;
        gap: 17px
    }

    .range-control {
        width: 100%
    }

    .simulation-control p {
        max-width: none
    }

    .about-grid {
        gap: 38px
    }

    .about-visual img {
        height: 460px
    }

    .about-copy h2 {
        font-size: 38px
    }

    .about-lead {
        font-size: 17px !important
    }

    .about-copy>p {
        font-size: 13px
    }

    .practitioner {
        gap: 10px
    }

    .practitioner strong {
        font-size: 11px
    }

    .faq-section {
        gap: 45px;
        padding-bottom: 80px
    }

    .faq-intro h2 {
        font-size: 36px
    }

    .contact-top {
        gap: 45px
    }

    .contact-bottom {
        grid-template-columns: 1fr 1fr;
        gap: 35px
    }

    .contact-bottom>div:last-child {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 1fr 1.4fr 1fr;
        align-items: center;
        gap: 20px;
        border-top: 1px solid #ffffff2b;
        padding-top: 22px
    }

    .contact-bottom>div:last-child>* {
        margin: 0
    }

    .footer-top>p {
        font-size: 12px
    }

    .body-coordinate {
        display: none
    }
}

@media(max-width:720px) {
    .wrap {
        width: calc(100% - 40px)
    }

    .header-inner {
        padding-inline: 20px;
        height: 76px;
        gap: 10px
    }

    .brand img {
        width: 40px;
        height: 40px
    }

    .brand>span {
        font-size: 30px
    }

    .brand>span>span {
        font-size: 6px
    }

    .header-actions {
        gap: 17px
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: 40px;
        height: 44px;
        background: transparent;
        padding: 9px
    }

    .menu-toggle span {
        width: 23px;
        height: 1.5px;
        background: var(--primary);
        transition: transform .2s
    }

    .menu-toggle[aria-expanded=true] span:first-child {
        transform: translateY(3.75px) rotate(45deg)
    }

    .menu-toggle[aria-expanded=true] span:last-child {
        transform: translateY(-3.75px) rotate(-45deg)
    }

    .site-header nav {
        display: none;
        position: absolute;
        top: 76px;
        inset-inline: 0;
        background: white;
        border-bottom: 1px solid var(--border);
        padding: 15px 25px 24px;
        box-shadow: 0 14px 18px #14294f05
    }

    .site-header nav.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0
    }

    .site-header nav a {
        font-size: 15px;
        padding-block: 15px
    }

    .site-header nav a:after {
        display: none
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 33px;
        padding-top: 37px;
        padding-bottom: 43px
    }

    .hero h1 {
        font-size: clamp(52px, 10vw, 72px);
        margin-top: 20px;
        line-height: 1.05
    }

    .hero .eyebrow {
        font-size: 9px
    }

    .hero-description {
        font-size: 15px;
        max-width: 440px;
        margin-top: 30px
    }

    .hero .button-row {
        margin-top: 23px;
        gap: 24px
    }

    .hero .button {
        font-size: 12px;
        padding: 17px 20px;
        gap: 22px
    }

    .hero .link-button {
        font-size: 12px
    }

    .hero-location {
        margin-top: 23px;
        font-size: 10px
    }

    .hero-visual {
        padding-inline-start: 0;
        padding-bottom: 34px
    }

    .image-frame {
        height: 390px;
        border-radius: 70px 12px 12px 12px
    }

    .image-frame img {
        object-position: center 58%
    }

    .care-note {
        inset-inline-start: 15px;
        right: 15px;
        bottom: 0;
        padding: 17px 20px
    }

    .care-note strong {
        font-size: 18px
    }

    .hero-image-index {
        bottom: -20px
    }

    .trust-line {
        padding-block: 22px;
        gap: 15px
    }

    .trust-line>span {
        font-size: 10px;
        gap: 7px;
        line-height: 1.5;
        align-items: flex-start
    }

    .trust-line i {
        font-size: 8px;
        padding-top: 2px
    }

    .section-heading,
    .explorer-heading {
        display: block
    }

    .section-heading h2,
    .explorer-heading h2 {
        font-size: 40px
    }

    .section-heading>p,
    .explorer-heading>p {
        max-width: 370px;
        font-size: 14px;
        margin-top: 20px
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .service-card {
        padding: 23px;
        min-height: 280px
    }

    .service-card h3 {
        font-size: 19px
    }

    .service-card p {
        font-size: 12px
    }

    .service-top {
        margin-bottom: 24px
    }

    .service-bottom {
        font-size: 9px
    }

    .explorer-heading {
        margin-bottom: 20px
    }

    .body-sticky {
        padding-top: 10px;
        padding-bottom: 25px
    }

    .stage-track {
        gap: 7px
    }

    .stage-button {
        font-size: 8px;
        min-height: 52px
    }

    .stage-button>span:first-child {
        font-size: 8px
    }

    .explorer-layout {
        grid-template-columns: .9fr 1.1fr;
        gap: 12px
    }

    .body-copy h3 {
        font-size: 25px;
        line-height: 1.2
    }

    .body-copy>p {
        font-size: 12px;
        min-height: 0
    }

    .outline-label {
        font-size: 6px;
        padding: 5px 7px
    }

    .story-number {
        font-size: 34px;
        margin-top: 22px
    }

    .story-number>span {
        font-size: 9px
    }

    .body-detail {
        font-size: 9px;
        margin-top: 17px
    }

    .stage-arrows {
        margin-top: 23px;
        flex-wrap: wrap
    }

    .stage-arrows>span:last-child {
        width: 100%;
        margin: 5px 0 0
    }

    .stage-arrows button {
        width: 35px;
        height: 35px
    }

    .body-art {
        height: 390px;
        max-width: 100%;
        margin-top: 20px
    }

    .view-label {
        font-size: 6px;
        top: 15px;
        inset-inline-start: 12px
    }

    .body-legend {
        font-size: 6px;
        bottom: 10px;
        inset-inline-start: 0
    }

    .body-point {
        width: 44px;
        height: 44px
    }

    .region-picker {
        grid-template-columns: 1fr;
        margin-top: 5px;
        gap: 10px
    }

    .region-picker>.eyebrow {
        font-size: 8px
    }

    .region-list {
        gap: 6px
    }

    .region-button {
        padding: 7px 10px;
        font-size: 10px
    }

    .explorer-note {
        grid-column: 1;
        font-size: 8px
    }

    .explorer-footer {
        font-size: 8px;
        gap: 18px;
        align-items: flex-start
    }

    .explorer-footer>span {
        max-width: 190px
    }

    .explorer-footer>a {
        gap: 8px;
        flex-shrink: 0
    }

    .explorer-cta {
        font-size: 10px;
        padding: 12px;
        gap: 8px
    }

    .explorer-cta svg {
        width: 15px
    }

    .lab-shell {
        grid-template-columns: 1fr
    }

    .lab-sidebar {
        padding: 15px
    }

    .lab-tabs {
        flex-direction: row;
        gap: 4px
    }

    .lab-tabs button {
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        font-size: 11px;
        padding: 13px 10px;
        gap: 5px
    }

    .lab-tabs button svg {
        position: absolute;
        top: 11px;
        inset-inline-end: 9px;
        width: 13px;
        height: 13px
    }

    .lab-note {
        margin-top: 14px;
        max-width: 100%;
        font-size: 9px;
        line-height: 1.7
    }

    .simulation-art {
        height: 235px;
        padding: 18px 15px
    }

    .simulation-control {
        padding: 23px
    }

    .simulation-control h3 {
        font-size: 20px
    }

    .simulation-control p {
        font-size: 12px
    }

    .range-control {
        max-width: 100%
    }

    .segmented {
        width: fit-content
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .about-visual img {
        height: 360px;
        border-bottom-right-radius: 70px;
        object-position: center 46%
    }

    .about-copy h2 {
        font-size: 41px
    }

    .about-copy>p {
        font-size: 14px
    }

    .practitioner strong {
        font-size: 13px
    }

    .practitioner div>span {
        font-size: 11px
    }

    .practitioner img {
        width: 44px;
        height: 44px
    }

    .process-track {
        margin-top: 35px
    }

    .process-step {
        font-size: 12px;
        gap: 12px
    }

    .step-dot {
        width: 40px;
        height: 40px;
        font-size: 10px
    }

    .process-track:before {
        top: 20px
    }

    .process-content {
        padding: 25px 20px;
        gap: 17px;
        align-items: flex-start
    }

    .process-large-number {
        font-size: 35px
    }

    .process-content h3 {
        font-size: 21px
    }

    .process-content p {
        font-size: 12px
    }

    .circle-button {
        width: 34px;
        height: 34px
    }

    .circle-button svg {
        width: 16px
    }

    .faq-section {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .faq-intro h2 {
        font-size: 39px
    }

    .faq-intro .link-button {
        margin-top: 20px
    }

    .faq-list summary {
        font-size: 14px
    }

    .contact-section {
        padding-block: 65px 45px
    }

    .contact-top {
        grid-template-columns: 1fr;
        gap: 27px
    }

    .contact-top h2 {
        font-size: 60px;
        margin-top: 22px
    }

    .contact-top p {
        font-size: 14px;
        max-width: 340px
    }

    .contact-top .eyebrow {
        font-size: 9px
    }

    .button-light {
        margin-top: 20px
    }

    .contact-bottom {
        margin-top: 45px;
        gap: 30px;
        padding-top: 30px;
        grid-template-columns: 1fr
    }

    .contact-bottom>div:last-child {
        grid-column: auto;
        display: block;
        border-top: 0;
        padding: 0
    }

    .contact-bottom>div:last-child p {
        margin-top: 10px;
        max-width: 320px
    }

    .contact-bottom>div:last-child a {
        margin-top: 16px
    }

    .contact-bottom>div:last-child .contact-label {
        margin-bottom: 16px
    }

    .phone {
        font-size: 26px;
        gap: 35px
    }

    .contact-bottom h3 {
        font-size: 23px
    }

    .contact-bottom p {
        font-size: 13px
    }

    .contact-map {
        font-size: 12px
    }

    .footer-top {
        flex-wrap: wrap;
        gap: 25px;
        padding-block: 30px
    }

    .footer-top>p {
        display: none
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        font-size: 9px
    }

    dialog {
        padding: 32px 24px
    }

    dialog h2 {
        font-size: 31px
    }

    dialog>p {
        font-size: 13px
    }

    [dir=rtl] .hero h1 {
        font-size: clamp(39px, 9vw, 57px)
    }

    [dir=rtl] .care-note {
        left: 15px;
        right: 15px
    }

    [dir=rtl] .body-copy h3 {
        font-size: 23px
    }

    [dir=rtl] .region-button {
        padding-inline: 10px
    }
}

@media(max-width:380px) {
    .wrap {
        width: calc(100% - 32px)
    }

    .header-inner {
        padding-inline: 16px
    }

    .hero h1 {
        font-size: 49px
    }

    .hero .button-row {
        gap: 16px
    }

    .hero .button {
        padding: 16px;
        font-size: 11px;
        gap: 16px
    }

    .hero .link-button {
        font-size: 11px
    }

    .service-card {
        padding: 18px;
        min-height: 283px
    }

    .service-card h3 {
        font-size: 18px
    }

    .care-note {
        padding: 16px
    }

    .care-note strong {
        font-size: 16px
    }

    .body-copy h3 {
        font-size: 23px
    }

    .body-art {
        height: 350px
    }

    .body-copy>p {
        font-size: 11px
    }

    .stage-button {
        font-size: 7px
    }

    .process-step {
        font-size: 10px
    }

    .process-content {
        gap: 12px
    }

    .process-large-number {
        display: none
    }

    .body-legend {
        font-size: 5px
    }

    .explorer-footer {
        font-size: 7px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation: none !important;
        transition: none !important
    }

    .motion-ready .reveal {
        opacity: 1;
        transform: none
    }

    .body-story {
        height: auto
    }

    .body-sticky {
        position: relative;
        top: auto
    }

    .muscle-layer {
        transition: none
    }

    .body-point:after {
        display: none
    }
}

@media print {

    .site-header,
    .stage-track,
    .stage-arrows,
    .hotspots,
    .simulation-control,
    .region-picker,
    .button,
    dialog {
        display: none !important
    }

    .body-story {
        height: auto
    }

    .body-sticky {
        position: static
    }

    .motion-ready .reveal {
        opacity: 1;
        transform: none
    }

    .wrap {
        width: 100%
    }

    .section-space {
        padding-block: 30px
    }

    .body-copy {
        break-inside: avoid
    }

    .contact-section {
        background: white;
        color: var(--ink)
    }

    .contact-section p,
    .contact-label {
        color: var(--muted)
    }
}

/* Preserve SVG aspect ratio so touch markers remain aligned on narrow screens. */
@media(max-width:720px) {
    .body-art {
        height: auto;
        width: 100%;
        max-width: 220px;
        aspect-ratio: 360/640
    }

    .anatomy-panel {
        min-height: 345px
    }
}

@media(max-width:380px) {
    .body-art {
        height: auto
    }
}

@media(max-width:560px) {
    .explorer-layout {
        grid-template-columns: 1fr;
        gap: 0
    }

    .anatomy-panel {
        grid-row: 1;
        height: 385px;
        min-height: 0
    }

    .body-art {
        width: 205px;
        max-width: 75%;
        margin-top: 0
    }

    .view-label {
        top: 18px;
        inset-inline-start: 0;
        font-size: 7px
    }

    .body-legend {
        font-size: 8px;
        bottom: 5px
    }

    .body-copy {
        grid-row: 2;
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 20px;
        padding-block: 22px 25px
    }

    .outline-label {
        justify-self: start;
        font-size: 7px
    }

    .story-number {
        grid-column: 2;
        grid-row: 1/3;
        margin: 0;
        font-size: 36px;
        align-self: start
    }

    .body-copy h3 {
        grid-column: 1;
        margin-top: 15px;
        font-size: 29px
    }

    .body-copy>p {
        grid-column: 1/-1;
        font-size: 13px;
        max-width: none;
        min-height: 0;
        margin-top: 14px
    }

    .body-detail {
        grid-column: 1/-1;
        max-width: none;
        font-size: 10px;
        margin-top: 15px
    }

    .stage-arrows {
        grid-column: 1/-1;
        margin-top: 20px
    }

    .stage-arrows>span:last-child {
        width: auto;
        margin: 0 0 0 7px
    }

    .explorer-cta {
        grid-column: 1/-1;
        justify-self: start;
        font-size: 12px;
        padding: 14px 18px
    }

    .region-picker {
        grid-row: 3;
        padding-top: 18px;
        border-top: 1px solid var(--border);
        margin-top: 0
    }

    [dir=rtl] .body-copy h3 {
        font-size: 27px
    }

    .brand>span>span:lang(ar),
    .brand>span>span:lang(ckb) {
        font-size: 9px;
        line-height: 1.2
    }
}

/* Keep the pinned explorer fully usable on shorter laptop displays. */
@media(min-width:961px) and (max-height:780px) {
    .body-sticky {
        padding-block: 10px
    }

    .explorer-layout {
        min-height: 435px
    }

    .body-art {
        height: 405px
    }

    .body-copy {
        padding-block: 14px
    }

    .body-copy h3 {
        font-size: 28px
    }

    .story-number {
        margin-top: 17px;
        font-size: 35px
    }

    .body-copy>p {
        min-height: 0;
        font-size: 12px;
        line-height: 1.7
    }

    .stage-arrows {
        margin-top: 18px
    }

    .body-detail {
        margin-top: 15px
    }

    .stage-track {
        padding-bottom: 10px
    }

    .region-button {
        padding-block: 8px
    }

    .explorer-note {
        margin-top: 12px
    }

    .explorer-footer {
        padding-top: 10px
    }
}

@media(min-width:961px) and (max-height:620px) {
    .body-story {
        height: auto
    }

    .body-sticky {
        position: relative;
        top: auto
    }
}

.process-track:after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 23px;
    height: 1px;
    width: 75%;
    background: var(--accent);
    transform: scaleX(var(--process-progress, 0));
    transform-origin: left;
    transition: transform .6s var(--ease)
}

.process-step {
    z-index: 1
}

[dir=rtl] .process-track:after {
    transform-origin: right
}

@media(max-width:720px) {
    .process-track:after {
        top: 20px
    }
}

/* Movement studio: readable controls and an expansive, tactile workspace. */
.movement-lab .lab-shell {
    display: block;
    border: 1px solid #dce5f0;
    border-radius: 24px;
    box-shadow: 0 24px 70px #1936600c;
    overflow: hidden;
    background: white
}

.movement-lab .lab-sidebar {
    padding: 22px 28px;
    gap: 16px;
    background: #f3f6fb;
    border-bottom: 1px solid #dce5f0
}

.movement-lab .lab-tabs {
    flex-direction: row;
    gap: 12px
}

.movement-lab .lab-tabs button {
    flex: 1;
    min-height: 66px;
    font-size: 17px;
    font-weight: 500;
    border: 1px solid #dce5f0;
    background: white;
    padding: 17px 20px;
    border-radius: 12px;
    transition: background .2s, box-shadow .2s, transform .2s
}

.movement-lab .lab-tabs button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px #19366010
}

.movement-lab .lab-tabs button[aria-selected=true] {
    background: #1f3a72;
    color: white;
    border-color: #1f3a72;
    box-shadow: 0 7px 18px #1f3a7222
}

.movement-lab .lab-tabs button>span:first-child {
    font-size: 13px;
    font-variant-numeric: tabular-nums
}

.movement-lab .lab-note {
    font-size: 14px;
    line-height: 1.65;
    max-width: none;
    margin: 0;
    color: #53647e
}

.sim-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 28px;
    border-bottom: 1px solid #edf1f6
}

.sim-toolbar>span {
    font-size: 12px;
    letter-spacing: .12em;
    font-weight: 600;
    color: #62738d
}

.sim-toolbar>div {
    display: flex;
    gap: 10px
}

.sim-toolbar button {
    min-height: 46px;
    padding: 10px 18px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 500;
    background: #edf2f8;
    color: #1f3a72
}

.sim-toolbar .sim-play {
    background: #1f3a72;
    color: white;
    min-width: 174px
}

.sim-toolbar .sim-play[aria-pressed=true] {
    background: #c85a10
}

.sim-toolbar button:hover {
    box-shadow: 0 4px 12px #1f3a7222
}

.sim-toolbar button:active,
.sim-presets button:active {
    transform: scale(.97)
}

.movement-lab .simulation-art {
    height: 380px;
    padding: 44px 28px 26px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse at center, #e5eefb 0%, #f6f9fd 65%, #fbfcfe 100%)
}

.movement-lab .simulation-art:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(#1f3a7207 1px, transparent 1px), linear-gradient(90deg, #1f3a7207 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse, black, transparent 80%)
}

.sim-orbit {
    position: absolute;
    width: 290px;
    height: 290px;
    border: 1px solid #1f3a7212;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    box-shadow: 0 0 0 45px #1f3a7203, 0 0 0 90px #1f3a7202
}

.sim-status {
    position: absolute;
    top: 19px;
    inset-inline-end: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #41617f;
    letter-spacing: .08em
}

.sim-status>span:first-child {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #32836a;
    box-shadow: 0 0 0 4px #32836a10
}

.movement-lab .sim-label {
    font-size: 11px;
    font-weight: 500;
    color: #536984;
    top: 19px;
    letter-spacing: .07em
}

.movement-lab .simulation-art svg {
    filter: drop-shadow(0 12px 10px #1f3a7216)
}

.movement-lab .sim-bone {
    stroke: #9cb5d6;
    stroke-width: 33
}

.movement-lab .sim-fiber {
    stroke: #f5741e;
    stroke-width: 5
}

.movement-lab .sim-joint {
    stroke: #1f3a72;
    stroke-width: 3;
    fill: #fff
}

.movement-lab .sim-center {
    fill: #f5741e
}

.movement-lab .sim-guide {
    stroke: #aebfd5;
    stroke-width: 1.5
}

.movement-lab .sim-muscle-fiber {
    stroke-width: 7
}

.movement-lab .muscle-tendon {
    stroke: #aabbd1;
    stroke-width: 20
}

.movement-lab #lab-vertebrae rect {
    fill: #d2e1f5;
    stroke: #496e9f;
    stroke-width: 1.6
}

.movement-lab .spine-cord {
    stroke-width: 6
}

.sim-readout {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 28px;
    background: #f3f6fb;
    border-block: 1px solid #e0e7f1;
    flex-wrap: wrap
}

.sim-readout>span:first-child {
    font-size: 14px;
    color: #53647e
}

.sim-readout output {
    font-size: 26px;
    line-height: 1.3;
    font-weight: 600;
    color: #1f3a72;
    font-variant-numeric: tabular-nums
}

.sim-readout>span:last-child {
    margin-inline-start: auto;
    font-size: 13px;
    color: #62738d
}

.movement-lab .simulation-control {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 44px;
    padding: 30px;
    border-top: 0;
    align-items: start;
    min-height: 0
}

.movement-lab .simulation-control>div:first-child {
    grid-row: span 2
}

.movement-lab .simulation-control h3 {
    font-size: 26px;
    line-height: 1.25;
    margin-bottom: 12px
}

.movement-lab .simulation-control p {
    font-size: 16px;
    line-height: 1.75;
    max-width: 420px
}

.movement-lab .range-control {
    width: 100%;
    min-width: 0;
    max-width: none
}

.movement-lab .range-control>span:first-child {
    font-size: 15px;
    font-weight: 500
}

.movement-lab .range-ends {
    font-size: 14px;
    color: #526782
}

.movement-lab input[type=range] {
    appearance: none;
    background: transparent;
    min-height: 44px;
    margin: 6px 0;
    touch-action: pan-y
}

.movement-lab input[type=range]::-webkit-slider-runnable-track {
    height: 8px;
    background: linear-gradient(to right, #f5741e var(--fill, 50%), #dbe4f0 var(--fill, 50%));
    border-radius: 20px
}

.movement-lab input[type=range]::-webkit-slider-thumb {
    appearance: none;
    width: 28px;
    height: 28px;
    background: #fff;
    border: 6px solid #1f3a72;
    border-radius: 50%;
    margin-top: -10px;
    box-shadow: 0 3px 9px #1f3a7230
}

.movement-lab input[type=range]::-moz-range-track {
    height: 8px;
    border-radius: 20px;
    background: #dbe4f0
}

.movement-lab input[type=range]::-moz-range-progress {
    height: 8px;
    background: #f5741e
}

.movement-lab input[type=range]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #fff;
    border: 5px solid #1f3a72;
    border-radius: 50%
}

.sim-presets {
    display: flex;
    gap: 8px;
    grid-column: 2
}

.sim-presets button {
    flex: 1;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #d6e0ed;
    background: white;
    font-size: 14px;
    color: #1f3a72
}

.sim-presets button:hover,
.sim-presets button[aria-pressed=true] {
    border-color: #1f3a72;
    background: #eaf0f9
}

.movement-lab .segmented {
    width: 100%;
    border-radius: 12px;
    gap: 4px;
    background: #edf2f8;
    border: 0;
    padding: 5px
}

.movement-lab .segmented button {
    flex: 1;
    min-height: 50px;
    font-size: 16px;
    padding: 12px 15px;
    border-radius: 9px
}

.movement-lab .segmented button[aria-pressed=true] {
    box-shadow: 0 4px 12px #1f3a7220
}

/* Readable supporting text throughout the body explorer. */
.explorer-section .stage-button {
    font-size: 13px;
    min-height: 48px
}

.explorer-section .body-copy>p {
    font-size: 16px;
    max-width: 330px;
    min-height: 0
}

.explorer-section .body-detail {
    font-size: 14px;
    max-width: 330px
}

.explorer-section .region-button {
    font-size: 14px;
    min-height: 44px
}

.explorer-section .explorer-note {
    font-size: 13px
}

.explorer-section .outline-label,
.explorer-section .view-label,
.explorer-section .body-legend,
.explorer-section .stage-arrows>span:last-child,
.explorer-footer {
    font-size: 12px
}

.explorer-section .stage-arrows button {
    width: 44px;
    height: 44px
}

.movement-lab .section-heading>p {
    font-size: 17px;
    max-width: 390px
}

@media(max-width:960px) {
    .movement-lab .lab-tabs button {
        padding: 15px 12px;
        font-size: 15px
    }

    .movement-lab .simulation-control {
        gap: 20px 24px
    }

    .explorer-section .explorer-layout {
        min-height: 0
    }
}

@media(max-width:720px) {
    .movement-lab .lab-shell {
        border-radius: 18px
    }

    .movement-lab .lab-sidebar {
        padding: 14px;
        gap: 14px
    }

    .movement-lab .lab-tabs {
        gap: 7px
    }

    .movement-lab .lab-tabs button {
        font-size: 14px;
        line-height: 1.4;
        min-height: 95px;
        padding: 12px 10px;
        gap: 7px;
        align-items: flex-start;
        flex-direction: column
    }

    .movement-lab .lab-tabs button svg {
        display: none
    }

    .movement-lab .lab-tabs button>span:first-child {
        font-size: 12px
    }

    .movement-lab .lab-note {
        font-size: 14px
    }

    .sim-toolbar {
        padding: 16px;
        flex-wrap: wrap;
        gap: 12px
    }

    .sim-toolbar>div {
        width: 100%
    }

    .sim-toolbar .sim-play {
        flex: 1;
        min-width: 0
    }

    .sim-toolbar button {
        font-size: 14px
    }

    .movement-lab .simulation-art {
        height: 285px;
        padding: 48px 0 18px
    }

    .movement-lab .sim-label {
        font-size: 10px;
        inset-inline-start: 14px;
        top: 17px
    }

    .sim-status {
        font-size: 9px;
        inset-inline-end: 14px;
        top: 38px
    }

    .sim-orbit {
        width: 190px;
        height: 190px
    }

    .sim-readout {
        padding: 16px;
        gap: 8px 16px
    }

    .sim-readout output {
        font-size: 24px
    }

    .sim-readout>span:last-child {
        width: 100%;
        margin-inline-start: 0;
        font-size: 13px
    }

    .movement-lab .simulation-control {
        display: flex;
        flex-direction: column;
        gap: 22px;
        padding: 23px 18px
    }

    .movement-lab .simulation-control h3 {
        font-size: 25px
    }

    .movement-lab .simulation-control p {
        font-size: 16px
    }

    .sim-presets {
        width: 100%;
        gap: 6px
    }

    .sim-presets button {
        font-size: 14px;
        padding: 8px
    }

    .explorer-section .stage-button {
        font-size: 12px
    }

    .explorer-section .body-copy h3 {
        font-size: 30px
    }

    .explorer-section .body-copy>p {
        font-size: 16px
    }

    .explorer-section .body-detail {
        font-size: 14px
    }

    .explorer-section .region-button {
        font-size: 14px
    }

    .explorer-section .outline-label {
        font-size: 11px
    }

    .explorer-section .body-legend,
    .explorer-section .view-label {
        font-size: 10px
    }

    .explorer-footer {
        flex-wrap: wrap
    }

    .explorer-footer>span {
        max-width: none
    }

    .movement-lab .section-heading>p {
        font-size: 16px
    }
}

@media(prefers-reduced-motion:reduce) {
    .movement-lab * {
        transition: none !important;
        animation: none !important
    }
}

#panel-joint .simulation-art,
#panel-spine .simulation-art {
    cursor: ew-resize;
    touch-action: pan-y;
    user-select: none
}

.sim-drag-hint {
    position: absolute;
    bottom: 12px;
    inset-inline: 16px;
    text-align: center;
    font-size: 13px;
    color: #526782;
    pointer-events: none
}
/* Full-body explorer v2: direct selection, no scroll-driven stages. */
.body-explorer-v2{background:#f2f5fa;border:0;padding-block:90px}
.body-explorer-v2 .explorer-heading{margin-bottom:36px}.body-explorer-v2 .explorer-heading>p{font-size:17px;max-width:380px}
.body-explorer-v2 .body-console{display:grid;grid-template-columns:1.12fr 1fr;gap:0;align-items:stretch;min-height:0;border-radius:24px;overflow:hidden;background:white;border:1px solid #dbe3ef;box-shadow:0 24px 60px #17345a0a}
.body-explorer-v2 .body-canvas{position:relative;background:radial-gradient(ellipse at 50% 42%,#294975,#142b4c 75%);color:white;min-width:0;padding:25px 24px 20px;display:flex;flex-direction:column}
.canvas-top{display:flex;align-items:center;justify-content:space-between;gap:14px}.canvas-live{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.09em;font-weight:500}.canvas-live i{width:6px;height:6px;border-radius:50%;background:#ffb47d;box-shadow:0 0 0 4px #ffb47d15}.canvas-view{font-size:10px;color:#bbcae0;letter-spacing:.06em}
.layer-controls{display:flex;gap:4px;width:fit-content;padding:4px;margin:23px auto 0;border:1px solid #ffffff26;border-radius:10px;background:#0a203866;z-index:2}.layer-controls button{padding:10px 19px;min-height:44px;border-radius:7px;background:transparent;color:#c4d2e7;font-size:14px}.layer-controls button[aria-pressed=true]{background:white;color:#1f3a72;box-shadow:0 3px 10px #091b3622}
.body-explorer-v2 .anatomy-panel{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:530px;overflow:visible;order:initial;grid-column:auto}
.body-explorer-v2 .anatomy-grid{inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(ellipse,black,transparent 75%)}
.body-explorer-v2 .body-art{height:520px;width:292.5px;max-width:none;aspect-ratio:360/640;flex-shrink:0;margin:16px 0;transform:none!important;direction:ltr}
.body-explorer-v2 .anatomy-svg{filter:drop-shadow(0 15px 20px #05132940)}.body-explorer-v2 .body-outline{stroke:#d6e6fc;stroke-width:1.4}.body-explorer-v2 .muscle-layer{opacity:.75}.body-explorer-v2 .spine-bones{opacity:.8}.body-explorer-v2 [data-muscle]{cursor:pointer}.body-explorer-v2 .muscle-layer .selected-muscle{fill:#f79a51!important;stroke:#ffd4ad!important;stroke-width:1.6;filter:drop-shadow(0 0 7px #ffae6455)}
.body-explorer-v2 [data-layer=outline] .muscle-layer{opacity:0}.body-explorer-v2 [data-layer=outline] .spine-bones{opacity:.2}
.body-explorer-v2 .hotspots{opacity:1!important;visibility:visible!important}.body-explorer-v2 .body-point{width:44px;height:44px;padding:0;background:transparent;z-index:2}.body-explorer-v2 .body-point:after{display:none}.body-explorer-v2 .body-point .point-dot{width:12px;height:12px;border:2px solid white;background:#f5741e;border-radius:50%;box-shadow:0 0 0 5px #f5741e33;transition:box-shadow .2s,transform .2s}
.body-explorer-v2 .body-point .point-name{position:absolute;top:8px;width:max-content;max-width:138px;height:auto;padding:7px 11px;border:1px solid #96b3d64d;border-radius:7px;background:#173356ed;color:#eaf1fc;font-size:12px;line-height:1.25;box-shadow:none;white-space:nowrap;transition:background .2s,color .2s;pointer-events:none}
.body-explorer-v2 .label-left .point-name{right:43px}.body-explorer-v2 .label-right .point-name{left:43px}.body-explorer-v2 .point-name:before{content:'';position:absolute;top:50%;height:1px;width:18px;background:#a3bad47a}.body-explorer-v2 .label-left .point-name:before{left:100%}.body-explorer-v2 .label-right .point-name:before{right:100%}
.body-explorer-v2 .body-point[aria-pressed=true] .point-name,.body-explorer-v2 .body-point:hover .point-name{background:#fff0e5;color:#713813;border-color:#ffd1ad}.body-explorer-v2 .body-point[aria-pressed=true] .point-dot{background:#f5741e;transform:scale(1.18);box-shadow:0 0 0 8px #f5741e30}
.canvas-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #ffffff20;padding-top:15px;font-size:13px;color:#c4d2e7}.canvas-bottom button{background:#ffffff0c;color:#fff;border:1px solid #ffffff25;border-radius:7px;padding:10px 12px;min-height:44px;font-size:13px}
.body-explorer-v2 .body-info{padding:30px;display:flex;flex-direction:column;gap:22px;min-width:0}.body-info-top{display:flex;align-items:center;justify-content:space-between}.body-info-top .eyebrow{font-size:12px}.region-count{font-size:26px;color:#aab8ce;line-height:1}
.body-explorer-v2 .region-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;direction:inherit}.body-explorer-v2 .region-button{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:12px 14px;border:1px solid #dce4ef;border-radius:9px;background:#fff;min-height:48px;font-size:15px;text-align:start;line-height:1.4;color:#425675;width:100%;transition:background .2s,border-color .2s,transform .2s}.body-explorer-v2 .region-button:hover{background:#f1f5fb;transform:translateY(-1px)}.body-explorer-v2 .region-button[aria-pressed=true]{background:#1f3a72;border-color:#1f3a72;color:white;box-shadow:0 5px 12px #1f3a7218}.body-explorer-v2 .region-index{font-size:11px;color:#93a4bd}.body-explorer-v2 .region-button[aria-pressed=true] .region-index{color:#b6c7e4}
.region-detail-card{background:#f4f7fb;border:1px solid #e3eaf4;border-radius:14px;padding:23px;flex:1}.region-detail-top{display:flex;align-items:center;gap:8px;color:#677d9a;font-size:10px;letter-spacing:.07em}.region-detail-top>span:last-child{margin-inline-start:auto;font-variant-numeric:tabular-nums;letter-spacing:0}.body-explorer-v2 #stage-title{font-size:34px;margin:17px 0 13px;line-height:1.2;letter-spacing:-.03em;color:#1f3a72}.body-explorer-v2 #stage-description{font-size:16px;line-height:1.8;min-height:88px}.body-explorer-v2 .body-detail{margin-top:17px;font-size:14px;line-height:1.7;max-width:none;color:#61748f}.region-pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px;padding-top:17px;border-top:1px solid #dce4ef;color:#657b97;font-size:12px}.region-pagination button{width:44px;height:44px;flex-shrink:0;background:white;border:1px solid #d2ddec;border-radius:50%;font-size:20px;color:#1f3a72}.region-pagination button:hover{background:#1f3a72;color:white}
.body-explorer-v2 .explorer-cta{display:flex;font-size:16px;padding:16px 20px;min-height:54px;margin:0;width:100%;border-radius:9px}.body-explorer-v2 .explorer-note{font-size:12px;line-height:1.7;margin:0;color:#72819a;max-width:none}
[dir=rtl] .body-explorer-v2 .point-name{direction:rtl}[dir=rtl] .body-explorer-v2 .region-pagination button{transform:scaleX(-1)}
@media(max-width:1100px){.body-explorer-v2 .body-console{grid-template-columns:1fr 1fr}.body-explorer-v2 .body-canvas{padding-inline:16px}.body-explorer-v2 .body-info{padding:23px}.body-explorer-v2 .body-point .point-name{font-size:11px;padding:6px 8px}.canvas-view{display:none}.body-explorer-v2 .body-art{height:480px;width:270px}.body-explorer-v2 .region-button{padding:10px;font-size:14px;gap:7px}}
@media(max-width:850px){.body-explorer-v2 .body-console{grid-template-columns:1fr}.body-explorer-v2 .body-canvas{padding:22px}.body-explorer-v2 .body-info{padding:25px}.body-explorer-v2 .anatomy-panel{min-height:0}.body-explorer-v2 .body-art{height:520px;width:292.5px}.body-explorer-v2 .body-point .point-name{font-size:12px}.canvas-view{display:block}.body-explorer-v2 .region-list{grid-template-columns:repeat(3,1fr)}.body-explorer-v2 .region-button{font-size:15px}.body-explorer-v2 #stage-description{min-height:0}.body-explorer-v2 .explorer-heading>p{max-width:440px}}
@media(max-width:520px){.body-explorer-v2{padding-block:60px}.body-explorer-v2 .body-console{border-radius:17px}.body-explorer-v2 .body-canvas{padding:18px 12px}.canvas-live{font-size:10px}.canvas-view{font-size:9px}.layer-controls{margin-top:18px}.body-explorer-v2 .body-art{height:460px;width:258.75px;margin:14px 0}.body-explorer-v2 .body-point .point-name{font-size:10px;max-width:112px;white-space:normal;padding:6px 7px;line-height:1.3}.body-explorer-v2 .label-left .point-name{right:31px}.body-explorer-v2 .label-right .point-name{left:31px}.body-explorer-v2 .point-name:before{width:7px}.body-explorer-v2 .body-info{padding:20px 16px;gap:18px}.body-explorer-v2 .region-list{grid-template-columns:1fr 1fr}.body-explorer-v2 .region-button{font-size:14px;min-height:48px}.canvas-bottom{font-size:12px;gap:6px}.canvas-bottom button{font-size:12px;padding:9px}.region-detail-card{padding:20px}.body-explorer-v2 #stage-title{font-size:30px}.body-explorer-v2 #stage-description{font-size:16px}.body-explorer-v2 .body-detail{font-size:14px}.body-explorer-v2 .explorer-heading h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){.body-explorer-v2 *{animation:none!important;transition:none!important}}
.body-explorer-v2 .region-button>span:last-child{font-size:inherit;color:inherit}
@media(max-width:520px){.body-explorer-v2 .body-point .point-name{font-size:12px;max-width:108px}}
.body-explorer-v2 .body-point .point-name{pointer-events:auto}
/* Curved anatomical illustration with softer volume and natural proportions. */
.body-explorer-v2 .anatomy-natural .body-outline{stroke:#afc6dc;stroke-width:.65}
.body-explorer-v2 .anatomy-natural .muscle-layer{opacity:.8}
.body-explorer-v2 .anatomy-natural .muscle-layer .selected-muscle{fill:url(#body-highlight)!important;stroke:#f9bb80!important;stroke-width:.8;filter:drop-shadow(0 0 5px #ffb67630)}
.body-explorer-v2 [data-layer=outline] .anatomy-natural .muscle-layer{opacity:0}
.body-explorer-v2 .anatomy-natural .spine-bones{opacity:.65}
.body-explorer-v2 .anatomy-natural .anatomy-contours{pointer-events:none}
/* Consistent vector interface icons, independent of device emoji fonts. */
.ui-icon{display:inline-block;width:20px;height:20px;flex-shrink:0;vertical-align:middle}
.sim-play,.canvas-bottom button,.back-top{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.sim-play>span:first-child{display:inline-flex;align-items:center}
.region-pagination button,.dialog-close{display:inline-grid;place-items:center}
.phone .ui-icon,.care-note>.ui-icon{width:22px;height:22px}
.dialog-close .ui-icon{width:24px;height:24px}

/* Supplied Tolin photographs: keep faces visible across screen sizes. */
.image-frame img { object-position: 52% center; }
.about-visual img { object-position: center 20%; }
.practitioner img { object-fit: cover; object-position: center 15%; border-radius: 50%; }
@media (max-width: 600px) {
    .image-frame { height: auto; aspect-ratio: 6 / 5; }
}

/* Videos and Facebook photo collection. */
.media-section { background: var(--primary-dark); color: white; }
.media-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.media-copy h2 { color: white; margin: 20px 0; font-size: clamp(40px, 5vw, 68px); }
.media-copy .eyebrow, .media-copy .link-button { color: #ffaf76; }
.media-copy p { color: #d7e0ee; max-width: 380px; font-size: 18px; }
.media-copy .link-button { margin-top: 28px; }
.video-carousel { max-width: 350px; width: 100%; justify-self: center; border: 1px solid #ffffff30; border-radius: 24px; overflow: hidden; background: #0c172a; box-shadow: 0 25px 65px #0004; }
.video-slide video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: contain; }
.video-navigation, .photo-navigation { display: flex; gap: 24px; align-items: center; margin-top: 38px; font-variant-numeric: tabular-nums; direction: ltr; }
.video-navigation .circle-button { border: 1px solid #ffffff60; color: white; background: transparent; }
.video-dots { display: flex; gap: 12px; margin-top: 20px; direction: ltr; }
.video-dots button { width: 40px; height: 32px; background: transparent; border: 0; cursor: pointer; position: relative; }
.video-dots button:after { content: ''; position: absolute; inset: 12px 0; background: #ffffff40; border-radius: 6px; }
.video-dots button[aria-pressed="true"]:after { background: var(--accent); }
.photos-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.photo-card { position: relative; padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; cursor: zoom-in; transition: border-color .2s, transform .2s; }
.photo-card:hover { border-color: var(--primary); transform: translateY(-3px); }
.photo-card img { display: block; width: 100%; height: 280px; object-fit: contain; }
.photo-card > .ui-icon { position: absolute; bottom: 12px; inset-inline-end: 14px; background: white; border-radius: 50%; padding: 8px; width: 36px; height: 36px; }
.photo-number { display: block; text-align: start; font-size: 12px; color: var(--muted); margin-top: 12px; }
.photos-more { display: flex; justify-content: center; margin-top: 30px; }
#photo-dialog { padding: 52px 20px 20px; width: min(820px,94vw); max-height: 94dvh; border: 0; border-radius: 16px; background: #101e34; color: white; }
#photo-dialog::backdrop { background: #081222dc; }
#photo-full { display: block; margin: auto; max-width: 100%; height: 70dvh; object-fit: contain; }
.photo-close { position: absolute; top: 8px; inset-inline-end: 12px; color: white; }
.photo-navigation { justify-content: center; margin-top: 12px; }
.photo-navigation .circle-button { color: white; }
.video-slide[hidden], .photo-card[hidden] { display: none; }
@media(max-width: 720px) {
 .media-layout { grid-template-columns: 1fr; gap: 32px; }
 .video-carousel { max-width: 320px; }
 .media-copy h2 { margin-block: 12px; }
 .video-navigation { margin-top: 24px; }
 .photos-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
 .photo-card { padding: 10px; }
 .photo-card img { height: 200px; }
}
@media(prefers-reduced-motion: reduce) { .photo-card { transition: none; } .photo-card:hover { transform: none; } }
.video-navigation .circle-button, .photo-navigation .circle-button { margin: 0; flex: 0 0 auto; }
.video-navigation svg, .photo-navigation svg { transform: none; }
[dir=rtl] .video-navigation .circle-button svg, [dir=rtl] .photo-navigation .circle-button svg { transform: none; }

/* Compact swipeable video rail. */
.compact-videos { background: var(--surface); padding-block: 56px; }
.video-wrap { max-width: 940px; }
.video-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.video-heading h2 { margin: 0; font-size: clamp(30px,4vw,42px); }
.compact-videos .video-navigation { margin: 0; gap: 10px; }
.compact-videos .circle-button { color: var(--primary); border: 1px solid var(--border); background: white; width: 40px; height: 40px; }
.compact-videos .video-carousel { --card-width: 216px; position: relative; display: flex; gap: 16px; width: 100%; max-width: none; padding: 4px max(0px,calc((100% - var(--card-width))/2)) 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.compact-videos .video-carousel::-webkit-scrollbar { display: none; }
.compact-videos .video-slide { flex: 0 0 var(--card-width); scroll-snap-align: center; border-radius: 16px; overflow: hidden; background: #0c172a; }
.compact-videos .video-slide video { width: 100%; height: 384px; object-fit: contain; }
.compact-videos .video-dots { justify-content: center; gap: 8px; margin-top: 4px; }
.compact-videos .video-dots button { width: 24px; }
.compact-videos .video-dots button:after { inset: 13px 0; background: #c4cedf; }
.compact-videos .video-dots button[aria-pressed=true]:after { background: var(--primary); }
@media(max-width: 720px) {
 .compact-videos { padding-block: 36px; }
 .compact-videos .video-carousel { --card-width: 190px; gap: 12px; }
 .compact-videos .video-slide video { height: 338px; }
 .video-heading { margin-bottom: 18px; }
}
.compact-videos .video-wrap { max-width: 680px; }
.compact-videos .video-carousel { padding-inline: 0; }
.compact-videos .video-carousel:after { content: ''; flex: 0 0 max(0px,calc(100% - var(--card-width) - 16px)); }
.compact-videos .video-slide { scroll-snap-align: start; }
@media(max-width:720px) { .compact-videos .video-carousel:after { flex-basis: max(0px,calc(100% - var(--card-width) - 12px)); } }

/* Selected language flag replaces the native dropdown arrow. */
.language-control { gap: 8px; cursor: pointer; }
.language-control select { appearance: none; -webkit-appearance: none; background-image: none; padding-inline: 2px; }
.language-control #language-flag { width: 25px; height: 24px; flex: 0 0 25px; object-fit: contain; pointer-events: none; }
.language-control:focus-within { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }

/* Photos use the same compact swipe layout as videos. */
.compact-photos { background: white; }
.compact-photos .photo-card { flex: 0 0 var(--card-width); scroll-snap-align: start; padding: 12px; text-align: start; }
.compact-photos .photo-card img { height: 280px; object-fit: contain; }
.compact-photos .photo-card:hover { transform: none; }
.photos-position { text-align: center; direction: ltr; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 12px; }
@media(max-width:720px) { .compact-photos .photo-card img { height: 240px; } }

/* Both media carousels align with the standard page container. */
#videos .video-wrap, #photos .video-wrap { max-width: none; }

/* Flag language picker with keyboard-accessible options. */
.language-control { position: relative; }
.language-control:focus-within { outline: none; }
.language-trigger { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--primary); padding: 10px 4px; cursor: pointer; font: inherit; font-size: 13px; }
.language-trigger:focus-visible, .language-menu button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px; }
.language-control .language-chevron { width: 16px; height: 16px; transition: transform .2s; }
.language-trigger[aria-expanded=true] .language-chevron { transform: rotate(180deg); }
.language-menu { position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0; width: 220px; padding: 10px; background: white; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 16px 45px #14294f26; z-index: 100; }
.language-menu p { font-size: 12px; color: var(--muted); padding: 6px 10px 10px; }
.language-menu button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 10px; background: transparent; padding: 12px 10px; cursor: pointer; color: var(--ink); font: inherit; font-size: 15px; text-align: start; }
.language-menu button:hover, .language-menu button:focus-visible { background: var(--surface); }
.language-menu button[aria-checked=true] { background: var(--surface-blue); color: var(--primary); }
.language-menu button img { width: 25px; height: 24px; object-fit: contain; }
.language-menu .language-check { margin-inline-start: auto; width: 18px; height: 18px; opacity: 0; }
.language-menu button[aria-checked=true] .language-check { opacity: 1; }
@media(prefers-reduced-motion: reduce) { .language-control .language-chevron { transition: none; } }

/* A readable header that floats on downward scroll without shifting the page. */
.site-header { background: transparent; border: 0; backdrop-filter: none; height: 88px; }
.site-header .header-inner { position: relative; width: 100%; max-width: none; height: 88px; padding-inline: max(32px,calc((100% - 1320px)/2)); gap: 24px; background: #fffffff5; border: 1px solid transparent; border-bottom-color: var(--border); border-radius: 0; backdrop-filter: blur(20px); transition: width .28s ease, transform .28s ease, border-radius .28s ease, box-shadow .28s ease, padding .28s ease; }
.site-header .brand { gap: 12px; }
.site-header .brand img { width: 48px; height: 48px; }
.site-header .brand>span { font-size: 34px; }
.site-header .brand>span>span { font-size: 8px; letter-spacing: .07em; }
.site-header nav { gap: 4px; }
.site-header nav a { font-size: 16px; font-weight: 500; padding: 12px 14px; border-radius: 999px; color: #435675; transition: color .2s, background .2s; }
.site-header nav a:after { display: none; }
.site-header nav a:hover, .site-header nav a[aria-current] { background: var(--surface-blue); color: var(--primary); }
.site-header .header-actions { gap: 16px; }
.site-header .button.compact { border-radius: 999px; padding: 13px 20px; font-size: 14px; gap: 12px; }
.site-header .language-trigger { font-size: 14px; padding: 10px 6px; }
.site-header.is-floating .header-inner { width: min(1320px,calc(100% - 32px)); padding-inline: 24px; transform: translateY(12px); border-radius: 999px; border-color: #dce3edcc; box-shadow: 0 10px 36px #14294f1a; }
@media(max-width:1200px) {
 .site-header .header-inner { padding-inline: 24px; }
 .site-header .header-actions>.button { display: none; }
 .site-header .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--surface); }
 .site-header .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--primary); transition: transform .2s; }
 .site-header .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(4px) rotate(45deg); }
 .site-header .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-4px) rotate(-45deg); }
 .site-header nav { display: none; position: absolute; top: calc(100% + 10px); inset-inline: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 24px; background: white; box-shadow: 0 16px 36px #14294f1a; }
 .site-header nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
 .site-header nav a { font-size: 18px; padding: 15px 18px; border-radius: 14px; }
}
@media(max-width:720px) {
 .site-header, .site-header .header-inner { height: 76px; }
 .site-header .header-inner { padding-inline: 18px; gap: 10px; }
 .site-header .brand { gap: 8px; }
 .site-header .brand img { width: 38px; height: 38px; }
 .site-header .brand>span { font-size: 29px; }
 .site-header .brand>span>span { font-size: 6px; }
 .site-header .header-actions { gap: 8px; }
 .site-header .language-trigger { gap: 5px; font-size: 13px; padding-inline: 2px; }
 .site-header.is-floating .header-inner { width: calc(100% - 16px); padding-inline: 12px; transform: translateY(8px); }
 .site-header .language-menu { width: 205px; }
}
@media(max-width:360px) {
 .site-header .brand>span>span { display: none; }
 .site-header .brand img { width: 32px; height: 32px; }
 .site-header .brand>span { font-size: 25px; }
 .site-header .header-inner { padding-inline: 12px; }
}
@media(prefers-reduced-motion:reduce) { .site-header .header-inner { transition: none; } }

/* Compact language trigger on phones; full names remain in the picker. */
@media(max-width:720px) {
 .site-header #language-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 .site-header .language-trigger { min-width: 48px; min-height: 44px; justify-content: center; gap: 6px; }
}

/* Active navigation uses the bold face, including Rabar 021 for RTL languages. */
.site-header nav a[aria-current="location"] { font-weight: 700; }
html:lang(ar) .site-header nav a[aria-current="location"],
html:lang(ckb) .site-header nav a[aria-current="location"] { font-family: Rabar, Tahoma, sans-serif; font-weight: 700; }

/* Practical visit planning and quick contact. */
.first-visit { background: #f4f7fb; }
.first-visit h2 { margin-top: 14px; }
.visit-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.visit-cards article { background: white; border: 1px solid var(--border); border-radius: 20px; padding: 28px; }
.visit-number { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-pale); color: #9f430d; font-size: 13px; margin-bottom: 24px; }
.visit-cards h3 { font-size: 22px; margin-bottom: 14px; }
.visit-cards p { font-size: 16px; line-height: 1.8; }
.visit-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 28px; }
.visit-note { font-size: 13px; margin-top: 14px; }
.profile-focus { margin-block: 20px; padding-inline-start: 18px; border-inline-start: 3px solid var(--accent); }
.profile-focus strong { font-size: 16px; }
.profile-focus p { font-size: 15px; margin-block: 8px 12px; }
.explorer-services { margin-block: 14px; }
.video-caption { padding: 12px 14px; font-size: 14px; color: white; line-height: 1.5; }
html[dir=rtl] .video-caption { direction: rtl; }
.floating-whatsapp { position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 25; display: flex; align-items: center; gap: 10px; background: var(--primary); color: white; border-radius: 999px; padding: 15px 22px; box-shadow: 0 8px 28px #14294f33; font-size: 15px; }
.mobile-contact-bar { display: none; }
body.dialog-open .floating-whatsapp, body.dialog-open .mobile-contact-bar { visibility: hidden; }
@media(max-width:720px) {
 .visit-cards { grid-template-columns: 1fr; gap: 12px; }
 .visit-cards article { padding: 22px; }
 .visit-number { margin-bottom: 14px; }
 .visit-actions { gap: 18px; }
 .floating-whatsapp { display: none; }
 body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
 .mobile-contact-bar { position: fixed; inset-inline: 10px; bottom: max(10px,env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3,1fr); z-index: 25; background: #fffffffa; border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 5px 28px #14294f26; padding: 7px; backdrop-filter: blur(14px); }
 .mobile-contact-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px; font-size: 12px; color: var(--primary); border-radius: 16px; }
 .mobile-contact-bar .whatsapp-link { background: var(--primary); color: white; }
}
@media print { .floating-whatsapp, .mobile-contact-bar { display: none !important; } }
.center-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 40px; }
.center-gallery a { display: block; border-radius: 16px; overflow: hidden; }
.center-gallery img { width: 100%; height: 220px; object-fit: cover; }
@media(max-width:720px) {
 .center-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; }
 .center-gallery a { flex: 0 0 80%; scroll-snap-align: start; }
 .center-gallery img { height: 190px; }
}

/* Optional movement models, tucked into a simple expandable row. */
#movement-lab { padding-block: 24px; }
.movement-guide { border: 1px solid var(--border); border-radius: 16px; background: white; }
.movement-guide > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; color: var(--primary); }
.movement-guide > summary::-webkit-details-marker { display: none; }
.movement-guide[open] > summary svg { transform: rotate(180deg); }
.movement-guide .lab-shell { margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0 0 16px 16px; }

/* Frosted mobile contact dock, compact on downward scroll. */
@media(max-width:720px) {
 .mobile-contact-bar { inset-inline: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 7px; gap: 6px; border-radius: 28px; background: #f4f7fcf5; border: 1px solid #ffffffd9; box-shadow: 0 12px 36px #14294f24, 0 2px 6px #14294f0d, inset 0 1px 0 #fff; backdrop-filter: blur(24px) saturate(165%); -webkit-backdrop-filter: blur(24px) saturate(165%); transition: inset .25s ease, padding .25s ease, border-radius .25s ease; }
 .mobile-contact-bar a { min-height: 64px; padding: 9px 4px; gap: 6px; border-radius: 21px; color: #1b3567; font-size: 12px; font-weight: 500; line-height: 1.35; transition: min-height .25s ease, padding .25s ease, background .2s ease; }
 .mobile-contact-bar a>.ui-icon { width: 23px; height: 23px; flex-shrink: 0; transition: width .25s ease, height .25s ease; }
 .mobile-contact-bar a:active { background: #dce7f5b3; }
 .mobile-contact-bar a:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
 .mobile-contact-bar .whatsapp-link { background: linear-gradient(145deg,#38568ded,#1f3a72f5); color: white; border: 1px solid #ffffff38; box-shadow: inset 0 1px 0 #ffffff38, 0 4px 12px #1f3a7226; }
 .mobile-contact-bar.is-compact:not(:focus-within) { inset-inline: 24px; padding: 5px; border-radius: 24px; }
 .mobile-contact-bar.is-compact:not(:focus-within) a { min-height: 48px; padding: 5px 3px; gap: 3px; border-radius: 18px; }
 .mobile-contact-bar.is-compact:not(:focus-within) a>.ui-icon { width: 20px; height: 20px; }
 body { padding-bottom: calc(98px + env(safe-area-inset-bottom)); }
 @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .mobile-contact-bar { background: linear-gradient(135deg,#ffffffc9,#eaf0fac2); } }
}
@media(prefers-reduced-motion:reduce) { .mobile-contact-bar, .mobile-contact-bar a, .mobile-contact-bar a>.ui-icon { transition: none; } }

/* Minimal body explorer: the model and a short selected-area caption. */
#body-explorer { padding-block: 40px; }
#body-explorer .explorer-heading { margin-bottom: 20px; display: block; }
#body-explorer .explorer-heading h2 { font-size: 30px; line-height: 1.3; }
#body-explorer .explorer-heading h2 br { display: none; }
#body-explorer .body-console { display: block; max-width: 720px; margin-inline: auto; border-radius: 20px; box-shadow: none; }
#body-explorer .body-canvas { padding: 18px 22px 14px; }
#body-explorer .layer-controls { margin-top: 14px; }
#body-explorer .anatomy-panel { min-height: 0; }
#body-explorer .body-art { height: 460px; width: 258.75px; margin-block: 8px; }
#body-explorer .canvas-bottom { padding-top: 10px; }
#body-explorer .body-caption { padding: 16px 22px; background: white; }
#body-explorer .body-caption .region-pagination { margin: 0; padding: 0; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#body-explorer .body-caption h3 { margin: 0; font-size: 20px; text-align: center; }
#body-explorer .body-caption p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; text-align: center; }
@media(max-width:720px) {
 #body-explorer { padding-block: 28px; }
 #body-explorer .explorer-heading h2 { font-size: 25px; }
 #body-explorer .body-canvas { padding: 14px 10px; }
 #body-explorer .body-art { height: 440px; width: 247.5px; }
 #body-explorer .canvas-view { display: none; }
 #body-explorer .body-caption { padding: 12px 16px; }
 #body-explorer .body-point .point-name { padding: 6px 8px; max-width: 114px; font-size: 11px; }
 #body-explorer .label-left .point-name { right: 36px; }
 #body-explorer .label-right .point-name { left: 36px; }
}

/* Slimmer mobile contact bar in both scroll states. */
@media(max-width:720px) {
 .mobile-contact-bar { inset-inline: 18px; padding: 4px; gap: 4px; border-radius: 22px; bottom: calc(8px + env(safe-area-inset-bottom)); }
 .mobile-contact-bar a { min-height: 48px; padding: 5px 3px; gap: 3px; border-radius: 17px; font-size: 11px; }
 .mobile-contact-bar a>.ui-icon { width: 19px; height: 19px; }
 .mobile-contact-bar.is-compact:not(:focus-within) { inset-inline: 24px; padding: 3px; border-radius: 20px; }
 .mobile-contact-bar.is-compact:not(:focus-within) a { min-height: 44px; padding: 3px; gap: 2px; border-radius: 16px; }
 .mobile-contact-bar.is-compact:not(:focus-within) a>.ui-icon { width: 18px; height: 18px; }
 body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
}

/* Compact therapist introduction with one message and a small photo strip. */
#about { padding-block: 48px; }
#about .about-grid { grid-template-columns: minmax(230px,.8fr) minmax(0,1.2fr); gap: 40px; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 28px; align-items: center; }
#about .about-visual { align-self: stretch; }
#about .about-visual>img { width: 100%; height: 100%; min-height: 370px; max-height: 460px; object-fit: cover; object-position: center 20%; border-radius: 18px; }
#about .about-copy h2 { font-size: clamp(28px,3.5vw,42px); line-height: 1.25; margin-top: 12px; }
#about .about-copy>p { font-size: 16px; line-height: 1.7; margin-top: 14px; max-width: 440px; }
#about .practitioner { margin: 20px 0; padding: 0; border: 0; }
#about .practitioner strong { font-size: 19px; font-weight: 700; line-height: 1.5; }
#about .practitioner div>span { font-size: 14px; line-height: 1.6; margin-top: 4px; }
#about .about-book { border-radius: 999px; padding: 12px 20px; min-height: 44px; font-size: 14px; }
#about .center-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; margin-top: 24px; gap: 10px; }
#about .center-gallery a { border-radius: 10px; }
#about .center-gallery img { width: 100%; height: 100px; object-fit: cover; }
@media(max-width:720px) {
 #about { padding-block: 28px; }
 #about .about-grid { grid-template-columns: 1fr; padding: 16px; gap: 22px; border-radius: 22px; }
 #about .about-visual>img { height: 260px; min-height: 0; object-position: center 18%; }
 #about .about-copy h2 { font-size: 28px; }
 #about .about-copy>p { font-size: 15px; margin-top: 10px; }
 #about .practitioner { margin-block: 16px; }
 #about .practitioner strong { font-size: 18px; }
 #about .center-gallery { margin-top: 18px; gap: 8px; }
 #about .center-gallery img { height: 76px; }
}

/* One compact section for both movement tools. */
#body-explorer .movement-pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; align-items: start; }
#body-explorer .body-console { width: 100%; max-width: none; margin: 0; }
#body-explorer #movement-lab { padding: 0; min-width: 0; }
#body-explorer .movement-guide { overflow: hidden; border-radius: 20px; }
#body-explorer .movement-guide>summary { padding: 16px 18px; font-size: 18px; }
#body-explorer .body-art { height: 420px; width: 236.25px; }
#body-explorer .canvas-top { gap: 8px; }
#body-explorer .canvas-live { font-size: 10px; }
#body-explorer .canvas-view { display: none; }
#body-explorer .layer-controls { margin-top: 10px; }
#body-explorer .body-caption p { font-size: 13px; }
#movement-lab .lab-shell { box-shadow: none; }
#movement-lab .lab-sidebar { padding: 12px; }
#movement-lab .lab-tabs { display: flex; flex-direction: row; gap: 6px; }
#movement-lab .lab-tabs button { min-width: 0; min-height: 44px; padding: 8px; font-size: 13px; justify-content: center; }
#movement-lab .lab-tabs button>span:first-child, #movement-lab .lab-tabs button>svg { display: none; }
#movement-lab .simulation-art { height: 210px; padding: 20px 16px; }
#movement-lab .sim-toolbar { padding: 12px 16px; }
#movement-lab .sim-readout { padding: 10px 16px; gap: 10px; }
#movement-lab .sim-readout output { font-size: 20px; }
#movement-lab .sim-readout>span { font-size: 11px; }
#movement-lab .simulation-control { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
#movement-lab .simulation-control>*, #movement-lab .range-control { width: 100%; }
#movement-lab .sim-presets { gap: 6px; }
#movement-lab .sim-presets button { padding: 8px 10px; min-height: 40px; font-size: 12px; }
#movement-lab .sim-drag-hint { display: none; }
@media(max-width:850px) {
 #body-explorer .movement-pair { grid-template-columns: 1fr; gap: 14px; }
 #body-explorer .body-console, #body-explorer #movement-lab { max-width: 600px; width: 100%; margin-inline: auto; }
}
@media(max-width:720px) {
 #body-explorer .body-art { height: 420px; width: 236.25px; }
 #movement-lab .simulation-art { height: 190px; }
}

/* About photos open in the shared full-size lightbox. */
#about button.about-visual { padding: 0; border: 0; background: transparent; text-align: inherit; cursor: zoom-in; border-radius: 18px; overflow: hidden; }
#about .center-gallery a { cursor: zoom-in; }
#about button.about-visual:focus-visible, #about .center-gallery a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
#photo-dialog::backdrop { background: #081222a6; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#photo-dialog { background: #101e34ed; border: 1px solid #ffffff2b; box-shadow: 0 28px 90px #0006; }

/* Balanced, compact movement cards. */
#body-explorer .movement-pair { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 20px; }
#body-explorer .body-console, #body-explorer .movement-guide { height: 580px; border-radius: 18px; }
#body-explorer .body-console { display: flex; flex-direction: column; }
#body-explorer .body-canvas { flex: 1; min-height: 0; padding: 12px 16px; }
#body-explorer .body-art { height: 320px; width: 180px; margin: 4px 0; }
#body-explorer .body-caption { padding: 10px 16px; }
#body-explorer .body-caption h3 { font-size: 17px; }
#body-explorer .body-caption p { font-size: 12px; margin-top: 5px; }
#body-explorer .layer-controls button { padding: 6px 14px; min-height: 38px; font-size: 13px; }
#body-explorer .movement-guide { display: flex; flex-direction: column; }
#body-explorer .guide-title { font-size: 18px; padding: 16px 18px; margin: 0; flex-shrink: 0; }
#movement-lab .lab-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#movement-lab .lab-sidebar { flex-shrink: 0; padding: 8px; }
#movement-lab .lab-panels { flex: 1; min-height: 0; }
#movement-lab [role=tabpanel]:not([hidden]) { height: 100%; display: flex; flex-direction: column; }
#movement-lab .simulation-art { height: auto; flex: 1; min-height: 140px; padding: 14px; }
#movement-lab .simulation-art svg { max-height: 100%; }
#movement-lab .sim-toolbar, #movement-lab .sim-readout, #movement-lab .simulation-control { flex-shrink: 0; }
#movement-lab .simulation-control { padding: 10px 14px; gap: 8px; }
#movement-lab .sim-readout { padding: 8px 14px; }
#movement-lab .sim-readout output { font-size: 17px; }
.blog-heading { margin-bottom: 26px; }
.blog-heading h2 { margin-top: 12px; font-size: clamp(28px,3vw,40px); }
.blog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.blog-card { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: white; display: flex; flex-direction: column; }
.blog-card>img { width: 100%; height: 180px; object-fit: cover; object-position: center 25%; }
.blog-card>div { padding: 22px; display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.blog-card h3 { font-size: 21px; line-height: 1.4; }
.blog-card p { margin: 12px 0 22px; font-size: 15px; line-height: 1.7; }
.blog-card button { margin-top: auto; background: transparent; padding: 0; min-height: 44px; text-align: start; }
.blog-dialog-text { font-size: 17px; line-height: 1.9; margin-bottom: 24px; }
@media(max-width:850px) {
 #body-explorer .movement-pair { grid-template-columns: 1fr; gap: 12px; }
 .blog-grid { grid-template-columns: 1fr; gap: 16px; }
 .blog-card>img { height: 180px; }
}
@media(max-width:720px) {
 #body-explorer .body-console, #body-explorer .movement-guide { height: 560px; }
 #body-explorer .body-art { height: 300px; width: 168.75px; }
 .blog-card>div { padding: 18px; }
 .blog-card h3 { font-size: 20px; }
}

#body-explorer #stage-description { min-height: 0; }
#body-explorer .body-caption { flex-shrink: 0; }

/* Standalone compact body explorer. */
#body-explorer .movement-pair { grid-template-columns: minmax(0, 1fr); max-width: 600px; margin-inline: auto; }

/* Slim desktop navigation, including its floating state. */
@media (min-width: 1201px) {
 .site-header, .site-header .header-inner { height: 68px; }
 .site-header .header-inner { gap: 18px; padding-inline: max(24px,calc((100% - 1240px)/2)); }
 .site-header .brand { gap: 8px; }
 .site-header .brand img { width: 38px; height: 38px; }
 .site-header .brand>span { font-size: 28px; }
 .site-header .brand>span>span { font-size: 7px; }
 .site-header nav { gap: 2px; }
 .site-header nav a { padding: 9px 11px; }
 .site-header .header-actions { gap: 10px; }
 .site-header .button.compact { min-height: 40px; padding: 9px 16px; gap: 8px; }
 .site-header .language-trigger { min-height: 40px; padding: 8px 4px; }
 .site-header.is-floating .header-inner { width: min(1240px,calc(100% - 40px)); padding-inline: 20px; transform: translateY(8px); }
}

/* Photo viewer: visible controls on a separate glass frame. */
#photo-dialog { width: min(960px,calc(100vw - 32px)); height: min(860px,calc(100dvh - 40px)); max-height: calc(100dvh - 40px); padding: 0; overflow: hidden; border-radius: 24px; background: #122138f5; color: #fff; }
#photo-dialog[open] { display: flex; flex-direction: column; }
#photo-dialog .photo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid #ffffff20; flex-shrink: 0; font-size: 16px; font-weight: 700; }
#photo-dialog .circle-button { width: 44px; height: 44px; min-width: 44px; margin: 0; padding: 0; background: #fff; color: #18345a; border: 1px solid #fff; box-shadow: 0 2px 8px #0002; cursor: pointer; }
#photo-dialog .circle-button svg { display: block; width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; opacity: 1; transform: none; }
#photo-dialog .circle-button:hover { background: #dfebff; color: #122b50; }
#photo-dialog .circle-button:focus-visible { outline: 3px solid #ffb075; outline-offset: 3px; }
#photo-dialog .photo-close { position: static; }
#photo-dialog .photo-stage { flex: 1; min-height: 0; padding: 14px; display: flex; align-items: center; justify-content: center; background: #091426; }
#photo-dialog #photo-full { width: 100%; height: 100%; max-height: 100%; min-height: 0; object-fit: contain; margin: 0; border-radius: 8px; }
#photo-dialog .photo-navigation { margin: 0; padding: 12px 18px; gap: 24px; flex-shrink: 0; border-top: 1px solid #ffffff20; }
#photo-count { min-width: 76px; text-align: center; color: #e5edfa; font-size: 14px; letter-spacing: .08em; }
@media(max-width:720px) {
 #photo-dialog { width: calc(100vw - 20px); height: calc(100dvh - 32px); max-height: calc(100dvh - 32px); border-radius: 18px; }
 #photo-dialog .photo-stage { padding: 8px; }
 #photo-dialog .photo-toolbar, #photo-dialog .photo-navigation { padding: 10px 12px; }
}

/* Full-width anatomy studio: overview, regional magnification and muscle detail. */
#body-explorer.anatomy-studio { padding-block: 64px; background: #eef3f5; background-image: radial-gradient(ellipse at 10% 20%,#dce9ec 0,transparent 50%),radial-gradient(ellipse at 90% 90%,#f4e8db 0,transparent 50%); }
#body-explorer.anatomy-studio .explorer-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
#body-explorer.anatomy-studio .explorer-heading h2 { font-size: clamp(28px,3vw,42px); }
#body-explorer.anatomy-studio .explorer-heading>p { max-width: 420px; font-size: 16px; line-height: 1.8; margin: 0; }
#body-explorer.anatomy-studio .movement-pair { display: block; max-width: none; width: 100%; margin: 0; }
#body-explorer.anatomy-studio .body-console { display: grid; grid-template-columns: 1.1fr 1fr; height: auto; width: 100%; max-width: none; border: 1px solid #d8e1e6; border-radius: 28px; background: #fff; box-shadow: 0 24px 64px #19334e0b; overflow: hidden; }
#body-explorer.anatomy-studio .body-canvas { min-height: 690px; padding: 24px; background: radial-gradient(ellipse at 50% 40%,#35556e,#132f43 80%); }
#body-explorer.anatomy-studio .canvas-top { flex-shrink: 0; }
#body-explorer.anatomy-studio .canvas-live { font-size: 11px; letter-spacing: .03em; }
#body-explorer.anatomy-studio .layer-controls { margin-top: 18px; flex-shrink: 0; }
#body-explorer.anatomy-studio .anatomy-panel { min-height: 450px; perspective: 900px; }
#body-explorer.anatomy-studio .body-art { width: 253.125px; height: 450px; margin: 8px 0; }
#body-explorer.anatomy-studio .anatomy-svg { filter: drop-shadow(10px 12px 12px #0004); }
#body-explorer.anatomy-studio .body-point .point-name { font-size: 11px; padding: 6px 8px; white-space: nowrap; }
#body-explorer.anatomy-studio .anatomy-regions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
#body-explorer.anatomy-studio .anatomy-regions button { padding: 8px 12px; min-height: 40px; border: 1px solid #ffffff30; border-radius: 999px; color: #dce9f4; background: #ffffff08; font-size: 12px; }
#body-explorer.anatomy-studio .anatomy-regions button[aria-pressed=true] { background: #ffe3ce; border-color: #ffba87; color: #6d361a; }
#body-explorer.anatomy-studio .anatomy-hint { text-align: center; color: #bacee0; font-size: 12px; margin: 12px 0 0; }
#body-explorer.anatomy-studio .body-caption { padding: 28px; background: #ffffff; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
#body-explorer.anatomy-studio .body-caption h3 { font-size: 26px; }
#body-explorer.anatomy-studio #stage-description { font-size: 14px; line-height: 1.8; text-align: start; margin: 0; min-height: 0; }
.anatomy-mode { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #edf2f6; }
.anatomy-mode button { flex: 1; min-height: 44px; padding: 8px; border-radius: 9px; background: transparent; color: #52667b; font-size: 14px; }
.anatomy-mode button[aria-pressed=true] { background: white; color: #203e64; box-shadow: 0 2px 6px #18375512; font-weight: 700; }
.detail-view { height: 260px; min-height: 260px; position: relative; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at center,#ffffff,#e6edf2); border: 1px solid #e1e8ed; direction: ltr; }
#region-closeup, #trigger-closeup { height: 100%; width: 100%; overflow: hidden; }
#body-explorer.anatomy-studio .anatomy-detail-svg { width: 100%; height: 100%; filter: drop-shadow(7px 8px 8px #19385528); }
#body-explorer.anatomy-studio [data-layer=outline] #region-closeup .muscle-layer { opacity: 0; }
#trigger-closeup svg { width: 100%; height: 100%; transform-origin: 50% 46%; transition: transform .25s; }
#trigger-closeup>span { position: absolute; top: 12px; inset-inline: 12px; text-align: center; font-size: 12px; color: #794a2c; }
.anatomy-zoom { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; border: 1px solid #d4dfe7; border-radius: 99px; background: #fffffff2; padding: 4px; box-shadow: 0 4px 12px #19395510; }
.anatomy-zoom button { width: 36px; height: 36px; border-radius: 50%; background: #edf2f6; color: #183956; font: 24px/1 sans-serif; }
.anatomy-zoom button:disabled { opacity: .35; cursor: default; }
.anatomy-zoom output { min-width: 40px; text-align: center; font-size: 12px; color: #183956; }
.anatomy-facts h4 { color: #5b7082; font-size: 12px; margin-bottom: 6px; }
#body-explorer.anatomy-studio .anatomy-facts p { text-align: start; font-size: 14px; margin: 0 0 14px; color: #243f59; line-height: 1.7; }
#body-explorer.anatomy-studio .trigger-explanation p { text-align: start; font-size: 14px; line-height: 1.8; margin: 0 0 12px; }
.trigger-explanation a { color: #285c89; text-decoration: underline; font-size: 12px; }
.anatomy-disclaimer { font-size: 12px; color: #607382; text-align: center; margin-top: 16px; }
#body-explorer [hidden] { display: none!important; }
#body-explorer button:focus-visible { outline: 3px solid #eea66c; outline-offset: 3px; }
@media(max-width:850px) {
 #body-explorer.anatomy-studio { padding-block: 36px; }
 #body-explorer.anatomy-studio .explorer-heading { display: block; }
 #body-explorer.anatomy-studio .explorer-heading>p { font-size: 14px; margin-top: 10px; }
 #body-explorer.anatomy-studio .body-console { grid-template-columns: 1fr; border-radius: 20px; }
 #body-explorer.anatomy-studio .body-canvas { min-height: 0; padding: 18px 14px; }
 #body-explorer.anatomy-studio .body-art { height: 390px; width: 219.375px; }
 #body-explorer.anatomy-studio .anatomy-panel { min-height: 410px; }
 #body-explorer.anatomy-studio .body-point .point-name { font-size: 10px; max-width: 105px; white-space: normal; }
 #body-explorer.anatomy-studio .body-caption { padding: 20px; gap: 16px; }
 #body-explorer.anatomy-studio .body-caption h3 { font-size: 23px; }
 .detail-view { height: 240px; min-height: 240px; }
}
@media(prefers-reduced-motion:reduce) { #trigger-closeup svg { transition: none; } }
#trigger-closeup .trigger-zoom-point { position: absolute; z-index: 2; left: 50%; top: 46%; transform: translate(-50%,-50%); width: 48px; height: 48px; padding: 0; background: transparent; border: 2px solid #ffffffc9; border-radius: 50%; cursor: zoom-in; box-shadow: 0 0 0 6px #f878341a; }
#trigger-closeup .trigger-zoom-point[aria-pressed=true] { cursor: zoom-out; }

/* Appointment dialog: one clear message action, two call options, directions. */
.appointment-mark { display: none; }
#detail-dialog.appointment-dialog { width: min(560px,calc(100vw - 28px)); padding: 28px; border: 1px solid #ffffffd9; border-radius: 28px; background: linear-gradient(145deg,#edf3fa 0,#fff 44%); box-shadow: 0 30px 100px #091b4a40; }
#detail-dialog.appointment-dialog::backdrop { background: #0e203875; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.appointment-dialog .appointment-mark { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: white; border: 1px solid #dde6ee; box-shadow: 0 5px 16px #19345308; }
.appointment-dialog .appointment-mark img { width: 44px; height: 44px; object-fit: contain; }
#detail-dialog.appointment-dialog .dialog-close { top: 18px; inset-inline-end: 18px; display: grid; place-items: center; width: 44px; height: 44px; background: #fff; border: 1px solid #d9e3ed; color: #233e60; }
.appointment-dialog .dialog-eyebrow { margin-top: 18px; font-size: 10px; letter-spacing: .1em; color: #577089; }
#detail-dialog.appointment-dialog h2 { margin-top: 10px; padding: 0; font-size: clamp(26px,3vw,32px); line-height: 1.45; }
#detail-dialog.appointment-dialog #dialog-description { font-size: 15px; line-height: 1.8; margin-top: 10px; color: #627185; }
.appointment-dialog #dialog-content { display: grid; gap: 12px; margin-top: 22px; }
.appointment-whatsapp { display: flex; align-items: center; gap: 14px; border: 1px solid #d2e8df; border-radius: 17px; background: #eaf6ef; color: #205a43; padding: 16px; font-size: 16px; font-weight: 700; text-decoration: none; transition: background .2s; }
.appointment-whatsapp:hover { background: #dcefe3; }
.appointment-whatsapp>span:nth-child(2) { flex: 1; }
.appointment-whatsapp small { display: block; font-size: 13px; font-weight: 500; opacity: .8; margin-top: 5px; text-align: start; width: fit-content; }
.appointment-dialog .booking-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: #fff9; color: inherit; }
.appointment-dialog .booking-icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; }
.appointment-dialog .dialog-phones { grid-template-columns: 1fr 1fr; gap: 10px; }
.appointment-dialog .dialog-phones a { justify-content: flex-start; direction: inherit; gap: 10px; padding: 13px 10px; border: 1px solid #dce5ed; border-radius: 15px; background: #fff; color: #243f63; font-size: 16px; }
.appointment-dialog .dialog-phones a:hover { background: #f3f7fb; }
.appointment-dialog .dialog-phones a span { color: inherit; }
.appointment-dialog .dialog-phones .booking-icon { width: 30px; height: 36px; background: transparent; }
.appointment-dialog .phone-copy { display: flex; flex-direction: column; gap: 5px; }
.appointment-dialog .phone-copy small { font-size: 12px; color: #687a8b; }
.appointment-dialog .phone-copy bdi { font-family: Outfit,sans-serif; white-space: nowrap; font-weight: 600; }
.appointment-dialog .dialog-location { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 12px; border-radius: 15px; background: #f2f5f8; color: #294563; text-decoration: none; }
.appointment-dialog .dialog-location>span:nth-child(2) { flex: 1; }
.appointment-dialog .dialog-location strong { display: block; font-size: 14px; }
.appointment-dialog .dialog-location small { display: block; color: #66788b; font-size: 12px; line-height: 1.7; margin-top: 4px; }
.appointment-dialog .dialog-note { margin: 2px 4px 0; text-align: center; font-size: 12px; line-height: 1.8; color: #6d7a8b; }
.appointment-dialog a:focus-visible,.appointment-dialog button:focus-visible { outline: 3px solid #ed995a; outline-offset: 3px; }
@media(max-width:520px) {
 #detail-dialog.appointment-dialog { padding: 22px 18px; border-radius: 22px; max-height: calc(100dvh - 24px); }
 .appointment-dialog .dialog-phones { grid-template-columns: 1fr; }
 .appointment-dialog .phone-copy { flex: 1; flex-direction: row; justify-content: space-between; align-items: center; }
 .appointment-dialog .dialog-phones a { min-height: 56px; padding: 8px 12px; }
 .appointment-dialog .appointment-mark { width: 52px; height: 52px; border-radius: 15px; }
 .appointment-dialog .appointment-mark img { width: 38px; height: 38px; }
 .appointment-whatsapp { padding: 13px; }
}

/* Consistent contact and social links. */
.header-phone,.footer-phone { display: inline-flex; align-items: center; gap: 9px; color: var(--primary); font-family: Outfit,sans-serif; font-weight: 600; white-space: nowrap; }
.header-phone { font-size: 14px; padding: 10px 14px; border-radius: 999px; background: #edf2f8; }
.header-phone svg,.footer-phone svg { width: 20px; height: 20px; flex-shrink: 0; }
.footer-connect { display: flex; justify-content: space-between; align-items: center; gap: 22px; flex-wrap: wrap; padding: 24px 0; border-top: 1px solid var(--border); }
.footer-phone { font-size: 21px; }
.social-circles { display: flex; gap: 9px; }
.social-circles a,.social-orb { display: grid; place-items: center; border-radius: 50%; background: #edf2f8; color: #24436b; border: 1px solid #dce5ef; }
.social-circles a { width: 44px; height: 44px; transition: background .2s,transform .2s; }
.social-circles svg { width: 21px; height: 21px; }
.social-circles a:hover { background: #dce8f5; transform: translateY(-2px); }
.social-section { padding-block: 64px; background: #f3f6fa; }
.social-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.social-heading h2 { font-size: clamp(26px,3vw,38px); }
.social-heading p { font-size: 15px; margin-top: 10px; color: #61728a; }
.social-arrows { display: flex; gap: 8px; direction: ltr; }
.social-arrows button { display: grid; place-items: center; width: 44px; height: 44px; background: white; color: #27476e; border: 1px solid #d7e1ed; border-radius: 50%; }
.social-arrows svg { width: 20px; height: 20px; }
.social-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #afc0d3 transparent; padding-block: 4px 18px; }
.social-card { position: relative; flex: 0 0 240px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; scroll-snap-align: start; background: white; border: 1px solid #dfe6ef; border-radius: 22px; padding: 25px; color: #213e62; transition: border-color .2s,box-shadow .2s; }
.social-card:hover { border-color: #98afca; box-shadow: 0 8px 20px #25436a0c; }
.social-orb { width: 62px; height: 62px; }
.social-orb svg { width: 28px; height: 28px; }
.social-card h3 { font: 600 22px/1.3 Outfit,sans-serif; margin-top: 9px; }
.social-card-cta { font-size: 13px; color: #637b96; }
.social-external { position: absolute; top: 24px; right: 22px; width: 20px; height: 20px; color: #7890a9; }
.social-hint { margin-top: 12px; font-size: 12px; color: #73829a; }
.social-card:focus-visible,.social-circles a:focus-visible,.header-phone:focus-visible,.social-track:focus-visible { outline: 3px solid #ef9b5b; outline-offset: 3px; }
.appointment-dialog .dialog-phones { grid-template-columns: 1fr; }
.appointment-dialog .phone-copy { flex: 1; flex-direction: row; align-items: center; justify-content: space-between; }
@media(max-width:1200px) { .header-phone { padding: 10px; } .header-phone bdi { display: none; } }
@media(max-width:720px) {
 .social-section { padding-block: 38px; }
 .social-heading { align-items: start; gap: 12px; }
 .social-heading p { font-size: 13px; }
 .social-arrows button { width: 38px; height: 38px; }
 .social-card { flex-basis: 210px; padding: 22px; }
 .footer-connect { flex-direction: column; align-items: flex-start; gap: 20px; }
 .header-phone { display: none; }
}
@media(prefers-reduced-motion:reduce) { .social-card,.social-circles a { transition: none; } }