/*
 * JeCo GmbH website stylesheet
 */

/* ==========================================================================
   1. Local fonts and design variables
   ========================================================================== */

@font-face {
    font-family: Inter;
    src: url('../fonts/inter-latin-400.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url('../fonts/inter-latin-500.woff2') format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url('../fonts/inter-latin-600.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: Manrope;
    src: url('../fonts/manrope-latin-500.woff2') format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: Manrope;
    src: url('../fonts/manrope-latin-600.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: Manrope;
    src: url('../fonts/manrope-latin-700.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --ink: #10233d;
    --ink-soft: #52657a;
    --blue-950: #0d2e50;
    --blue-900: #153a68;
    --blue-800: #2c4b91;
    --blue-600: #4f84bb;
    --blue-400: #66a2d6;
    --blue-200: #c9dfef;
    --blue-100: #e9f3f9;
    --blue-50: #f5f9fc;
    --white: #fff;
    --line: #dbe7ef;
    --shadow: 0 22px 60px rgba(13,46,80,.11);
    --shadow-soft: 0 12px 32px rgba(13,46,80,.08);
    --radius: 24px;
    --radius-small: 14px;
    --shell: min(1180px,calc(100% - 40px));
    --font-body: Inter,Arial,sans-serif;
    --font-display: Manrope,Arial,sans-serif;
}

/* ==========================================================================
   2. Global foundations, layout helpers and typography
   ========================================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
    text-decoration-thickness: .08em;
    text-underline-offset: .2em;
}

button,
input,
textarea,
select {
    font: inherit;
}

.shell {
    width: var(--shell);
    margin-inline: auto;
}

.section {
    padding: clamp(72px,9vw,124px) 0;
}

.section-soft {
    background: linear-gradient(180deg,var(--blue-50),#eef6fb);
}

.section-dark {
    background: var(--blue-950);
    color: var(--white);
}

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

.skip-link {
    position: fixed;
    z-index: 1000;
    left: 16px;
    top: 16px;
    padding: 10px 16px;
    background: var(--white);
    color: var(--blue-900);
    border-radius: 8px;
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: none;
}

.eyebrow,
.micro-label {
    margin: 0 0 14px;
    color: var(--blue-600);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.eyebrow.light {
    color: #9cc8e8;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    letter-spacing: -.035em;
    line-height: 1.12;
    margin-top: 0;
}

h1 {
    font-size: clamp(2.75rem,6vw,5.6rem);
    max-width: 15ch;
    margin-bottom: 28px;
}

h2 {
    font-size: clamp(2rem,3.7vw,3.35rem);
    margin-bottom: 22px;
}

h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

p {
    margin: 0 0 1.2em;
    color: var(--ink-soft);
}

.lead {
    font-size: clamp(1.08rem,1.8vw,1.35rem);
    line-height: 1.65;
    max-width: 760px;
}

.large-copy {
    font-size: 1.22rem;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Buttons and text links
   -------------------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border: 1px solid var(--blue-900);
    border-radius: 999px;
    background: var(--blue-900);
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
    transition: .22s ease;
    box-shadow: 0 9px 24px rgba(21,58,104,.18);
}

.button:hover {
    transform: translateY(-2px);
    background: var(--blue-800);
    border-color: var(--blue-800);
}

.button:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--blue-400);
    outline-offset: 4px;
}

.button-small {
    min-height: 38px;
    padding-inline: 14px;
    font-size: .84rem;
}

.button-ghost {
    background: transparent;
    color: var(--blue-900);
    box-shadow: none;
}

.button-ghost:hover {
    color: var(--white);
}

.button-light {
    background: var(--white);
    color: var(--blue-950);
    border-color: var(--white);
}

.button-light:hover {
    background: var(--blue-100);
    color: var(--blue-950);
    border-color: var(--blue-100);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.text-link {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: var(--blue-800);
    font-weight: 700;
    text-decoration: none;
}

.text-link span {
    transition: transform .2s;
}

.text-link:hover span {
    transform: translateX(4px);
}

/* ==========================================================================
   3. Utility bar and main navigation
   ========================================================================== */

.utility-bar {
    background: var(--blue-950);
    color: #dcebf6;
    font-size: .78rem;
}

.utility-inner {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.utility-links {
    display: flex;
    gap: 22px;
}

.utility-links a {
    text-decoration: none;
    color: #fff;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid rgba(219,231,239,.85);
    backdrop-filter: blur(18px);
}

.nav-shell {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    margin-right: 24px;
    text-decoration: none;
    flex: 0 0 auto;
}

.brand img {
    width: 120px;
    height: auto;
    max-height: 86px;
    object-fit: contain;
}

.nav-panel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 1;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: clamp(6px,0.65vw,12px);
}

.primary-nav a {
    position: relative;
    padding: 10px 0;
    color: #38506b;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.primary-nav a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    height: 2px;
    background: var(--blue-400);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s;
}

.primary-nav a:hover:after,
.primary-nav a.is-active:after {
    transform: scaleX(1);
}

.primary-nav a.is-active {
    color: var(--blue-900);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-switcher {
    display: flex;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--blue-50);
}

.language-switcher a {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
}

.language-switcher a[aria-current=true] {
    background: var(--white);
    color: var(--blue-900);
    box-shadow: 0 3px 12px rgba(13,46,80,.1);
}

.menu-toggle {
    display: none;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
}

.menu-toggle span:not(.sr-only) {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    background: var(--blue-900);
    transition: .2s;
}

/* ==========================================================================
   4. Home page: hero, trust bar and content sections
   ========================================================================== */

.home-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(80px,10vw,145px) 0;
    background: radial-gradient(circle at 78% 30%,rgba(102,162,214,.24),transparent 28%),linear-gradient(145deg,#f9fcfe 0%,#eef6fb 55%,#e3f0f8 100%);
}

.home-hero:before {
    content: "";
    position: absolute;
    right: -8%;
    bottom: -45%;
    width: 580px;
    height: 580px;
    border: 1px solid rgba(79,132,187,.22);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(79,132,187,.04),0 0 0 140px rgba(79,132,187,.025);
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1.12fr) minmax(340px,.72fr);
    gap: clamp(48px,8vw,110px);
    align-items: center;
}

.hero-copy h1 {
    color: var(--blue-950);
}

.compliance-card {
    position: relative;
    overflow: hidden;
    padding: 40px;
    border: 1px solid rgba(102,162,214,.28);
    border-radius: 32px;
    background: rgba(255,255,255,.86);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

.compliance-card>img {
    width: 82px;
    margin-bottom: 28px;
}

.compliance-card>p:not(.micro-label) {
    color: #40576f;
}

.compliance-card dl {
    margin: 26px 0;
    display: grid;
    gap: 12px;
}

.compliance-card dl div {
    padding: 13px 15px;
    border-radius: 12px;
    background: var(--blue-50);
}

.compliance-card dt {
    font-size: .72rem;
    font-weight: 800;
    color: var(--blue-600);
}

.compliance-card dd {
    margin: 3px 0 0;
    font-size: .78rem;
    overflow-wrap: anywhere;
}

.compliance-card dl div:first-child {
    padding-right: 8px;
}

.compliance-card dl div:first-child dd {
    font-size: .74rem;
    letter-spacing: -.015em;
    white-space: nowrap;
}

.compliance-orbit {
    position: absolute;
    right: -80px;
    top: -100px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(102,162,214,.28);
    border-radius: 50%;
}

.compliance-orbit span {
    position: absolute;
    inset: 35px;
    border: 1px solid rgba(102,162,214,.2);
    border-radius: 50%;
}

.compliance-orbit span+span {
    inset: 70px;
}

.signal-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.signal-row span,
.tag-cloud li {
    padding: 8px 12px;
    border: 1px solid var(--blue-200);
    border-radius: 999px;
    background: var(--white);
    color: var(--blue-900);
    font-size: .75rem;
    font-weight: 600;
}

.trust-bar {
    border-block: 1px solid var(--line);
    background: var(--white);
}

.trust-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--ink-soft);
    font-size: .86rem;
}

.trust-inner strong {
    color: var(--blue-900);
}

.trust-inner span:before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--blue-400);
}

