/* ==========================================================================
   Narcose Tandarts Almere — homepage section widgets
   Every widget wrapper (.nta-w) is edge to edge and owns its internal spacing.
   ========================================================================== */

/* ==================================================== 0. EDITOR MODE ===== */

/* Inside the Elementor editor the scroll observer never runs for elements the
   author has not scrolled past, so reveal animations are switched off there —
   otherwise sections would be invisible while editing. */
body.elementor-editor-active [data-nta-reveal],
body.elementor-editor-preview [data-nta-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ================================================ 0. SECTION RHYTHM ====== */

/* The `.nta-w` wrapper reset zeroes margin and padding so Elementor containers
   never double up on spacing. Section widgets then re-declare their own
   vertical rhythm here, at a higher specificity, because all spacing is owned
   by the widget rather than the container. Horizontal padding stays at 0: the
   inner `.nta-shell` handles gutters. */
.nta-w.nta-section {
    padding-block: var(--nta-section-y);
    padding-inline: 0;
}

.nta-w.nta-section--tight {
    padding-block: clamp(48px, 5vw, 80px);
}

/* =================================================== 0. LABEL MARK ======= */

/* Tooth glyph with a respiration wave running through it, in front of every
   section label. The whole mark breathes on a calm ~4.5s cycle; the wave
   travels exactly one wavelength (12 user units) per loop so it never jumps.
   Colour is inherited, so it reads on both the light and dark sections. */
.nta-mark {
    width: 19px;
    height: 19px;
    flex: none;
    overflow: visible;
    transform-box: fill-box;
    transform-origin: center;
    animation: nta-mark-breathe 4.5s var(--nta-ease) infinite;
}

.nta-mark-wave {
    animation: nta-mark-wave-run 2.8s linear infinite;
}

@keyframes nta-mark-wave-run {
    from { transform: translateX(0); }
    to   { transform: translateX(12px); }
}

@keyframes nta-mark-breathe {
    0%, 100% { transform: scale(1); opacity: .88; }
    45%      { transform: scale(1.09); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .nta-mark,
    .nta-mark-wave {
        animation: none !important;
    }
}

/* ================================================== 0. IMAGE FRAMES ====== */

/* Fixed-ratio media frames.
   Every selector is prefixed with `.nta-w` on purpose: Elementor's frontend
   stylesheet also targets bare `img` at the same specificity and can load
   after ours, so an unprefixed `.frame img` rule loses the cascade and the
   image falls back to its intrinsic size. */
.nta-w .nta-media,
.nta-w .nta-deck__media,
.nta-w .nta-collage__photo,
.nta-w .nta-faq__media,
.nta-w .nta-collage__monitor-screen,
.nta-w .nta-journey__media,
.nta-w .nta-patienten__media,
.nta-w .nta-videobox__frame,
.nta-w .nta-hero__portrait {
    position: relative;
}

.nta-w .nta-media > img,
.nta-w .nta-deck__media > img,
.nta-w .nta-collage__photo > img,
.nta-w .nta-faq__media > img,
.nta-w .nta-collage__monitor-screen > video,
.nta-w .nta-journey__media > img,
.nta-w .nta-patienten__media > img,
.nta-w .nta-videobox__frame > img,
.nta-w .nta-videobox__frame > video,
.nta-w .nta-hero__portrait > img,
.nta-w .nta-hero__portrait > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* =========================================================== 1. HERO =====
   A dark "stage" panel: ambient anaesthesia footage behind a ghost display
   word and the headline, with the practice film playing in the frame on the
   right. Everything is custom drawn.
   ======================================================================== */

.nta-hero {
    --stage-radius: clamp(22px, 2.4vw, 40px);
    position: relative;
    padding: clamp(10px, 1.4vw, 22px);
    background: var(--nta-white);
}

.nta-hero__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: min(700px, calc(100vh - var(--nta-header-h) - 40px));
    border-radius: var(--stage-radius);
    background: var(--nta-teal-900);
    overflow: hidden;
    isolation: isolate;
}

/* ------------------------------------------------------- Ambient layers -- */

.nta-hero__film {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.nta-hero__film-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .42;
    transform: scale(1.08);
    animation: nta-hero-drift 26s var(--nta-ease) infinite alternate;
}

@keyframes nta-hero-drift {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.16) translate3d(-2.5%, -1.5%, 0); }
}

/* Teal wash that keeps the headline readable over any frame. */
.nta-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(102deg, var(--nta-teal-900) 26%, rgba(6, 50, 59, .82) 52%, rgba(6, 50, 59, .42) 100%),
        linear-gradient(180deg, rgba(6, 50, 59, .55) 0%, transparent 34%, rgba(6, 50, 59, .7) 100%);
}

.nta-hero__aurora {
    position: absolute;
    z-index: 1;
    top: -18%;
    right: -6%;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(23, 162, 175, .45), transparent 68%);
    filter: blur(70px);
    animation: nta-hero-aurora 18s ease-in-out infinite alternate;
}

@keyframes nta-hero-aurora {
    from { transform: translate3d(0, 0, 0) scale(1); opacity: .75; }
    to   { transform: translate3d(-6%, 8%, 0) scale(1.18); opacity: 1; }
}

/* Oversized outline word sitting behind the headline. */
.nta-hero__ghost {
    position: absolute;
    z-index: 1;
    top: clamp(40px, 8vw, 120px);
    left: -.06em;
    pointer-events: none;
    font-family: var(--nta-font-head);
    font-size: clamp(7rem, 20vw, 20rem);
    font-weight: 700;
    line-height: .8;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(147, 215, 222, .1);
    opacity: 0;
    transform: translateX(-3%);
    transition: opacity 1.6s var(--nta-ease-out) .5s, transform 2.4s var(--nta-ease-out) .5s;
    white-space: nowrap;
}

.nta-hero.is-ready .nta-hero__ghost {
    opacity: 1;
    transform: translateX(0);
}

/* ------------------------------------------------------------- Layout --- */

.nta-hero__inner {
    position: relative;
    z-index: 2;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    align-items: center;
    gap: clamp(32px, 4.5vw, 72px);
    /* Extra room at the bottom so the scroll cue clears the trust chips. */
    padding-block: clamp(46px, 5.2vw, 84px) clamp(46px, 7.4vw, 128px);
}

/* --------------------------------------------------------------- Copy --- */

/* Flat label — no pill, no border. The mark carries the brand instead. */
.nta-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 clamp(18px, 2vw, 30px);
    padding: 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nta-teal-200);
    opacity: 0;
    transform: translateY(14px);
}

.nta-hero.is-ready .nta-hero__eyebrow {
    animation: nta-hero-rise .9s var(--nta-ease-out) .1s forwards;
}

.nta-hero__eyebrow .nta-mark {
    color: var(--nta-teal-300);
}

