/* ==========================================================================
   Narcose Tandarts Almere — subpage components

   Loaded after widgets.css and built on the same tokens. Kept in its own file
   so the homepage sections and the page sections can evolve independently.

   Every rule that targets an `img` inside a fixed ratio frame is prefixed with
   `.nta-w`: Elementor's frontend stylesheet also targets bare `img` and can
   load after ours, so an unprefixed rule loses the cascade.
   ========================================================================== */

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

.nta-w .nta-phero__frame,
.nta-w .nta-phero__bleed,
.nta-w .nta-feature__media,
.nta-w .nta-article__figure,
.nta-w .nta-profile__media,
.nta-w .nta-team__portrait,
.nta-w .nta-cta__media,
.nta-w .nta-route__media {
    position: relative;
    overflow: hidden;
}

.nta-w .nta-phero__frame > img,
.nta-w .nta-phero__bleed > img,
.nta-w .nta-feature__media > img,
.nta-w .nta-article__figure > img,
.nta-w .nta-profile__media > img,
.nta-w .nta-team__portrait > img,
.nta-w .nta-related__media > img,
.nta-w .nta-cta__media > img,
.nta-w .nta-route__media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* ================================================= 1. BREADCRUMB TRAIL ==== */

.nta-crumbs {
    margin-bottom: 22px;
    font-size: .8125rem;
}

.nta-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nta-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--nta-muted);
}

/* The separator is drawn rather than typed, so screen readers skip it. */
.nta-crumbs li + li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
}

.nta-crumbs a {
    color: var(--nta-muted);
    text-decoration: none;
    transition: color .3s var(--nta-ease);
}

.nta-crumbs a:hover {
    color: var(--nta-primary);
}

.nta-crumbs [aria-current] {
    color: var(--nta-ink-soft);
    font-weight: 600;
}

.nta-phero--wide .nta-crumbs,
.nta-phero--wide .nta-crumbs a,
.nta-phero--wide .nta-crumbs li {
    color: rgba(255, 255, 255, .72);
}

.nta-phero--wide .nta-crumbs a:hover,
.nta-phero--wide .nta-crumbs [aria-current] {
    color: var(--nta-white);
}

/* ======================================================== 2. PAGE HERO ==== */

.nta-phero {
    position: relative;
    padding-block: clamp(52px, 6.5vw, 104px) clamp(56px, 7vw, 116px);
    background: var(--nta-white);
    overflow: clip;
}

/* A single soft turquoise bloom, echoing the homepage hero without repeating
   its full-bleed video treatment. */
.nta-phero__glow {
    position: absolute;
    top: -34%;
    right: -12%;
    width: min(760px, 62vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(82, 190, 200, .2), rgba(82, 190, 200, 0) 68%);
    pointer-events: none;
}

.nta-phero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    align-items: center;
    gap: clamp(34px, 5vw, 76px);
}

.nta-phero--split .nta-phero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
}

.nta-phero__title {
    display: flex;
    flex-direction: column;
    margin: 0 0 20px;
    font-size: clamp(2.1rem, 1.15rem + 3.1vw, 3.7rem);
    line-height: 1.05;
    letter-spacing: -.02em;
}

.nta-phero__line--accent {
    color: var(--nta-primary);
}

.nta-phero__text {
    max-width: 56ch;
    margin: 0 0 30px;
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
    line-height: 1.72;
    color: var(--nta-body);
}

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

/* Facts sit on a hairline rule so they read as a footer to the copy rather
   than as another list of features. */
.nta-phero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    margin: 32px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--nta-line);
    list-style: none;
}

.nta-phero__facts li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--nta-ink-soft);
}

.nta-phero__facts svg {
    flex: none;
    color: var(--nta-primary);
}

/* Visual ------------------------------------------------------------------ */

.nta-phero__visual {
    position: relative;
}

.nta-phero__frame {
    margin: 0;
    aspect-ratio: 4 / 4.4;
    border-radius: var(--nta-radius-xl) var(--nta-radius-xl) var(--nta-radius-lg) var(--nta-radius-xl);
    background: var(--nta-teal-800);
    box-shadow: var(--nta-shadow-lg);
}

.nta-phero__badge {
    position: absolute;
    left: clamp(-28px, -2vw, -10px);
    bottom: clamp(24px, 4vw, 52px);
    display: flex;
    align-items: center;
    gap: 13px;
    max-width: min(320px, 82%);
    padding: 15px 22px 15px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--nta-shadow-md);
}

.nta-phero__badge-ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    background: var(--nta-teal-50);
    color: var(--nta-primary);
}

.nta-phero__badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

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

.nta-phero__badge-text small {
    font-size: .75rem;
    color: var(--nta-muted);
}

/* Wide variant ------------------------------------------------------------ */

.nta-phero--wide {
    padding-block: clamp(90px, 11vw, 190px);
    background: var(--nta-deep);
    color: rgba(255, 255, 255, .8);
}

.nta-phero--wide .nta-phero__bleed {
    position: absolute;
    inset: 0;
}

/* Two stops: a vertical wash for legibility and a horizontal one so the copy
   side stays dark whatever the photograph does. Together they reach roughly
   83% coverage behind the heading — enough for white text on any photo — while
   the right hand side stays open so the practice is actually visible. */
.nta-phero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 50, 59, .5), rgba(6, 50, 59, .34) 45%, rgba(6, 50, 59, .62)),
        linear-gradient(96deg, rgba(6, 50, 59, .8), rgba(6, 50, 59, .62) 46%, rgba(6, 50, 59, .04) 90%);
}

.nta-phero--wide .nta-phero__inner {
    grid-template-columns: minmax(0, 1fr);
}

.nta-phero--wide .nta-phero__copy {
    max-width: 720px;
}

.nta-phero--wide .nta-phero__title {
    color: var(--nta-white);
}

.nta-phero--wide .nta-phero__line--accent {
    color: var(--nta-teal-300);
}

.nta-phero--wide .nta-phero__text {
    color: rgba(255, 255, 255, .82);
}

.nta-phero--wide .nta-phero__facts {
    border-top-color: rgba(255, 255, 255, .2);
}

.nta-phero--wide .nta-phero__facts li {
    color: rgba(255, 255, 255, .9);
}

.nta-phero--wide .nta-phero__facts svg {
    color: var(--nta-teal-300);
}

.nta-phero--wide .nta-btn--ghost {
    --btn-fg: var(--nta-white);
    --btn-bd: rgba(255, 255, 255, .38);
}

.nta-phero--wide .nta-btn--ghost:hover {
    --btn-bg: rgba(255, 255, 255, .12);
}

/* Plain variant ----------------------------------------------------------- */

.nta-phero--plain {
    background: linear-gradient(178deg, var(--nta-teal-50), var(--nta-white) 72%);
}