.split-heading {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 52px;
}

.split-heading h2 {
    margin-bottom: 0;
}

.split-heading>p {
    font-size: 1.05rem;
}

.card-grid {
    display: grid;
    gap: 22px;
}

.three-up {
    grid-template-columns: repeat(3,1fr);
}

.two-up {
    grid-template-columns: repeat(2,1fr);
}

.number-card {
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.number-card>span {
    display: inline-block;
    margin-bottom: 42px;
    color: var(--blue-400);
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 700;
}

.number-card p {
    margin-bottom: 0;
}

.portfolio-feature {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: start;
}

.portfolio-feature > div:first-child {
    padding-top: 12px;
}

.tag-cloud {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag-cloud li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 14px 18px;
    text-align: center;
    font-size: .9rem;
    line-height: 1.35;
    box-shadow: 0 8px 20px rgba(13,46,80,.05);
}

.portfolio-content {
    min-width: 0;
}

.portfolio-detail {
    margin-top: 32px;
    padding-top: 26px;
    border-top: 1px solid var(--blue-200);
}

.portfolio-detail-label {
    margin: 0 0 14px;
    color: var(--blue-600);
    font-family: var(--font-body);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
}

.portfolio-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portfolio-detail-grid li {
    position: relative;
    padding: 10px 0 10px 18px;
    border-bottom: 1px solid rgba(201,223,239,.75);
    color: var(--ink-soft);
    font-size: .88rem;
    line-height: 1.45;
}

.portfolio-detail-grid li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.05rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue-400);
}

.portfolio-accordion-list {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.portfolio-accordion {
    border: 1px solid var(--blue-200);
    border-radius: 14px;
    background: rgba(255,255,255,.76);
    overflow: hidden;
    box-shadow: 0 7px 18px rgba(13,46,80,.035);
}

.portfolio-accordion summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 52px;
    padding: 12px 48px 12px 16px;
    color: var(--blue-900);
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.portfolio-accordion summary::-webkit-details-marker {
    display: none;
}

.portfolio-accordion summary:after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--blue-100);
    color: var(--blue-800);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1;
    transform: translateY(-50%);
}

.portfolio-accordion[open] summary {
    border-bottom: 1px solid rgba(201,223,239,.8);
    background: rgba(255,255,255,.92);
}

.portfolio-accordion[open] summary:after {
    content: "−";
}

.portfolio-accordion ul {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px 24px;
    margin: 0;
    padding: 16px 20px 18px;
    list-style: none;
}

.portfolio-accordion li {
    position: relative;
    padding-left: 15px;
    color: var(--ink-soft);
    font-size: .83rem;
    line-height: 1.45;
}

.portfolio-accordion li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .58em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--blue-400);
}

.portfolio-detail-grid-static {
    margin-top: 4px;
}

.partner-band {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 80px;
    align-items: center;
}

.partner-visual {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,var(--white) 0 26%,transparent 27%),radial-gradient(circle at center,var(--blue-100),#e0edf6);
    border: 1px solid var(--blue-200);
    display: grid;
    place-items: center;
    max-width: 430px;
}

.partner-visual span {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.partner-visual span img {
    display: block;
    width: 88px;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(13,46,80,.06));
}

.partner-visual i {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blue-400);
    box-shadow: 0 0 0 9px var(--white);
}

.partner-visual i:nth-of-type(1) {
    top: 14%;
    left: 48%;
}

.partner-visual i:nth-of-type(2) {
    right: 15%;
    top: 48%;
}

.partner-visual i:nth-of-type(3) {
    bottom: 14%;
    left: 48%;
}

.partner-visual i:nth-of-type(4) {
    left: 15%;
    top: 48%;
}

.section-cta {
    padding-top: 0;
}

.cta-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 50px;
    border-radius: 30px;
    background: linear-gradient(135deg,var(--blue-950),var(--blue-800));
    color: var(--white);
    box-shadow: var(--shadow);
}

.cta-panel h2 {
    font-size: clamp(1.8rem,3vw,2.65rem);
    margin-bottom: 12px;
}

.cta-panel p {
    margin: 0;
    color: #d5e7f4;
    max-width: 680px;
}

/* ==========================================================================
   5. General subpage hero and company page
   ========================================================================== */

.page-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(76px,9vw,125px) 0;
    background: linear-gradient(140deg,#f8fbfd,#eaf4fa);
}

.page-hero-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 70px;
    align-items: center;
}

.page-hero h1 {
    font-size: clamp(2.7rem,5vw,4.9rem);
}

.path-mark {
    position: relative;
    width: 280px;
    height: 220px;
    margin-left: auto;
}

.path-mark:before,
.path-mark:after,
.path-mark span {
    content: "";
    position: absolute;
    border-radius: 999px;
    transform: rotate(-36deg);
    transform-origin: center;
}

.path-mark:before {
    width: 240px;
    height: 34px;
    right: 0;
    top: 20px;
    background: var(--blue-900);
}