@keyframes nta-hero-ping {
    0%   { transform: scale(.5); opacity: .9; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { opacity: 0; }
}

@keyframes nta-hero-rise {
    to { opacity: 1; transform: none; }
}

.nta-hero__title {
    margin: 0;
    color: var(--nta-white);
    letter-spacing: -.03em;
}

/* Each line is masked so the text can slide up out of nothing. */
.nta-hero__line {
    display: block;
    overflow: hidden;
    padding-bottom: .06em;
}

.nta-hero__line > span {
    display: block;
    transform: translateY(115%);
    transition: transform 1.05s var(--nta-ease-out);
}

.nta-hero.is-ready .nta-hero__line > span {
    transform: translateY(0);
}

.nta-hero.is-ready .nta-hero__line--pre > span    { transition-delay: .18s; }
.nta-hero.is-ready .nta-hero__line--accent > span { transition-delay: .30s; }
.nta-hero.is-ready .nta-hero__line--post > span   { transition-delay: .42s; }

.nta-hero__line--pre {
    font-family: var(--nta-font-body);
    font-size: clamp(1rem, .82rem + .7vw, 1.4rem);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -.005em;
    color: rgba(255, 255, 255, .72);
}

.nta-hero__line--accent {
    font-size: clamp(2.7rem, 1.25rem + 5.3vw, 5.6rem);
    font-weight: 600;
    line-height: .96;
}

/* The gradient is clipped on the inner span — the element that holds the
   glyphs — otherwise background-clip:text has nothing to paint. */
.nta-hero__line--accent > span {
    background: linear-gradient(96deg, #ffffff 16%, var(--nta-teal-200) 56%, var(--nta-teal-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.nta-hero__line--post {
    font-size: clamp(1.5rem, .9rem + 2.1vw, 2.9rem);
    font-weight: 500;
    line-height: 1.1;
    color: rgba(255, 255, 255, .88);
}

.nta-hero__lead {
    max-width: 48ch;
    margin: clamp(20px, 2.4vw, 30px) 0 0;
    font-size: clamp(.9375rem, .9rem + .25vw, 1.0625rem);
    line-height: 1.68;
    color: rgba(255, 255, 255, .74);
    opacity: 0;
    transform: translateY(14px);
}

.nta-hero.is-ready .nta-hero__lead {
    animation: nta-hero-rise .9s var(--nta-ease-out) .52s forwards;
}

/* Calls to action, straight under the headline block. */
.nta-hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(16px, 2.4vw, 32px);
    margin-top: clamp(26px, 3vw, 38px);
    opacity: 0;
    transform: translateY(16px);
}

.nta-hero.is-ready .nta-hero__cta {
    animation: nta-hero-rise .9s var(--nta-ease-out) .62s forwards;
}

.nta-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.nta-hero__contact {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding-left: clamp(16px, 2.4vw, 32px);
    border-left: 1px solid rgba(255, 255, 255, .16);
    color: var(--nta-white);
}

.nta-hero__contact:hover {
    color: var(--nta-teal-200);
}

.nta-hero__contact-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(147, 215, 222, .22);
    color: var(--nta-teal-200);
    transition: background-color .35s var(--nta-ease), color .35s var(--nta-ease);
}

.nta-hero__contact:hover .nta-hero__contact-ico {
    background: var(--nta-teal-500);
    color: var(--nta-white);
}

.nta-hero__contact-text {
    display: grid;
    gap: 1px;
}

.nta-hero__contact-text em {
    font-style: normal;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(226, 244, 246, .55);
}

.nta-hero__contact-text strong {
    font-family: var(--nta-font-head);
    font-size: 1.0625rem;
    font-weight: 600;
    color: inherit;
}

.nta-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: clamp(26px, 3vw, 40px) 0 0;
    padding: 0;
    list-style: none;
}

.nta-hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px 9px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: .8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
    opacity: 0;
    transform: translateY(12px);
    transition: background-color .3s var(--nta-ease), border-color .3s var(--nta-ease);
}

.nta-hero.is-ready .nta-hero__trust li {
    animation: nta-hero-rise .8s var(--nta-ease-out) forwards;
    animation-delay: calc(.74s + var(--i) * .09s);
}

.nta-hero__trust li:hover {
    background: rgba(255, 255, 255, .11);
    border-color: rgba(147, 215, 222, .4);
}

.nta-hero__trust svg {
    color: var(--nta-teal-300);
    flex: none;
}

/* ---------------------------------------------------------- Scroll cue --- */

/* An infusion drip: the droplet runs down the line and lands on the chevron. */
.nta-hero__scroll {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: clamp(14px, 1.8vw, 26px);
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 14px 8px;
    border-radius: 18px;
    color: var(--nta-teal-200);
    cursor: pointer;
    opacity: 0;
    transition: color .3s var(--nta-ease), background-color .3s var(--nta-ease);
}

.nta-hero.is-ready .nta-hero__scroll {
    animation: nta-hero-cue-in 1s var(--nta-ease-out) 1.1s forwards;
}

@keyframes nta-hero-cue-in {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.nta-hero__scroll:hover {
    color: var(--nta-white);
    background: rgba(255, 255, 255, .07);
}

.nta-hero__scroll-svg {
    width: 22px;
    height: 51px;
    overflow: visible;
}

/* Droplet: forms, falls the length of the line, then dissolves. */
.nta-hero__scroll-drop {
    animation: nta-hero-drip 2.6s var(--nta-ease) infinite;
}

@keyframes nta-hero-drip {
    0%       { transform: translateY(0); opacity: 0; }
    12%      { opacity: 1; }
    62%      { transform: translateY(30px); opacity: 1; }
    78%      { transform: translateY(34px); opacity: 0; }
    100%     { transform: translateY(34px); opacity: 0; }
}

/* The chevron answers the drop with a small nudge. */
.nta-hero__scroll-chevron {
    animation: nta-hero-cue-nudge 2.6s var(--nta-ease) infinite;
}

@keyframes nta-hero-cue-nudge {
    0%, 55%  { transform: translateY(0); opacity: .55; }
    70%      { transform: translateY(3px); opacity: 1; }
    100%     { transform: translateY(0); opacity: .55; }
}

.nta-hero__scroll-label {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --------------------------------------------------- Visual / film frame */

.nta-hero__visual {
    position: relative;
    justify-self: end;
    width: min(100%, 520px);
    opacity: 0;
    transform: translateY(28px) scale(.98);
    transition: opacity 1.1s var(--nta-ease-out) .28s, transform 1.2s var(--nta-ease-out) .28s;
}

.nta-hero.is-ready .nta-hero__visual {
    opacity: 1;
    transform: none;
}

.nta-hero__portrait {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    border-radius: clamp(20px, 2vw, 32px);
    overflow: hidden;
    background: #05242b;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .42);
    transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .6s var(--nta-ease-out);
    will-change: transform;
}

/* The still sits on top of the film until playback starts. */
.nta-hero__portrait-still {
    z-index: 2;
    transition: opacity .5s var(--nta-ease);
}

.nta-hero__portrait.is-playing .nta-hero__portrait-still,
.nta-hero__portrait.is-playing .nta-hero__portrait-sheen {
    opacity: 0;
    pointer-events: none;
}

/* Slow diagonal light sweep across the still. */
.nta-hero__portrait-sheen {
    position: absolute;
    inset: -40%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(102deg, transparent 42%, rgba(255, 255, 255, .16) 50%, transparent 58%);
    transform: translateX(-60%);
    animation: nta-hero-sheen 7.5s var(--nta-ease) infinite;
    transition: opacity .4s var(--nta-ease);
}

@keyframes nta-hero-sheen {
    0%, 62%  { transform: translateX(-70%); }
    100%     { transform: translateX(70%); }
}

/* Play control ------------------------------------------------------------ */

.nta-hero__play {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 24px 10px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 46px rgba(0, 0, 0, .34);
    color: var(--nta-teal-900);
    cursor: pointer;
    transition: transform .45s var(--nta-ease-out), box-shadow .4s var(--nta-ease), opacity .35s var(--nta-ease);
    /* Only surfaces when autoplay is unavailable. */
    opacity: 0;
    pointer-events: none;
}

.nta-hero__portrait.needs-play .nta-hero__play {
    opacity: 1;
    pointer-events: auto;
}

.nta-hero__play:hover {
    transform: translate(-50%, -50%) scale(1.045);
    box-shadow: 0 26px 58px rgba(0, 0, 0, .42);
}

.nta-hero__play-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--nta-teal-600);
    color: var(--nta-white);
}

.nta-hero__play-ico svg {
    fill: currentColor;
    margin-left: 3px;
}

/* Expanding ring, echoing the monitoring pulse. */
.nta-hero__play-ring {
    position: absolute;
    left: 33px;
    top: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    border: 2px solid rgba(12, 123, 136, .55);
    animation: nta-hero-ping 2.8s var(--nta-ease-out) infinite;
    pointer-events: none;
}

.nta-hero__play-label {
    font-family: var(--nta-font-head);
    font-size: .9375rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ------------------------------------------------------- Sound toggle --- */

.nta-hero__sound {
    position: absolute;
    z-index: 5;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 12px;
    border-radius: 999px;
    background: rgba(6, 50, 59, .58);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .2);
    color: var(--nta-white);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    cursor: pointer;
    transition: background-color .3s var(--nta-ease), border-color .3s var(--nta-ease), transform .3s var(--nta-ease-out);
}

.nta-hero__sound:hover {
    background: rgba(12, 123, 136, .8);
    border-color: rgba(147, 215, 222, .5);
    transform: translateY(-2px);
}

.nta-hero__portrait.needs-play .nta-hero__sound {
    opacity: 0;
    pointer-events: none;
}

/* Four bars: flat when muted, dancing once the sound is on. */
.nta-hero__sound-bars {
    display: flex;
    align-items: center;
    gap: 2.5px;
    height: 15px;
}