.nta-phero--plain .nta-phero__inner {
    grid-template-columns: minmax(0, 1fr);
}

.nta-phero--plain .nta-phero__copy {
    max-width: 760px;
}

/* =========================================================== 3. ARTICLE === */

/* Namespaced `nta-article`, not `nta-prose`: the theme already uses
   `.nta-prose` for plain page content and caps it at 74ch, which would
   squeeze this two column layout down to the width of a paragraph. */

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

.nta-article--solo .nta-article__inner {
    grid-template-columns: minmax(0, 820px);
    justify-content: center;
}

.nta-article__head {
    margin-bottom: clamp(28px, 3.5vw, 48px);
}

.nta-article__lead {
    max-width: 62ch;
    margin: 0;
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
    line-height: 1.72;
    color: var(--nta-body);
}

.nta-article__block + .nta-article__block {
    margin-top: clamp(34px, 4vw, 58px);
    padding-top: clamp(34px, 4vw, 58px);
    border-top: 1px solid var(--nta-line-soft);
}

/* Anchored blocks must clear the docked action bar when jumped to. */
.nta-article__block[id] {
    scroll-margin-top: 28px;
}

.nta-article__block-title {
    margin: 0 0 .6em;
    font-size: clamp(1.35rem, 1.05rem + 1vw, 1.85rem);
    line-height: 1.22;
    letter-spacing: -.01em;
}

.nta-article__block p {
    max-width: 68ch;
    margin: 0 0 1.1em;
    font-size: 1.0625rem;
    line-height: 1.78;
    color: var(--nta-body);
}

.nta-article__block p:last-child {
    margin-bottom: 0;
}

.nta-article__list {
    display: grid;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.nta-article__list li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    gap: 4px;
    max-width: 68ch;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--nta-body);
}

.nta-article__list svg {
    margin-top: .42em;
    color: var(--nta-primary);
}

.nta-article__list strong {
    color: var(--nta-ink);
}

/* Aside ------------------------------------------------------------------- */

.nta-article__sticky {
    position: sticky;
    top: 32px;
    display: grid;
    gap: 20px;
}

.nta-article__nav {
    padding: 22px 24px;
    border: 1px solid var(--nta-line);
    border-radius: var(--nta-radius-lg);
    background: var(--nta-white);
}

.nta-article__nav-title {
    margin: 0 0 14px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nta-muted);
}

.nta-article__nav ul {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nta-article__nav a {
    position: relative;
    display: block;
    padding: 9px 0 9px 18px;
    font-size: .9375rem;
    line-height: 1.45;
    color: var(--nta-ink-soft);
    text-decoration: none;
    transition: color .3s var(--nta-ease);
}

/* A turquoise tick that grows in on hover, the same gesture as the FAQ spine. */
.nta-article__nav a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 3px;
    background: var(--nta-primary);
    transform: translateY(-50%);
    transition: height .35s var(--nta-ease-out);
}

.nta-article__nav a:hover {
    color: var(--nta-primary);
}

.nta-article__nav a:hover::before {
    height: 62%;
}

.nta-article__figure {
    margin: 0;
    aspect-ratio: 4 / 3.1;
    border-radius: var(--nta-radius-lg);
    background: var(--nta-teal-800);
    box-shadow: var(--nta-shadow-md);
}

.nta-article__card {
    padding: 26px;
    border-radius: var(--nta-radius-lg);
    background: linear-gradient(158deg, var(--nta-teal-600), var(--nta-teal-800));
    color: rgba(255, 255, 255, .84);
}

.nta-article__card h3 {
    margin: 0 0 8px;
    font-size: 1.125rem;
    color: var(--nta-white);
}

.nta-article__card p {
    margin: 0 0 18px;
    font-size: .9375rem;
    line-height: 1.65;
}

.nta-article__card .nta-btn {
    --btn-bg: var(--nta-white);
    --btn-fg: var(--nta-teal-800);
    width: 100%;
    padding-inline: 20px;
}

/* =========================================================== 4. FEATURE === */

.nta-feature__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 82px);
    align-items: center;
}

.nta-feature--solo .nta-feature__inner {
    grid-template-columns: minmax(0, 780px);
}

/* Source order stays copy-first for screen readers; only the columns swap. */
.nta-feature--flip .nta-feature__body {
    order: 2;
}

.nta-feature__lead {
    max-width: 56ch;
    margin: 0 0 1.1em;
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
    line-height: 1.72;
    color: var(--nta-body);
}

.nta-feature__p {
    max-width: 60ch;
    margin: 0 0 1.05em;
    line-height: 1.78;
    color: var(--nta-body);
}

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

.nta-feature__points li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.nta-feature__ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--nta-teal-50);
    color: var(--nta-primary);
    transition: background .35s var(--nta-ease), color .35s var(--nta-ease);
}

.nta-feature__points li:hover .nta-feature__ico {
    background: var(--nta-primary);
    color: var(--nta-white);
}

.nta-feature__points strong {
    display: block;
    font-family: var(--nta-font-head);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--nta-ink);
}

.nta-feature__points small {
    display: block;
    margin-top: 3px;
    font-size: .9375rem;
    line-height: 1.62;
    color: var(--nta-body);
}

.nta-feature__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
    margin-top: 32px;
}

.nta-feature__visual {
    position: relative;
}

.nta-feature__media {
    margin: 0;
    aspect-ratio: 4 / 3.4;
    border-radius: var(--nta-radius-xl);
    background: var(--nta-teal-800);
    box-shadow: var(--nta-shadow-lg);
}

.nta-feature__caption {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 16px 0 0;
    font-size: .875rem;
    color: var(--nta-muted);
}

.nta-feature__caption svg {
    color: var(--nta-accent);
}

.nta-section--deep .nta-feature__p,
.nta-section--deep .nta-feature__lead,
.nta-section--deep .nta-feature__points small {
    color: rgba(255, 255, 255, .78);
}

.nta-section--deep .nta-feature__points strong {
    color: var(--nta-white);
}

.nta-section--deep .nta-feature__ico {
    background: rgba(255, 255, 255, .1);
    color: var(--nta-teal-300);
}

/* ============================================================== 5. GRID === */

.nta-grid__head {
    max-width: 720px;
    margin-bottom: clamp(32px, 4vw, 56px);
}

.nta-grid__intro {
    margin: 0;
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
    line-height: 1.72;
    color: var(--nta-body);
}