.path-mark:after {
    width: 205px;
    height: 24px;
    right: 32px;
    top: 91px;
    background: var(--blue-400);
}

.path-mark span:nth-child(1) {
    width: 142px;
    height: 15px;
    right: 48px;
    top: 158px;
    background: #a6cee8;
}

.story-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 90px;
    align-items: start;
}

.story-grid blockquote {
    margin: 0;
    padding: 40px;
    border-left: 5px solid var(--blue-400);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--blue-50);
    color: var(--blue-900);
    font-family: var(--font-display);
    font-size: clamp(1.45rem,2.6vw,2.2rem);
    line-height: 1.45;
}

.section-heading {
    max-width: 760px;
    margin-bottom: 40px;
}

.person-card {
    padding: 38px;
    border-radius: var(--radius);
    background: var(--white);
    border: 1px solid var(--line);
}

.initials {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 28px;
    border-radius: 50%;
    background: var(--blue-900);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
}

.person-card .role {
    color: var(--blue-600);
    font-weight: 600;
}

.person-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
}

.person-email,
.person-website {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 0;
    padding: 8px 13px;
    border: 1px solid var(--blue-200);
    border-radius: 999px;
    background: var(--blue-50);
    color: var(--blue-800);
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: .2s ease;
}

.person-email:before,
.person-website:before {
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--white);
    color: var(--blue-600);
    font-size: .72rem;
    font-weight: 800;
    box-shadow: 0 3px 10px rgba(13,46,80,.08);
}

.person-email:before {
    content: "@";
}

.person-website:before {
    content: "↗";
}

.person-email:hover,
.person-website:hover {
    border-color: var(--blue-400);
    background: var(--white);
    color: var(--blue-950);
    transform: translateY(-1px);
}

.timeline {
    border-top: 1px solid var(--line);
}

.timeline article {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 35px;
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
}

.timeline article>span {
    color: var(--blue-600);
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
}

.timeline h3 {
    margin-bottom: 8px;
}

.timeline p {
    margin: 0;
}

.values-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 42px 48px;
    border-radius: var(--radius);
    background: var(--blue-950);
    color: var(--white);
}

.values-panel h2 {
    margin: 0;
}

.values-panel div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.values-panel span {
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    color: #dcebf6;
}

/* ==========================================================================
   6. Partner and product range pages
   ========================================================================== */

.dual-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.line-card {
    padding: 28px 0;
    border-top: 1px solid var(--line);
}

.line-card:last-child {
    border-bottom: 1px solid var(--line);
}

.line-card h3 {
    color: var(--blue-900);
}

.feature-box {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 50px;
    align-items: center;
}

.feature-icon {
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    border-radius: 38px;
    background: linear-gradient(145deg,var(--blue-900),var(--blue-400));
    color: var(--white);
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 700;
    box-shadow: var(--shadow);
}

.clinic-scope {
    margin-top: 28px;
    padding: 24px 26px;
    border: 1px solid var(--blue-200);
    border-radius: var(--radius-small);
    background: rgba(255,255,255,.76);
    box-shadow: 0 10px 24px rgba(13,46,80,.05);
}

.clinic-scope .micro-label {
    margin-bottom: 8px;
}

.clinic-scope h3 {
    margin-bottom: 10px;
    color: var(--blue-900);
}

.clinic-scope p:last-child {
    margin-bottom: 0;
}

.portfolio-overview-heading {
    margin-bottom: 42px;
}

.portfolio-overview-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px;
}

.portfolio-overview-card {
    position: relative;
    min-height: 250px;
    padding: 30px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg,#fff,var(--blue-50));
    box-shadow: var(--shadow-soft);
}

.portfolio-card-number {
    display: inline-block;
    margin-bottom: 44px;
    color: var(--blue-400);
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.portfolio-overview-card h3 {
    color: var(--blue-900);
    font-size: 1.16rem;
}

.portfolio-overview-card p {
    margin-bottom: 0;
    font-size: .91rem;
    line-height: 1.6;
}

.portfolio-catalogue-heading {
    max-width: 860px;
}

.portfolio-catalogue-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 22px;
}

.portfolio-catalogue-card {
    position: relative;
    padding: 34px 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.portfolio-catalogue-card .portfolio-dot {
    width: 14px;
    height: 14px;
    margin-bottom: 25px;
    box-shadow: 0 0 0 8px var(--blue-100);
}

.portfolio-catalogue-card h3 {
    color: var(--blue-900);
    font-size: 1.22rem;
}

.portfolio-catalogue-card ul {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px 22px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.portfolio-catalogue-card li {
    position: relative;
    padding: 8px 0 8px 17px;
    border-bottom: 1px solid rgba(201,223,239,.72);
    color: var(--ink-soft);
    font-size: .88rem;
    line-height: 1.45;
}

.portfolio-catalogue-card li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.05rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue-400);
}

.portfolio-additional {
    margin-top: 34px;
    padding: 32px 34px;
    border: 1px solid var(--blue-200);
    border-radius: var(--radius);
    background: rgba(255,255,255,.72);
}

.portfolio-additional h3 {
    margin-bottom: 22px;
    color: var(--blue-900);
}

.portfolio-additional-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portfolio-additional-grid li {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid var(--blue-200);
    border-radius: var(--radius-small);
    background: var(--white);
    color: var(--blue-900);
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.35;
}

.portfolio-card {
    position: relative;
    padding: 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.portfolio-dot {
    display: block;
    width: 18px;
    height: 18px;
    margin-bottom: 34px;
    border-radius: 50%;
    background: var(--blue-400);
    box-shadow: 0 0 0 10px var(--blue-100);
}

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

.check-list li {
    position: relative;
    padding-left: 25px;
    color: var(--ink-soft);
}

.check-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--blue-400);
}

.note-panel,
.request-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    padding: 45px;
    border: 1px solid var(--blue-200);
    border-radius: var(--radius);
    background: var(--white);
}

.note-panel h2,
.request-panel h2 {
    font-size: clamp(1.7rem,3vw,2.6rem);
}

.note-panel p,
.request-panel p {
    max-width: 750px;
}

/* ==========================================================================
   7. Quality, authorisations and compliance
   ========================================================================== */

.compliance-grid {
    display: grid;
    grid-template-columns: 1.08fr .96fr .96fr;
    gap: 20px;
}