.nta-hero__sound-bars span {
    width: 2.5px;
    height: 3px;
    border-radius: 2px;
    background: var(--nta-teal-200);
    transition: height .3s var(--nta-ease);
}

.nta-hero__sound[aria-pressed="true"] .nta-hero__sound-bars span {
    animation: nta-hero-bars 1.1s var(--nta-ease) infinite alternate;
}

.nta-hero__sound[aria-pressed="true"] .nta-hero__sound-bars span:nth-child(1) { animation-delay: 0s; }
.nta-hero__sound[aria-pressed="true"] .nta-hero__sound-bars span:nth-child(2) { animation-delay: .18s; }
.nta-hero__sound[aria-pressed="true"] .nta-hero__sound-bars span:nth-child(3) { animation-delay: .36s; }
.nta-hero__sound[aria-pressed="true"] .nta-hero__sound-bars span:nth-child(4) { animation-delay: .54s; }

@keyframes nta-hero-bars {
    from { height: 3px; }
    to   { height: 15px; }
}

/* Monitoring card --------------------------------------------------------- */

.nta-hero__monitor {
    position: absolute;
    z-index: 5;
    transition: opacity .4s var(--nta-ease), transform .5s var(--nta-ease-out);
    right: clamp(-48px, -2.6vw, -14px);
    bottom: clamp(-34px, -2.4vw, -16px);
    width: min(286px, 76%);
    padding: 18px 20px 16px;
    border-radius: 20px;
    background: rgba(8, 61, 71, .82);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(147, 215, 222, .24);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .4);
    color: var(--nta-teal-100);
}

.nta-hero__monitor-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.nta-hero__monitor-head strong {
    font-family: var(--nta-font-head);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--nta-white);
}

.nta-hero__pulse {
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nta-teal-300);
}

.nta-hero__pulse::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid var(--nta-teal-300);
    animation: nta-hero-ping 2.2s var(--nta-ease-out) infinite;
}

.nta-hero__ecg {
    display: block;
    width: 100%;
    height: 42px;
    color: var(--nta-teal-300);
    overflow: visible;
}

/* The live trace draws itself across the baseline, over and over. */
.nta-hero__ecg-live {
    stroke-dasharray: 130 520;
    animation: nta-hero-ecg 3.4s linear infinite;
}

@keyframes nta-hero-ecg {
    from { stroke-dashoffset: 650; }
    to   { stroke-dashoffset: 0; }
}

.nta-hero__monitor p {
    margin: 8px 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: rgba(226, 244, 246, .72);
}

/* -------------------------------------------------------- Hero motion --- */

@media (prefers-reduced-motion: reduce) {
    .nta-hero__scroll-drop,
    .nta-hero__scroll-chevron,
    .nta-hero__sound-bars span,
    .nta-hero__film-video,
    .nta-hero__aurora,
    .nta-hero__portrait-sheen,
    .nta-hero__ecg-live,
    .nta-hero__pulse::after,
    .nta-hero__play-ring {
        animation: none !important;
    }

    .nta-hero__portrait-sheen,
    .nta-hero__play-ring {
        display: none;
    }

    .nta-hero__ghost,
    .nta-hero__eyebrow,
    .nta-hero__visual,
    .nta-hero__lead,
    .nta-hero__cta,
    .nta-hero__trust li {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .nta-hero__scroll {
        opacity: 1 !important;
        transform: translateX(-50%) !important;
        animation: none !important;
    }

    .nta-hero__line > span {
        transform: none !important;
    }
}

/* ----------------------------------------------------- Hero breakpoints -- */

@media (max-width: 1240px) {
    .nta-hero__monitor {
        right: clamp(-22px, -1.4vw, -8px);
    }
}

@media (max-width: 1024px) {
    .nta-hero__stage {
        min-height: 0;
    }

    .nta-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(48px, 7vw, 68px);
        padding-block: clamp(40px, 6vw, 68px) clamp(52px, 7vw, 76px);
    }

    .nta-hero__visual {
        justify-self: center;
        width: min(100%, 560px);
    }

    .nta-hero__monitor {
        right: -14px;
    }

    .nta-hero__ghost {
        top: clamp(20px, 6vw, 60px);
    }

    .nta-hero__scroll {
        display: none;
    }
}

@media (max-width: 720px) {
    .nta-hero {
        padding: 8px;
    }

    .nta-hero__inner {
        gap: 34px;
        padding-block: 34px 40px;
    }

    .nta-hero__ghost {
        display: none;
    }

    .nta-hero__portrait {
        aspect-ratio: 4 / 3.1;
    }

    .nta-hero__cta {
        gap: 18px;
    }

    .nta-hero__actions {
        width: 100%;
    }

    .nta-hero__actions .nta-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .nta-hero__contact {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .16);
        padding-top: 18px;
        width: 100%;
    }

    .nta-hero__monitor {
        position: static;
        width: 100%;
        margin-top: 12px;
        padding: 15px 17px 13px;
    }

    .nta-hero__ecg {
        height: 34px;
    }

    .nta-hero__trust {
        margin-top: 24px;
        gap: 8px;
    }

    .nta-hero__play {
        padding: 8px 20px 8px 8px;
        gap: 12px;
    }

    .nta-hero__play-ico {
        width: 40px;
        height: 40px;
    }

    .nta-hero__play-ring {
        left: 28px;
        width: 40px;
        height: 40px;
        margin: -20px 0 0 -20px;
    }

    .nta-hero__play-label {
        font-size: .875rem;
    }
}

@media (max-width: 480px) {
    .nta-hero__trust li {
        font-size: .75rem;
        padding: 8px 13px 8px 10px;
    }
}

/* ================================================= 5. TREATMENT DECK =====
   A fan of cards. Each card is rotated and nudged by its distance from the
   middle (`--o`); hovering one straightens it and pushes its neighbours away.
   ======================================================================== */

.nta-deck {
    position: relative;
    overflow: clip;
}

.nta-deck__glow {
    position: absolute;
    top: 8%;
    left: 50%;
    width: min(900px, 80%);
    aspect-ratio: 2 / 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(23, 162, 175, .16), transparent 68%);
    filter: blur(60px);
    pointer-events: none;
}

.nta-deck__head {
    position: relative;
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 72px);
}

.nta-deck__head .nta-eyebrow {
    justify-content: center;
}

.nta-deck__title {
    margin-bottom: .5em;
}

.nta-deck__intro {
    margin: 0;
    font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
    line-height: 1.7;
    color: var(--nta-body);
}

/* The fan ---------------------------------------------------------------- */

.nta-deck__stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding-top: 30px;
    perspective: 1600px;
}

.nta-deck__card {
    position: relative;
    flex: none;
    width: min(348px, 78vw);
    /* Cards only kiss at the edges: enough to read as a shuffled deck, never
       so much that the copy on a neighbour is covered. `--a` is the absolute
       offset, handed over by PHP so no abs() support is needed. */
    margin-inline: calc(-1 * clamp(6px, 1vw, 18px));
    background: var(--nta-white);
    border: 1px solid var(--nta-line-soft);
    border-radius: var(--nta-radius-lg);
    box-shadow: 0 18px 50px rgba(6, 50, 59, .12);
    overflow: hidden;
    transform-origin: 50% 130%;
    transform: rotate(calc(var(--o) * 3.2deg)) translateY(calc(var(--a) * 10px));
    transition: transform .55s var(--nta-ease-out), box-shadow .45s var(--nta-ease),
    border-color .45s var(--nta-ease);
    z-index: calc(10 - var(--i));
}

.nta-deck__stage:hover .nta-deck__card {
    /* Everything drifts apart a little so the hovered card has room. */
    transform: rotate(calc(var(--o) * 4deg)) translate(calc(var(--o) * 14px), calc(var(--a) * 12px));
}

.nta-deck__card:hover,
.nta-deck__card:focus-within {
    z-index: 20;
    border-color: var(--nta-teal-200);
    box-shadow: 0 34px 80px rgba(6, 50, 59, .24);
}

.nta-deck__stage:hover .nta-deck__card:hover,
.nta-deck__stage:focus-within .nta-deck__card:focus-within {
    transform: rotate(0deg) translate(calc(var(--o) * 14px), -14px) scale(1.035);
}