.nta-grid__list {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 26px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nta-grid__card {
    height: 100%;
    padding: clamp(24px, 2.4vw, 34px);
    border-radius: var(--nta-radius-lg);
    background: var(--nta-white);
    box-shadow: var(--nta-shadow-sm);
    transition: transform .4s var(--nta-ease-out), box-shadow .4s var(--nta-ease-out);
}

.nta-grid__item:hover .nta-grid__card {
    transform: translateY(-4px);
    box-shadow: var(--nta-shadow-md);
}

.nta-grid__mark {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    border-radius: 15px;
    background: var(--nta-teal-50);
    color: var(--nta-primary);
    transition: background .4s var(--nta-ease), color .4s var(--nta-ease);
}

.nta-grid__item:hover .nta-grid__mark {
    background: var(--nta-primary);
    color: var(--nta-white);
}

.nta-grid__card-title {
    margin: 0 0 .5em;
    font-size: 1.1875rem;
    line-height: 1.3;
}

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

.nta-grid__link {
    margin-top: 18px;
}

/* Outline style ----------------------------------------------------------- */

.nta-grid--outline .nta-grid__card {
    background: transparent;
    border: 1px solid var(--nta-line);
    box-shadow: none;
}

.nta-grid--outline .nta-grid__item:hover .nta-grid__card {
    border-color: var(--nta-teal-200);
    background: var(--nta-white);
    box-shadow: var(--nta-shadow-sm);
}

/* Numbered style ---------------------------------------------------------- */

.nta-grid--number .nta-grid__mark {
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    border-radius: 0;
}

.nta-grid--number .nta-grid__item:hover .nta-grid__mark {
    background: none;
    color: var(--nta-primary);
}

.nta-grid--number .nta-grid__mark em {
    font-family: var(--nta-font-head);
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    color: var(--nta-teal-200);
    transition: color .4s var(--nta-ease);
}

.nta-grid--number .nta-grid__item:hover .nta-grid__mark em {
    color: var(--nta-primary);
}

.nta-grid__note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 72ch;
    margin: clamp(26px, 3vw, 40px) 0 0;
    font-size: .9375rem;
    line-height: 1.68;
    color: var(--nta-muted);
}

.nta-grid__note svg {
    flex: none;
    margin-top: .2em;
    color: var(--nta-accent);
}

.nta-section--deep .nta-grid__card {
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
}

.nta-section--deep .nta-grid__card p,
.nta-section--deep .nta-grid__intro,
.nta-section--deep .nta-grid__note {
    color: rgba(255, 255, 255, .76);
}

.nta-section--deep .nta-grid__mark {
    background: rgba(255, 255, 255, .1);
    color: var(--nta-teal-300);
}

/* ============================================================= 6. ROUTE === */

/* Namespaced `nta-route`, not `nta-steps`: the homepage patient widget already
   owns `.nta-steps__item` and blockifies every span inside it, which broke the
   icon and its label onto separate lines here. */

.nta-route__head {
    max-width: 700px;
    margin-bottom: clamp(38px, 4.5vw, 64px);
}

.nta-route__intro {
    margin: 0;
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
    line-height: 1.72;
}

.nta-route__actions {
    margin-top: 28px;
}

.nta-route__list {
    display: grid;
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    gap: clamp(16px, 1.6vw, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.nta-route__item {
    position: relative;
    padding-top: 34px;
}

/* The rail: one line across the whole row, with a node per step sitting on
   it. Drawn with pseudo elements so no extra markup is needed. */
.nta-route__item::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    opacity: .18;
}

.nta-route__item:first-child::before {
    left: 9px;
    border-radius: 2px 0 0 2px;
}

.nta-route__item:last-child::before {
    right: calc(100% - 11px);
}

.nta-route__dot {
    position: absolute;
    top: 3px;
    left: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--nta-teal-400);
    box-shadow: 0 0 0 5px rgba(82, 190, 200, .18);
}

.nta-route__card {
    padding: 26px 24px 28px;
    border-radius: var(--nta-radius-lg);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    height: 100%;
    transition: background .4s var(--nta-ease), transform .4s var(--nta-ease-out);
}

.nta-route__item:hover .nta-route__card {
    background: rgba(255, 255, 255, .1);
    transform: translateY(-3px);
}

.nta-route__no {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    color: var(--nta-teal-300);
}

.nta-route__no em {
    font-size: .6875rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.nta-route__card-title {
    margin: 0 0 .55em;
    font-size: 1.125rem;
    line-height: 1.32;
}

.nta-route__card p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.7;
}

.nta-route__note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 74ch;
    margin: clamp(28px, 3vw, 44px) 0 0;
    font-size: .9375rem;
    line-height: 1.68;
}

.nta-route__note svg {
    flex: none;
    margin-top: .15em;
    color: var(--nta-teal-300);
}

/* On a light background the rail and cards invert. */
.nta-route:not(.nta-section--deep) .nta-route__card {
    background: var(--nta-white);
    border-color: var(--nta-line);
}

.nta-route:not(.nta-section--deep) .nta-route__no {
    color: var(--nta-primary);
}

.nta-route:not(.nta-section--deep) .nta-route__card p,
.nta-route:not(.nta-section--deep) .nta-route__intro,
.nta-route:not(.nta-section--deep) .nta-route__note {
    color: var(--nta-body);
}

/* Column layout ----------------------------------------------------------- */

.nta-route--column .nta-route__inner {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
    gap: clamp(34px, 5vw, 80px);
    align-items: start;
}

.nta-route--column .nta-route__head {
    margin-bottom: 0;
    position: sticky;
    top: 32px;
}

.nta-route--column .nta-route__media {
    margin: 28px 0 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--nta-radius-xl);
    background: var(--nta-teal-800);
    box-shadow: var(--nta-shadow-lg);
}

.nta-route--column .nta-route__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.nta-route--column .nta-route__item {
    padding: 0 0 clamp(24px, 3vw, 40px) 40px;
}

/* Vertical rail for the stacked variant. */
.nta-route--column .nta-route__item::before {
    top: 12px;
    bottom: -4px;
    left: 7px;
    right: auto;
    width: 2px;
    height: auto;
}

.nta-route--column .nta-route__item:last-child {
    padding-bottom: 0;
}

.nta-route--column .nta-route__item:last-child::before {
    display: none;
}

.nta-route--column .nta-route__dot {
    top: 6px;
    left: 0;
}

.nta-route--column .nta-route__note {
    margin-left: 40px;
}

/* ============================================================= 7. COSTS === */

.nta-costs__head {
    max-width: 700px;
    margin-bottom: clamp(32px, 4vw, 54px);
}

.nta-costs__intro {
    margin: 0;
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
    line-height: 1.72;
    color: var(--nta-body);
}

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

.nta-costs__table {
    border-radius: var(--nta-radius-lg);
    background: var(--nta-white);
    box-shadow: var(--nta-shadow-sm);
    overflow: hidden;
}

.nta-costs__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 22px clamp(20px, 2.2vw, 30px);
}

.nta-costs__row + .nta-costs__row {
    border-top: 1px solid var(--nta-line-soft);
}

/* The label column takes the leftover width; min-width:0 lets a long
   toelichting wrap instead of pushing the amount out of the row. */