.licence-card {
    padding: 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.licence-card.featured {
    background: var(--blue-950);
    color: var(--white);
}

.licence-card.featured p {
    color: #d5e7f4;
}

.licence-code {
    display: inline-grid;
    place-items: center;
    min-width: 54px;
    height: 38px;
    margin-bottom: 50px;
    padding-inline: 10px;
    border-radius: 10px;
    background: var(--blue-100);
    color: var(--blue-800);
    font-weight: 800;
    letter-spacing: .08em;
}

.featured .licence-code {
    background: rgba(255,255,255,.13);
    color: #bce0f6;
}

.compliance-grid .licence-card:nth-of-type(2) .licence-code {
    background: #e8f3fa;
    color: #2c5f8a;
    box-shadow: inset 0 0 0 1px rgba(79,132,187,.08);
}

.compliance-grid .licence-card:nth-of-type(3) .licence-code {
    background: #e7f5f1;
    color: #2f6f61;
    box-shadow: inset 0 0 0 1px rgba(47,111,97,.09);
}

.licence-card code {
    display: block;
    margin-top: 25px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(102,162,214,.1);
    font-family: var(--font-sans);
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.compliance-grid .licence-card:nth-of-type(2) code {
    white-space: nowrap;
    overflow-wrap: normal;
}

.framework-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.framework-grid article {
    padding: 32px;
    border-radius: var(--radius-small);
    background: var(--white);
    border: 1px solid var(--line);
}

.framework-grid article>span {
    display: block;
    width: 40px;
    height: 5px;
    margin-bottom: 26px;
    border-radius: 99px;
    background: linear-gradient(90deg,var(--blue-900),var(--blue-400));
}

/* ==========================================================================
   8. Logistics and delivery addresses
   ========================================================================== */

.address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.address-card {
    padding: 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg,#fff,#edf6fb);
    box-shadow: var(--shadow-soft);
}

.address-card.rx {
    background: linear-gradient(145deg,var(--blue-950),var(--blue-800));
    color: var(--white);
}

.address-card.rx p {
    color: #bdd7ea;
}

.address-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 50px;
}

.address-badge-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.address-top>span,
.address-badge-group .address-type-badge {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--white);
    color: var(--blue-900);
    font-family: var(--font-display);
    font-weight: 700;
    box-shadow: var(--shadow-soft);
}

.address-top strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #e8aaa5;
    border-radius: 999px;
    background: #fff0ef;
    color: #8f302b;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    box-shadow: 0 6px 16px rgba(143,48,43,.1);
}

.address-top strong:before {
    content: "!";
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #a3312b;
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    line-height: 1;
}

.address-card address,
.address-contact-grid address {
    font-style: normal;
    font-size: 1.07rem;
    line-height: 1.8;
}

.rules-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
}

.rules-grid ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rules;
}

.rules-grid li {
    counter-increment: rules;
    position: relative;
    padding: 22px 20px 22px 70px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
}

.rules-grid li:before {
    content: counter(rules,decimal-leading-zero);
    position: absolute;
    left: 0;
    color: var(--blue-400);
    font-family: var(--font-display);
    font-weight: 700;
}

/* ==========================================================================
   9. Digital processes
   ========================================================================== */

.digital-layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 90px;
    align-items: center;
}

.data-visual {
    position: relative;
    aspect-ratio: 1;
    max-width: 450px;
    border: 1px solid var(--blue-200);
    border-radius: 50%;
    background: radial-gradient(circle,var(--white) 0 25%,var(--blue-50) 26% 45%,transparent 46%),linear-gradient(145deg,#eff7fb,#dfeef7);
}

.data-core {
    position: absolute;
    inset: 34%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg,#ffffff,#f3f8fc);
    border: 1px solid rgba(102,162,214,.22);
    box-shadow: 0 18px 34px rgba(13,46,80,.12);
}

.data-core img {
    display: block;
    width: 100px;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(13,46,80,.06));
}

.data-visual i {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--blue-400);
    box-shadow: 0 0 0 8px var(--white);
}

.data-visual i:nth-of-type(1) {
    left: 49%;
    top: 7%;
}

.data-visual i:nth-of-type(2) {
    right: 17%;
    top: 21%;
}

.data-visual i:nth-of-type(3) {
    right: 7%;
    top: 49%;
}

.data-visual i:nth-of-type(4) {
    right: 17%;
    bottom: 20%;
}

.data-visual i:nth-of-type(5) {
    left: 49%;
    bottom: 7%;
}

.data-visual i:nth-of-type(6) {
    left: 17%;
    bottom: 20%;
}

.data-visual i:nth-of-type(7) {
    left: 7%;
    top: 49%;
}

.data-visual i:nth-of-type(8) {
    left: 17%;
    top: 21%;
}

.feature-list article {
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
}

.feature-list h2 {
    font-size: 1.35rem;
    margin-bottom: 8px;
}

.feature-list p {
    margin: 0;
}

.principle-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 100px;
}

.principle-grid h2 {
    font-size: clamp(2rem,4vw,3.5rem);
}

.principle-grid h3 {
    color: #9cc8e8;
}

.principle-grid ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.principle-grid li {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.13);
    color: #d8e8f3;
}

/* ==========================================================================
   10. Contact and legal text pages
   ========================================================================== */

.contact-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 22px;
}

.contact-method {
    padding: 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--blue-50);
}

.contact-method.primary {
    background: var(--white);
    box-shadow: var(--shadow);
}

.contact-symbol {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 45px;
    border-radius: 50%;
    background: var(--blue-900);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
}

.contact-method h2 {
    font-size: clamp(1.5rem,3vw,2.45rem);
    overflow-wrap: anywhere;
}

.contact-method h2 a {
    text-decoration: none;
}

.address-contact-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 50px;
}

.address-contact-grid h2 {
    font-size: 1.7rem;
}

.contact-notice {
    margin-top: clamp(22px,3vw,36px);
}

.privacy-note {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 26px;
    border-radius: var(--radius-small);
    background: var(--blue-50);
}

.privacy-note span {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--blue-900);
    color: #fff;
    font-weight: 700;
}

.privacy-note p {
    margin: 0;
}

.legal-hero h1 {
    font-size: clamp(2.6rem,5vw,4.5rem);
}

.translation-note {
    max-width: 760px;
    padding: 16px 18px;
    border-left: 4px solid var(--blue-400);
    background: rgba(255,255,255,.65);
    color: var(--ink);
}

.legal-layout {
    display: grid;
    grid-template-columns: 230px minmax(0,1fr);
    gap: 70px;
    align-items: start;
}

.legal-nav {
    position: sticky;
    top: 140px;
    display: grid;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    overflow: hidden;
}

.legal-nav a {
    padding: 14px 17px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .88rem;
    text-decoration: none;
}

