/* Suppliers page sections — SIRC tokens: green #00a886, blue #01a3bc, purple #7473b6, text #63656A, light #f6feff */
.sup { color: #63656A; --sup-green: #00a886; --sup-green-dark: #008f72; --sup-blue: #01a3bc; --sup-purple: #7473b6; --sup-ink: #63656A; --sup-deep: #0d3b37; --sup-light: #f6feff; --sup-line: rgba(99, 101, 106, .16); }
.sup h2, .sup h3, .sup h4, .sup h5, .sup p, .sup li { color: inherit; margin: 0; }
.sup h3 { max-width: none; }
.sup p { line-height: 165%; }
.sup em { font-style: normal; color: var(--sup-green); }

.sup-eyebrow { display: inline-flex; align-items: center; gap: .7em; font-size: .9em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sup-green); }
.sup-eyebrow::before { content: ""; width: 2.2em; height: 2px; border-radius: 2px; background: currentColor; }
[dir="rtl"] .sup-eyebrow { letter-spacing: 0; font-size: 1.05em; }
.sup-head { display: flex; flex-direction: column; gap: 1em; }
.sup-lead { font-size: 1.222em; }
.sup-panel { padding: 5.556em; display: flex; flex-direction: column; gap: 3.6em; }
.sup-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2em 5em; align-items: end; }