/* Floating bubble label -------------------------------------------------- */

.nta-deck__bubble {
    position: absolute;
    z-index: 3;
    top: 14px;
    left: 14px;
    padding: 6px 13px;
    border-radius: 999px 999px 999px 4px;
    background: rgba(6, 50, 59, .72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--nta-teal-100);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: lowercase;
    opacity: 0;
    transform: translateY(6px) scale(.94);
    transition: opacity .4s var(--nta-ease), transform .45s var(--nta-ease-out);
}

.nta-deck__card:hover .nta-deck__bubble,
.nta-deck__card:focus-within .nta-deck__bubble {
    opacity: 1;
    transform: none;
}

/* Card contents ---------------------------------------------------------- */

.nta-deck__media {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3.1;
    overflow: hidden;
    background: var(--nta-teal-100);
}

.nta-deck__media img {
    transition: transform .9s var(--nta-ease-out);
}

.nta-deck__card:hover .nta-deck__media img {
    transform: scale(1.07);
}

.nta-deck__ico {
    position: absolute;
    left: 18px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: var(--nta-white);
    color: var(--nta-teal-600);
    box-shadow: var(--nta-shadow-sm);
    transition: background-color .4s var(--nta-ease), color .4s var(--nta-ease);
}

.nta-deck__card:hover .nta-deck__ico {
    background: var(--nta-teal-600);
    color: var(--nta-white);
}

.nta-deck__body {
    padding: 38px 22px 24px;
}

.nta-deck__card-title {
    margin: 0 0 9px;
    font-size: 1.1875rem;
    line-height: 1.25;
}

.nta-deck__card-title a {
    color: inherit;
}

/* One real link, whole card clickable. */
.nta-deck__card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

.nta-deck__card:hover .nta-deck__card-title a {
    color: var(--nta-teal-700);
}

.nta-deck__text {
    margin: 0 0 16px;
    font-size: .875rem;
    line-height: 1.65;
    color: var(--nta-body);
}

.nta-deck__tags {
    display: grid;
    gap: 7px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.nta-deck__tags li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--nta-teal-800);
}

.nta-deck__tags svg {
    flex: none;
    padding: 3px;
    border-radius: 50%;
    background: var(--nta-teal-100);
    color: var(--nta-teal-700);
    box-sizing: content-box;
}

.nta-deck__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--nta-teal-600);
}

.nta-deck__cta-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--nta-teal-200);
    transition: background-color .35s var(--nta-ease), color .35s var(--nta-ease),
    border-color .35s var(--nta-ease), transform .35s var(--nta-ease-out);
}

.nta-deck__card:hover .nta-deck__cta-ico {
    background: var(--nta-teal-600);
    border-color: var(--nta-teal-600);
    color: var(--nta-white);
    transform: rotate(45deg);
}

.nta-deck__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: clamp(28px, 3vw, 44px) 0 0;
    font-size: .8125rem;
    letter-spacing: .06em;
    color: var(--nta-muted);
}

.nta-deck__hint .nta-spark {
    color: var(--nta-teal-400);
    animation: nta-spark-spin 9s linear infinite;
}

@keyframes nta-spark-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .nta-deck__card,
    .nta-deck__stage:hover .nta-deck__card {
        transform: none !important;
    }

    .nta-deck__bubble {
        opacity: 1;
        transform: none;
    }

    .nta-deck__hint .nta-spark {
        animation: none;
    }
}

/* Below the fan threshold the deck becomes an honest grid. */
@media (max-width: 1100px) {
    .nta-deck__stage {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 22px;
        min-height: 0;
        padding-top: 16px;
        perspective: none;
    }

    .nta-deck__card,
    .nta-deck__stage:hover .nta-deck__card,
    .nta-deck__stage:hover .nta-deck__card:hover {
        width: auto;
        margin-inline: 0;
        transform: none;
    }

    .nta-deck__card:hover {
        box-shadow: var(--nta-shadow-lg);
    }

    .nta-deck__bubble {
        opacity: 1;
        transform: none;
    }

    .nta-deck__hint {
        display: none;
    }
}

/* ============================================== 3. INTRO — COLLAGE =======
   A dark canvas with a faint grid, dashed threads and an overlapping set of
   tiles. Each tile carries a `--f` float factor: the drift animation and the
   pointer parallax both scale by it, so the collage never moves as one slab.
   ======================================================================== */

.nta-collage {
    position: relative;
    padding-block: clamp(64px, 7vw, 116px);
    background: var(--nta-white);
    color: var(--nta-body);
    overflow: clip;
}

.nta-collage__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(40px, 5vw, 88px);
}

/* ------------------------------------------------------------- Copy ----- */

.nta-collage__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 clamp(20px, 2.4vw, 32px);
    padding: 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nta-primary);
}

.nta-collage__pill-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--nta-teal-600);
}

.nta-collage__pill .nta-mark {
    width: 18px;
    height: 18px;
}

.nta-collage__title {
    margin: 0 0 clamp(18px, 2vw, 26px);
    font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4rem);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -.03em;
    color: var(--nta-ink);
}

.nta-collage__title span {
    display: block;
}

.nta-collage__accent {
    color: var(--nta-teal-600);
}

.nta-collage__text {
    margin: 0;
    max-width: 46ch;
    font-size: clamp(.9375rem, .9rem + .3vw, 1.0625rem);
    line-height: 1.72;
    color: var(--nta-body);
}

.nta-collage__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
    margin-top: clamp(28px, 3vw, 40px);
}

.nta-collage__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--nta-line);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--nta-ink);
    transition: border-color .3s var(--nta-ease), color .3s var(--nta-ease);
}

.nta-collage__link:hover {
    color: var(--nta-teal-700);
    border-color: var(--nta-teal-400);
}

.nta-collage__link svg {
    transition: transform .35s var(--nta-ease-out);
}

.nta-collage__link:hover svg {
    transform: translateX(4px);
}

/* ------------------------------------------------------------ Collage --- */

.nta-collage__stage {
    position: relative;
    aspect-ratio: 100 / 97;
    width: 100%;
}