.legal-nav a:last-child {
    border: 0;
}

.legal-nav a.is-active {
    background: var(--blue-900);
    color: var(--white);
}

.legal-copy {
    max-width: 860px;
}

.legal-copy h1 {
    font-size: 2.7rem;
}

.legal-copy h2 {
    margin-top: 2.4em;
    font-size: 1.65rem;
    letter-spacing: -.02em;
}

.legal-copy h3 {
    margin-top: 2em;
    font-size: 1.25rem;
}

.legal-copy h1:first-child,
.legal-copy h2:first-child {
    margin-top: 0;
}

.legal-copy p,
.legal-copy li {
    color: #425870;
}

.legal-copy a {
    color: var(--blue-800);
}

.legal-copy ul,
.legal-copy ol {
    padding-left: 1.25rem;
}

.legal-copy code {
    padding: .12em .35em;
    border-radius: 5px;
    background: var(--blue-100);
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.site-footer {
    padding-top: 72px;
    background: #0b2845;
    color: #fff;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr .8fr 1fr;
    gap: 50px;
    padding-bottom: 56px;
}

.footer-brand {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.footer-brand img {
    width: 64px;
    filter: brightness(0) invert(1);
    opacity: .9;
}

.footer-brand strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
}

.footer-brand p,
.site-footer p {
    color: #afc7d9;
}

.footer-grid h2 {
    margin-bottom: 18px;
    color: #8fc1e2;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.footer-grid>div:not(.footer-brand) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-grid a {
    margin: 5px 0;
    color: #e8f2f8;
    font-size: .88rem;
    text-decoration: none;
}

.footer-grid a:hover {
    text-decoration: underline;
}

.footer-address {
    margin-top: 12px;
    font-size: .84rem;
}

.licence-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 30px;
    padding: 18px 0;
    border-block: 1px solid rgba(255,255,255,.1);
    color: #9fbed3;
    font-size: .72rem;
    overflow-wrap: anywhere;
}

.ifa-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    color: #b9d2e3;
}

.ifa-status:before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #79bde8;
    box-shadow: 0 0 0 4px rgba(121,189,232,.12);
}

.ifa-status strong {
    color: #edf7fc;
    font-weight: 700;
}

.footer-bottom {
    min-height: 76px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    font-size: .78rem;
}

.footer-bottom p {
    margin: 0;
}

.footer-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #8faec3!important;
    font-size: .72rem;
    letter-spacing: .02em;
}

.footer-credit span:after {
    content: "—";
    margin-left: 8px;
    color: #5f829b;
}

.footer-credit a {
    color: #c9dce9!important;
    font-weight: 600;
}

.footer-credit a:hover {
    color: #fff!important;
    text-decoration: underline;
}

.footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 20px;
}

.footer-bottom a {
    color: #c9dce9;
    text-decoration: none;
}

/* ==========================================================================
   13. TJ-Motion: pharmacy distribution and product overview
   ========================================================================== */

.tj-motion-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%,rgba(103,192,197,.18),transparent 28%),
        linear-gradient(145deg,#f9fcfe 0%,#edf7f7 52%,#e9f3f9 100%);
}

.tj-motion-hero:before {
    content: "";
    position: absolute;
    right: -180px;
    bottom: -280px;
    width: 620px;
    height: 620px;
    border: 1px solid rgba(103,192,197,.25);
    border-radius: 50%;
    box-shadow:
        0 0 0 70px rgba(103,192,197,.045),
        0 0 0 140px rgba(79,132,187,.025);
}

.tj-motion-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(320px,.72fr);
    gap: clamp(46px,7vw,92px);
    align-items: center;
}

.tj-motion-hero-copy {
    min-width: 0;
}

.tj-motion-logo-lockup {
    position: relative;
    display: inline-block;
    width: min(330px,75%);
    margin-bottom: 30px;
}

.tj-motion-logo-lockup .tj-motion-logo {
    width: 100%;
    height: auto;
    margin: 0;
}

.tj-motion-registration-mark {
    position: absolute;
    top: 4px;
    right: -18px;
    color: #356b75;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1;
}

.tj-motion-hero h1 {
    color: var(--blue-950);
}

.tj-motion-hero .lead {
    max-width: 760px;
}

.tj-motion-signals {
    margin-top: 30px;
}

.tj-motion-hero-visual {
    justify-self: end;
    width: 100%;
    max-width: 430px;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(103,192,197,.3);
    border-radius: 30px;
    background: var(--white);
    box-shadow: var(--shadow);
}

.tj-motion-hero-abstract {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 480px;
    padding: 78px 32px 34px;
    background:
        radial-gradient(circle at 18% 18%,rgba(103,192,197,.16),transparent 28%),
        linear-gradient(150deg,#fbfdff 0%,#f2f8fb 54%,#edf6fb 100%);
}

.tj-motion-hero-abstract:before {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(103,192,197,.18);
    border-radius: 50%;
    box-shadow: 0 0 0 58px rgba(103,192,197,.04);
}

.tj-motion-hero-mark {
    position: relative;
    width: 270px;
    height: 225px;
    margin: 0 auto;
    flex: 0 0 auto;
}

.tj-motion-hero-mark:before,
.tj-motion-hero-mark:after,
.tj-motion-hero-mark span {
    content: "";
    position: absolute;
    border-radius: 999px;
    transform: rotate(-37deg);
    transform-origin: center;
}

.tj-motion-hero-mark:before {
    width: 230px;
    height: 32px;
    right: 0;
    top: 20px;
    background: var(--blue-900);
}

.tj-motion-hero-mark:after {
    width: 195px;
    height: 22px;
    right: 28px;
    top: 92px;
    background: #6ba9dd;
}

.tj-motion-hero-mark span {
    width: 138px;
    height: 14px;
    right: 42px;
    top: 156px;
    background: #9fcbe7;
}

.tj-motion-hero-tags {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
}

.tj-motion-hero-tags span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-inline: 9px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    border-color: rgba(201,223,239,.95);
    text-align: center;
    white-space: nowrap;
}

.tj-motion-heading {
    align-items: start;
}

.tj-motion-product-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 20px;
}

.tj-motion-product-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.tj-motion-product-media {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg,#fff,#f6fbfc);
}

.tj-motion-product-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    transition: transform .22s ease;
}

.tj-motion-product-image-link {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    text-decoration: none;
}

.tj-motion-product-image-link:hover img,
.tj-motion-product-image-link:focus-visible img {
    transform: scale(1.025);
}