.nta-costs__row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.nta-costs__label {
    margin: 0;
    font-family: var(--nta-font-head);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--nta-ink);
}

.nta-costs__row-note {
    margin: 5px 0 0;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--nta-muted);
}

.nta-costs__value {
    flex: none;
    margin: 0;
    font-family: var(--nta-font-head);
    font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
    font-weight: 600;
    color: var(--nta-primary);
    white-space: nowrap;
}

.nta-costs__side {
    display: grid;
    gap: 14px;
}

.nta-costs__note {
    padding: 24px 26px;
    border: 1px solid var(--nta-line);
    border-radius: var(--nta-radius-lg);
    background: var(--nta-white);
}

.nta-costs__note-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--nta-teal-50);
    color: var(--nta-primary);
}

.nta-costs__note h3 {
    margin: 0 0 .5em;
    font-size: 1.0625rem;
}

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

/* The reservation about insurance is a first class element, not fine print. */
.nta-costs__disclaimer {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    margin-top: clamp(22px, 2.6vw, 34px);
    padding: 24px clamp(22px, 2.4vw, 32px);
    border-radius: var(--nta-radius-lg);
    background: var(--nta-teal-50);
    border: 1px solid var(--nta-teal-200);
}

.nta-costs__disclaimer-ico {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--nta-white);
    color: var(--nta-primary);
}

.nta-costs__disclaimer p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--nta-teal-800);
}

.nta-costs__disclaimer .nta-btn {
    flex: none;
}

/* =========================================================== 8. PROFILE === */

.nta-profile__inner {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 78px);
    align-items: center;
}

/* Without a portrait the copy would sit in a narrow column beside empty
   space, so the key facts move into a card on the right instead. */
.nta-profile--solo .nta-profile__inner {
    grid-template-columns: minmax(0, 1fr);
}

.nta-profile--solo .nta-profile__body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.nta-profile--solo .nta-profile__body > * {
    grid-column: 1;
}

/* Grid items stretch by default, which would pull the button across the
   whole column. */
.nta-profile--solo .nta-profile__body > .nta-btn {
    justify-self: start;
}

.nta-profile--solo .nta-profile__facts {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: start;
    flex-direction: column;
    gap: 22px;
    margin: 0;
    padding: clamp(24px, 2.6vw, 34px);
    border-top: 0;
    border-radius: var(--nta-radius-lg);
    background: var(--nta-white);
    box-shadow: var(--nta-shadow-sm);
}

.nta-profile--solo .nta-profile__facts div + div {
    padding-top: 22px;
    border-top: 1px solid var(--nta-line-soft);
}

.nta-profile--flip .nta-profile__visual {
    order: 2;
}

.nta-profile__visual {
    position: relative;
}

.nta-profile__media {
    position: relative;
    z-index: 2;
    margin: 0;
    aspect-ratio: 4 / 4.6;
    border-radius: 180px 180px var(--nta-radius-lg) var(--nta-radius-lg);
    background: var(--nta-teal-100);
}

/* A turquoise arc behind the portrait, offset so it reads as a shape rather
   than a border. */
.nta-profile__ring {
    position: absolute;
    left: -18px;
    bottom: -18px;
    width: 76%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px solid var(--nta-teal-200);
    background: var(--nta-teal-50);
    z-index: 1;
}

.nta-profile--flip .nta-profile__ring {
    left: auto;
    right: -18px;
}

.nta-profile__name {
    margin: 0 0 .15em;
    font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.5rem);
    line-height: 1.12;
}

.nta-profile__role {
    margin: 0 0 24px;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nta-primary);
}

.nta-profile__text p {
    max-width: 62ch;
    margin: 0 0 1.05em;
    line-height: 1.78;
    color: var(--nta-body);
}

.nta-profile__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 44px;
    margin: 30px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--nta-line);
}

.nta-profile__facts div {
    display: flex;
    flex-direction: column;
}

.nta-profile__facts dt {
    font-family: var(--nta-font-head);
    font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--nta-primary);
}

.nta-profile__facts dd {
    margin: 4px 0 0;
    font-size: .8125rem;
    letter-spacing: .04em;
    color: var(--nta-muted);
}

.nta-profile__body .nta-btn {
    margin-top: 30px;
}

/* ============================================================== 9. TEAM === */

.nta-team__head {
    max-width: 700px;
    margin-bottom: clamp(32px, 4vw, 56px);
}

.nta-team__intro {
    margin: 0;
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
    line-height: 1.72;
    color: var(--nta-body);
}

.nta-team__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nta-team__portrait {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--nta-radius-lg);
    background: var(--nta-teal-100);
}

.nta-w .nta-team__portrait > img {
    transition: transform .7s var(--nta-ease-out);
}

.nta-team__member:hover .nta-team__portrait > img {
    transform: scale(1.04);
}

/* A turquoise wash that lifts on hover, so the grid feels alive without
   moving the layout around. */
.nta-team__sheen {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(6, 50, 59, 0) 42%, rgba(6, 50, 59, .42));
    opacity: 0;
    transition: opacity .45s var(--nta-ease);
}

.nta-team__member:hover .nta-team__sheen {
    opacity: 1;
}

.nta-team__caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 14px;
}

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

.nta-team__caption span {
    font-size: .875rem;
    color: var(--nta-muted);
}

.nta-team__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    margin-top: clamp(30px, 3.4vw, 48px);
    padding-top: clamp(26px, 3vw, 40px);
    border-top: 1px solid var(--nta-line);
}

.nta-team__foot p {
    max-width: 60ch;
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--nta-body);
}

/* =============================================================== 10. CTA == */

.nta-cta {
    padding-block: clamp(40px, 5vw, 72px);
}

.nta-cta__box {
    position: relative;
    padding: clamp(40px, 5.4vw, 78px) clamp(28px, 4.4vw, 76px);
    border-radius: var(--nta-radius-xl);
    background: linear-gradient(140deg, var(--nta-teal-700), var(--nta-teal-900) 62%, var(--nta-teal-800));
    color: rgba(255, 255, 255, .82);
    overflow: hidden;
}

.nta-cta__aura {
    position: absolute;
    top: -55%;
    right: -8%;
    width: min(620px, 58%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(82, 190, 200, .34), rgba(82, 190, 200, 0) 66%);
    pointer-events: none;
}

.nta-cta__body {
    position: relative;
    z-index: 2;
    max-width: 660px;
}

.nta-cta__title {
    margin: 0 0 .5em;
    color: var(--nta-white);
    font-size: clamp(1.75rem, 1.15rem + 2vw, 2.85rem);
    line-height: 1.12;
}

.nta-cta__text {
    margin: 0 0 30px;
    font-size: clamp(1rem, .97rem + .3vw, 1.125rem);
    line-height: 1.72;
}

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

.nta-cta .nta-btn--primary {
    --btn-bg: var(--nta-white);
    --btn-fg: var(--nta-teal-800);
}