/* Dashed threads sitting behind everything. */
.nta-collage__threads {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.nta-collage__thread {
    stroke: var(--nta-teal-300);
    stroke-width: .35;
    stroke-dasharray: 1.6 1.6;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    animation: nta-collage-thread 1.1s var(--nta-ease-out) forwards;
    animation-delay: var(--d, 0s);
}

@keyframes nta-collage-thread {
    to { opacity: 1; }
}

.nta-collage__tile {
    position: absolute;
    border-radius: clamp(16px, 1.6vw, 24px);
    /* Two transforms combine: a slow idle drift and the pointer parallax. */
    transform:
        translate3d(calc(var(--px, 0px) * var(--f, 1)), calc(var(--py, 0px) * var(--f, 1)), 0)
        translateY(calc(var(--drift, 0px) * var(--f, 1)));
    animation: nta-collage-float calc(9s / var(--f, 1)) var(--nta-ease) infinite alternate;
    transition: box-shadow .4s var(--nta-ease);
    will-change: transform;
}

@keyframes nta-collage-float {
    from { --drift: -7px; }
    to   { --drift: 7px; }
}

@property --drift {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

/* Photo tile ------------------------------------------------------------- */

.nta-collage__tile--photo {
    left: 0;
    top: 3%;
    width: 63%;
    padding: 10px 10px 0;
    background: linear-gradient(150deg, var(--nta-teal-600), var(--nta-teal-700));
    box-shadow: 0 26px 58px rgba(6, 50, 59, .22);
    z-index: 3;
}

.nta-collage__photo {
    position: relative;
    margin: 0;
    width: 100%;
    height: 0;
    padding-bottom: 62%;
    border-radius: clamp(11px, 1.1vw, 17px);
    overflow: hidden;
    background: var(--nta-teal-800);
}

.nta-collage__caption {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 6px 15px;
}

.nta-collage__caption strong {
    font-family: var(--nta-font-head);
    font-size: clamp(.9375rem, .85rem + .4vw, 1.1875rem);
    font-weight: 600;
    color: var(--nta-white);
    white-space: nowrap;
}

.nta-collage__rule {
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .38);
}

/* Patient monitor ------------------------------------------------------- */

/* The clip plays on a vital-signs monitor rather than a consumer handset:
   the same screen the anaesthesiologist watches during a treatment.
   Width is a percentage of the stage; the height follows from the screen's
   aspect ratio, so the unit keeps its proportions at every size. */
.nta-collage__monitor {
    right: 0;
    top: 6%;
    width: 39%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    z-index: 5;
}

/* Housing: a light medical-grade shell with a soft moulded edge. */
.nta-collage__monitor-body {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: clamp(5px, .6vw, 9px);
    width: 100%;
    /* Deeper chin along the bottom, the way clinical displays are built. */
    padding: clamp(7px, .8vw, 12px) clamp(7px, .8vw, 12px) clamp(11px, 1.3vw, 19px);
    border-radius: clamp(10px, 1.2vw, 18px);
    background: linear-gradient(158deg, #f6fafb, #dde7e9 54%, #c4d2d5);
    box-shadow:
        0 26px 58px rgba(6, 50, 59, .30),
        inset 0 0 0 1px rgba(255, 255, 255, .8),
        inset 0 -2px 5px rgba(6, 50, 59, .1);
}

/* Carry handle across the top of the housing. */
.nta-collage__monitor-body::before {
    content: "";
    position: absolute;
    left: 50%;
    top: clamp(-7px, -.75vw, -4px);
    transform: translateX(-50%);
    width: 26%;
    height: clamp(5px, .6vw, 9px);
    border-radius: clamp(4px, .5vw, 7px) clamp(4px, .5vw, 7px) 0 0;
    background: linear-gradient(180deg, #c9d6d9, #e9f1f2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* Vent slots in the chin. */
.nta-collage__monitor-body::after {
    content: "";
    position: absolute;
    left: clamp(11px, 1.3vw, 19px);
    bottom: clamp(3px, .4vw, 6px);
    width: 18%;
    height: clamp(2px, .25vw, 4px);
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, rgba(6, 50, 59, .18) 0 2px, transparent 2px 5px);
}

.nta-collage__monitor-screen {
    position: relative;
    flex: 1;
    aspect-ratio: 16 / 10;
    border-radius: clamp(5px, .55vw, 9px);
    overflow: hidden;
    background: #04212a;
    box-shadow: inset 0 0 0 1px rgba(6, 50, 59, .5);
}

/* Faint raster and a diagonal reflection, so the panel reads as glass. */
.nta-collage__monitor-glass {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px),
        linear-gradient(116deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 44%);
}

/* Button column along the right edge of the bezel. */
.nta-collage__monitor-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, .7vw, 11px);
    width: clamp(12px, 1.4vw, 21px);
    padding-block: clamp(2px, .3vw, 5px);
}

.nta-collage__monitor-controls i {
    display: block;
    width: clamp(7px, .8vw, 12px);
    height: clamp(7px, .8vw, 12px);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, #c2d0d3);
    box-shadow:
        inset 0 0 0 1px rgba(6, 50, 59, .16),
        0 1px 2px rgba(6, 50, 59, .18);
}

/* Power indicator: a slow, calm heartbeat rather than a blink. */
.nta-collage__monitor-led {
    background: radial-gradient(circle at 38% 34%, #b8f2ee, var(--nta-teal-400) 62%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(6, 50, 59, .12),
        0 0 6px rgba(45, 197, 190, .8) !important;
    animation: nta-monitor-led 2.6s var(--nta-ease) infinite;
}

@keyframes nta-monitor-led {
    0%, 62%, 100% { opacity: .55; }
    12%, 26%      { opacity: 1; }
}

/* Stand. */
.nta-collage__monitor-arm {
    width: 11%;
    height: clamp(13px, 1.6vw, 25px);
    background: linear-gradient(90deg, #b9c8cb, #eef4f5 44%, #b1c1c5);
}

.nta-collage__monitor-foot {
    width: 33%;
    height: clamp(5px, .55vw, 9px);
    border-radius: 999px;
    background: linear-gradient(180deg, #e9f1f2, #aebfc3);
    box-shadow: 0 14px 26px rgba(6, 50, 59, .22);
}

/* Floating pill ---------------------------------------------------------- */

.nta-collage__pillcard {
    left: 58%;
    top: 44%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 999px;
    background: var(--nta-teal-300);
    color: var(--nta-teal-900);
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 16px 36px rgba(6, 50, 59, .22);
    z-index: 6;
}

.nta-collage__pillcard svg {
    flex: none;
}

/* Avatar stack ----------------------------------------------------------- */

.nta-collage__team {
    left: 0;
    top: 64%;
    max-width: 46%;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 8px 18px 8px 8px;
    border-radius: 999px;
    background: var(--nta-white);
    border: 1px solid var(--nta-line);
    box-shadow: var(--nta-shadow-md);
    z-index: 6;
}

.nta-collage__avatars {
    display: flex;
    flex: none;
}

.nta-collage__avatar {
    position: relative;
    width: clamp(34px, 3.2vw, 44px);
    height: clamp(34px, 3.2vw, 44px);
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--nta-white);
    background: var(--nta-teal-100);
    margin-left: -12px;
    opacity: 0;
    animation: nta-collage-avatar .6s var(--nta-ease-out) forwards;
    animation-delay: calc(.5s + var(--i) * .11s);
}

.nta-collage__avatar:first-child {
    margin-left: 0;
}

@keyframes nta-collage-avatar {
    from { opacity: 0; transform: translateX(-10px) scale(.85); }
    to   { opacity: 1; transform: none; }
}

.nta-collage__avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nta-collage__team-label {
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nta-teal-900);
}

/* Claim card ------------------------------------------------------------- */

.nta-collage__claim {
    right: 0;
    top: 55%;
    width: 54%;
    /* Extra room on the left: the avatar pill overlaps this corner. */
    padding: clamp(18px, 1.9vw, 26px) clamp(20px, 2.1vw, 30px) clamp(18px, 1.9vw, 26px) clamp(26px, 3.4vw, 52px);
    background: linear-gradient(140deg, var(--nta-teal-600), var(--nta-teal-700));
    box-shadow: 0 24px 54px rgba(6, 50, 59, .24);
    z-index: 5;
}

.nta-collage__claim strong {
    display: block;
    font-family: var(--nta-font-head);
    font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--nta-white);
    margin-bottom: 7px;
}

.nta-collage__claim p {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    max-width: 30ch;
}

.nta-collage__ticks {
    position: absolute;
    right: 16px;
    top: 50%;
    display: grid;
    gap: 6px;
    transform: translateY(-50%);
}

.nta-collage__ticks i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
}

/* Badge ------------------------------------------------------------------ */

.nta-collage__badge {
    left: 3%;
    top: 84%;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 13px 20px 13px 13px;
    background: var(--nta-white);
    color: var(--nta-teal-900);
    border: 1px solid var(--nta-line);
    box-shadow: var(--nta-shadow-md);
    z-index: 7;
}

.nta-collage__badge svg {
    flex: none;
    color: var(--nta-teal-600);
}

.nta-collage__badge span {
    font-family: var(--nta-font-head);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ------------------------------------------------------------- Motion --- */

@media (prefers-reduced-motion: reduce) {
    .nta-collage__tile,
    .nta-collage__avatar,
    .nta-collage__monitor-led {
        animation: none !important;
    }

    .nta-collage__avatar {
        opacity: 1;
    }

    .nta-collage__thread {
        opacity: 1;
        animation: none;
    }
}

/* -------------------------------------------------------- Breakpoints --- */

@media (max-width: 1024px) {
    .nta-collage__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .nta-collage__stage {
        max-width: 620px;
        margin-inline: auto;
    }
}

/* Below the collage threshold the tiles become an honest stack. */
@media (max-width: 680px) {
    .nta-collage__stage {
        aspect-ratio: auto;
        display: grid;
        gap: 14px;
    }

    .nta-collage__threads {
        display: none;
    }

    .nta-collage__tile {
        position: static;
        width: auto;
        animation: none;
        transform: none;
    }

    .nta-collage__monitor {
        width: min(100%, 380px);
        order: -1;
        justify-self: center;
    }

    .nta-collage__pillcard,
    .nta-collage__team,
    .nta-collage__badge {
        justify-self: start;
        max-width: 100%;
    }

    .nta-collage__pillcard span,
    .nta-collage__badge span {
        white-space: normal;
    }

    .nta-collage__claim {
        width: auto;
    }

    .nta-collage__actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================== 4. NARCOSE — THE JOURNEY =====
   The treatment told as a vertical spine: a rail with a travelling bead,
   nodes for each step, and glass cards alongside.
   ======================================================================== */

.nta-journey {
    position: relative;
    overflow: clip;
}

.nta-journey__glow {
    position: absolute;
    top: -12%;
    left: 46%;
    width: 700px;
    height: 520px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(23, 162, 175, .3), transparent 68%);
    filter: blur(80px);
    pointer-events: none;
}

.nta-journey__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(36px, 5vw, 88px);
    align-items: start;
}

