/* Page builder: section style extras, the hero text box and the free-layout section.
   Loaded after the design stylesheets, so it only needs to win on what it sets. */

/* ---------- backgrounds on any section (colour, gradient, picture) ---------- */
.sec.has-grad, .hero.has-grad { background: var(--sec-grad); }
.sec.has-bg, .hero.has-bg { background: var(--sec-bg); }
.sec.has-img, .hero.has-img {
  background: linear-gradient(rgba(7, 27, 51, var(--sec-ov, 0)), rgba(7, 27, 51, var(--sec-ov, 0))), var(--sec-img) var(--sec-pos, center) / var(--sec-size, cover) no-repeat;
}
.sec.has-img.fx-parallax { background-attachment: scroll, fixed; }
/* a hero with its own colour, gradient or picture: its built-in banner picture steps aside */
:root .hero.hero-flat .hero-bg, :root .hero.hero-flat::before, :root .hero.hero-flat .hero-glow { display: none !important; }
:root .hero.hero-flat.has-bg { background: var(--sec-bg); }
:root .hero.hero-flat.has-grad { background: var(--sec-grad); }

/* ---------- text colour that suits the background (written strongly: the design stylesheets set hero text colours too) ---------- */
:root:root .tone-on-dark, :root:root .tone-on-dark :is(h1, h2, h3, h4, .hero-sub, .lead, .prose, p, li, .crumbs a, .crumbs span, .crumbs .cur, .btn-link) { color: #fff; }
:root:root .tone-on-dark :is(.lead, .hero-sub) { color: rgba(255, 255, 255, .86); }
:root:root .tone-on-dark .eyebrow { color: var(--c-cyan); }
:root:root .tone-on-light, :root:root .tone-on-light :is(h1, h2, h3, h4) { color: var(--c-heading); }
:root:root .tone-on-light :is(.hero-sub, .lead, .prose, p, li) { color: var(--c-text); }
:root:root .tone-on-light .eyebrow { color: var(--c-primary); }

/* ---------- height, spacing, position ---------- */
.has-minh { min-height: var(--sec-minh); display: flex; flex-direction: column; justify-content: center; }
.has-minh.va-top { justify-content: flex-start; } .has-minh.va-bottom { justify-content: flex-end; }
.has-minh > .container, .has-minh > .hero-inner { width: 100%; }
.hero.has-minh { align-items: stretch; }
.sec.has-pt, .hero.has-pt { padding-top: var(--sec-pt) !important; } .sec.has-pb, .hero.has-pb { padding-bottom: var(--sec-pb) !important; }
.hero.has-pt .hero-inner { padding-top: 0; } .hero.has-pb .hero-inner { padding-bottom: 0; }
.ca-l > .container, .ca-l > .hero-inner { margin-left: 0; } .ca-r > .container, .ca-r > .hero-inner { margin-right: 0; margin-left: auto; }
.has-cw > .container, .has-cw > .hero-inner { max-width: var(--sec-cw); }
.has-px > .hero-inner { padding-left: var(--sec-px); padding-right: var(--sec-px); }

/* ---------- border, corners, shadow ---------- */
.has-bd { border: var(--sec-bd) solid var(--sec-bdc); }
.has-r { border-radius: var(--sec-r); overflow: hidden; }
.sh-soft { box-shadow: 0 4px 14px rgba(11, 37, 69, .10); } .sh-medium { box-shadow: 0 14px 34px -12px rgba(11, 37, 69, .25); } .sh-strong { box-shadow: 0 30px 60px -20px rgba(11, 37, 69, .45); }
.sec.has-r:not(.fx-pin), .sec.has-bd:not(.fx-pin), .sec[class*="sh-"]:not(.fx-pin) { position: relative; }
.sec-boxed.sec { margin-top: .6rem; margin-bottom: .6rem; }

/* ---------- alignment of hero content ---------- */
.hero.ta-center .hero-copy { margin-left: auto; margin-right: auto; text-align: center; }
.hero.ta-center .hero-sub { margin-left: auto; margin-right: auto; }
.hero.ta-center .btn-row, .hero.ta-center .badges, .hero.ta-center .hero-actions, .hero.ta-center .crumbs { justify-content: center; }
.hero.ta-right .hero-copy { margin-left: auto; text-align: right; }
.hero.ta-right .hero-sub { margin-left: auto; }
.hero.ta-right .btn-row, .hero.ta-right .badges, .hero.ta-right .hero-actions, .hero.ta-right .crumbs { justify-content: flex-end; }
.hero.ta-center .eyebrow::before, .hero.ta-right .eyebrow::before { display: none; }
.hero-split.ta-center .hero-inner, .hero-split.ta-right .hero-inner { align-items: center; }

/* ---------- the box around the hero text ---------- */
.hero-copy.hb { max-width: var(--hb-w, 640px); }
.hero-copy.hb-c { margin-left: auto; margin-right: auto; } .hero-copy.hb-r { margin-left: auto; }
.hero-copy.hb-ta-c { text-align: center; } .hero-copy.hb-ta-r { text-align: right; }
.hero-copy.hb-ta-c .btn-row, .hero-copy.hb-ta-c .badges, .hero-copy.hb-ta-c .hero-actions { justify-content: center; } .hero-copy.hb-ta-c .hero-sub { margin-left: auto; margin-right: auto; } .hero-copy.hb-ta-c .eyebrow::before { display: none; }
.hero-copy.hb-ta-r .btn-row, .hero-copy.hb-ta-r .badges, .hero-copy.hb-ta-r .hero-actions { justify-content: flex-end; } .hero-copy.hb-ta-r .hero-sub { margin-left: auto; } .hero-copy.hb-ta-r .eyebrow::before { display: none; }
.hero-copy.hb-fill { background: var(--hb-bg); }
.hero-copy.hb-glass { background: rgba(255, 255, 255, .16); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .35); }
.hero-copy.hb { padding: var(--hb-p, 0); border-radius: var(--hb-r, 0); }
.hero-copy.hb[style*="--hb-bd"] { border: var(--hb-bd) solid var(--hb-bdc); }
.hero-copy.hb.hb-fill:not([style*="--hb-p"]), .hero-copy.hb.hb-glass:not([style*="--hb-p"]) { padding: 2.2rem; border-radius: var(--hb-r, var(--radius)); }
.hero-copy.hb h1 { color: inherit; }
:root:root .hero-copy.hb-tone-on-dark, :root:root .hero-copy.hb-tone-on-dark :is(h1, .hero-sub, li, .crumbs a, .crumbs span) { color: #fff; }
:root:root .hero-copy.hb-tone-on-light, :root:root .hero-copy.hb-tone-on-light :is(h1, li) { color: var(--c-heading); }
:root:root .hero-copy.hb-tone-on-light .hero-sub { color: var(--c-text); }
.hero-copy.lay-sh-soft { box-shadow: 0 4px 14px rgba(11, 37, 69, .10); } .hero-copy.lay-sh-medium { box-shadow: 0 14px 34px -12px rgba(11, 37, 69, .25); } .hero-copy.lay-sh-strong { box-shadow: 0 30px 60px -20px rgba(11, 37, 69, .45); }

/* ---------- visibility by screen size ---------- */
@media (min-width: 761px) and (max-width: 1024px) { .hide-t, .lay-hide-t { display: none !important; } }
@media (max-width: 760px) {
  .lay-hide-m { display: none !important; }
  .has-pm { padding-top: var(--sec-pm) !important; padding-bottom: var(--sec-pm) !important; }
  .has-minh { min-height: min(var(--sec-minh), 100svh); }
  .hero-copy.hb { padding: min(var(--hb-p, 1.4rem), 1.4rem); }
}
@media (min-width: 1025px) { .lay-hide-d { display: none !important; } }

/* ============================================================
   Free layout: containers > columns > blocks > elements
   ============================================================ */
.lay-sec > .container { display: flex; flex-direction: column; gap: var(--lay-sec-gap, 1.5rem); }
.lay-c { width: 100%; box-sizing: border-box; }
.lay-cols { display: grid; }
.lay-col { display: flex; flex-direction: column; gap: var(--lay-gap, 1.2rem); min-width: 0; }
.lay-b { display: flex; flex-direction: column; gap: var(--lay-gap, .8rem); box-sizing: border-box; min-width: 0; }
.lay-c > .lay-cols { width: 100%; }
.lay-flex { display: flex; flex-direction: column; } .lay-flex.lay-va-top > .lay-cols { flex: 1 1 auto; }
.lay-flex.lay-va-top { justify-content: flex-start; } .lay-flex.lay-va-middle { justify-content: center; } .lay-flex.lay-va-bottom { justify-content: flex-end; }
.lay-sa-d, .lay-sa-l, .lay-sa-c, .lay-sa-r { width: 100%; box-sizing: border-box; } .lay-fit { width: fit-content; max-width: 100%; }
.lay-sa-l { margin-left: 0; margin-right: auto; } .lay-sa-c { margin-left: auto; margin-right: auto; } .lay-sa-r { margin-left: auto; margin-right: 0; }
.lay-ta-l { text-align: left; } .lay-ta-c { text-align: center; } .lay-ta-r { text-align: right; }
.lay-ta-c .lay-e-image, .lay-ta-c .lay-e-icon, .lay-ta-c .lay-e-button { text-align: center; } .lay-ta-r .lay-e-image, .lay-ta-r .lay-e-icon, .lay-ta-r .lay-e-button { text-align: right; }
.lay-glass { background: rgba(255, 255, 255, .55); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .6); }
.lay-b.lay-surface:not(.lay-padded), .lay-c.lay-surface:not(.lay-padded) { padding: 1.6rem; }
.lay-b.lay-bordered:not(.lay-padded) { padding: 1.4rem; }
.lay-b.lay-surface, .lay-c.lay-surface { border-radius: var(--radius); }
.lay-b.lay-surface:not([style*="border-radius"]) { overflow: hidden; }