.tj-motion-product-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(201,223,239,.95);
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 22px rgba(13,46,80,.14);
    backdrop-filter: blur(8px);
    transition: transform .2s ease,background .2s ease;
}

.tj-motion-product-zoom:before {
    content: "";
    position: absolute;
    left: 11px;
    top: 9px;
    width: 11px;
    height: 11px;
    border: 2px solid var(--blue-900);
    border-radius: 50%;
}

.tj-motion-product-zoom:after {
    content: "";
    position: absolute;
    left: 23px;
    top: 22px;
    width: 9px;
    height: 2px;
    border-radius: 99px;
    background: var(--blue-900);
    transform: rotate(45deg);
    transform-origin: left center;
}

.tj-motion-product-image-link:hover .tj-motion-product-zoom,
.tj-motion-product-image-link:focus-visible .tj-motion-product-zoom {
    background: var(--white);
    transform: translateY(-2px);
}

.tj-motion-product-copy {
    padding: 28px;
}

.tj-motion-product-copy .micro-label {
    margin-bottom: 10px;
    color: #2f8387;
}

.tj-motion-product-copy h3 {
    margin-bottom: 12px;
    font-size: clamp(1.15rem,1.7vw,1.45rem);
}

/* AEP and ApU displayed compactly for easy comparison within each product card. */
.tj-motion-product-prices {
    display: grid;
    gap: 1px;
    overflow: hidden;
    margin: 0 0 16px;
    border-radius: 12px;
    background: rgba(255,255,255,.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.tj-motion-product-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 12px;
    background: linear-gradient(135deg,var(--blue-950),#174c78);
    color: var(--white);
}

.tj-motion-product-price-row span {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: none;
}

.tj-motion-product-price-row strong {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1;
    white-space: nowrap;
}

.tj-motion-aep-note {
    max-width: 920px;
    margin: 24px auto 0;
    padding: 15px 18px;
    border: 1px solid var(--blue-200);
    border-radius: 14px;
    background: var(--blue-50);
    color: var(--ink-soft);
    font-size: .84rem;
    line-height: 1.55;
    text-align: center;
}

/* Short selection guidance so the differences between variants are immediately clear. */
.tj-motion-product-subtitle {
    margin: -2px 0 10px;
    color: #173f70;
    font-weight: 700;
    line-height: 1.4;
}

.tj-motion-product-copy p:last-child {
    margin-bottom: 0;
    color: var(--ink-soft);
    font-size: .88rem;
}

.tj-motion-section-heading {
    max-width: 860px;
    margin-bottom: 44px;
}

.tj-motion-section-heading .lead {
    max-width: none;
}

.tj-motion-role-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px;
}

.tj-motion-role-card {
    padding: 34px;
    border: 1px solid var(--blue-200);
    border-radius: var(--radius);
    background: rgba(255,255,255,.86);
    box-shadow: var(--shadow-soft);
}

.tj-motion-role-card .micro-label {
    color: #2f8387;
}

.tj-motion-role-card h3 {
    margin-bottom: 12px;
}

.tj-motion-role-card p:last-child {
    margin-bottom: 0;
}

.tj-motion-pharmacy-grid {
    display: grid;
    grid-template-columns: 1fr .85fr;
    gap: clamp(42px,7vw,90px);
    align-items: center;
}

.tj-motion-pharmacy-card {
    padding: 40px;
    border: 1px solid var(--blue-200);
    border-radius: var(--radius);
    background: linear-gradient(145deg,var(--blue-50),#eef8f7);
    box-shadow: var(--shadow-soft);
}

.tj-motion-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.tj-motion-cta h2 {
    color: var(--white);
}

.tj-motion-cta p:not(.eyebrow) {
    max-width: 760px;
    margin-bottom: 0;
    color: #d5e7f4;
}

.tj-motion-cta-actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.tj-motion-external-link {
    color: #bce0f6;
    font-size: .8rem;
    font-weight: 700;
}

.tj-motion-external-link:hover {
    color: var(--white);
}

.footer-law-notice {
    padding: 0 0 24px;
    color: #a9bdd0;
    font-size: .76rem;
    line-height: 1.5;
    text-align: center;
}

.footer-law-notice p {
    margin: 0;
}

@media (max-width:1120px) {
    .tj-motion-product-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:820px) {
    .tj-motion-hero-grid,
    .tj-motion-pharmacy-grid {
        grid-template-columns: 1fr;
    }

    .tj-motion-hero-visual {
        max-width: 460px;
        justify-self: start;
    }

    .tj-motion-hero-abstract {
        min-height: 440px;
        padding-top: 64px;
    }

    .tj-motion-role-grid {
        grid-template-columns: 1fr;
    }

    .tj-motion-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .tj-motion-cta-actions {
        width: 100%;
        align-items: flex-start;
    }
}

@media (max-width:560px) {
    .tj-motion-product-grid {
        grid-template-columns: 1fr;
    }

    .tj-motion-product-copy,
    .tj-motion-role-card,
    .tj-motion-pharmacy-card {
        padding: 28px;
    }

    .tj-motion-logo-lockup {
        width: min(290px,85%);
    }

    .tj-motion-registration-mark {
        right: -14px;
        font-size: .82rem;
    }

    .tj-motion-hero-visual {
        max-width: 100%;
        border-radius: 22px;
    }

    .tj-motion-hero-abstract {
        min-height: 390px;
        padding: 54px 22px 24px;
    }

    .tj-motion-hero-mark {
        width: 200px;
        height: 168px;
    }

    .tj-motion-hero-tags {
        left: 18px;
        right: 18px;
        bottom: 18px;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .tj-motion-cta-actions .button {
        width: 100%;
    }
}



/* Enlarged product view in a modal window on the same page. */
.tj-motion-lightbox {
    width: min(94vw,1100px);
    max-width: none;
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: 24px;
    background: var(--white);
    box-shadow: 0 30px 90px rgba(13,46,80,.34);
    overflow: hidden;
}

.tj-motion-lightbox::backdrop {
    background: rgba(7,24,43,.78);
    backdrop-filter: blur(7px);
}

.tj-motion-lightbox-panel {
    position: relative;
    display: grid;
    place-items: center;
    min-height: min(82vh,820px);
    padding: clamp(20px,3vw,42px);
    background:
        radial-gradient(circle at 16% 12%,rgba(103,192,197,.12),transparent 30%),
        linear-gradient(145deg,#fff,#f3f8fb);
}

.tj-motion-lightbox-panel img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(92vh - 84px);
    object-fit: contain;
    border-radius: 16px;
}

.tj-motion-lightbox-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--blue-200);
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: var(--blue-950);
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(13,46,80,.14);
}

.tj-motion-lightbox-close:before,
.tj-motion-lightbox-close:after {
    content: "";
    position: absolute;
    left: 12px;
    top: 21px;
    width: 20px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
}

.tj-motion-lightbox-close:before {
    transform: rotate(45deg);
}

.tj-motion-lightbox-close:after {
    transform: rotate(-45deg);
}

.tj-motion-lightbox-close:hover {
    background: var(--blue-100);
}

@media (max-width:560px) {
    .tj-motion-lightbox {
        width: calc(100vw - 20px);
        border-radius: 18px;
    }

    .tj-motion-lightbox-panel {
        min-height: 74vh;
        padding: 52px 14px 18px;
    }

    .tj-motion-lightbox-close {
        top: 10px;
        right: 10px;
    }
}

/* ==========================================================================
   12. Floating back-to-top button
   ========================================================================== */

.back-to-top {
    position: fixed;
    right: clamp(18px,2.4vw,34px);
    bottom: clamp(18px,2.4vw,34px);
    z-index: 90;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    background: var(--blue-900);
    color: var(--white);
    box-shadow: 0 14px 34px rgba(13,46,80,.28);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px) scale(.94);
    transition: opacity .22s ease,visibility .22s ease,transform .22s ease,background-color .22s ease;
}