.nta-journey__sticky {
    position: sticky;
    top: 40px;
}

.nta-journey__media {
    position: relative;
    margin: clamp(26px, 3vw, 38px) 0 0;
    border-radius: var(--nta-radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .34);
}

.nta-journey__media img {
    transition: transform 1.1s var(--nta-ease-out);
}

.nta-journey__media:hover img {
    transform: scale(1.05);
}

.nta-journey__media figcaption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    border-radius: var(--nta-radius);
    background: rgba(6, 50, 59, .74);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(147, 215, 222, .22);
    font-size: .8125rem;
    line-height: 1.55;
    color: rgba(226, 244, 246, .88);
}

.nta-journey__media figcaption svg {
    flex: none;
    margin-top: 2px;
    color: var(--nta-teal-300);
}

/* Spine ------------------------------------------------------------------ */

.nta-journey__spine {
    position: relative;
    display: grid;
    gap: clamp(20px, 2.4vw, 32px);
    margin: 0;
    padding: 6px 0 0 clamp(34px, 4vw, 56px);
    list-style: none;
}

.nta-journey__rail {
    position: absolute;
    left: clamp(11px, 1.3vw, 18px);
    top: 14px;
    bottom: 14px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(147, 215, 222, .5), rgba(147, 215, 222, .12));
    overflow: hidden;
}

/* A drop of anaesthetic running down the rail, tying back to the hero cue. */
.nta-journey__bead {
    position: absolute;
    left: 50%;
    top: 0;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--nta-teal-200);
    box-shadow: 0 0 12px rgba(147, 215, 222, .9);
    animation: nta-journey-bead 5.5s var(--nta-ease) infinite;
}

@keyframes nta-journey-bead {
    0%   { transform: translateY(0); opacity: 0; }
    10%  { opacity: 1; }
    85%  { transform: translateY(calc(100% * 40)); opacity: 1; }
    100% { transform: translateY(calc(100% * 46)); opacity: 0; }
}

.nta-journey__step {
    position: relative;
}

.nta-journey__node {
    position: absolute;
    left: calc(-1 * clamp(34px, 4vw, 56px) + clamp(4px, .6vw, 11px));
    top: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--nta-teal-900);
    border: 2px solid var(--nta-teal-400);
}

.nta-journey__node-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nta-teal-200);
}

.nta-journey__step:hover .nta-journey__node {
    border-color: var(--nta-teal-200);
    box-shadow: 0 0 0 5px rgba(147, 215, 222, .14);
}

.nta-journey__card {
    padding: clamp(20px, 2.2vw, 28px);
    border-radius: var(--nta-radius-lg);
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .11);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color .4s var(--nta-ease), border-color .4s var(--nta-ease),
    transform .45s var(--nta-ease-out);
}

.nta-journey__step:hover .nta-journey__card {
    background: rgba(255, 255, 255, .095);
    border-color: rgba(147, 215, 222, .34);
    transform: translateX(6px);
}

.nta-journey__card header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.nta-journey__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(23, 162, 175, .18);
    color: var(--nta-teal-300);
    transition: background-color .4s var(--nta-ease), color .4s var(--nta-ease);
}

.nta-journey__step:hover .nta-journey__ico {
    background: var(--nta-teal-500);
    color: var(--nta-white);
}

.nta-journey__step-no {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--nta-teal-300);
}

.nta-journey__card h3 {
    margin: 0 0 8px;
    font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
    color: var(--nta-white);
}

.nta-journey__card p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.68;
    color: rgba(255, 255, 255, .74);
}

@media (prefers-reduced-motion: reduce) {
    .nta-journey__bead {
        animation: none;
        opacity: .8;
    }
}

@media (max-width: 1024px) {
    .nta-journey__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .nta-journey__sticky {
        position: static;
    }
}

@media (max-width: 620px) {
    .nta-journey__spine {
        padding-left: 30px;
    }

    .nta-journey__node {
        left: -26px;
    }

    .nta-journey__rail {
        left: 7px;
    }
}

/* ======================================================= 6. WHY US ======= */

.nta-why__inner {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: clamp(36px, 5vw, 88px);
    align-items: start;
}

.nta-why__sticky {
    position: sticky;
    top: 36px;
}

.nta-why__media {
    margin: 30px 0 0;
    box-shadow: var(--nta-shadow-md);
}

.nta-why__list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: why;
}

.nta-why__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 26px 26px 26px 0;
    border-bottom: 1px solid var(--nta-line);
    transition: padding-left .4s var(--nta-ease), background-color .4s var(--nta-ease);
}

.nta-why__item:first-child {
    border-top: 1px solid var(--nta-line);
}

.nta-why__item:hover {
    padding-left: 20px;
    background: var(--nta-teal-50);
}

.nta-why__ico {
    margin-top: 2px;
}

.nta-why__item:hover .nta-why__ico {
    background: var(--nta-teal-600);
    color: var(--nta-white);
}

.nta-why__body h3 {
    margin: 0 0 8px;
    font-size: 1.1875rem;
    line-height: 1.3;
}

.nta-why__body p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.68;
    color: var(--nta-body);
    max-width: 58ch;
}

.nta-why__index {
    margin-left: auto;
    font-family: var(--nta-font-head);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--nta-teal-300);
    flex: none;
}

/* ================================================= 7. SPLIT SECTIONS ===== */

.nta-split__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Stretch, not center: the frame grows to the height of the text column so
       no dead space is left underneath the photo. */
    align-items: stretch;
    gap: clamp(36px, 5vw, 84px);
}

.nta-split--media-left .nta-split__visual {
    order: -1;
}

.nta-split__visual {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* The frame takes the leftover height; `cover` keeps the crop honest. */
.nta-split__visual > .nta-media {
    flex: 1;
    aspect-ratio: auto;
    min-height: clamp(320px, 32vw, 480px);
}

.nta-split__visual .nta-media {
    box-shadow: var(--nta-shadow-md);
}

.nta-split__highlight,
.nta-specialist {
    position: relative;
    display: flex;
    gap: 16px;
    margin-top: -46px;
    margin-left: auto;
    margin-right: -6px;
    width: min(92%, 420px);
    padding: 22px 24px;
    border-radius: var(--nta-radius-lg);
    background: var(--nta-white);
    border: 1px solid var(--nta-line-soft);
    box-shadow: var(--nta-shadow-lg);
}

.nta-split__highlight strong,
.nta-specialist strong {
    display: block;
    font-family: var(--nta-font-head);
    font-size: 1.0625rem;
    color: var(--nta-ink);
    line-height: 1.3;
    margin-bottom: 4px;
}

.nta-specialist em {
    display: block;
    font-style: normal;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nta-teal-600);
    margin-bottom: 8px;
}

.nta-split__highlight p,
.nta-specialist p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--nta-body);
}

.nta-split__note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 26px 0 0;
    padding: 15px 18px;
    border-radius: var(--nta-radius-sm);
    background: var(--nta-teal-50);
    border: 1px solid var(--nta-teal-100);
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--nta-teal-800);
}

.nta-split__note svg {
    flex: none;
    margin-top: 3px;
    color: var(--nta-teal-600);
}

/* Definition-style option list (prothetiek) */
.nta-optionlist {
    display: grid;
    gap: 2px;
    margin: 30px 0 0;
}

.nta-optionlist__item {
    padding: 18px 20px;
    border-radius: var(--nta-radius-sm);
    background: var(--nta-mist);
    transition: background-color .35s var(--nta-ease), transform .35s var(--nta-ease);
}

.nta-optionlist__item:hover {
    background: var(--nta-teal-100);
    transform: translateX(4px);
}

.nta-optionlist dt {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--nta-font-head);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--nta-ink);
    margin-bottom: 5px;
}

.nta-optionlist dt svg {
    color: var(--nta-teal-600);
    flex: none;
}