.nta-cta .nta-btn--primary:hover {
    --btn-bg: var(--nta-teal-50);
}

.nta-cta .nta-btn--ghost {
    --btn-fg: var(--nta-white);
    --btn-bd: rgba(255, 255, 255, .4);
}

.nta-cta .nta-btn--ghost:hover {
    --btn-bg: rgba(255, 255, 255, .12);
}

.nta-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    color: rgba(255, 255, 255, .78);
    font-size: .9375rem;
    text-decoration: none;
    transition: color .3s var(--nta-ease);
}

.nta-cta__phone strong {
    color: var(--nta-white);
}

.nta-cta__phone:hover {
    color: var(--nta-white);
}

.nta-cta__phone svg {
    color: var(--nta-teal-300);
}

/* Panel style with a photograph on the right ------------------------------ */

.nta-cta--panel .nta-cta__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
    align-items: center;
    gap: clamp(30px, 4vw, 64px);
    padding-right: clamp(28px, 3vw, 46px);
}

.nta-cta__media {
    position: relative;
    z-index: 2;
    margin: 0;
    aspect-ratio: 4 / 3.2;
    border-radius: var(--nta-radius-lg);
    background: var(--nta-teal-800);
    box-shadow: var(--nta-shadow-lg);
    order: 2;
}

/* =========================================================== 11. RELATED == */

.nta-related__head {
    max-width: 680px;
    margin-bottom: clamp(30px, 3.6vw, 50px);
}

.nta-related__intro {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--nta-body);
}

.nta-related__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nta-related__card {
    position: relative;
    display: block;
    min-height: 340px;
    padding: 26px;
    border-radius: var(--nta-radius-lg);
    background: var(--nta-teal-800);
    color: var(--nta-white);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
}

/* A backdrop rather than an inline frame, so it keeps its own positioning
   instead of joining the shared `position: relative` frame rule above. */
.nta-w .nta-related__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.nta-w .nta-related__media > img {
    transition: transform .8s var(--nta-ease-out);
}

.nta-related__card:hover .nta-related__media > img {
    transform: scale(1.06);
}

.nta-related__veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(178deg, rgba(6, 50, 59, .18) 18%, rgba(6, 50, 59, .88) 78%);
    transition: background .5s var(--nta-ease);
}

.nta-related__card:hover .nta-related__veil {
    background: linear-gradient(178deg, rgba(6, 50, 59, .3) 8%, rgba(9, 95, 106, .92) 78%);
}

.nta-related__body {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 288px;
    justify-content: flex-end;
}

.nta-related__ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--nta-white);
}

.nta-related__card-title {
    font-family: var(--nta-font-head);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.28;
}

.nta-related__card-text {
    margin-top: 8px;
    font-size: .9375rem;
    line-height: 1.62;
    color: rgba(255, 255, 255, .82);
}

.nta-related__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--nta-teal-300);
}

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

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

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

@media (max-width: 1180px) {
    .nta-grid__list {
        grid-template-columns: repeat(min(var(--cols, 3), 3), minmax(0, 1fr));
    }

    .nta-route--rail .nta-route__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    /* With the row broken up, a rail across it would connect the wrong cards. */
    .nta-route--rail .nta-route__item::before {
        display: none;
    }
}

@media (max-width: 1024px) {
    .nta-phero--split .nta-phero__inner,
    .nta-feature__inner,
    .nta-profile__inner,
    .nta-article__inner,
    .nta-costs__body,
    .nta-route--column .nta-route__inner,
    .nta-cta--panel .nta-cta__box {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Order overrides only make sense while there are two columns. */
    .nta-feature--flip .nta-feature__body,
    .nta-profile--flip .nta-profile__visual,
    .nta-cta__media {
        order: 0;
    }

    .nta-phero__frame {
        aspect-ratio: 4 / 3;
    }

    .nta-profile__media {
        aspect-ratio: 4 / 3.4;
        border-radius: var(--nta-radius-xl);
        max-width: 520px;
    }

    .nta-profile--solo .nta-profile__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .nta-profile--solo .nta-profile__facts {
        grid-column: 1;
        grid-row: auto;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 18px 40px;
    }

    .nta-profile--solo .nta-profile__facts div + div {
        padding-top: 0;
        border-top: 0;
    }

    .nta-article__sticky,
    .nta-route--column .nta-route__head {
        position: static;
    }

    .nta-article__inner {
        gap: 40px;
    }

    /* The jump list is redundant once the aside sits under the text. */
    .nta-article__nav {
        display: none;
    }

    .nta-article__sticky {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        display: grid;
        align-items: start;
    }

    .nta-team__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nta-related__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nta-costs__disclaimer {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .nta-costs__disclaimer .nta-btn {
        grid-column: 2;
        justify-self: start;
    }
}

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

    .nta-route--rail .nta-route__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .nta-route--rail .nta-route__item {
        padding-top: 0;
        padding-left: 38px;
    }

    .nta-route--rail .nta-route__dot {
        top: 24px;
        left: 0;
    }

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

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

    .nta-related__card {
        min-height: 280px;
    }

    .nta-related__body {
        min-height: 228px;
    }

    .nta-profile__facts {
        gap: 18px 28px;
    }

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

    .nta-costs__row {
        flex-direction: column;
        gap: 8px;
    }

    .nta-phero__badge {
        position: static;
        max-width: none;
        margin-top: 16px;
    }
}

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

    .nta-phero__actions .nta-btn,
    .nta-cta__actions .nta-btn {
        width: 100%;
    }
}

/* ===================================================== 13. REDUCED MOTION = */

@media (prefers-reduced-motion: reduce) {
    .nta-team__member:hover .nta-team__portrait > img,
    .nta-related__card:hover .nta-related__media > img,
    .nta-grid__item:hover .nta-grid__card,
    .nta-route__item:hover .nta-route__card {
        transform: none;
    }

    .nta-article__nav a::before {
        transition: none;
    }
}

/* ================================== 14. CONTACT — FORM ONLY VARIANT ======= */

/* The sign-up page reuses the contact widget but without the address column,
   so the form gets the full width of the shell. */
.nta-contact--form .nta-contact__grid {
    grid-template-columns: minmax(0, 820px);
    justify-content: center;
}

/* ==================================== 15. ARTICLE - SOURCE REFERENCE ====== */

/* A quiet outbound reference under a block. Kept visually secondary so it
   reads as a citation rather than a call to action. */
.nta-article__source {
    display: flex;
    align-items: baseline;
    gap: 9px;
    max-width: 68ch;
    margin: 0 0 1.1em;
    font-size: .9375rem;
    line-height: 1.6;
}

.nta-article__source svg {
    flex: none;
    transform: translateY(2px);
    color: var(--nta-muted);
}

.nta-article__source a {
    color: var(--nta-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--nta-teal-200);
    transition: text-decoration-color .3s var(--nta-ease);
}