.back-to-top span {
    display: block;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-1px);
}

.back-to-top:hover {
    background: var(--blue-800);
    transform: translateY(-2px) scale(1);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.back-to-top:focus-visible {
    outline: 3px solid var(--blue-400);
    outline-offset: 4px;
}

@media (max-width:560px) {
    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
    }

    .back-to-top span {
        font-size: 1.25rem;
    }

}

/* ==========================================================================
   13. Responsive design: tablets and compact desktops
   ========================================================================== */

@media (max-width:1120px) {
    .portfolio-overview-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .menu-toggle {
        display: block;
    }

    .nav-panel {
        position: fixed;
        left: 20px;
        right: 20px;
        top: 148px;
        display: none;
        max-height: calc(100vh - 170px);
        overflow: auto;
        padding: 26px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: var(--white);
        box-shadow: var(--shadow);
    }

    .nav-panel.is-open {
        display: block;
    }

    .primary-nav {
        display: grid;
        gap: 0;
    }

    .primary-nav a {
        padding: 13px 5px;
        border-bottom: 1px solid var(--line);
    }

    .nav-actions {
        justify-content: space-between;
        margin-top: 20px;
    }

    .menu-toggle[aria-expanded=true] span:not(.sr-only):nth-of-type(2) {
        transform: translateY(6px) rotate(45deg);
    }

    .menu-toggle[aria-expanded=true] span:not(.sr-only):nth-of-type(3) {
        opacity: 0;
    }

    .menu-toggle[aria-expanded=true] span:not(.sr-only):nth-of-type(4) {
        transform: translateY(-6px) rotate(-45deg);
    }

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

    .compliance-grid {
        grid-template-columns: 1fr 1fr;
    }

    .licence-card.featured {
        grid-column: 1/-1;
    }

    .footer-grid {
        grid-template-columns: 1.2fr repeat(3,1fr);
    }

}

/* --------------------------------------------------------------------------
   Links to certificates and documents
   -------------------------------------------------------------------------- */

.document-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    color: var(--blue-800);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.document-link:after {
    content: "↗";
    font-size: .9em;
    transition: transform .2s ease;
}

.document-link:hover {
    color: var(--blue-950);
}

.document-link:hover:after {
    transform: translate(2px,-2px);
}

.licence-card.featured .document-link {
    color: #bce0f6;
}

.licence-card.featured .document-link:hover {
    color: #fff;
}

/* ==========================================================================
   14. Responsive design: tablets and mobile navigation
   ========================================================================== */