.nta-optionlist dd {
    margin: 0 0 0 30px;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--nta-body);
}

/* Tile list (extracties) */
.nta-tilelist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.nta-tilelist li {
    display: flex;
    gap: 13px;
    padding: 18px 18px;
    border-radius: var(--nta-radius);
    background: var(--nta-white);
    border: 1px solid var(--nta-line-soft);
    transition: border-color .35s var(--nta-ease), transform .35s var(--nta-ease), box-shadow .35s var(--nta-ease);
}

.nta-tilelist li:hover {
    border-color: var(--nta-teal-200);
    transform: translateY(-3px);
    box-shadow: var(--nta-shadow-sm);
}

.nta-tilelist svg {
    flex: none;
    margin-top: 2px;
    color: var(--nta-teal-600);
}

.nta-tilelist strong {
    display: block;
    font-family: var(--nta-font-head);
    font-size: .9375rem;
    color: var(--nta-ink);
    line-height: 1.3;
    margin-bottom: 3px;
}

.nta-tilelist span {
    display: block;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--nta-body);
}

/* Comparison block */
.nta-compare {
    margin-top: clamp(44px, 5vw, 72px);
    padding: clamp(28px, 3vw, 44px);
    border-radius: var(--nta-radius-lg);
    background: var(--nta-white);
    border: 1px solid var(--nta-line-soft);
    box-shadow: var(--nta-shadow-sm);
}

.nta-compare__title {
    margin: 0 0 24px;
    font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
}

.nta-compare__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.nta-compare__col {
    padding: 24px;
    border-radius: var(--nta-radius);
    background: var(--nta-sand);
    border: 1px solid var(--nta-line-soft);
}

.nta-compare__col--us {
    background: var(--nta-teal-50);
    border-color: var(--nta-teal-100);
}

.nta-compare__col .nta-ico {
    margin-bottom: 16px;
    background: var(--nta-white);
}

.nta-compare__col--us .nta-ico {
    background: var(--nta-teal-600);
    color: var(--nta-white);
}

.nta-compare__col h4 {
    margin: 0 0 8px;
    font-size: 1.0625rem;
    line-height: 1.3;
}

.nta-compare__col p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--nta-body);
}

.nta-compare__note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 20px 0 0;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--nta-muted);
}

.nta-compare__note svg {
    flex: none;
    margin-top: 2px;
    color: var(--nta-teal-500);
}

/* ==================================================== 8. VERWIJZERS ====== */

.nta-verwijzers {
    position: relative;
    overflow: clip;
}

.nta-verwijzers__glow {
    position: absolute;
    bottom: -220px;
    right: -120px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(23, 162, 175, .26), transparent 68%);
    filter: blur(90px);
    pointer-events: none;
}

.nta-verwijzers__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(36px, 5vw, 80px);
}

.nta-verwijzers__points {
    display: grid;
    gap: 13px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.nta-verwijzers__points li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .9375rem;
    color: rgba(255, 255, 255, .82);
}

.nta-verwijzers__points svg {
    flex: none;
    color: var(--nta-teal-300);
}

.nta-videobox {
    margin: 0;
}

.nta-videobox__frame {
    position: relative;
    border-radius: var(--nta-radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #05242b;
    box-shadow: 0 40px 80px rgba(0, 0, 0, .35);
}

.nta-videobox__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--nta-teal-800);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
    transition: transform .35s var(--nta-ease-out), background-color .3s var(--nta-ease), opacity .3s var(--nta-ease);
}

.nta-videobox__play svg {
    fill: currentColor;
    margin-left: 3px;
}

.nta-videobox__play:hover {
    transform: translate(-50%, -50%) scale(1.07);
    background: var(--nta-white);
}

.nta-videobox__frame.is-playing .nta-videobox__play {
    opacity: 0;
    pointer-events: none;
}

.nta-videobox figcaption {
    margin-top: 14px;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .58);
}

/* =============================================== 9. NIEUWE PATIENTEN ===== */

.nta-patienten__panel {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    align-items: stretch;
    gap: 0;
    border-radius: var(--nta-radius-xl);
    overflow: hidden;
    background: var(--nta-mist);
    border: 1px solid var(--nta-line-soft);
    box-shadow: var(--nta-shadow-md);
}

.nta-patienten__content {
    padding: clamp(32px, 4vw, 64px);
}

.nta-patienten__media {
    margin: 0;
    min-height: 420px;
}

.nta-steps {
    display: grid;
    gap: 16px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.nta-steps__item {
    display: flex;
    gap: 16px;
}

.nta-steps__ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: var(--nta-white);
    color: var(--nta-teal-600);
    border: 1px solid var(--nta-teal-100);
}

.nta-steps__ico em {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--nta-teal-600);
    color: var(--nta-white);
    font-family: var(--nta-font-head);
    font-size: .6875rem;
    font-style: normal;
    font-weight: 600;
}

.nta-steps__item strong {
    display: block;
    font-family: var(--nta-font-head);
    font-size: 1.0625rem;
    color: var(--nta-ink);
    line-height: 1.3;
    margin-bottom: 3px;
}

/* Only the description span in the text column. Without the `div` this also
   matched `.nta-steps__ico`, which blockified the icon wrapper and pushed the
   glyph into the top left corner of its badge. */
.nta-steps__item > div span {
    display: block;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--nta-body);
}

.nta-notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 26px 0 0;
    padding: 15px 18px;
    border-radius: var(--nta-radius-sm);
    background: var(--nta-white);
    border: 1px dashed var(--nta-teal-200);
    font-size: .875rem;
    line-height: 1.6;
    color: var(--nta-ink-soft);
}

.nta-notice svg {
    flex: none;
    margin-top: 2px;
    color: var(--nta-teal-600);
}

/* =================================================== 10. FAQ ============= */

.nta-faq__inner {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(36px, 5vw, 84px);
    align-items: start;
}

.nta-faq__sticky {
    position: sticky;
    top: 36px;
}

.nta-faq__media {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3.2;
    border-radius: var(--nta-radius-lg);
    overflow: hidden;
    background: var(--nta-teal-100);
    box-shadow: var(--nta-shadow-md);
}

.nta-faq__media img {
    transition: transform 1.1s var(--nta-ease-out);
}

.nta-faq__media:hover img {
    transform: scale(1.05);
}

/* Contact card, lifted over the bottom of the photo. */
.nta-faq__cta {
    position: relative;
    margin: -40px 14px 0;
    padding: clamp(22px, 2.4vw, 30px);
    border-radius: var(--nta-radius-lg);
    background: linear-gradient(145deg, var(--nta-teal-700), var(--nta-teal-900));
    box-shadow: 0 26px 60px rgba(6, 50, 59, .26);
    color: rgba(255, 255, 255, .78);
}

.nta-faq__cta-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(147, 215, 222, .24);
    color: var(--nta-teal-200);
}

.nta-faq__cta h3 {
    margin: 0 0 8px;
    font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
    color: var(--nta-white);
}

.nta-faq__cta p {
    margin: 0 0 20px;
    font-size: .875rem;
    line-height: 1.65;
}

.nta-faq__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.nta-faq__cta-actions .nta-btn {
    flex: 1 1 auto;
    justify-content: center;
    padding-inline: 20px;
}

.nta-faq__cta-actions .nta-btn--ghost {
    --btn-fg: var(--nta-white);
    --btn-bd: rgba(255, 255, 255, .3);
}

.nta-faq__cta-actions .nta-btn--ghost:hover {
    --btn-bg: rgba(255, 255, 255, .1);
    --btn-fg: var(--nta-white);
    --btn-bd: rgba(255, 255, 255, .6);
}

.nta-faq__phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding-top: 16px;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-family: var(--nta-font-head);
    font-size: 1rem;
    font-weight: 600;
    color: var(--nta-white);
}

.nta-faq__phone svg {
    color: var(--nta-teal-300);
    flex: none;
}

.nta-faq__phone:hover {
    color: var(--nta-teal-200);
}

/* ------------------------------------------------------------- Accordion */

.nta-faq__head {
    margin-bottom: clamp(26px, 3vw, 42px);
}

.nta-faq__intro {
    margin: 0;
    max-width: 56ch;
    font-size: clamp(.9375rem, .9rem + .3vw, 1.0625rem);
    line-height: 1.7;
    color: var(--nta-body);
}