.lay-e { min-width: 0; }
.lay-e > :first-child { margin-top: 0; } .lay-e > :last-child { margin-bottom: 0; }
.lay-h { margin: 0; }
.lay-e-image img, .lay-e-video { display: block; max-width: 100%; }
.lay-e-image[style*="text-align:center"] img { margin-left: auto; margin-right: auto; } .lay-e-image[style*="text-align:right"] img { margin-left: auto; }
.lay-e-icon[style*="text-align:center"] .lay-ico, .lay-e-icon.lay-e { line-height: 0; }
.lay-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--c-primary); }
.lay-e-button { display: block; }
.lay-e-button[style*="text-align:center"] .btn { margin-left: auto; margin-right: auto; }
.lay-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.lay-list li { display: flex; gap: .65rem; align-items: flex-start; }
.lay-list.ls-check li > svg { flex: none; margin-top: .22em; color: var(--c-primary); }
.lay-list.ls-dot, .lay-list.ls-number { padding-left: 1.3rem; display: block; } .lay-list.ls-dot { list-style: disc; } .lay-list.ls-number { list-style: decimal; }
.lay-list.ls-dot li, .lay-list.ls-number li { display: list-item; margin-bottom: .4rem; }
.lay-list.ls-none li { display: block; }
.lay-video { position: relative; width: 100%; overflow: hidden; background: #000; }
.lay-video iframe, .lay-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lay-hr { margin: .4rem 0; height: 0; }
.lay-e-spacer { flex: none; }
.tone-on-dark .lay-ico, .lay-b.tone-on-dark .lay-ico { color: #fff; }

/* ---------- phones and tablets ---------- */
.lay-pm { --lay-pm-on: 1; }
@media (max-width: 760px) {
  .lay-pm { padding: var(--lay-pm) !important; }
  .lay-b.lay-gm, .lay-col.lay-gm { gap: var(--lay-gm) !important; } .lay-c.lay-gm .lay-col { gap: var(--lay-gm) !important; }
  .lay-sp-m { height: var(--sp-m) !important; }
  .lay-cols.lay-st-stack { grid-template-columns: 1fr !important; }
  .lay-cols.lay-st-reverse { grid-template-columns: 1fr !important; }
  .lay-cols.lay-st-reverse > .lay-col:nth-child(1) { order: 8; } .lay-cols.lay-st-reverse > .lay-col:nth-child(2) { order: 7; } .lay-cols.lay-st-reverse > .lay-col:nth-child(3) { order: 6; } .lay-cols.lay-st-reverse > .lay-col:nth-child(4) { order: 5; }
  .lay-cols.lay-st-reverse > .lay-col:nth-child(5) { order: 4; } .lay-cols.lay-st-reverse > .lay-col:nth-child(6) { order: 3; } .lay-cols.lay-st-reverse > .lay-col:nth-child(7) { order: 2; } .lay-cols.lay-st-reverse > .lay-col:nth-child(8) { order: 1; }
  .lay-cols { column-gap: 0; row-gap: var(--lay-gm, 1.4rem); }
  .lay-c { max-width: 100% !important; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .lay-cols.lay-at-t.lay-st-stack { grid-template-columns: 1fr !important; }
  .lay-cols.lay-at-t.lay-st-reverse { grid-template-columns: 1fr !important; }
}

/* ---------- a hero built from containers, blocks and elements ---------- */
.hero-custom { padding: 8.2rem 0 4.6rem; min-height: 0; }
.hero-custom .hero-inner { padding-top: 0; padding-bottom: 0; }
.hero-custom .lay-c { width: 100%; }
.hero-custom .lay-h { text-wrap: balance; }
.hero-custom h1.lay-h { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.hero-custom .lay-e-text { font: 400 clamp(1.05rem, 1.6vw, 1.22rem)/1.6 var(--f-ui); }
.lay-ta-c .eyebrow::before, .eb-plain::before { display: none; }
.lay-ta-c .eyebrow { justify-content: center; }
/* a slider element */
.lay-slider .slide { min-height: var(--lay-sl-h, 360px); }
.lay-slider .sl-media { min-height: var(--lay-sl-h, 360px); background-size: cover; background-position: center; }
.lay-e-slider { width: 100%; }

/* small labels on a coloured box or a dark background stay readable */
:root:root .lay-surface.tone-on-dark .eyebrow, :root:root .hero-custom.tone-on-dark .eyebrow { color: #fff; }
:root:root .lay-surface.tone-on-light .eyebrow { color: var(--c-primary); }
.lay-sa-d { margin-left: 0; margin-right: auto; } .lay-ta-c .lay-sa-d { margin-left: auto; margin-right: auto; } .lay-ta-r .lay-sa-d { margin-left: auto; margin-right: 0; }
.lay-sa-d { margin-left: auto; margin-right: auto; }

/* Page View in the dashboard: no extras over the page */
.wx-preview #admin-bar, .wx-preview .ck-wrap, .wx-preview #wx-chat, .wx-preview #to-top { display: none !important; }
.wx-preview a { cursor: default; }

/* sliders follow the alignment chosen for the section (or the block): the text box centres, and so do its label and button */
.ta-center .slider .sl-copy, .lay-ta-c .slider .sl-copy { margin-left: auto; margin-right: auto; align-items: center; text-align: center; }
.ta-right .slider .sl-copy, .lay-ta-r .slider .sl-copy { margin-left: auto; align-items: flex-end; text-align: right; }
.ta-center .slider .sl-copy .eyebrow::before, .lay-ta-c .slider .sl-copy .eyebrow::before, .ta-right .slider .sl-copy .eyebrow::before { display: none; }
/* a slide without a picture uses the whole width instead of leaving an empty half */
.slider-banner .slide.no-media { grid-template-columns: 1fr; } .slider-banner .slide.no-media .sl-media { display: none; }
.slider-banner .slide.no-media .sl-copy { max-width: 760px; margin: 0 auto; align-items: center; text-align: center; }
.slider-quote .sl-quote, .ta-center .sl-quote { margin-left: auto; margin-right: auto; text-align: center; }

/* a centred section also centres the icons and numbers above its cards and steps */
.ta-center .card-ico, .lay-ta-c .card-ico { display: grid; margin-left: auto; margin-right: auto; }
.ta-right .card-ico { display: grid; margin-left: auto; margin-right: 0; }
.ta-center .steps-horizontal .step-n { left: 50%; transform: translateX(-50%); } .ta-center .steps-horizontal .step::after { display: none; }
.ta-center .steps-horizontal .step { text-align: center; }
.ta-center .booking-form-card, .ta-center .booking-form-card h3, .ta-center .booking-form-card p { text-align: center; }

/* ---------- a word that changes inside a headline */
.rot { display: inline-block; transition: opacity .26s ease, transform .26s ease; }
.rot.out { opacity: 0; transform: translateY(-40%); }
.rot.pre { opacity: 0; transform: translateY(40%); transition: none; }
.rot-accent { color: var(--c-accent); }
.rot-accent { -webkit-text-fill-color: currentColor; }

/* ---------- a warm glow rising from the bottom of a section */
.hero .decor, .hero-custom .decor { z-index: -1; }
.d-glow { left: 50%; bottom: -38%; width: 95%; height: 75%; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--dc) 75%, transparent), transparent 72%); filter: blur(8px); }
.motion .d-glow { animation: glow-pulse 5s ease-in-out infinite alternate; }
@keyframes glow-pulse { from { opacity: .55; transform: translateX(-50%) scale(.9); } to { opacity: 1; transform: translateX(-50%) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .motion .d-glow { animation: none; } }

/* ---------- cards that light up one at a time */
.cyc .card, .cyc .bt { transition: background .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease, transform .35s ease; }
:root:root .cyc .is-hot { background: var(--hot-bg); border-color: transparent; color: #fff; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .5); }
:root:root .cyc .is-hot :is(h3, h4, p, .ct, .card-num, .card-link, li, span) { color: #fff; }
:root:root .cyc .is-hot .card-ico { background: rgba(255, 255, 255, .22); box-shadow: none; color: #fff; }

/* ====================================================================== moving sections */
/* ---------- photo rows */
.sec-pr { overflow: hidden; }
.pr-rows { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.pr-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.pr-track { display: flex; gap: 1rem; width: max-content; animation: pr-left var(--dur, 60s) linear infinite; }
.pr-row.rev .pr-track { animation-name: pr-right; }
.pr-still .pr-row:hover .pr-track { animation-play-state: paused; }
@keyframes pr-left { to { transform: translateX(calc(-50% - .5rem)); } } @keyframes pr-right { from { transform: translateX(calc(-50% - .5rem)); } to { transform: translateX(0); } }
.pr-card { position: relative; flex: none; width: var(--cw, 190px); aspect-ratio: 3 / 4; margin: 0; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #3b2a6b, #1a1233); box-shadow: 0 12px 30px -16px rgba(7, 27, 51, .55); }
.pr-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pr-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(5, 10, 25, .82)); }
.pr-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .1rem; color: #fff; }
.pr-card figcaption b { font: 700 .95rem/1.15 var(--f-ui); } .pr-card figcaption span { font: 500 .72rem/1.25 var(--f-ui); opacity: .85; }
.tint-purple { background: linear-gradient(160deg, #5b3c9a, #1d1238); } .tint-green { background: linear-gradient(160deg, #2c7a5a, #0c2a20); } .tint-red { background: linear-gradient(160deg, #a23a4f, #2b0e16); }
.tint-blue { background: linear-gradient(160deg, #2c58a8, #0c1d3d); } .tint-gold { background: linear-gradient(160deg, #a77a22, #2d1f06); } .tint-teal { background: linear-gradient(160deg, #1f7f86, #0a2a2d); }
@media (prefers-reduced-motion: reduce) { .pr-track, .orb-track { animation: none; } .pr-row, .orb-row { overflow-x: auto; } }

/* ---------- centre-focus carousel */
.sec-cf { overflow: hidden; }
.cf { position: relative; margin-top: 1.6rem; }
.cf-stage { position: relative; height: var(--cf-h, 440px); }
.cf-card { position: absolute; left: 50%; top: 0; width: min(340px, 74%); height: 100%; border-radius: 22px; overflow: hidden; background: linear-gradient(160deg, #1b3a63, #08162b) center / cover no-repeat; color: #fff; text-decoration: none; box-shadow: 0 24px 50px -22px rgba(7, 27, 51, .6); transition: transform .65s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.6); }
.cf-card.p0 { opacity: 1; z-index: 5; pointer-events: auto; transform: translateX(-50%) scale(1); }
.cf-card.p1 { opacity: .85; z-index: 4; pointer-events: auto; cursor: pointer; transform: translateX(calc(-50% + 72%)) scale(.82); } .cf-card.pm1 { opacity: .85; z-index: 4; pointer-events: auto; cursor: pointer; transform: translateX(calc(-50% - 72%)) scale(.82); }
.cf-card.p2 { opacity: .45; z-index: 3; transform: translateX(calc(-50% + 128%)) scale(.66); } .cf-card.pm2 { opacity: .45; z-index: 3; transform: translateX(calc(-50% - 128%)) scale(.66); }
.cf-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 12, 28, .15) 0%, rgba(5, 12, 28, .88) 100%); }
.cf-card:not(.p0) .cf-body { opacity: .85; }
.cf-body { position: absolute; inset: 0; z-index: 1; padding: 1.3rem 1.2rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem; text-align: left; }
.cf-label { font: 600 .7rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.cf-big { font: 400 clamp(2rem, 3.4vw, 2.7rem)/1 var(--f-heading); }
.cf-name { font: 500 .92rem var(--f-ui); } .cf-name strong { font-weight: 700; }
.cf-quote { font: italic 400 .9rem/1.5 var(--f-body); opacity: .92; } .cf-quote p { margin: 0; color: inherit; }
.cf-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; } .cf-tags i { font: 600 .62rem var(--f-ui); font-style: normal; letter-spacing: .06em; text-transform: uppercase; padding: .22rem .55rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; }
.cf-dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1.2rem; }
.cf-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--c-text) 30%, transparent); cursor: pointer; transition: width .3s, background .3s; } .cf-dots button.on { width: 26px; background: var(--c-accent); }
.cf > .sl-btn { position: absolute; top: calc(var(--cf-h, 440px) / 2 - 22px); z-index: 6; } .cf > .sl-prev { left: 0; } .cf > .sl-next { right: 0; }
@media (max-width: 760px) { .cf-card { width: 78%; } .cf-card.p1 { transform: translateX(calc(-50% + 66%)) scale(.78); } .cf-card.pm1 { transform: translateX(calc(-50% - 66%)) scale(.78); } .cf-card.p2, .cf-card.pm2 { opacity: 0; } }

/* ---------- a fixed side with scrolling cards */
.ss { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
.ss-r { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } .ss-r .ss-fixed { order: 2; }
.ss-fixed { position: sticky; top: 110px; align-self: start; }
.ss-fixed .sec-head { text-align: left; margin: 0 0 1.4rem; max-width: none; }
.ss-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.ss-list li { display: flex; gap: .9rem; align-items: center; padding: .8rem 1rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; cursor: pointer; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease; opacity: .72; }
.ss-list li.on { opacity: 1; transform: translateX(6px); border-color: color-mix(in srgb, var(--c-primary) 45%, var(--c-border)); box-shadow: var(--shadow-sm); }
.ss-n { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 700 1.1rem var(--f-heading); background: color-mix(in srgb, var(--c-primary) 12%, #fff); color: var(--c-primary); }
.ss-list li.on .ss-n { background: var(--c-primary); color: #fff; }
.ss-list b { display: block; font: 600 .98rem var(--f-ui); color: var(--c-heading); } .ss-list small { display: block; color: var(--c-muted); font-size: .8rem; }
.ss-cards { display: flex; flex-direction: column; gap: 1.6rem; }
.ss-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); }
.ss-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ss-body { padding: 1.3rem 1.5rem 1.6rem; } .ss-body h3 { margin: 0 0 .4rem; font-size: 1.3rem; } .ss-body .ct { color: var(--c-text); font-size: .95rem; }
@media (max-width: 900px) { .ss, .ss-r { grid-template-columns: 1fr; } .ss-r .ss-fixed { order: 0; } .ss-fixed { position: static; } .ss-list li.on { transform: none; } }

/* ---------- a glowing logo with labels sliding past */
.sec-orb { overflow: hidden; }
.orb { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0; margin-top: 2rem; }
.orb-side { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.orb-row { overflow: hidden; }
.orb-l .orb-row { -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 100%); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 100%); }
.orb-r .orb-row { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 75%, transparent); mask-image: linear-gradient(90deg, #000 0, #000 75%, transparent); }
.orb-track { display: flex; gap: .7rem; width: max-content; animation: pr-right var(--dur, 46s) linear infinite; }
.orb-chip { flex: none; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border-radius: 999px; font: 600 .82rem var(--f-ui); white-space: nowrap; color: var(--c-heading); background: color-mix(in srgb, var(--c-primary) 9%, #fff); border: 1px solid color-mix(in srgb, var(--c-primary) 22%, transparent); }
.bg-dark .orb-chip { color: #fff; background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); }
.orb-r .orb-chip { color: #1f9d6a; background: color-mix(in srgb, #1f9d6a 10%, transparent); border-color: color-mix(in srgb, #1f9d6a 35%, transparent); } .bg-dark .orb-r .orb-chip { color: #62e3a8; background: rgba(62, 220, 150, .08); border-color: rgba(98, 227, 168, .3); }
.orb-core { --gc: var(--c-accent); position: relative; width: 150px; height: 150px; margin: 0 clamp(1rem, 3vw, 3rem); display: grid; place-items: center; }
.orb-core.tone-primary { --gc: var(--c-primary); }
.orb-core::before, .orb-core::after { content: ''; position: absolute; top: 50%; height: 0; width: clamp(40px, 8vw, 110px); border-top: 1.5px dashed color-mix(in srgb, var(--c-text) 38%, transparent); } .orb-core::before { right: 100%; } .orb-core::after { left: 100%; }
.bg-dark .orb-core::before, .bg-dark .orb-core::after { border-top-color: rgba(255, 255, 255, .35); }
.orb-core img, .orb-dot { position: relative; z-index: 2; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--gc) 60%, transparent)); }
.orb-dot { border-radius: 50%; background: var(--gc); }
.orb-ring { position: absolute; border-radius: 50%; inset: 0; border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent); background: radial-gradient(closest-side, color-mix(in srgb, var(--gc) 38%, transparent), transparent 72%); animation: orb-pulse 4.5s ease-in-out infinite; }
.orb-ring.r2 { inset: -22px; animation-delay: .8s; opacity: .7; } .orb-ring.r3 { inset: -48px; animation-delay: 1.6s; opacity: .45; background: none; }
@keyframes orb-pulse { 0%, 100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .orb-ring { animation: none; } }
@media (max-width: 860px) { .orb { grid-template-columns: 1fr; gap: 1.4rem; } .orb-core { margin: .6rem auto; } .orb-core::before, .orb-core::after { display: none; } .orb-l .orb-row, .orb-r .orb-row { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } }

/* ---------- stacked cards: boxed, rounded, leaning, with a gap */
.stack-card { margin-bottom: var(--st-gap, 48px); transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 45%; }
.sec-boxed.stack-card { margin-top: 0; }
html body main { overflow-x: clip; }

/* ---------- sideways scroll */
.hs-sec { padding: 0; }
.hs { position: relative; }
.hs-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding-top: clamp(4.5rem, 11vh, 6.5rem); box-sizing: border-box; }
.hs-track { display: flex; align-items: center; gap: var(--gap, 40px); padding: 0 max(5vw, 24px); will-change: transform; width: max-content; margin-block: auto; }
.hs-intro { flex: none; padding: 0 max(5vw, 24px); box-sizing: border-box; } .hs-intro .sec-head { margin: 0; }
.hs-intro.hs-left { max-width: min(820px, 100%); } .hs-intro.hs-left .sec-head { text-align: left; } .hs-intro.hs-left .sec-head .eyebrow { justify-content: flex-start; }
.hs-intro.hs-center .sec-head { text-align: center; margin: 0 auto; } .hs-intro.hs-center .sec-head .eyebrow { justify-content: center; }
.hs-card { flex: none; width: var(--cw, 380px); border-radius: 22px; overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: 0 24px 50px -24px rgba(7, 27, 51, .45); color: var(--c-text); text-decoration: none; transform: rotate(var(--tilt, 0deg)); }
.hs-card.lean-b, .hs-panel.lean-b { transform: rotate(calc(var(--tilt, 0deg) * -1)); } .hs-panel.lean-a { transform: rotate(var(--tilt, 0deg)); }
.hs-panel { flex: none; width: var(--pw, 560px); } .hs-panel .lay-c { width: 100%; }
.hs-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hs-body { padding: 1.2rem 1.4rem 1.5rem; } .hs-body h3 { margin: 0 0 .4rem; font-size: 1.3rem; } .hs-body .ct { font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .hs-stick { position: static; height: auto; overflow-x: auto; padding: 2rem 0; } .hs-track { margin-block: 1.5rem 0; } .hs-card { transform: none; } }

@media (prefers-reduced-motion: reduce) { .hs-panel { transform: none; } }

/* ---------- a ready-made section inside a container, column or block: it takes its surroundings' background, width and padding */
.lay-w { width: 100%; min-width: 0; }
.lay-w > .sec { padding-top: var(--w-pad, 1.2rem); padding-bottom: var(--w-pad, 1.2rem); }
.lay-w > .sec.bg-default:not(.has-bg):not(.has-grad):not(.has-img) { background: transparent; }
.lay-w > .sec > .container { max-width: none; padding-left: 0; padding-right: 0; }
.lay-w > .sec.fx-pin { position: relative; }
.lay-c > .lay-wrow { width: 100%; } .lay-c > .lay-cols + .lay-wrow, .lay-c > .lay-wrow + .lay-cols, .lay-c > .lay-wrow + .lay-wrow { margin-top: var(--lay-gap, 1.4rem); }

/* ====================================================================== appearance controls: the same on every level */
/* backgrounds chosen on a section win over the design's own dark or tinted backgrounds */
:root .sec.has-bg, :root .hero.has-bg { background: var(--sec-bg); }
:root .sec.has-grad, :root .hero.has-grad { background: var(--sec-grad); }
:root .sec.has-img, :root .hero.has-img { background: linear-gradient(rgba(7, 27, 51, var(--sec-ov, 0)), rgba(7, 27, 51, var(--sec-ov, 0))), var(--sec-img) var(--sec-pos, center) / var(--sec-size, cover) no-repeat; }
:root .sec.has-img.fx-parallax { background-attachment: scroll, fixed; }
/* entrance animation on the same element (containers, columns, blocks, elements) */
.js [data-reveal][data-anim="fade"]:not(.in) { transform: none; }
.js [data-reveal][data-anim="slide-left"]:not(.in) { transform: translateX(-56px); }
.js [data-reveal][data-anim="slide-right"]:not(.in) { transform: translateX(56px); }
.js [data-reveal][data-anim="zoom"]:not(.in) { transform: scale(.9); }
[data-anim="none"][data-reveal]:not(.in) { opacity: 1; transform: none; }
/* a column and an element can carry a box too */
.lay-col.lay-surface, .lay-e.lay-surface { border-radius: 0; }
.lay-col.lay-padded, .lay-e.lay-padded { box-sizing: border-box; }
.lay-e.lay-bordered, .lay-e.lay-surface { box-sizing: border-box; }
.lay-col.lay-pm { padding: var(--lay-pm) !important; }
@media (max-width: 760px) { .lay-e.lay-pm { padding: var(--lay-pm) !important; } }

/* a section's heading block follows the section's text alignment */
.ta-left .sec-head { text-align: left; } .ta-right .sec-head { text-align: right; } .ta-center .sec-head { text-align: center; }
.ta-right .sec-head .lead, .ta-left .sec-head .lead { margin-left: 0; }

/* a minimum height chosen on a hero beats the design's own hero heights */
:root:root .hero.has-minh { min-height: var(--sec-minh); }
/* the closing call to action follows the section's text alignment */
.ta-left .cta-box { text-align: left; } .ta-right .cta-box { text-align: right; }
.ta-left .cta-box .btn-row, .ta-left .cta-box .sec-actions { justify-content: flex-start; } .ta-right .cta-box .btn-row, .ta-right .cta-box .sec-actions { justify-content: flex-end; }
.ta-right .cta-box p, .ta-right .cta-box .cta-text { margin-left: auto; margin-right: 0; } .ta-left .cta-box p, .ta-left .cta-box .cta-text { margin-left: 0; margin-right: auto; }
/* the width chosen for the hero text box beats the design's own hero text widths */
:root:root .hero-copy.hb { max-width: var(--hb-w, 640px); }

/* ====================================================================== hero: where the text sits, and the shape of the split picture */
/* the shading that keeps the text readable follows the text */
.hero.tp-r::before { transform: scaleX(-1); }
.hero-home.tp-c::before { background: rgba(3, 22, 43, .78); }
.hero-page.tp-c::before { background: rgba(3, 22, 43, calc(var(--ov, .7) + .08)); }
html[data-design="corporate"] .hero-home.tp-c:not(.hero-split)::before { background: rgba(248, 251, 255, .9); }
@media (min-width: 981px) {
  /* Light design, banner: the picture moves to the side opposite the text; with the text centred it fades in behind */
  html[data-design="corporate"] .hero-page.tp-r .hero-bg { left: 0; right: auto; -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 85%); mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 85%); }
  html[data-design="corporate"] .hero-page.tp-c .hero-bg { left: 0; width: 100%; opacity: .14; -webkit-mask-image: none; mask-image: none; }
  /* Light design, split: text right, picture left, the floating cards mirrored */
  html[data-design="corporate"] .hero-split.tp-r .hero-inner { grid-template-columns: .98fr 1.02fr; }
  html[data-design="corporate"] .hero-split.tp-r .hero-copy { order: 2; }
  html[data-design="corporate"] .hero-split.tp-r .hero-visual { order: 1; }
  html[data-design="corporate"] .hero-split.tp-r .fc1 { left: auto; right: -9%; } html[data-design="corporate"] .hero-split.tp-r .fc2 { right: auto; left: -5%; } html[data-design="corporate"] .hero-split.tp-r .fc3 { left: auto; right: 4%; }
  /* Dark design: the split style has no side picture, so the text block simply moves to the right */
  html:not([data-design="corporate"]) .hero-split.tp-r .hero-copy { margin-left: auto; }
}
/* the split picture: 4:3 unless another shape is chosen */
html[data-design="corporate"] .hv-frame { aspect-ratio: var(--hv-ar, 4 / 3); }

/* hero: the width chosen for the text (headline and the line under it); never wider than the screen */
:root:root .hero.has-tw .hero-copy { max-width: min(var(--tw), 100%); }
:root:root .hero.has-tw .hero-sub { max-width: min(calc(var(--tw) * .92), 100%); }