.nta-article__source a:hover {
    text-decoration-color: var(--nta-primary);
}

/* ========================================================== 16. REVIEWS === */

/* Two columns of cards drifting slowly past a score panel. The panel figures
   are derived from the cards, so the number and the quotes cannot disagree. */

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

/* A faint dot grid, the same device as the reference layout. */
.nta-reviews__grain {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(12, 123, 136, .1) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .5;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
    pointer-events: none;
}

.nta-reviews > .nta-shell {
    position: relative;
    z-index: 2;
}

.nta-reviews__head {
    max-width: 640px;
    margin: 0 auto clamp(34px, 4vw, 58px);
    text-align: center;
}

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

.nta-reviews__title {
    margin: 0 0 16px;
    font-size: clamp(1.9rem, 1.15rem + 2.4vw, 3.15rem);
    line-height: 1.1;
    letter-spacing: -.02em;
}

/* The accent word is underscored rather than boxed, so the heading keeps the
   flat treatment the rest of the site uses. */
.nta-reviews__title span {
    position: relative;
    color: var(--nta-primary);
    white-space: nowrap;
}

.nta-reviews__title span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.08em;
    height: 3px;
    border-radius: 3px;
    background: var(--nta-teal-200);
}

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

/* --------------------------------------------------------------- Stage --- */

.nta-reviews__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px) minmax(0, 1fr);
    gap: clamp(16px, 2vw, 30px);
    align-items: start;
}

.nta-reviews__col {
    display: grid;
    gap: clamp(14px, 1.6vw, 20px);
}

.nta-reviews__track {
    display: grid;
    gap: clamp(14px, 1.6vw, 20px);
}

/* The clone below the track makes the loop seamless; it is hidden from
   assistive technology so the quotes are not announced twice. */
.nta-reviews--drift .nta-reviews__col {
    max-height: 640px;
    overflow: hidden;
    mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
}

.nta-reviews--drift .nta-reviews__track {
    animation: nta-reviews-drift 46s linear infinite;
}

.nta-reviews--drift .nta-reviews__col--alt .nta-reviews__track {
    animation-direction: reverse;
}

.nta-reviews--drift .nta-reviews__col:hover .nta-reviews__track,
.nta-reviews--drift .nta-reviews__col:focus-within .nta-reviews__track {
    animation-play-state: paused;
}

@keyframes nta-reviews-drift {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

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

.nta-reviews__card {
    padding: clamp(20px, 2.2vw, 28px);
    border-radius: var(--nta-radius-lg);
    background: var(--nta-white);
    box-shadow: var(--nta-shadow-sm);
    transition: transform .4s var(--nta-ease-out), box-shadow .4s var(--nta-ease-out);
}

.nta-reviews__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--nta-shadow-md);
}

.nta-reviews__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.nta-reviews__stars {
    display: inline-flex;
    gap: 2px;
}

.nta-reviews__star {
    display: inline-flex;
    color: var(--nta-teal-200);
}

.nta-reviews__star.is-on {
    color: var(--nta-teal-500);
}

.nta-reviews__star svg {
    fill: currentColor;
    stroke-width: 1.2;
}

.nta-reviews__quote {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 11px;
    background: var(--nta-teal-50);
    color: var(--nta-teal-300);
}

.nta-reviews__badge {
    display: inline-block;
    margin: 0 0 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--nta-teal-50);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nta-teal-700);
}

.nta-reviews__card-title {
    margin: 0 0 .5em;
    font-size: 1.0625rem;
    line-height: 1.35;
}

.nta-reviews__text {
    margin: 0 0 20px;
    font-size: .9375rem;
    line-height: 1.72;
    color: var(--nta-body);
}

.nta-reviews__by {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding-top: 16px;
    border-top: 1px solid var(--nta-line-soft);
}

.nta-reviews__avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--nta-teal-50);
    font-family: var(--nta-font-head);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--nta-primary);
}

.nta-reviews__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

.nta-reviews__who small {
    font-size: .75rem;
    color: var(--nta-muted);
}

.nta-reviews__verified {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--nta-teal-500);
    color: var(--nta-white);
}

/* --------------------------------------------------------------- Panel --- */

.nta-reviews__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: clamp(26px, 2.8vw, 36px) clamp(20px, 2.2vw, 28px);
    border-radius: var(--nta-radius-xl);
    background: linear-gradient(160deg, var(--nta-teal-800), var(--nta-teal-900) 58%, var(--nta-teal-700));
    color: rgba(255, 255, 255, .8);
    box-shadow: 0 30px 70px rgba(6, 50, 59, .28);
    overflow: hidden;
    position: sticky;
    top: 40px;
}

.nta-reviews__aura {
    position: absolute;
    top: -42%;
    left: 50%;
    width: 130%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(82, 190, 200, .3), rgba(82, 190, 200, 0) 62%);
    pointer-events: none;
}

.nta-reviews__score {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: clamp(150px, 15vw, 186px);
    aspect-ratio: 1;
}

.nta-reviews__score svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.nta-reviews__score circle {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
}

.nta-reviews__ring-bg {
    stroke: rgba(255, 255, 255, .12);
}

/* 2 * pi * r, so the dash can be driven by a plain percentage. */
.nta-reviews__ring {
    stroke: var(--nta-teal-400);
    stroke-dasharray: 326.7;
    stroke-dashoffset: calc(326.7 - (326.7 * var(--pct, 100) / 100));
    filter: drop-shadow(0 0 10px rgba(82, 190, 200, .5));
}

.nta-reviews__score-value {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.nta-reviews__score-value strong {
    font-family: var(--nta-font-head);
    font-size: clamp(2.4rem, 1.6rem + 2.2vw, 3.2rem);
    font-weight: 600;
    color: var(--nta-white);
}

.nta-reviews__score-value small {
    margin-top: 8px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.nta-reviews__stats {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nta-reviews__stats li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    border-radius: var(--nta-radius);
    background: rgba(255, 255, 255, .07);
}

.nta-reviews__stat-ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    color: var(--nta-teal-300);
}

.nta-reviews__stats strong {
    display: block;
    font-family: var(--nta-font-head);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--nta-white);
    line-height: 1.2;
}

.nta-reviews__stats small {
    display: block;
    font-size: .75rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .6);
}

.nta-reviews__source {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--nta-radius);
    background: var(--nta-white);
    color: var(--nta-ink) !important;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .3s var(--nta-ease-out);
}

a.nta-reviews__source:hover {
    transform: translateY(-2px);
}

.nta-reviews__source .nta-reviews__star.is-on {
    color: var(--nta-teal-500);
}

.nta-reviews__source svg {
    color: var(--nta-muted);
}

.nta-reviews__panel-note {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.6;
    text-align: center;
    color: rgba(255, 255, 255, .62);
}