/* Buttons */
.sup-btn { display: inline-flex; align-items: center; justify-content: center; gap: .8em; height: 3.4em; padding: 0 1.8em; border-radius: 10em; border: 1px solid transparent; font: inherit; font-size: 1em; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .3s, color .3s, transform .3s, box-shadow .3s; align-self: flex-start; }
.sup-btn > span { display: inline; width: auto; white-space: nowrap; }
.sup-btn__arrow { flex: none; width: 1.25em !important; height: 1.25em !important; transition: transform .3s; }
[dir="rtl"] .sup-btn__arrow { transform: scaleX(-1); }
.sup-btn:hover .sup-btn__arrow { transform: translateX(.25em); }
[dir="rtl"] .sup-btn:hover .sup-btn__arrow { transform: scaleX(-1) translateX(.25em); }
.sup-btn--primary { background: var(--sup-green); color: #fff; }
.sup-btn--primary:hover { background: var(--sup-green-dark); box-shadow: 0 .8em 2em -1em rgba(0, 168, 134, .8); }
.sup-btn--light { background: #fff; color: var(--sup-deep); }
.sup-btn--light:hover { background: var(--sup-light); box-shadow: 0 .8em 2em -1em rgba(0, 0, 0, .45); }
.sup-btn:focus-visible, .sup-manual__cover:focus-visible, .sup-access__links a:focus-visible { outline: 3px solid var(--sup-blue); outline-offset: 3px; }

/* Intro */
.sup-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3em 6em; align-items: start; padding: 1em 0; }
.sup-intro__head { display: flex; flex-direction: column; gap: 1.6em; }
.sup-display { font-size: 3.556em; line-height: 1.12; font-weight: 500; color: var(--sup-ink); text-wrap: balance; }
[dir="rtl"] .sup-display { line-height: 1.35; }
.sup-intro__body { display: flex; flex-direction: column; gap: 2.4em; padding-top: 3.2em; }
.sup-highlights { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4em; }
.sup-highlights li { display: flex; flex-direction: column; gap: .5em; padding-top: 1.2em; border-top: 2px solid var(--sup-line); }
.sup-highlights li:nth-child(3n+1) { border-color: var(--sup-green); }
.sup-highlights li:nth-child(3n+2) { border-color: var(--sup-blue); }
.sup-highlights li:nth-child(3n+3) { border-color: var(--sup-purple); }
.sup-highlights strong { font-size: 1.222em; font-weight: 600; color: var(--sup-ink); }
.sup-highlights span { font-size: .95em; line-height: 150%; }

/* Access (sign-in / registration) */
.sup-access { position: relative; isolation: isolate; padding: 5.556em; display: flex; flex-direction: column; gap: 3.4em; color: var(--sup-light); background: radial-gradient(60em 40em at 100% 0%, rgba(1, 163, 188, .45), transparent 60%), radial-gradient(50em 40em at 0% 100%, rgba(0, 168, 134, .5), transparent 60%), linear-gradient(135deg, #0b2f2c 0%, #0d4a43 55%, #0b3f47 100%); }
.sup-access__art { position: absolute; z-index: -1; width: 46em; height: 46em; inset-inline-end: -12em; top: -14em; fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1.2; }
.sup-access__head { display: flex; flex-direction: column; gap: 1.2em; max-width: 52em; }
.sup-access__logo { align-self: flex-start; display: inline-flex; padding: .9em 1.4em; border-radius: 1em; background: #fff; margin-bottom: .6em; }
.sup-access__logo img { height: 1.8em; width: auto; display: block; }
.sup-access__title { font-size: 2.667em; line-height: 1.2; font-weight: 500; text-wrap: balance; }
[dir="rtl"] .sup-access__title { line-height: 1.45; }
.sup-access .sup-access__title em { color: #6fe0c7; }
.sup-access__head p { font-size: 1.222em; opacity: .85; }
.sup-access__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6em; }
.sup-door { position: relative; display: flex; flex-direction: column; gap: .9em; padding: 2.8em; border-radius: 1.8em; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .4s, border-color .4s, transform .4s; }
.sup-door:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .3); transform: translateY(-.3em); }
.sup-door__icon { width: 3.6em; height: 3.6em; border-radius: 1em; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .12); color: #fff; margin-bottom: .6em; }
.sup-door--primary .sup-door__icon { background: var(--sup-green); }
.sup-door__icon svg { width: 1.7em; height: 1.7em; }
.sup-door__label { font-size: .85em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6fe0c7; }
[dir="rtl"] .sup-door__label { letter-spacing: 0; font-size: 1em; }
.sup-door h4 { font-size: 1.889em; font-weight: 600; line-height: 1.2; }
.sup-door p { opacity: .85; flex: 1; }
.sup-door .sup-btn { margin-top: 1em; }
.sup-access__links { display: flex; flex-wrap: wrap; gap: .8em 2.4em; padding-top: 2em; border-top: 1px solid rgba(255, 255, 255, .14); }
.sup-access__links a { display: inline-flex; align-items: center; gap: .6em; color: var(--sup-light); text-decoration: none; font-weight: 500; opacity: .9; transition: opacity .3s, color .3s; }
.sup-access__links a:hover { opacity: 1; color: #6fe0c7; }

/* Required documents */
.sup-docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2em; counter-reset: doc; }
.sup-doc { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.4em; padding: 1.6em 1.8em; background: #fff; border: 1px solid var(--sup-line); border-radius: 1.4em; overflow: hidden; transition: border-color .3s, box-shadow .3s, transform .3s; }
.sup-doc:hover { border-color: rgba(0, 168, 134, .45); box-shadow: 0 1.2em 2.4em -1.6em rgba(13, 59, 55, .35); transform: translateY(-.15em); }
.sup-doc__icon { width: 3.4em; height: 3.4em; border-radius: 1em; display: flex; align-items: center; justify-content: center; background: rgba(0, 168, 134, .1); color: var(--sup-green); }
.sup-doc--conditional .sup-doc__icon { background: rgba(116, 115, 182, .12); color: var(--sup-purple); }
.sup-doc__icon svg { width: 1.7em; height: 1.7em; }
.sup-doc__text { display: flex; flex-direction: column; gap: .35em; }
.sup-doc h4 { font-size: 1.15em; font-weight: 600; line-height: 1.35; color: var(--sup-ink); }
.sup-doc p { font-size: .92em; line-height: 150%; opacity: .9; }
.sup-doc__tag { align-self: start; white-space: nowrap; font-size: .78em; font-weight: 600; padding: .45em .9em; border-radius: 10em; background: rgba(0, 168, 134, .1); color: var(--sup-green-dark); }
.sup-doc--conditional .sup-doc__tag { background: rgba(116, 115, 182, .12); color: #5b5aa0; }
.sup-doc__num { position: absolute; inset-inline-end: 1.1em; bottom: -.28em; font-size: 3.2em; font-weight: 700; line-height: 1; color: rgba(99, 101, 106, .06); pointer-events: none; }
.sup-docgroup { display: flex; flex-direction: column; gap: 1.4em; }
.sup-docgroup__head { display: flex; align-items: center; gap: .9em; }
.sup-docgroup__title { font-size: 1.444em; font-weight: 600; line-height: 1.3; color: var(--sup-ink); }
.sup-docgroup__count { display: inline-flex; align-items: center; justify-content: center; min-width: 2em; height: 2em; padding: 0 .6em; border-radius: 10em; background: var(--sup-green); color: #fff; font-size: .85em; font-weight: 600; }
.sup-docgroup__head::after { content: ""; flex: 1; height: 1px; background: var(--sup-line); }
.sup-note { display: flex; gap: .9em; align-items: flex-start; padding: 1.4em 1.8em; border-radius: 1.2em; background: rgba(1, 163, 188, .08); color: #2c6f7a; }
.sup-note svg { flex: none; margin-top: .15em; color: var(--sup-blue); }

/* Journey & video */
.sup-journey { padding: 5.556em; display: flex; flex-direction: column; gap: 3.4em; background: #fff; }
.sup-journey .sup-head { max-width: 56em; }
.sup-journey .sup-head p { font-size: 1.222em; }
.sup-journey__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 3em; align-items: center; }
.sup-journey__frame { background: var(--sup-deep); }
.sup-reel { position: absolute; inset: 0; overflow: hidden; color: #fff; background: radial-gradient(40em 30em at 85% 10%, rgba(1, 163, 188, .5), transparent 60%), radial-gradient(40em 30em at 10% 100%, rgba(0, 168, 134, .55), transparent 60%), linear-gradient(135deg, #0b2f2c, #0d4a43); }
.sup-reel::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; inset-inline-end: -20%; top: -30%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 0 0 5em rgba(255, 255, 255, .03), 0 0 0 10em rgba(255, 255, 255, .02); animation: sup-spin 30s linear infinite; }
.sup-reel__soon { position: absolute; top: 1.6em; inset-inline-start: 1.8em; display: inline-flex; align-items: center; gap: .6em; padding: .5em 1em; border-radius: 10em; background: rgba(255, 255, 255, .12); font-size: .85em; }
.sup-reel__soon::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #6fe0c7; animation: sup-pulse 1.6s ease-in-out infinite; }
.sup-reel__scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: .6em; padding: 0 36% 0 7%; opacity: 0; transform: translateY(1.6em); transition: opacity .7s ease, transform .9s cubic-bezier(.22, .61, .36, 1); pointer-events: none; }
.sup-reel__scene.is-active { opacity: 1; transform: none; }
.sup-reel__num { font-size: 4.4em; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(111, 224, 199, .85); }
.sup-reel__scene strong { font-size: 1.9em; font-weight: 600; line-height: 1.2; max-width: 16em; }
.sup-reel__text { font-size: 1.15em; line-height: 150%; opacity: .85; max-width: 30em; }
.sup-reel__bar { position: absolute; inset-inline: 1.8em; bottom: 1.6em; display: flex; gap: .5em; }
.sup-reel__bar i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.sup-reel__bar b { display: block; height: 100%; width: 0; background: #6fe0c7; }
.sup-reel__bar i.is-done b { width: 100%; }
.sup-reel__bar i.is-active b { animation: sup-fill var(--sup-step, 4.5s) linear forwards; }
.sup-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4em; }
.sup-step { display: flex; gap: 1.2em; align-items: flex-start; padding: 1em 1.2em; border-radius: 1.2em; transition: background .4s; }
.sup-step__num { flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .95em; border: 1.5px solid var(--sup-line); color: var(--sup-ink); transition: background .4s, color .4s, border-color .4s; }
.sup-step h4 { font-size: 1.1em; font-weight: 600; line-height: 1.4; color: var(--sup-ink); }
.sup-step p { font-size: .92em; line-height: 150%; opacity: .85; }
.sup-step.is-active { background: rgba(0, 168, 134, .08); }
.sup-step.is-active .sup-step__num { background: var(--sup-green); border-color: var(--sup-green); color: #fff; }

/* Manuals */
.sup-shelf { display: flex; flex-direction: column; gap: 1.4em; }
.sup-shelves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3em 1.6em; }
.sup-shelf--wide { grid-column: 1 / -1; }
.sup-shelf:not(.sup-shelf--wide) .sup-manuals { grid-template-columns: 1fr; height: 100%; }
.sup-shelf__label { font-size: 1.1em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sup-green); }
[dir="rtl"] .sup-shelf__label { letter-spacing: 0; font-size: 1.3em; }
.sup-manuals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6em; }
.sup-manual { display: grid; grid-template-columns: 13em minmax(0, 1fr); background: #fff; border: 1px solid var(--sup-line); border-radius: 1.6em; overflow: hidden; transition: box-shadow .4s, border-color .4s; }
.sup-manual:hover { border-color: rgba(0, 168, 134, .4); box-shadow: 0 1.6em 3em -2em rgba(13, 59, 55, .4); }
.sup-manual__cover { position: relative; padding: 1.6em 1.4em; border: 0; background: linear-gradient(160deg, #e6f3f1, #dbe9ee); cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; -webkit-user-select: none; user-select: none; }
.sup-manual__cover img { width: 100%; height: auto; border-radius: .4em; box-shadow: 0 1em 2em -1em rgba(13, 59, 55, .5), 0 0 0 1px rgba(0, 0, 0, .04); transform: rotate(-2deg); transition: transform .6s cubic-bezier(.22, .61, .36, 1); pointer-events: none; }
[dir="rtl"] .sup-manual__cover img { transform: rotate(2deg); }
.sup-manual:hover .sup-manual__cover img { transform: rotate(0) scale(1.04); }
.sup-manual__body { padding: 2em 2.2em; display: flex; flex-direction: column; gap: .9em; }
.sup-manual__meta { display: flex; flex-wrap: wrap; gap: .5em; }
.sup-manual__meta span { display: inline-flex; align-items: center; gap: .4em; font-size: .8em; padding: .4em .85em; border-radius: 10em; background: rgba(99, 101, 106, .08); }
.sup-manual__meta .sup-manual__lock { background: rgba(1, 163, 188, .1); color: #1d7f8f; }
.sup-manual h5 { font-size: 1.333em; font-weight: 600; line-height: 1.35; color: var(--sup-ink); }
.sup-manual p { font-size: .95em; }
.sup-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5em; }
.sup-chips li { font-size: .82em; padding: .4em .9em; border-radius: 10em; border: 1px solid rgba(0, 168, 134, .35); color: var(--sup-green-dark); }
.sup-manual .sup-btn { margin-top: auto; }

@keyframes sup-fill { from { width: 0; } to { width: 100%; } }
@keyframes sup-pulse { 50% { opacity: .35; } }
@keyframes sup-spin { to { transform: rotate(360deg); } }

@media (max-width: 1279px) {
    .sup-manuals, .sup-shelves { grid-template-columns: 1fr; }
    .sup-highlights { grid-template-columns: 1fr; }
    .sup-journey__grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
    .sup-panel, .sup-access, .sup-journey { padding: 3.3em; }
    .sup-intro, .sup-split { grid-template-columns: 1fr; }
    .sup-intro__body { padding-top: 0; }
    .sup-access__cards, .sup-docs { grid-template-columns: 1fr; }
    .sup-display { font-size: 2.8em; }
    .sup-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .sup { font-size: 1.1em; }
    .sup-panel, .sup-access, .sup-journey { padding: 2.2em 1.6em; gap: 2.4em; }
    .sup-display { font-size: 2.2em; }
    .sup-access__title { font-size: 1.9em; }
    .sup-highlights { grid-template-columns: 1fr; }
    .sup-door { padding: 2em 1.6em; }
    .sup-door h4 { font-size: 1.5em; }
    .sup-door .sup-btn, .sup-manual .sup-btn { align-self: stretch; }
    .sup-doc { grid-template-columns: auto minmax(0, 1fr); padding: 1.3em; gap: 1em; }
    .sup-doc__tag { grid-column: 2; justify-self: start; }
    .sup-manual { grid-template-columns: 1fr; }
    .sup-manual__cover { padding: 2em 3em 0; max-height: 16em; align-items: flex-start; }
    .sup-manual__body { padding: 1.6em; }
    .sup-reel__scene { padding: 0 8%; }
    .sup-reel__num { font-size: 2.4em; }
    .sup-reel__scene strong { font-size: 1.3em; }
    .sup-reel__text { display: none; }
    .sup-reel__soon { top: .9em; inset-inline-start: 1em; font-size: .72em; }
    .sup-reel__bar { inset-inline: 1em; bottom: 1em; }
    .sup-step { padding: .8em; }
}
@media (prefers-reduced-motion: reduce) {
    .sup-reel::before, .sup-reel__soon::before { animation: none; }
    .sup-reel__scene { transition: none; }
}

/* Inline icons: the site stylesheet stretches bare SVGs, so every icon gets an explicit size */
.sup-note svg { width: 1.5em !important; height: 1.5em !important; }
.sup-access__links svg { flex: none; width: 1.15em !important; height: 1.15em !important; }
.sup-manual__lock svg { flex: none; width: 1.1em !important; height: 1.1em !important; }
.sup-door__icon svg, .sup-doc__icon svg { width: 1.7em !important; height: 1.7em !important; }
.sup-access__art { max-width: none; }

/* The enquiry form section pulls itself up over a hero; after supplier sections it keeps normal spacing */
.sup + section > .pull_up { margin-top: 0; padding-top: 7.778em; }

/* Step icon in the animated preview: large glowing badge on the free side of the frame */
[dir="rtl"] .sup-reel__scene { padding: 0 7% 0 36%; }
.sup-reel__icon { position: absolute; top: 50%; inset-inline-end: 8%; width: 10em; height: 10em; margin-top: -5em; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
    background: radial-gradient(circle at 30% 25%, rgba(111, 224, 199, .95), rgba(0, 168, 134, .9) 55%, rgba(1, 130, 150, .9));
    box-shadow: 0 0 0 1.4em rgba(111, 224, 199, .12), 0 0 0 2.8em rgba(111, 224, 199, .06), 0 2em 4em -1em rgba(0, 0, 0, .45);
    transform: scale(.6) rotate(-12deg); opacity: 0; transition: transform .9s cubic-bezier(.34, 1.56, .64, 1) .15s, opacity .5s ease .15s; }
.sup-reel__icon svg { width: 4.6em !important; height: 4.6em !important; stroke-width: 1.4; }
.sup-reel__scene.is-active .sup-reel__icon { transform: none; opacity: 1; animation: sup-float 4s ease-in-out 1s infinite; }
@keyframes sup-float { 50% { transform: translateY(-.5em); } }
@media (max-width: 640px) {
    .sup-reel__scene, [dir="rtl"] .sup-reel__scene { padding: 0 38% 0 7%; }
    [dir="rtl"] .sup-reel__scene { padding: 0 7% 0 38%; }
    .sup-reel__icon { width: 6.4em; height: 6.4em; margin-top: -3.2em; inset-inline-end: 7%; box-shadow: 0 0 0 .7em rgba(111, 224, 199, .12); }
    .sup-reel__icon svg { width: 3em !important; height: 3em !important; }
}
@media (prefers-reduced-motion: reduce) {
    .sup-reel__scene.is-active .sup-reel__icon { animation: none; }
}

/* Contact box closing the manuals section (replaces the enquiry form) */
.sup-contact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.6em 2em; padding: 2.2em 2.6em; border-radius: 1.6em; color: #fff; background: radial-gradient(30em 20em at 100% 0, rgba(1, 163, 188, .45), transparent 60%), linear-gradient(135deg, #0b2f2c, #0d4a43); }
.sup-contact__icon { width: 4em; height: 4em; border-radius: 1.2em; display: flex; align-items: center; justify-content: center; background: rgba(111, 224, 199, .16); color: #6fe0c7; }
.sup-contact__icon svg { width: 1.9em !important; height: 1.9em !important; }
.sup-contact__text { display: flex; flex-direction: column; gap: .4em; }
.sup-contact h4 { font-size: 1.444em; font-weight: 600; line-height: 1.3; color: #fff; }
.sup-contact p { opacity: .85; }
.sup-contact .sup-btn { align-self: center; }
@media (max-width: 640px) {
    .sup-contact { grid-template-columns: 1fr; padding: 1.8em 1.6em; }
    .sup-contact .sup-btn { align-self: stretch; }
}