@media (max-width:820px) {
    .portfolio-catalogue-grid {
        grid-template-columns: 1fr;
    }

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

    :root {
        --shell: min(100% - 28px,1180px);
    }

    .utility-inner>span {
        display: none;
    }

    .utility-inner {
        justify-content: flex-end;
    }

    .hero-grid,
    .page-hero-grid,
    .split-heading,
    .portfolio-feature,
    .partner-band,
    .story-grid,
    .dual-columns,
    .feature-box,
    .rules-grid,
    .digital-layout,
    .principle-grid,
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy h1 {
        max-width: 12ch;
    }

    .page-hero-grid .path-mark {
        display: none;
    }

    .three-up,
    .two-up,
    .address-grid,
    .contact-grid,
    .address-contact-grid {
        grid-template-columns: 1fr;
    }

    .trust-inner {
        justify-content: flex-start;
        overflow: auto;
        padding-block: 15px;
    }

    .trust-inner strong,
    .trust-inner span {
        flex: 0 0 auto;
    }

    .partner-visual {
        max-width: 310px;
        margin: auto;
    }

    .partner-visual span {
        width: 104px;
        height: 104px;
    }

    .partner-visual span img {
        width: 72px;
    }

    .data-visual {
        max-width: 340px;
        margin: auto;
    }

    .data-core img {
        width: 78px;
    }

    .feature-icon {
        width: 110px;
        height: 110px;
        border-radius: 30px;
    }

    .compliance-grid {
        grid-template-columns: 1fr;
    }

    .licence-card.featured {
        grid-column: auto;
    }

    .note-panel,
    .request-panel,
    .cta-panel,
    .values-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .values-panel div {
        justify-content: flex-start;
    }

    .legal-nav {
        position: static;
        grid-template-columns: repeat(2,1fr);
    }

    .legal-nav a:nth-child(odd) {
        border-right: 1px solid var(--line);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1/-1;
    }

    .footer-bottom {
        grid-template-columns: 1fr auto;
        align-items: start;
        padding-block: 20px;
    }

    .footer-credit {
        grid-column: 1/-1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .footer-bottom nav {
        justify-content: flex-end;
    }

}

/* ==========================================================================
   15. Responsive design: small smartphones
   ========================================================================== */

@media (max-width:560px) {
    .portfolio-overview-grid,
    .portfolio-catalogue-card ul,
    .portfolio-additional-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-overview-card {
        min-height: auto;
    }

    .portfolio-catalogue-card,
    .portfolio-additional {
        padding: 28px;
    }

    body {
        font-size: 15px;
    }

    .tag-cloud,
    .portfolio-detail-grid,
    .portfolio-accordion ul {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 68px 0;
    }

    .utility-links a:first-child {
        display: none;
    }

    .brand img {
        width: 74px;
        height: 58px;
    }

    .nav-shell {
        min-height: 90px;
    }

    .nav-panel {
        top: 126px;
    }

    .home-hero {
        padding: 75px 0;
    }

    .compliance-card,
    .number-card,
    .portfolio-card,
    .licence-card,
    .address-card,
    .contact-method {
        padding: 28px;
        border-radius: 20px;
    }

    .framework-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

    .cta-panel,
    .note-panel,
    .request-panel,
    .values-panel {
        padding: 30px;
    }

    .timeline article {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .legal-nav {
        grid-template-columns: 1fr;
    }

    .legal-nav a:nth-child(odd) {
        border-right: 0;
    }

    .ifa-status {
        flex-basis: 100%;
        margin-left: 0;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
    }

    .footer-credit {
        grid-column: auto;
        grid-row: auto;
        justify-content: flex-start;
    }

    .footer-bottom nav {
        justify-content: flex-start;
        gap: 13px;
    }

    .button {
        width: 100%;
    }

    .button-row {
        display: grid;
    }

    .nav-actions .button {
        width: auto;
    }

    .compliance-card dd {
        font-size: .68rem;
    }

    .compliance-card dl div:first-child dd {
        font-size: .68rem;
        letter-spacing: normal;
        white-space: normal;
    }

}

/* ==========================================================================
   16. Accessibility: reduced motion
   ========================================================================== */

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

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

}

/* ==========================================================================
   17. Fine-tuning the desktop navigation
   ========================================================================== */

@media (min-width:1121px) {
    .nav-shell {
        min-height: 102px;
    }

    .brand {
        margin-right: 30px;
    }

    .brand img {
        width: 120px;
        max-height: 86px;
    }

    .nav-panel {
        gap: 12px;
    }

    .primary-nav {
        gap: 12px;
    }

    .primary-nav a {
        padding: 9px 0;
        font-size: .82rem;
    }

    .primary-nav a:after {
        left: 20%;
        right: 20%;
        bottom: 2px;
        transform-origin: center;
    }

    .button-small {
        min-height: 38px;
        padding-inline: 16px;
        font-size: .84rem;
    }
}

/* ==========================================================================
   Deliveries: extended labelling for OTC self-selection products
   ========================================================================== */

.address-top .address-type-badge-otc {
    width: auto;
    min-width: 116px;
    height: 58px;
    padding-inline: 16px;
    border-radius: 999px;
    font-size: .78rem;
    line-height: 1.15;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .address-top .address-type-badge-otc {
        min-width: 108px;
        padding-inline: 13px;
        font-size: .72rem;
    }
}

/* ==========================================================================
   Quality management: external support and audit assistance
   ========================================================================== */

.quality-service-section {
    padding-top: clamp(70px,8vw,108px);
    padding-bottom: clamp(34px,4vw,52px);
}

/* Reduces the spacing between the QM service section and the documentation section. */
.quality-service-section + .section {
    padding-top: clamp(34px,4vw,52px);
}

.quality-service-panel {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr);
    gap: clamp(36px,6vw,78px);
    align-items: center;
    padding: clamp(38px,5vw,64px);
    border: 1px solid var(--blue-200);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 10% 12%,rgba(102,162,214,.12),transparent 34%),
        linear-gradient(145deg,#fff,var(--blue-50));
    box-shadow: var(--shadow-soft);
}

.quality-service-copy h2 {
    max-width: 18ch;
}

.quality-service-copy .lead {
    max-width: 720px;
}

.quality-service-note {
    max-width: 680px;
    margin-bottom: 0;
    padding: 15px 18px;
    border-left: 4px solid var(--blue-400);
    background: rgba(255,255,255,.72);
    color: var(--ink);
    font-size: .9rem;
}

.quality-service-card {
    padding: clamp(30px,4vw,44px);
    border-radius: var(--radius);
    background: linear-gradient(145deg,var(--blue-950),var(--blue-800));
    color: var(--white);
    box-shadow: var(--shadow);
}

.quality-service-badge {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 30px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 18px;
    background: rgba(255,255,255,.1);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.quality-service-list {
    margin-bottom: 30px;
}

.quality-service-list li {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: #dcebf6;
}

.quality-service-list li:before {
    background: #9cc8e8;
}

@media (max-width: 820px) {
    .quality-service-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .quality-service-panel {
        padding: 28px;
    }

    .quality-service-card {
        padding: 28px;
    }

    .quality-service-card .button {
        width: 100%;
    }
}


/* ==========================================================================
   Digital page: internal technical responsibility
   ========================================================================== */

.digital-responsibility-section {
    padding-top: clamp(54px, 7vw, 92px);
    padding-bottom: clamp(54px, 7vw, 92px);
}

.digital-responsibility-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: clamp(38px, 6vw, 76px);
    align-items: start;
    padding: clamp(34px, 5vw, 62px);
    border: 1px solid var(--blue-200);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,249,252,.92));
    box-shadow: var(--shadow-soft);
}

.digital-responsibility-copy h2 {
    max-width: 16ch;
}

.digital-responsibility-copy .lead {
    margin-bottom: 24px;
}

.digital-responsibility-note {
    margin: 0;
    padding: 16px 18px;
    border-left: 4px solid var(--blue-400);
    background: var(--white);
    color: var(--ink);
    font-size: .9rem;
    line-height: 1.6;
}

.digital-responsibility-card {
    padding: clamp(28px, 4vw, 40px);
    border-radius: var(--radius);
    background: linear-gradient(145deg, var(--blue-950), var(--blue-800));
    color: var(--white);
    box-shadow: var(--shadow);
}

.digital-responsibility-person {
    display: block;
    margin-bottom: 26px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,.16);
}


.digital-responsibility-person strong,
.digital-responsibility-person span {
    display: block;
}

.digital-responsibility-person strong {
    margin-bottom: 3px;
    font-family: var(--font-display);
    font-size: 1.12rem;
}

.digital-responsibility-person div > span {
    color: #bdd7ea;
    font-size: .84rem;
    line-height: 1.45;
}

.digital-responsibility-card ul {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.digital-responsibility-card li {
    position: relative;
    padding-left: 24px;
    color: #d8e8f3;
    line-height: 1.55;
}

.digital-responsibility-card li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .7em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9cc8e8;
}

@media (max-width: 820px) {
    .digital-responsibility-panel {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .digital-responsibility-copy h2 {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .digital-responsibility-panel {
        padding: 28px;
    }

    .digital-responsibility-card {
        padding: 28px;
    }
}