.nta-reviews__panel .nta-btn {
    position: relative;
    z-index: 2;
    width: 100%;
}

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

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

    /* The panel moves to the top so the score is read before the quotes. */
    .nta-reviews__panel {
        grid-column: 1 / -1;
        grid-row: 1;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 22px 30px;
        margin-bottom: clamp(16px, 2vw, 26px);
    }

    .nta-reviews__stats {
        width: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex: 1;
        min-width: 300px;
    }

    .nta-reviews__source,
    .nta-reviews__panel .nta-btn {
        width: auto;
        flex: none;
    }

    .nta-reviews--drift .nta-reviews__col {
        max-height: 560px;
    }
}

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

    /* One column of quotes reads better than two narrow ones, and the drift
       would fight with the page scroll. */
    .nta-reviews--drift .nta-reviews__col {
        max-height: none;
        overflow: visible;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .nta-reviews--drift .nta-reviews__track {
        animation: none;
    }

    .nta-reviews__col--alt .nta-reviews__card:nth-child(n + 3),
    .nta-reviews__col .nta-reviews__card[aria-hidden="true"] {
        display: none;
    }

    .nta-reviews__stats {
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nta-reviews--drift .nta-reviews__track {
        animation: none;
    }

    .nta-reviews--drift .nta-reviews__col {
        max-height: none;
        overflow: visible;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .nta-reviews__card[aria-hidden="true"] {
        display: none;
    }
}

/* ============================================ 17. HERO WITH A FORM ======== */

/* On the sign up and contact pages the visual column carries the form itself,
   so the first screen already contains the action instead of pointing at it. */

.nta-phero--split .nta-phero__visual--form {
    align-self: stretch;
}

.nta-phero__formcard {
    padding: clamp(24px, 2.6vw, 38px);
    border-radius: var(--nta-radius-xl);
    background: var(--nta-white);
    border: 1px solid var(--nta-line);
    box-shadow: var(--nta-shadow-lg);
}

.nta-phero__form-title {
    margin: 0 0 8px;
    font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
    line-height: 1.25;
}

.nta-phero__form-text {
    margin: 0 0 22px;
    font-size: .9375rem;
    line-height: 1.66;
    color: var(--nta-body);
}

/* The form sits in a narrower column than on the contact block, so the two
   name fields stack rather than squeeze. */
.nta-phero__formcard .nta-form__row {
    grid-template-columns: minmax(0, 1fr);
}

.nta-phero__form-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 18px 0 0;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--nta-muted);
}

.nta-phero__form-note svg {
    flex: none;
    margin-top: .15em;
    color: var(--nta-accent);
}

/* On a wide screen there is room for the paired fields after all. */
@media (min-width: 1200px) {
    .nta-phero__formcard .nta-form__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    /* Stacked, the form belongs under the copy it supports. */
    .nta-phero--split .nta-phero__visual--form {
        order: 2;
    }

    .nta-phero__formcard {
        max-width: 640px;
    }
}

/* The contact block below no longer repeats the form, so the details and the
   map share the full width instead of leaving a hole on the right. */
.nta-contact--info .nta-contact__grid {
    grid-template-columns: minmax(0, 1fr);
}

/* ================================ 18. ALERT — ALARMSIGNALEN / SPOED ======= */

/* The signal list and the phone panel sit side by side so the number stays in
   view next to the symptom that prompted the call. Below 900px the panel moves
   under the list rather than shrinking, keeping the number tappable. */

.nta-alert__head {
    max-width: 720px;
    margin-bottom: clamp(28px, 3.4vw, 44px);
}

.nta-alert__intro {
    margin: 0;
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
    line-height: 1.72;
    color: var(--nta-body);
}

.nta-alert__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 34px);
    align-items: start;
}

.nta-alert__inner--solo {
    grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------- Signals -- */

.nta-alert__signals {
    padding: clamp(26px, 2.8vw, 40px);
    border-radius: var(--nta-radius-lg);
    border: 1px solid var(--nta-line);
    background: var(--nta-white);
    box-shadow: var(--nta-shadow-sm);
}

.nta-alert--urgent .nta-alert__signals {
    border-color: #f2d6cd;
    background: linear-gradient(180deg, #fdf6f3 0%, var(--nta-white) 62%);
}

/* Aandachtspunt: dezelfde opbouw, maar in de huisstijlkleur. Geeft een
   procedure of toelichting gewicht zonder alarm te slaan. */
.nta-alert--calm .nta-alert__signals {
    border-color: var(--nta-teal-200);
    background: linear-gradient(180deg, var(--nta-teal-50) 0%, var(--nta-white) 62%);
}

.nta-alert__signals-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px;
    font-family: var(--nta-font-head);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--nta-ink);
}

.nta-alert__signals-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--nta-teal-50);
    color: var(--nta-primary);
}

.nta-alert--urgent .nta-alert__signals-ico {
    background: #fbe7e0;
    color: #b4472a;
}

.nta-alert__list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nta-alert__list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--nta-line-soft);
}

.nta-alert__list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.nta-alert__bullet {
    flex: none;
    width: 9px;
    height: 9px;
    margin-top: .5em;
    border-radius: 50%;
    background: var(--nta-accent);
}

.nta-alert--urgent .nta-alert__bullet {
    background: #d8623c;
}

.nta-alert__body {
    display: grid;
    gap: 4px;
}

.nta-alert__body strong {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--nta-ink);
}

.nta-alert__body small {
    font-size: .9063rem;
    line-height: 1.66;
    color: var(--nta-body);
}

.nta-alert__note {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--nta-line-soft);
    font-size: .9375rem;
    line-height: 1.68;
    color: var(--nta-muted);
}

/* ----------------------------------------------------------------- Panel -- */

.nta-alert__panel {
    position: sticky;
    top: calc(var(--nta-header-h) + 24px);
    padding: clamp(26px, 2.8vw, 36px);
    border-radius: var(--nta-radius-lg);
    background: var(--nta-deep);
    color: var(--nta-white);
    box-shadow: var(--nta-shadow-md);
}

.nta-alert__panel-ico {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .12);
    color: var(--nta-teal-300);
}

.nta-alert__panel-title {
    margin: 0 0 .5em;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--nta-white);
}

.nta-alert__panel-text {
    margin: 0 0 20px;
    font-size: .9375rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, .78);
}

.nta-alert__phone {
    display: inline-block;
    font-family: var(--nta-font-head);
    font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--nta-white);
    text-decoration: none;
    transition: color .3s var(--nta-ease);
}

.nta-alert__phone:hover,
.nta-alert__phone:focus-visible {
    color: var(--nta-teal-300);
}

.nta-alert__hours {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 0;
    font-size: .875rem;
    line-height: 1.64;
    color: rgba(255, 255, 255, .66);
}