.nta-faq__list {
    display: grid;
    gap: 12px;
}

.nta-faq__item {
    position: relative;
    border: 1px solid var(--nta-line);
    border-radius: var(--nta-radius);
    background: var(--nta-white);
    overflow: hidden;
    transition: border-color .35s var(--nta-ease), box-shadow .35s var(--nta-ease),
    background-color .35s var(--nta-ease);
}

/* Turquoise spine that grows in as the answer opens. */
.nta-faq__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--nta-teal-500);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .45s var(--nta-ease-out);
}

.nta-faq__item:hover {
    border-color: var(--nta-teal-200);
}

.nta-faq__item.is-open {
    border-color: var(--nta-teal-200);
    box-shadow: var(--nta-shadow-md);
}

.nta-faq__item.is-open::before {
    transform: scaleY(1);
}

.nta-faq__q {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.nta-faq__trigger {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.4vw, 20px);
    width: 100%;
    padding: clamp(16px, 1.8vw, 22px) clamp(16px, 2vw, 26px);
    text-align: left;
    cursor: pointer;
}

.nta-faq__no {
    flex: none;
    font-family: var(--nta-font-head);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--nta-teal-400);
    transition: color .3s var(--nta-ease);
}

.nta-faq__item.is-open .nta-faq__no {
    color: var(--nta-teal-600);
}

.nta-faq__label {
    flex: 1;
    font-family: var(--nta-font-head);
    font-size: clamp(1rem, .94rem + .35vw, 1.1875rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--nta-ink);
    transition: color .3s var(--nta-ease);
}

.nta-faq__item.is-open .nta-faq__label,
.nta-faq__trigger:hover .nta-faq__label {
    color: var(--nta-teal-700);
}

/* Plus that turns into a minus. */
.nta-faq__sign {
    position: relative;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--nta-teal-200);
    transition: background-color .35s var(--nta-ease), border-color .35s var(--nta-ease),
    transform .45s var(--nta-ease-out);
}

.nta-faq__sign i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1.8px;
    margin: -.9px 0 0 -6px;
    border-radius: 2px;
    background: var(--nta-teal-700);
    transition: transform .45s var(--nta-ease-out), background-color .35s var(--nta-ease);
}

.nta-faq__sign i:last-child {
    transform: rotate(90deg);
}

.nta-faq__item.is-open .nta-faq__sign {
    background: var(--nta-teal-600);
    border-color: var(--nta-teal-600);
    transform: rotate(180deg);
}

.nta-faq__item.is-open .nta-faq__sign i {
    background: var(--nta-white);
}

/* The second bar folds away, leaving a minus. */
.nta-faq__item.is-open .nta-faq__sign i:last-child {
    transform: rotate(0deg);
}

/* Panel height animates through a collapsing grid row. */
.nta-faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s var(--nta-ease-out);
}

.nta-faq__panel[hidden] {
    display: grid;
}

.nta-faq__item.is-open .nta-faq__panel {
    grid-template-rows: 1fr;
}

.nta-faq__panel > div {
    overflow: hidden;
}

.nta-faq__panel p {
    margin: 0;
    padding: 0 clamp(16px, 2vw, 26px) clamp(18px, 2vw, 24px)
             calc(clamp(16px, 2vw, 26px) + clamp(12px, 1.4vw, 20px) + 22px);
    font-size: .9375rem;
    line-height: 1.72;
    color: var(--nta-body);
}

@media (prefers-reduced-motion: reduce) {
    .nta-faq__panel {
        transition: none;
    }

    .nta-faq__item::before {
        transition: none;
    }
}

@media (max-width: 1024px) {
    .nta-faq__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .nta-faq__sticky {
        position: static;
    }

    .nta-faq__aside {
        max-width: 620px;
        margin-inline: auto;
        width: 100%;
    }
}

@media (max-width: 620px) {
    .nta-faq__no {
        display: none;
    }

    .nta-faq__panel p {
        padding-left: clamp(16px, 2vw, 26px);
    }

    .nta-faq__cta-actions .nta-btn {
        flex: 1 1 100%;
    }
}

/* ================================================= 11. CONTACT & MAP ===== */

.nta-contact__head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: end;
    gap: clamp(20px, 3vw, 56px);
    margin-bottom: clamp(32px, 4vw, 52px);
}

.nta-contact__head .nta-title {
    margin-bottom: 0;
}

.nta-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
}

.nta-contact__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.nta-contact__list li {
    display: flex;
    gap: 14px;
    padding: 20px;
    border-radius: var(--nta-radius);
    background: var(--nta-white);
    border: 1px solid var(--nta-line-soft);
    transition: border-color .35s var(--nta-ease), box-shadow .35s var(--nta-ease);
}

.nta-contact__list li:hover {
    border-color: var(--nta-teal-200);
    box-shadow: var(--nta-shadow-sm);
}

.nta-contact__list li:last-child {
    grid-column: 1 / -1;
}

.nta-contact__list strong {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--nta-muted);
    margin-bottom: 6px;
}

/* Scoped to the text column: without the `div` this also matched the
   `.nta-ico` badge and pushed its glyph into the top left corner. */
.nta-contact__list > li > div span,
.nta-contact__list > li > div a {
    display: block;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--nta-ink);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.nta-contact__list li > div {
    min-width: 0;
}

.nta-contact__list a:hover {
    color: var(--nta-teal-600);
}

.nta-contact__map {
    border-radius: var(--nta-radius-lg);
    overflow: hidden;
    border: 1px solid var(--nta-line-soft);
    background: var(--nta-white);
}

.nta-contact__map iframe {
    display: block;
    width: 100%;
    height: 300px;
    border: 0;
    filter: saturate(.85);
}

.nta-contact__route {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-top: 1px solid var(--nta-line-soft);
    transition: background-color .35s var(--nta-ease);
}

.nta-contact__route:hover {
    background: var(--nta-teal-50);
}

.nta-contact__route > span:nth-child(2) {
    display: grid;
    gap: 2px;
    margin-right: auto;
}

.nta-contact__route strong {
    font-family: var(--nta-font-head);
    font-size: 1rem;
    color: var(--nta-ink);
    line-height: 1.3;
}

.nta-contact__route em {
    font-style: normal;
    font-size: .8125rem;
    color: var(--nta-muted);
}

.nta-contact__route > svg {
    flex: none;
    color: var(--nta-teal-600);
    transition: transform .35s var(--nta-ease-out);
}

.nta-contact__route:hover > svg {
    transform: translate(3px, -3px);
}

.nta-contact__form {
    padding: clamp(26px, 3vw, 42px);
    border-radius: var(--nta-radius-lg);
    background: var(--nta-white);
    border: 1px solid var(--nta-line-soft);
    box-shadow: var(--nta-shadow-md);
}

.nta-contact__form h3 {
    margin: 0 0 8px;
    font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
}

.nta-contact__form-text {
    margin: 0 0 24px;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--nta-body);
}

/* ==================================================== 12. BREAKPOINTS ==== */

@media (max-width: 1180px) {

}

@media (max-width: 1024px) {
    .nta-verwijzers__inner,
    .nta-split__inner,
    .nta-why__inner,
    .nta-patienten__panel,
    .nta-contact__grid,
    .nta-contact__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .nta-videobox {
        max-width: 640px;
        margin-inline: auto;
    }

    .nta-split--media-left .nta-split__visual {
        order: 0;
    }

    .nta-split__visual {
        max-width: 640px;
        margin-inline: auto;
        width: 100%;
    }

    .nta-split__visual > .nta-media {
        flex: none;
        aspect-ratio: 16 / 11;
        min-height: 0;
    }

    .nta-why__sticky {
        position: static;
    }


    .nta-patienten__media {
        min-height: 300px;
        max-height: 380px;
    }

    .nta-contact__head {
        align-items: start;
        gap: 18px;
    }
}

@media (max-width: 720px) {

    .nta-tilelist,
    .nta-compare__grid,
    .nta-contact__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .nta-split__highlight,
    .nta-specialist {
        width: 100%;
        margin: 16px 0 0;
    }

    .nta-why__item {
        flex-wrap: wrap;
        padding-right: 0;
    }

    .nta-why__index {
        display: none;
    }

    .nta-videobox__play {
        width: 62px;
        height: 62px;
    }
}