.nta-alert__hours svg {
    flex: none;
    margin-top: .18em;
    color: var(--nta-teal-300);
}

/* The ghost button reads as an outline on the dark panel. */
.nta-alert__panel .nta-btn--ghost {
    margin-top: 22px;
    border-color: rgba(255, 255, 255, .28);
    color: var(--nta-white);
}

.nta-alert__panel .nta-btn--ghost:hover,
.nta-alert__panel .nta-btn--ghost:focus-visible {
    border-color: var(--nta-teal-300);
    background: rgba(255, 255, 255, .08);
    color: var(--nta-white);
}

/* ==================================== 19. NEWS — NIEUWS EN VACATURES ====== */

.nta-news__head,
.nta-news__jobs-head {
    max-width: 720px;
    margin-bottom: clamp(30px, 3.6vw, 48px);
}

.nta-news__intro,
.nta-news__jobs-intro {
    margin: 0;
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
    line-height: 1.72;
    color: var(--nta-body);
}

.nta-news__list {
    display: grid;
    /* auto-fill, niet auto-fit: bij één bericht blijven de lege kolommen staan,
       zodat die ene kaart een derde van de breedte houdt in plaats van uit te
       rekken over de volle shell (waardoor het beeld enorm werd). */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: clamp(18px, 2vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nta-news__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: var(--nta-radius-lg);
    background: var(--nta-white);
    box-shadow: var(--nta-shadow-sm);
    transition: transform .4s var(--nta-ease-out), box-shadow .4s var(--nta-ease-out);
}

.nta-news__item:hover .nta-news__card {
    transform: translateY(-4px);
    box-shadow: var(--nta-shadow-md);
}

.nta-news__media {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    /* Harde bovengrens, zodat een brede kaart het beeld nooit kan opblazen. */
    max-height: 260px;
    overflow: hidden;
    background: var(--nta-teal-50);
}

.nta-news__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--nta-ease-out);
}

.nta-news__item:hover .nta-news__media img {
    transform: scale(1.04);
}

/* Date badge: day large, month and year small, so a card scans as a diary
   entry before the headline is read. */
.nta-news__date {
    position: absolute;
    top: 14px;
    left: 14px;
    display: grid;
    justify-items: center;
    gap: 1px;
    min-width: 62px;
    padding: 10px 12px;
    border-radius: var(--nta-radius);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
    box-shadow: var(--nta-shadow-sm);
}

.nta-news__date strong {
    font-family: var(--nta-font-head);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1;
    color: var(--nta-ink);
}

.nta-news__date span {
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--nta-primary);
}

.nta-news__date small {
    font-size: .6875rem;
    line-height: 1;
    color: var(--nta-muted);
}

/* Without a photo the badge sits in the flow above the headline. */
.nta-news__date--inline {
    position: static;
    justify-items: start;
    width: max-content;
    margin-bottom: 16px;
    padding: 0;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
}

.nta-news__date--inline strong {
    font-size: 1.75rem;
}

.nta-news__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(22px, 2.2vw, 30px);
}

.nta-news__card-title {
    margin: 0 0 .55em;
    font-size: 1.125rem;
    line-height: 1.36;
}

.nta-news__card-title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size .4s var(--nta-ease-out), color .3s var(--nta-ease);
}

.nta-news__item:hover .nta-news__card-title a {
    background-size: 100% 1px;
    color: var(--nta-primary);
}

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

.nta-news__link {
    margin-top: auto;
    padding-top: 20px;
}

.nta-news__empty {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 72ch;
    margin: 0;
    padding: clamp(22px, 2.4vw, 30px);
    border-radius: var(--nta-radius-lg);
    border: 1px dashed var(--nta-line);
    font-size: .9688rem;
    line-height: 1.7;
    color: var(--nta-muted);
}

.nta-news__empty svg {
    flex: none;
    margin-top: .18em;
    color: var(--nta-accent);
}

/* -------------------------------------------------------------- Vacancies - */

.nta-news__jobs {
    margin-top: clamp(56px, 7vw, 104px);
    padding-top: clamp(48px, 6vw, 88px);
    border-top: 1px solid var(--nta-line);
}

.nta-news__joblist {
    display: grid;
    gap: clamp(14px, 1.6vw, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nta-news__job {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(16px, 2vw, 28px);
    align-items: center;
    padding: clamp(22px, 2.4vw, 32px);
    border-radius: var(--nta-radius-lg);
    border: 1px solid var(--nta-line);
    background: var(--nta-white);
    transition: border-color .4s var(--nta-ease), box-shadow .4s var(--nta-ease-out), transform .4s var(--nta-ease-out);
}

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

.nta-news__job-ico {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: var(--nta-teal-50);
    color: var(--nta-primary);
    transition: background .4s var(--nta-ease), color .4s var(--nta-ease);
}

.nta-news__job:hover .nta-news__job-ico {
    background: var(--nta-primary);
    color: var(--nta-white);
}

.nta-news__job-title {
    margin: 0 0 .4em;
    font-size: 1.1875rem;
    line-height: 1.3;
}

.nta-news__job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.nta-news__job-meta li {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--nta-mist);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--nta-primary);
}

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

.nta-news__job-link {
    white-space: nowrap;
}

/* Open application block, shown when there is no vacancy on file. */
.nta-news__open {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(18px, 2.2vw, 30px);
    align-items: center;
    padding: clamp(26px, 3vw, 40px);
    border-radius: var(--nta-radius-lg);
    background: var(--nta-mist);
}

.nta-news__open-ico {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 17px;
    background: var(--nta-white);
    color: var(--nta-primary);
    box-shadow: var(--nta-shadow-sm);
}

.nta-news__open h3 {
    margin: 0 0 .45em;
    font-size: 1.1875rem;
    line-height: 1.3;
}

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

.nta-news__jobs-cta {
    margin-top: clamp(26px, 3vw, 38px);
}

/* Dark tone -------------------------------------------------------------- */

.nta-section--deep .nta-news__card,
.nta-section--deep .nta-news__job {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
}

.nta-section--deep .nta-news__body p,
.nta-section--deep .nta-news__job-body p,
.nta-section--deep .nta-news__intro,
.nta-section--deep .nta-news__jobs-intro {
    color: rgba(255, 255, 255, .76);
}

.nta-section--deep .nta-news__jobs {
    border-top-color: rgba(255, 255, 255, .14);
}

/* ============================ 20. BREAKPOINTS — ALERT AND NEWS =========== */

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

    /* Sticky loses its purpose once the panel is stacked. */
    .nta-alert__panel {
        position: static;
    }

    .nta-news__job,
    .nta-news__open {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .nta-news__job-link,
    .nta-news__open .nta-btn {
        grid-column: 2;
        justify-self: start;
    }
}

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

    .nta-news__job-link,
    .nta-news__open .nta-btn {
        grid-column: 1;
    }
}