/* FG Together / Together Holding - site styles */

:root {
  --green: #20b878;        /* logo */
  --green-hover: #1aa36a;
  --green-dark: #0e3a29;   /* bands, page headers */
  --green-deep: #0a2a1e;   /* footer, panels */
  --green-tint: #eef6f2;
  --green-line: #cfe5da;

  --text: #15201b;
  --muted: #5d6b64;
  --line: #dfe5e2;
  --white: #ffffff;
  --on-dark: #e9f1ed;
  --muted-dark: #9bb3a8;
  --line-dark: rgba(255, 255, 255, 0.14);

  --font: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --sec: clamp(64px, 8vw, 112px);
  --hdr: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--green); color: var(--green-deep); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Type ---------- */
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 2.6vw, 2.3rem); line-height: 1.15; }
h3 { font-size: 1.2rem; line-height: 1.3; }
p { margin: 0; }
.lead { font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--muted); max-width: 36em; }
.small { font-size: .9rem; color: var(--muted); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 28px;
  font-size: 1rem; font-weight: 600; letter-spacing: .01em;
  border: 2px solid transparent; border-radius: 3px; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn--green { background: var(--green); color: var(--on-accent); }
.btn--green:hover { background: var(--green-hover); }
.btn--dark { background: var(--green-dark); color: #fff; }
.btn--dark:hover { background: var(--green-deep); }
.btn--outline { border-color: var(--green-dark); color: var(--green-dark); }
.btn--outline:hover { background: var(--green-dark); color: #fff; }
.btn--ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--green-deep); border-color: #fff; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

.more { font-weight: 600; color: var(--green-dark); border-bottom: 2px solid var(--green); padding-bottom: 2px; }
.more:hover { color: var(--green-hover); }
.green .more { color: #fff; }

/* ---------- Top bar + header ---------- */
.topbar { background: var(--green-deep); color: var(--on-dark); font-size: .88rem; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 40px; gap: 20px; }
.topbar a { opacity: .8; }
.topbar a:hover, .topbar a.on { opacity: 1; }
.topbar .co { display: flex; height: 100%; }
.topbar .co a { display: flex; align-items: center; padding: 0 16px; height: 100%; }
.topbar .co a:first-child { padding-left: 0; }
.topbar .co a.on { background: var(--white); color: var(--green-deep); padding: 0 16px; font-weight: 600; }
.topbar .ct { display: flex; gap: 24px; }

.hdr { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.hdr .wrap { height: var(--hdr); display: flex; align-items: center; gap: 36px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand-name { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.brand-name small { font-weight: 500; color: var(--muted); font-size: .95rem; margin-left: 2px; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { font-weight: 500; padding: 28px 0 26px; border-bottom: 3px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--green-dark); }
.nav a[aria-current="page"] { border-color: var(--green); }
.hdr .btn { height: 46px; padding: 0 22px; }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0; margin-left: auto; }
.menu-btn span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px auto; transition: transform .25s, opacity .25s; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mnav { display: none; position: fixed; inset: var(--hdr) 0 0 0; z-index: 49; background: var(--white); padding: 12px var(--gutter) 32px; overflow-y: auto; flex-direction: column; }
.menu-open .mnav { display: flex; }
.mnav a.big { font-size: 1.35rem; font-weight: 600; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mnav-foot { margin-top: 28px; display: grid; gap: 14px; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--green-deep); color: #fff; }
.hero-img { position: absolute; inset: 0; overflow: hidden; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--green-deep) 92%, transparent) 0%, color-mix(in srgb, var(--green-deep) 70%, transparent) 45%, color-mix(in srgb, var(--green-deep) 15%, transparent) 100%); }
.hero .wrap { position: relative; min-height: min(640px, 78vh); display: flex; flex-direction: column; justify-content: center; padding-top: 72px; padding-bottom: 72px; }
.hero h1 { max-width: 13em; }
.hero .lead { margin-top: 20px; color: rgba(255,255,255,.85); }
.hero .btns { margin-top: 34px; }
.hero-phone { margin-top: 28px; font-size: 1rem; color: rgba(255,255,255,.8); }
.hero-phone a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.4); }

.usp { background: var(--green-dark); color: rgba(255,255,255,.78); border-top: 4px solid var(--green); }
.usp .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.usp .wrap > div { padding: 26px 24px 26px 0; }
.usp .wrap > div + div { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.usp b { display: block; font-size: 1.1rem; font-weight: 600; color: var(--green); }
.usp span { font-size: .95rem; }

/* Page header */
.phead { background: var(--green-dark); color: #fff; padding: clamp(40px, 6vw, 72px) 0 clamp(44px, 6vw, 76px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .9rem; color: var(--muted-dark); margin-bottom: 26px; }
.crumbs a:hover { color: #fff; }
.phead-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: end; }
.phead .lead { margin-top: 16px; color: rgba(255,255,255,.8); }
.phead-meta { margin: 0; border-top: 1px solid var(--line-dark); }
.phead-meta div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-dark); font-size: .95rem; }
.phead-meta dt { color: var(--muted-dark); }
.phead-meta dd { margin: 0; text-align: right; font-weight: 500; }
.pimage { aspect-ratio: 24 / 7; overflow: hidden; background: var(--green-tint); }
.pimage img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Sections ---------- */
.sec { padding: var(--sec) 0; }
.tint { background: var(--green-tint); }
.green { background: var(--green-dark); color: #fff; }
.shead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; margin-bottom: 40px; }
.shead > div { max-width: 46em; }
.shead .lead { margin-top: 12px; }
.green .lead { color: rgba(255,255,255,.78); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 3px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.tint .card { border-color: var(--green-line); }
.card p { color: var(--muted); }
.card .tag { font-size: .85rem; font-weight: 500; color: var(--muted); }
.card .more { margin-top: auto; align-self: flex-start; }
.card ul { margin-top: 6px; }
a.card { transition: border-color .2s; border-top: 3px solid var(--green); }
a.card:hover { border-color: var(--green); }
a.card:hover h3 { color: var(--green-dark); }
.card-img { margin: -28px -28px 10px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-tint); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }

/* Columns with green top rule */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 48px); }
.cols.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col { border-top: 3px solid var(--green); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.col p { color: var(--muted); }
.green .col p { color: rgba(255,255,255,.75); }

/* Lists */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { position: relative; padding: 7px 0 7px 28px; }
.checks li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 12px; height: 6px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.card .checks li, .col .checks li { padding-top: 4px; padding-bottom: 4px; font-size: .97rem; }
.card .checks li::before, .col .checks li::before { top: 11px; }

.facts { margin: 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; }
.green .facts, .green .facts div, .panel .facts, .panel .facts div { border-color: var(--line-dark); }
.green .facts dt, .panel .facts dt { color: var(--muted-dark); }

/* Split */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split-img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--green-tint); }
.split-img img { width: 100%; height: 100%; object-fit: cover; }
.split h2 { margin-bottom: 14px; }
.split .facts { margin-top: 26px; }
.note { margin-top: 24px; padding: 16px 18px; background: var(--green-tint); border-left: 3px solid var(--green); font-size: .97rem; }
.note b { font-weight: 600; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: s; }
.steps.s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { counter-increment: s; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 3px; }
.tint .step { border-color: var(--green-line); }
.green .step { background: rgba(255,255,255,.06); border-color: var(--line-dark); }
.step::before { content: counter(s, decimal-leading-zero); display: block; font-size: .9rem; font-weight: 600; color: var(--green); margin-bottom: 8px; }
.step p { margin-top: 6px; color: var(--muted); font-size: .97rem; }
.green .step p { color: rgba(255,255,255,.72); }

/* Paths (start here) */
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.path { border: 1px solid var(--line); border-radius: 3px; padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.path.main { background: var(--green-dark); color: #fff; border-color: var(--green-dark); }
.path p { color: var(--muted); }
.path.main p { color: rgba(255,255,255,.78); }
.path .checks { margin: 4px 0 10px; }
.path .btn { margin-top: auto; align-self: flex-start; }

/* Table */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-weight: 600; font-size: .95rem; padding: 14px 18px; background: var(--green-dark); color: #fff; }
.tbl td { padding: 16px 18px; border-bottom: 1px solid var(--green-line); background: var(--white); }
.tbl td:first-child a { font-weight: 600; color: var(--green-dark); }
.tbl td:first-child a:hover { color: var(--green-hover); }

/* FAQ */
.faq { border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; font-size: 1.12rem; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-size: 1.5rem; line-height: 1; font-weight: 500; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 22px; color: var(--muted); max-width: 44em; }

/* Related */
.related { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 28px 0; border-top: 1px solid var(--line); }
.related strong { font-weight: 600; margin-right: 4px; }
.related a { color: var(--green-dark); font-weight: 500; text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 4px; }

/* CTA */
.cta { background: var(--green-dark); color: #fff; padding: clamp(56px, 7vw, 88px) 0; }
.cta-grid { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta .lead { margin-top: 10px; color: rgba(255,255,255,.78); }
.cta-side { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.cta-phone { font-size: 1.5rem; font-weight: 600; }
.cta-phone small { display: block; font-size: .85rem; font-weight: 400; color: var(--muted-dark); }

/* Footer */
.ftr { background: var(--green-deep); color: var(--muted-dark); padding: 56px 0 28px; font-size: .97rem; }
.ftr-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr)); gap: 40px; }
.ftr .brand { color: #fff; margin-bottom: 16px; }
.ftr .brand-name small { color: var(--muted-dark); }
.ftr h4 { color: #fff; font-size: 1rem; font-weight: 600; margin: 0 0 14px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ftr a:hover { color: #fff; }
.ftr-base { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: .88rem; }
.ftr-base nav { display: flex; gap: 22px; }

/* ---------- Coverage map ---------- */
.map-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.map { background: var(--green-tint); border-radius: 3px; padding: 24px; }
.map svg { width: 100%; height: auto; max-height: 520px; }
.map .rt { stroke: var(--green-line); stroke-width: 1.5; fill: none; }
.map .rt.on { stroke: var(--green); stroke-width: 2; }
.map .city circle { fill: var(--green-dark); }
.map .city text { fill: var(--text); font: 600 13px var(--font); }
.map .cc { fill: color-mix(in srgb, var(--green-dark) 8%, transparent); font: 700 72px var(--font); }
.countries { margin: 0; border-top: 1px solid var(--line); }
.countries div { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.countries b { font-weight: 700; color: var(--green-dark); }
.countries span { color: var(--muted); }

/* ---------- Gate ---------- */
.gate { min-height: 100svh; display: flex; flex-direction: column; background: var(--green-deep); color: #fff; }
.gate .wrap { max-width: 1480px; }
.gate-hdr { border-bottom: 1px solid var(--line-dark); }
.gate-hdr .wrap { height: var(--hdr); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.gate-hdr .brand-name small, .gate-hdr .ct { color: var(--muted-dark); }
.gate-hdr .ct { display: flex; gap: 24px; font-size: .95rem; }
.gate-hdr .ct a:hover { color: #fff; }
.gate-main { flex: 1; display: flex; flex-direction: column; padding: clamp(28px, 5vh, 56px) 0 clamp(20px, 3vh, 32px); }
.gate-main > .wrap { flex: 1; display: flex; flex-direction: column; }
.gate-main h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.gate-top .k { color: var(--green); font-weight: 600; margin-bottom: 10px; display: block; }
.gate-choices { flex: 1; margin-top: clamp(24px, 4vh, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice { position: relative; overflow: hidden; border-radius: 3px; min-height: 420px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 3vw, 40px); color: #fff; background: var(--green-deep); border-top: 4px solid transparent; transition: border-color .3s; }
.choice:hover { border-color: var(--green); }
.choice-img { position: absolute; inset: 0; }
.choice-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.choice-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--green-deep) 10%, transparent) 25%, color-mix(in srgb, var(--green-deep) 94%, transparent) 85%); }
.choice:hover .choice-img img { transform: scale(1.04); }
.choice > *:not(.choice-img) { position: relative; }
.choice .co { display: flex; align-items: center; gap: 10px; font-weight: 500; color: rgba(255,255,255,.85); }
.choice .co img { width: 26px; height: 26px; object-fit: contain; }
.choice h2 { margin-top: 10px; font-size: clamp(2.2rem, 3.8vw, 3.2rem); }
.choice p { margin-top: 8px; color: rgba(255,255,255,.85); max-width: 28em; }
.choice-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.choice-list li { font-size: .9rem; padding: 5px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 3px; color: rgba(255,255,255,.9); }
.choice .btn { margin-top: 24px; align-self: flex-start; }
.choice:hover .btn { background: var(--green-hover); }
.gate-ftr { padding: 20px 0; border-top: 1px solid var(--line-dark); font-size: .9rem; color: var(--muted-dark); }
.gate-ftr .wrap { display: flex; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; }
.gate-ftr .creds { display: flex; gap: 10px 28px; flex-wrap: wrap; }
.gate-ftr .creds b { color: #fff; font-weight: 600; }

/* ---------- Gallery placeholders ---------- */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.ph { margin: 0; position: relative; background: var(--green-tint); border: 1px dashed var(--green-line); border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph > span { font-weight: 600; letter-spacing: .08em; color: var(--green-dark); opacity: .55; }
.g-a { grid-column: span 8; aspect-ratio: 16 / 10; }
.g-c { grid-column: span 4; aspect-ratio: 4 / 3; }
.gallery .stack { grid-column: span 4; display: grid; gap: 12px; }
.gallery .stack .ph { height: 100%; }

/* ---------- Rental selector ---------- */
.sel { border: 1px solid var(--green-line); border-radius: 3px; overflow: hidden; background: var(--white); }
.sel-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--green-line); }
.sel-tabs button { border: 0; border-right: 1px solid var(--green-line); background: var(--white); padding: 18px 22px; text-align: left; cursor: pointer; }
.sel-tabs button:last-child { border-right: 0; }
.sel-tabs button b { display: block; font-size: 1.15rem; font-weight: 600; }
.sel-tabs button span { display: block; font-size: .92rem; color: var(--muted); }
.sel-tabs button[aria-selected="true"] { background: var(--green-dark); color: #fff; }
.sel-tabs button[aria-selected="true"] span { color: var(--muted-dark); }
.sel-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sel-main { padding: 32px; }
.sel-main > p { font-size: 1.1rem; }
.sel-main .facts { margin-top: 22px; }
.sel-uses { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sel-uses button { border: 1px solid var(--line); border-radius: 3px; background: var(--white); padding: 14px; text-align: left; cursor: pointer; }
.sel-uses button b { display: block; font-weight: 600; }
.sel-uses button span { display: block; font-size: .88rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.sel-uses button[aria-pressed="true"] { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background: var(--green-tint); }
.sel-side { padding: 32px; background: var(--green-tint); display: flex; flex-direction: column; gap: 18px; }
.sel-side h3 { font-size: 1.1rem; }
.sel-side .btn { align-self: flex-start; }

/* ---------- Forms ---------- */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
.fgrid .full { grid-column: 1 / -1; }
.field { display: grid; gap: 7px; }
.field > label, .field > .flabel { font-weight: 600; font-size: .95rem; }
.field input, .field select, .field textarea {
  width: 100%; height: 50px; padding: 0 14px; background: var(--white);
  border: 1px solid #c9d3ce; border-radius: 3px; font-size: 1rem; appearance: none; -webkit-appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--green-dark) 50%), linear-gradient(135deg, var(--green-dark) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { height: 130px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); }
.field input::placeholder, .field textarea::placeholder { color: #a9b3ae; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 10px 16px; border: 1px solid #c9d3ce; border-radius: 3px; font-size: .97rem; background: var(--white); transition: background .15s, border-color .15s; }
.seg span:hover { border-color: var(--green); }
.seg input:checked + span { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }

.adv { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border: 1px solid var(--green-line); border-radius: 3px; overflow: hidden; }
.adv-form { padding: clamp(22px, 3vw, 36px); display: grid; gap: 22px; background: var(--white); }
.panel { background: var(--green-dark); color: #fff; }
.adv-out { padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 20px; }
.adv-out .k { font-size: .95rem; color: var(--green); font-weight: 600; }
.adv-out h3 { font-size: 1.7rem; margin-top: 4px; }
.adv-out .sub { color: var(--muted-dark); }
.adv-out .why { color: rgba(255,255,255,.85); }
.adv-out .checks li { padding-top: 3px; padding-bottom: 3px; }
.adv-out .checks li::before { top: 10px; }
.adv-out .btn { margin-top: auto; align-self: flex-start; }

.qgrid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.qform { display: grid; gap: 32px; }
.qform fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 18px; }
.qform legend { font-size: 1.35rem; font-weight: 600; padding: 0 0 12px; margin-bottom: 4px; border-bottom: 2px solid var(--green); width: 100%; }
.qsum { position: sticky; top: calc(var(--hdr) + 24px); padding: 28px; border-radius: 3px; display: grid; gap: 16px; }
.qsum h3 { font-size: 1.3rem; }
.qsum .facts dd.empty { color: var(--muted-dark); font-weight: 400; }
.form-ok { display: none; padding: 18px; border-left: 3px solid var(--green); background: var(--green-tint); }
.form-ok.on { display: block; }

/* Channels */
.channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.channel { border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: 3px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.channel .big { font-size: 1.4rem; font-weight: 600; color: var(--green-dark); word-break: break-word; }
.channel p { color: var(--muted); }
.channel .btn { margin-top: auto; align-self: flex-start; }

/* Article */
.art { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); }
.art-body { font-size: 1.12rem; line-height: 1.75; max-width: 40em; }
.art-body p + p { margin-top: 1.1em; }
.keys { padding: 24px; background: var(--green-tint); border-radius: 3px; align-self: start; }
.keys h3 { font-size: 1.05rem; margin-bottom: 8px; }

/* News list */
.news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.news .card time { font-size: .9rem; color: var(--muted); }

/* Legal */
.legal { display: grid; gap: 44px; max-width: 860px; }
.legal h2 { font-size: 1.5rem; margin-bottom: 8px; }
.legal p { color: var(--muted); margin-bottom: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .nav { gap: 20px; }
  .nav a { font-size: .97rem; }
}
@media (max-width: 1000px) {
  .nav, .hdr .btn { display: none; }
  .menu-btn { display: block; }
  .cards, .cards.c4, .news, .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols.c4, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usp .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usp .wrap > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .usp .wrap > div:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .adv, .sel-body, .qgrid, .art { grid-template-columns: 1fr; }
  .qsum { position: static; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .topbar .ct a.mail { display: none; }
}
@media (max-width: 760px) {
  :root { --hdr: 66px; }
  body { font-size: 16px; }
  .brand img { width: 34px; height: 34px; }
  .brand-name { font-size: 1.15rem; }
  .phead-grid, .split, .map-grid { grid-template-columns: 1fr; gap: 28px; }
  .cards, .cards.c2, .cards.c4, .news, .paths, .cols, .cols.c2, .cols.c4, .steps, .steps.s3, .channels { grid-template-columns: 1fr; }
  .gate-choices { grid-template-columns: 1fr; }
  .choice { min-height: 380px; height: auto; }
  .hero-img::after { background: linear-gradient(180deg, color-mix(in srgb, var(--green-deep) 55%, transparent) 0%, color-mix(in srgb, var(--green-deep) 92%, transparent) 70%); }
  .hero .wrap { min-height: 560px; justify-content: flex-end; }
  .pimage { aspect-ratio: 16 / 9; }
  .gallery .g-a, .gallery .stack, .gallery .g-c { grid-column: span 12; }
  .gallery .stack { grid-template-columns: 1fr 1fr; }
  .gallery .stack .ph { aspect-ratio: 1 / 1; }
  .sel-tabs { grid-template-columns: 1fr; }
  .sel-tabs button { border-right: 0; border-bottom: 1px solid var(--green-line); }
  .sel-uses { grid-template-columns: 1fr; }
  .sel-main, .sel-side { padding: 22px; }
  .fgrid { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
  .ftr-grid { grid-template-columns: 1fr; }
  .topbar .ct a.tel span { display: none; }
  .gate-hdr .ct a.mail { display: none; }
  .hero .btns .btn, .cta .btn, .path .btn { width: 100%; }
}
@media (max-width: 460px) {
  .usp .wrap { grid-template-columns: 1fr; }
  .usp .wrap > div, .usp .wrap > div + div { padding: 16px 0; border-left: 0; }
  .usp .wrap > div + div { border-top: 1px solid var(--line-dark); }
  .topbar .co a { padding: 0 10px; }
}

/* =====================================================================
   MOTION
   ===================================================================== */
:root { --ease: cubic-bezier(.2, .7, .2, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); }

/* ---------- Page transitions (native, cross-document) ---------- */
@view-transition { navigation: auto; }

/* True crossfade: old and new pages blend at the same time (no white gap, no hard cut).
   The new page also rises slightly; header and top bar stay fixed (named groups below). */
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: plus-lighter; }
::view-transition-old(root) { animation: vt-out .55s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease-io) both; }
@keyframes vt-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; } }

/* Header, top bar and logo stay put between pages */
.topbar { view-transition-name: topbar; }
.hdr { view-transition-name: site-header; }
.hdr .brand { view-transition-name: brand; }
::view-transition-group(topbar), ::view-transition-group(site-header), ::view-transition-group(brand) { animation-duration: .6s; animation-timing-function: var(--ease-io); }

/* Gate photo expands into the hero photo of the chosen page.
   The whole photo block moves (image + green overlay + video), so it never looks bare. */
.choice--transport .choice-img, .brand-transport .hero-img { view-transition-name: photo-transport; }
.choice--rental .choice-img, .brand-rental .hero-img { view-transition-name: photo-rental; }
::view-transition-group(photo-transport), ::view-transition-group(photo-rental) { animation-duration: .8s; animation-timing-function: var(--ease-io); }
::view-transition-old(photo-transport), ::view-transition-new(photo-transport),
::view-transition-old(photo-rental), ::view-transition-new(photo-rental) { height: 100%; object-fit: cover; overflow: clip; animation-duration: .8s; }

/* Hero text rides on its own layer above the photo, so its entrance animation is visible during the transition */
.hero .wrap { view-transition-name: hero-content; }
::view-transition-group(hero-content) { animation-duration: .6s; animation-timing-function: var(--ease-io); }
::view-transition-new(hero-content) { animation: none; }
::view-transition-old(hero-content) { animation: vt-out .3s var(--ease-io) both; }

/* Fallback for browsers without view transitions */
@supports not (view-transition-name: a) {
  body { animation: page-in .7s var(--ease) both; }
  html.is-leaving body { opacity: 0; transform: translateY(-10px); transition: opacity .35s var(--ease-io), transform .35s var(--ease-io); }
}
@keyframes page-in { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Entrances ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes zoom-out { from { transform: scale(1.08); } }
@keyframes line-grow { from { transform: scaleX(0); } }

.hero h1, .hero .lead, .hero .btns, .hero-phone { animation: rise .9s var(--ease) both; }
.hero h1 { animation-delay: .15s; }
.hero .lead { animation-delay: .3s; }
.hero .btns { animation-delay: .45s; }
.hero-phone { animation-delay: .6s; }
.hero-img img { animation: zoom-out 2.4s var(--ease) both; }
.usp .wrap > div { animation: rise .8s var(--ease) both; }
.usp .wrap > div:nth-child(1) { animation-delay: .3s; }
.usp .wrap > div:nth-child(2) { animation-delay: .38s; }
.usp .wrap > div:nth-child(3) { animation-delay: .46s; }
.usp .wrap > div:nth-child(4) { animation-delay: .54s; }
.usp { border-top: 0; position: relative; }
.usp::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--green); transform-origin: left; animation: line-grow 1.1s var(--ease-io) .2s both; }

.phead .crumbs, .phead h1, .phead .lead { animation: rise .8s var(--ease) both; }
.phead .crumbs { animation-delay: .05s; }
.phead h1 { animation-delay: .12s; }
.phead .lead { animation-delay: .24s; }

/* Gate */
.gate-hdr { animation: fade .8s ease both; }
.gate-top { animation: rise .9s var(--ease) .1s both; }
.choice { animation: rise 1s var(--ease) both; }
.choice:nth-child(1) { animation-delay: .25s; }
.choice:nth-child(2) { animation-delay: .4s; }
.gate-ftr { animation: fade 1s ease .7s both; }
.choice .co, .choice h2, .choice p, .choice-list, .choice .btn { transition: transform .5s var(--ease); }
.choice:hover h2 { transform: translateX(6px); }
.choice:hover .btn { transform: translateX(6px); }
.choice.is-chosen { z-index: 5; }

/* Scroll reveals (classes added by JS) */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }

/* ---------- Micro-interactions ---------- */
.hdr { transition: box-shadow .3s ease; }
.hdr.is-scrolled { box-shadow: 0 6px 24px -12px color-mix(in srgb, var(--green-deep) 25%, transparent); }
.nav a { position: relative; border-bottom-color: transparent !important; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--green); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.btn { transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--green-deep) 55%, transparent); }
.btn:active { transform: translateY(0); }

a.card { transition: border-color .25s, transform .4s var(--ease), box-shadow .4s var(--ease); }
a.card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--green-deep) 45%, transparent); }
.card-img img, .split-img img, .pimage img { transition: transform 1.2s var(--ease); }
a.card:hover .card-img img { transform: scale(1.06); }
.split:hover .split-img img { transform: scale(1.03); }

.more { background-image: linear-gradient(var(--green), var(--green)); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: color .2s, background-size .35s var(--ease); }
.more:hover { background-size: 100% 2px; }

.faq details p { animation: rise .45s var(--ease); }
.faq summary::after { transition: transform .3s var(--ease); }
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }

.sel-tabs button, .sel-uses button, .seg span { transition: background .25s, color .25s, border-color .25s, box-shadow .25s; }
[data-sel="text"], [data-sel="facts"], .adv-out h3, .adv-out .why { animation: fade .5s ease; }

/* Mobile menu slides in */
.mnav { display: flex; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
.menu-open .mnav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mnav a.big { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.menu-open .mnav a.big { opacity: 1; transform: none; }
.menu-open .mnav a.big:nth-child(2) { transition-delay: .04s; }
.menu-open .mnav a.big:nth-child(3) { transition-delay: .08s; }
.menu-open .mnav a.big:nth-child(4) { transition-delay: .12s; }
.menu-open .mnav a.big:nth-child(5) { transition-delay: .16s; }
.menu-open .mnav a.big:nth-child(6) { transition-delay: .2s; }
.menu-open .mnav a.big:nth-child(7) { transition-delay: .24s; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* Hero background video (transport) */
.hero-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.hero-img video.is-playing { opacity: 1; }

/* USP strip: single keywords, slim */
.usp .wrap > div { padding-top: 22px; padding-bottom: 22px; display: flex; align-items: center; gap: 12px; }
.usp .wrap > div::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.usp b { color: #fff; font-weight: 500; font-size: 1.05rem; }

/* Hero fills the whole screen below the top bar and header */
.hero .wrap { min-height: calc(100vh - 40px - var(--hdr)); min-height: calc(100svh - 40px - var(--hdr)); }
@media (max-width: 760px) { .hero .wrap { min-height: calc(100svh - 40px - var(--hdr)); } }

/* Late-loading images fade in */
img.img-wait { opacity: 0; transition: opacity .7s ease; }
img.img-wait.img-in { opacity: 1; }

/* ---------- Page header with photo ---------- */
.phead.has-img { position: relative; overflow: hidden; min-height: clamp(420px, 62vh, 640px); display: flex; align-items: flex-end; padding: clamp(96px, 14vh, 140px) 0 clamp(48px, 7vh, 80px); background: var(--green-deep); }
.phead-bg { position: absolute; inset: 0; }
.phead-bg img { width: 100%; height: 100%; object-fit: cover; animation: zoom-out 2.4s var(--ease) both; }
.phead-bg::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, color-mix(in srgb, var(--green-deep) 94%, transparent) 0%, color-mix(in srgb, var(--green-deep) 82%, transparent) 40%, color-mix(in srgb, var(--green-deep) 45%, transparent) 100%),
  linear-gradient(0deg, color-mix(in srgb, var(--green-deep) 60%, transparent) 0%, color-mix(in srgb, var(--green-deep) 0%, transparent) 45%); }
.phead.has-img > .wrap { position: relative; width: 100%; }
.phead.has-img h1 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); max-width: 14em; }
.phead.has-img .phead-meta { backdrop-filter: blur(6px); background: color-mix(in srgb, var(--green-deep) 35%, transparent); padding: 4px 18px; border: 1px solid var(--line-dark); border-radius: 3px; }
.phead.has-img .phead-meta div:last-child { border-bottom: 0; }
.phead.has-img .phead-meta { animation: rise .9s var(--ease) .35s both; }
@media (max-width: 760px) { .phead.has-img { min-height: 380px; padding-top: 72px; } .phead-bg::after { background: linear-gradient(0deg, color-mix(in srgb, var(--green-deep) 95%, transparent) 10%, color-mix(in srgb, var(--green-deep) 60%, transparent) 100%); } }

/* ---------- Fleet rows ---------- */
.frows { display: grid; gap: clamp(56px, 8vw, 112px); }
.frow { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.frow.rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.frow.rev .frow-img { order: 2; }
.frow-img { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 3px; background: var(--green-tint); }
.frow-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.frow:hover .frow-img img { transform: scale(1.04); }
.frow-img::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; background: var(--green); }
.frow-n { display: block; font-size: .95rem; font-weight: 600; color: var(--green); letter-spacing: .08em; margin-bottom: 14px; }
.frow-txt h2 { margin-bottom: 14px; }
.frow-txt .facts { margin-top: 26px; }
@media (max-width: 860px) {
  .frow, .frow.rev { grid-template-columns: 1fr; gap: 24px; }
  .frow.rev .frow-img { order: 0; }
}

/* =====================================================================
   BRAND THEMES
   FG Together = green (default). Together Holding = red, from its logo.
   Colours are registered so they can animate (gate hover, page changes).
   ===================================================================== */
@property --green       { syntax: "<color>"; inherits: true; initial-value: #20b878; }
@property --green-hover { syntax: "<color>"; inherits: true; initial-value: #1aa36a; }
@property --green-dark  { syntax: "<color>"; inherits: true; initial-value: #0e3a29; }
@property --green-deep  { syntax: "<color>"; inherits: true; initial-value: #0a2a1e; }
@property --green-tint  { syntax: "<color>"; inherits: true; initial-value: #eef6f2; }
@property --green-line  { syntax: "<color>"; inherits: true; initial-value: #cfe5da; }
@property --muted-dark  { syntax: "<color>"; inherits: true; initial-value: #9bb3a8; }
@property --on-accent   { syntax: "<color>"; inherits: true; initial-value: #0a2a1e; }

:root { --on-accent: #0a2a1e; }

/* Together Holding palette (rental pages, and the rental card on the gate) */
.brand-rental,
.choice--rental {
  --green: #d81030;
  --green-hover: #b80c28;
  --green-dark: #4c0e18;
  --green-deep: #330910;
  --green-tint: #fbf0f2;
  --green-line: #f1d0d6;
  --muted-dark: #c8a1a8;
  --on-accent: #ffffff;
}
/* ---------- Gate hover states ----------
   Each card keeps its own colour. Hovering one tints the page in that colour
   and dims the other card to a dark grey, like it's switched off. */
.gate { background: #121614; transition: background-color .7s ease; }
.gate[data-hover="transport"] { background: #0a2a1e; }
.gate[data-hover="rental"] { background: #330910; }
.gate-top .k { color: #a3aca7; transition: color .7s ease; }
.gate[data-hover="transport"] .gate-top .k { color: #20b878; }
.gate[data-hover="rental"] .gate-top .k { color: #e8475f; }

.choice { transition: filter .7s ease, opacity .7s ease, transform .7s var(--ease), border-color .3s; }
.gate[data-hover="transport"] .choice--rental,
.gate[data-hover="rental"] .choice--transport { filter: grayscale(1) brightness(.5); transform: scale(.985); }
.gate[data-hover] .choice:hover { transform: translateY(-4px); }

/* Gate header: both companies side by side; the hovered one lights up, the other dims */
.gate-brands { display: flex; align-items: center; gap: 22px; }
.gate-brands .gb { transition: opacity .6s ease, filter .6s ease; }
.gb-sep { width: 1px; height: 28px; background: var(--line-dark); }
.gate[data-hover="transport"] .gb-r,
.gate[data-hover="rental"] .gb-t { opacity: .35; filter: grayscale(1); }
@media (max-width: 760px) {
  .gate-brands { gap: 14px; }
  .gate-brands .brand-name { font-size: .95rem; }
  .gate-brands .brand-name small { display: none; }
  .gate-brands img { width: 28px; height: 28px; }
  .gate-hdr .ct { display: none; }
}
.gate-top .k { transition: color .7s ease; }

/* Page-to-page: header bars blend colours too */
::view-transition-old(topbar), ::view-transition-new(topbar),
::view-transition-old(site-header), ::view-transition-new(site-header) { animation-duration: .6s; }

/* =====================================================================
   LANGUAGE SWITCH (NL | EN)
   ===================================================================== */
.lang { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--green-tint); border: 1px solid var(--green-line); flex-shrink: 0; }
.lang a { position: relative; z-index: 1; min-width: 38px; padding: 6px 10px; text-align: center; font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); border-radius: 999px; transition: color .35s ease, background-color .35s ease; }
.lang a:hover { color: var(--text); }
.lang a.on { background: var(--green-dark); color: #fff; box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--green-deep) 70%, transparent); cursor: default; }
.hdr .lang { margin-left: 4px; }
.mnav-foot .lang { align-self: flex-start; }
/* On the dark gate */
.gate-hdr-r { display: flex; align-items: center; gap: 24px; }
.gate .lang { background: rgba(255,255,255,.06); border-color: var(--line-dark); }
.gate .lang a { color: var(--muted-dark); }
.gate .lang a:hover { color: #fff; }
.gate .lang a.on { background: #fff; color: #121614; }
@media (max-width: 1000px) { .hdr .lang { margin-left: auto; } .hdr .menu-btn { margin-left: 6px; } .mnav-foot .lang { display: none; } }
@media (max-width: 420px) { .lang a { min-width: 32px; padding: 5px 8px; font-size: .8rem; } }

/* The switch itself stays perfectly still across the language change */
.hdr .lang { view-transition-name: lang-switch; }
::view-transition-group(lang-switch) { animation-duration: .5s; }

/* ---------- Language-change transition ----------
   Nothing moves: header, photos and video stay put; only the words dissolve from one language into the other. */
@keyframes lang-out { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(6px); } }
@keyframes lang-in  { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
html:active-view-transition-type(lang)::view-transition-old(root) { animation: lang-out .55s cubic-bezier(.4, 0, .2, 1) both; }
html:active-view-transition-type(lang)::view-transition-new(root) { animation: lang-in .65s cubic-bezier(.4, 0, .2, 1) .08s both; }
html:active-view-transition-type(lang)::view-transition-old(hero-content) { animation: lang-out .5s cubic-bezier(.4, 0, .2, 1) both; }
html:active-view-transition-type(lang)::view-transition-new(hero-content) { animation: lang-in .6s cubic-bezier(.4, 0, .2, 1) .08s both; }
html:active-view-transition-type(lang)::view-transition-group(*) { animation-duration: .6s; }
html:active-view-transition-type(lang)::view-transition-old(site-header),
html:active-view-transition-type(lang)::view-transition-old(topbar) { animation: lang-out .45s ease both; }
html:active-view-transition-type(lang)::view-transition-new(site-header),
html:active-view-transition-type(lang)::view-transition-new(topbar) { animation: lang-in .55s ease .05s both; }

/* After a language switch the page is already "known": no entrance animations, it just dissolves in */
.lang-swap .hero h1, .lang-swap .hero .lead, .lang-swap .hero .btns, .lang-swap .hero-phone,
.lang-swap .hero-img img, .lang-swap .phead .crumbs, .lang-swap .phead h1, .lang-swap .phead .lead,
.lang-swap .phead-meta, .lang-swap .phead-bg img, .lang-swap .usp, .lang-swap .usp::before, .lang-swap .usp .wrap > div,
.lang-swap .gate-hdr, .lang-swap .gate-top, .lang-swap .choice, .lang-swap .gate-ftr { animation: none !important; }

/* ==========================================================================
   Gate, light version: white canvas, FG Together green from the left and
   Together Holding red from the right, blending in the middle.
   ========================================================================== */
.gate {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--text);
  background: linear-gradient(90deg, #d8f1e4 0%, #f1f9f5 32%, #fdfdfc 50%, #fcf1f3 68%, #f7d6dc 100%);
}
.gate::before, .gate::after {
  content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; width: 70%;
  pointer-events: none; transition: opacity .8s ease, transform 1.2s var(--ease);
}
.gate::before { left: -22%; background: radial-gradient(closest-side, rgba(32,184,120,.36), rgba(32,184,120,.14) 55%, transparent); animation: gate-drift-l 14s ease-in-out infinite alternate; }
.gate::after  { right: -22%; background: radial-gradient(closest-side, rgba(216,16,48,.30), rgba(216,16,48,.11) 55%, transparent); animation: gate-drift-r 16s ease-in-out infinite alternate; }
@keyframes gate-drift-l { from { transform: translate(0, -4%) scale(1); } to { transform: translate(6%, 4%) scale(1.08); } }
@keyframes gate-drift-r { from { transform: translate(0, 4%) scale(1.06); } to { transform: translate(-6%, -4%) scale(1); } }
.gate[data-hover], .gate[data-hover="transport"], .gate[data-hover="rental"] { background: linear-gradient(90deg, #d8f1e4 0%, #f1f9f5 32%, #fdfdfc 50%, #fcf1f3 68%, #f7d6dc 100%); }
.gate[data-hover="transport"]::before { transform: scale(1.25) translateX(8%); }
.gate[data-hover="transport"]::after  { opacity: .35; }
.gate[data-hover="rental"]::after     { transform: scale(1.25) translateX(-8%); }
.gate[data-hover="rental"]::before    { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .gate::before, .gate::after { animation: none; } }

.gate-hdr, .gate-ftr { border-color: rgba(21,32,27,.09); }
.gate-hdr .brand-name { color: var(--text); }
.gate-hdr .brand-name small, .gate-hdr .ct, .gate-ftr { color: var(--muted); }
.gate-hdr .ct a:hover { color: var(--text); }
.gate-ftr .creds b { color: var(--text); }
.gate-top .k { color: var(--muted); }
.gate[data-hover="rental"] .gate-top .k { color: #d81030; }
.gate[data-hover="transport"] .gate-top .k { color: #179a63; }
.gate-main h1 { color: #0a2a1e; }
.gate .lang { background: rgba(255,255,255,.75); border-color: rgba(21,32,27,.12); }
.gate .lang a { color: var(--muted); }
.gate .lang a:hover { color: var(--text); }
.gate .lang a.on { background: #121614; color: #fff; }

.choice { box-shadow: 0 34px 60px -34px rgba(10,42,30,.55); }
.choice--rental { box-shadow: 0 34px 60px -34px rgba(76,14,24,.55); }
.gate[data-hover="transport"] .choice--rental,
.gate[data-hover="rental"] .choice--transport { filter: grayscale(1) brightness(.92); opacity: .55; }
.choice-list li.hot { border-color: #ff5a73; background: rgba(216,16,48,.85); color: #fff; font-weight: 600; }

/* Roadside assistance band (Together Holding) */
.gate-rs {
  position: relative; overflow: hidden; margin-top: 16px; border-radius: 3px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 32px;
  padding: clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 40px);
  background: linear-gradient(105deg, #330910 0%, #4c0e18 45%, #8e0f22 100%); color: #fff;
  border-left: 6px solid #d81030;
  box-shadow: 0 30px 60px -34px rgba(76,14,24,.75);
  animation: rise 1s var(--ease) .55s both;
}
.gate-rs::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,90,115,.35), transparent); pointer-events: none; }
.rs-icon { position: relative; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #d81030; color: #fff; flex-shrink: 0; }
.rs-icon svg { width: 40px; height: 40px; animation: rs-spin 9s linear infinite; }
.rs-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #ff5a73; animation: rs-pulse 2.2s ease-out infinite; }
@keyframes rs-spin { to { transform: rotate(360deg); } }
@keyframes rs-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.55); opacity: 0; } }
.rs-by { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: rgba(255,255,255,.82); text-transform: uppercase; letter-spacing: .06em; }
.rs-by b { color: #fff; font-weight: 700; }
.rs-by img { width: 22px; height: 22px; object-fit: contain; background: #fff; border-radius: 3px; padding: 2px; }
.gate-rs h2 { margin-top: 6px; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.15; color: #fff; }
.gate-rs p { margin-top: 6px; color: rgba(255,255,255,.86); max-width: 46em; }
.rs-act { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.rs-call { font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #ff8a9c; }
.rs-phones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rs-phones a { padding: 9px 14px; border-radius: 3px; background: #fff; color: #4c0e18; font-weight: 700; white-space: nowrap; transition: background .2s, color .2s, transform .2s; }
.rs-phones a:hover { background: #d81030; color: #fff; transform: translateY(-2px); }
.rs-more { font-weight: 600; color: #fff; border-bottom: 2px solid #ff5a73; padding-bottom: 1px; font-size: .95rem; }
.rs-more:hover { color: #ffb3bf; }
@media (prefers-reduced-motion: reduce) { .rs-icon svg, .rs-pulse { animation: none; } }
@media (max-width: 1100px) {
  .gate-rs { grid-template-columns: auto minmax(0, 1fr); }
  .rs-act { grid-column: 1 / -1; align-items: flex-start; text-align: left; }
  .rs-phones { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .gate-rs { grid-template-columns: 1fr; }
  .rs-icon { width: 56px; height: 56px; }
  .rs-icon svg { width: 30px; height: 30px; }
}

/* Phone lists (contact page, roadside page meta) */
.phones { display: flex; flex-direction: column; gap: 2px; }
.phead-meta .phones { align-items: flex-end; }
.channel .phones a:hover, .phead-meta .phones a:hover { text-decoration: underline; }

/* Gallery with real photos */
.ph:has(img) { border: 0; background: var(--green-tint); }
.ph img { transition: transform .9s var(--ease); }
.ph:hover img { transform: scale(1.04); }
/* keep cards + roadside band + footer inside one desktop screen */
.gate:has(.gate-rs) .choice { min-height: 340px; }
.gate:has(.gate-rs) .gate-main { padding-top: clamp(22px, 3.5vh, 44px); }
.gate-rs h2 { font-size: clamp(1.4rem, 1.9vw, 1.85rem); }
.ph:has(img) img { position: absolute; inset: 0; }
.gallery .stack { grid-template-rows: 1fr 1fr; }
@media (max-width: 760px) { .gallery .stack { grid-template-rows: none; } }

/* Header: full width so all menu items fit; burger menu below 1300px */
.hdr .wrap { max-width: none; gap: 32px; }
.nav { gap: 24px; }
@media (max-width: 1300px) {
  .nav, .hdr .btn { display: none; }
  .menu-btn { display: block; }
  .hdr .lang { margin-left: auto; }
  .hdr .menu-btn { margin-left: 6px; }
}

/* Gate background v2: clean white canvas + converging rays (replaces the colour blobs) */
.gate { background: linear-gradient(90deg, #f2f9f5 0%, #fcfdfc 22%, #ffffff 50%, #fdfafa 78%, #fbf1f3 100%); }
.gate[data-hover], .gate[data-hover="transport"], .gate[data-hover="rental"] { background: linear-gradient(90deg, #f2f9f5 0%, #fcfdfc 22%, #ffffff 50%, #fdfafa 78%, #fbf1f3 100%); }
.gate::before, .gate::after { display: none; }
.gate-rays {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 70px, #000 170px);
          mask-image: linear-gradient(180deg, transparent 0, transparent 70px, #000 170px);
  transition: opacity .8s ease;
}
.gate-rays path { stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.gate-rays path.pulse { stroke-width: 2; opacity: .9; stroke-dasharray: 70 2400; stroke-dashoffset: 2470; animation: ray-run 8s linear infinite; }
@keyframes ray-run { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .gate-rays path.pulse { animation: none; display: none; } }
.gate-hdr { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); position: relative; z-index: 2; }
/* Together Holding lockup inside the roadside title */
.rs-brand { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; vertical-align: middle; }
.rs-brand img { width: 1em; height: 1em; object-fit: contain; background: #fff; border-radius: 3px; padding: 2px; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); }
.rs-brand small { font-size: .7em; font-weight: 500; color: rgba(255,255,255,.8); margin-left: -4px; }

/* Gate background v3: white canvas with a fine dot grid, green on the left blending into red on the right
   (replaces the rays). The dots fade out under the header and toward the centre. */
.gate { background: #fff; }
.gate[data-hover], .gate[data-hover="transport"], .gate[data-hover="rental"] { background: #fff; }
.gate::before {
  display: block; content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; left: 0; right: 0; width: auto; animation: none; transform: none;
  background: linear-gradient(90deg, #20b878 0%, #20b878 30%, #d81030 70%, #d81030 100%);
  -webkit-mask-image: radial-gradient(circle, #000 1.3px, transparent 1.8px), linear-gradient(180deg, transparent 0, transparent 90px, #000 260px);
  -webkit-mask-size: 20px 20px, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle, #000 1.3px, transparent 1.8px), linear-gradient(180deg, transparent 0, transparent 90px, #000 260px);
  mask-size: 20px 20px, 100% 100%;
  mask-composite: intersect;
  opacity: .45; transition: opacity .8s ease;
}
/* soft colour wash only along the outer edges, under the cards */
.gate::after {
  display: block; content: ""; position: absolute; inset: auto 0 0 0; height: 55%; z-index: -1; pointer-events: none;
  width: auto; animation: none; transform: none; opacity: 1;
  background: linear-gradient(90deg, rgba(32,184,120,.10) 0%, rgba(32,184,120,0) 35%, rgba(216,16,48,0) 65%, rgba(216,16,48,.09) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
          mask-image: linear-gradient(180deg, transparent, #000 60%);
}
.gate[data-hover]::before { opacity: .55; }
.gate-hdr { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.gate[data-hover="transport"]::before, .gate[data-hover="rental"]::before { transform: none; opacity: .55; }
.gate[data-hover="transport"]::after, .gate[data-hover="rental"]::after { transform: none; opacity: 1; }
/* "B.V." sits on the same baseline as "Together Holding" */
.rs-brand { align-items: baseline; }
.rs-brand img { align-self: center; }
.rs-brand small { margin-left: -2px; line-height: 1; }

/* ---------------- Social icons, memberships, WhatsApp ---------------- */
.soc { display: flex; gap: 10px; margin-top: 20px; }
.soc a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; opacity: 1; transition: background .2s, transform .2s; }
.soc a:hover { transform: translateY(-2px); background: var(--green); }
.soc a.soc-whatsapp:hover { background: #25d366; }
.soc a.soc-facebook:hover { background: #1877f2; }
.soc a.soc-linkedin:hover { background: #0a66c2; }
.soc svg { width: 20px; height: 20px; }
.soc--sm { margin: 0; gap: 4px; align-items: center; }
.soc--sm a { width: 28px; height: 28px; background: transparent; }
.soc--sm svg { width: 17px; height: 17px; }
.soc--light a { background: var(--green-tint); color: var(--green-deep); }
.soc--light a:hover { color: #fff; }
.topbar .ct { align-items: center; }

.mbr { display: flex; flex-wrap: wrap; gap: 12px; }
.mbr a { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 12px; border: 1px solid var(--line-dark); color: #fff; transition: border-color .2s, background .2s, transform .2s; }
.mbr a:hover { border-color: var(--green); background: rgba(255, 255, 255, .05); transform: translateY(-2px); }
.mbr svg { width: 26px; height: 26px; flex: none; color: var(--green); }
.mbr span { display: grid; line-height: 1.15; }
.mbr b { font-weight: 600; }
.mbr small { font-size: .8rem; color: var(--muted-dark); }
.mbr--light a, .mbr--lg a { border-color: var(--line); color: var(--text); background: var(--white); }
.mbr--light a:hover, .mbr--lg a:hover { background: var(--green-tint); }
.mbr--light small, .mbr--lg small { color: var(--muted); }
.mbr--lg { gap: 16px; }
.mbr--lg a { padding: 18px 24px 18px 18px; flex: 1 1 220px; box-shadow: 0 6px 20px rgba(10, 42, 30, .06); }
.mbr--lg svg { width: 40px; height: 40px; }
.mbr--lg b { font-size: 1.15rem; }
.mbr-wrap { margin-bottom: clamp(36px, 5vw, 56px); }
.ftr-mbr { margin-top: 40px; }
.ftr-wa { display: inline-flex; align-items: center; gap: 8px; }
.ftr-wa svg { width: 16px; height: 16px; color: #25d366; }
.gate-ftr .wrap { flex-wrap: wrap; row-gap: 16px; }
.gate-ftr .soc { margin: 0; }
.gate-ftr .mbr a { padding: 8px 14px 8px 10px; }

.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; }
.wa-float summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 20px 0 16px; border-radius: 28px; background: #25d366; color: #fff; font-weight: 600; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); transition: transform .2s; }
.wa-float summary::-webkit-details-marker { display: none; }
.wa-float summary:hover { transform: translateY(-2px); }
.wa-float summary svg { width: 26px; height: 26px; }
.wa-pop { position: absolute; right: 0; bottom: 68px; width: 260px; padding: 16px; border-radius: 16px; background: var(--white); color: var(--text); box-shadow: 0 16px 40px rgba(0, 0, 0, .2); display: grid; gap: 8px; }
.wa-pop strong { font-size: .95rem; margin-bottom: 4px; }
.wa-pop a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #effaf3; font-weight: 600; }
.wa-pop a:hover { background: #dcf5e6; }
.wa-pop svg { width: 20px; height: 20px; color: #25d366; }
@media (max-width: 640px) {
  .wa-float { right: 14px; bottom: 14px; }
  .wa-float summary { padding: 0; width: 56px; justify-content: center; }
  .wa-float summary span { display: none; }
  .topbar .soc--sm { display: none; }
}
.gate-hdr .soc--sm a { color: var(--muted); }
.gate-hdr .soc--sm a:hover { color: #fff; }
/* official membership logos sit on a white tile (readable on dark and light backgrounds) */
.mbr-logo { flex: none; display: grid; place-items: center; height: 40px; min-width: 40px; padding: 4px 6px; border-radius: 8px; background: #fff; }
.mbr-logo img { max-height: 32px; max-width: 84px; width: auto; height: auto; }
.mbr-niwo .mbr-logo img { max-width: 92px; max-height: 26px; }
.mbr--lg .mbr-logo { height: 64px; min-width: 64px; padding: 6px 8px; }
.mbr--lg .mbr-logo img { max-height: 52px; max-width: 120px; }
.mbr--lg .mbr-niwo .mbr-logo img { max-width: 130px; max-height: 40px; }
/* the dot grid belongs to the website selector only: header and footer stay plain white */
.gate-ftr { background: #fff; position: relative; z-index: 2; }
.gate::before { -webkit-mask-image: radial-gradient(circle, #000 1.3px, transparent 1.8px), linear-gradient(180deg, transparent 0, transparent 110px, #000 220px); mask-image: radial-gradient(circle, #000 1.3px, transparent 1.8px), linear-gradient(180deg, transparent 0, transparent 110px, #000 220px); }
/* Dot grid v4: lives inside the selector area only, densest in its vertical middle and fading out up and down */
.gate::before { display: none; }
.gate-main { position: relative; isolation: isolate; }
.gate-main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #20b878 0%, #20b878 30%, #d81030 70%, #d81030 100%);
  -webkit-mask-image: radial-gradient(circle, #000 1.3px, transparent 1.8px), linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%);
  -webkit-mask-size: 20px 20px, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle, #000 1.3px, transparent 1.8px), linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%);
  mask-size: 20px 20px, 100% 100%;
  mask-composite: intersect;
  opacity: .5; transition: opacity .8s ease;
}
.gate[data-hover] .gate-main::before { opacity: .6; }
.gate-hdr .ct a, .topbar .ct a { white-space: nowrap; }
/* no colour wash at the bottom edges: it left green/red stains and a hard cut against the white footer */
.gate::after, .gate[data-hover="transport"]::after, .gate[data-hover="rental"]::after { display: none; }
/* Gate must fit one screen on desktop: compact one-row footer, cards shrink with the viewport height */
.gate-ftr { padding: 10px 0; }
.gate-ftr .wrap { align-items: center; flex-wrap: nowrap; }
.gate-ftr .mbr { gap: 8px; flex-wrap: nowrap; }
.gate-ftr .mbr a { padding: 4px 12px 4px 4px; gap: 8px; }
.gate-ftr .mbr-logo { height: 32px; min-width: 32px; padding: 2px 4px; }
.gate-ftr .mbr-logo img { max-height: 26px; max-width: 70px; }
.gate-ftr .mbr-niwo .mbr-logo img { max-width: 76px; max-height: 22px; }
.gate-ftr .soc a { width: 34px; height: 34px; }
.gate-ftr .soc svg { width: 18px; height: 18px; }
@media (min-width: 901px) {
  .gate:has(.gate-rs) .choice { min-height: clamp(260px, calc(100svh - 580px), 340px); }
}
@media (max-width: 1100px) { .gate-ftr .wrap { flex-wrap: wrap; } .gate-ftr .mbr { flex-wrap: wrap; } }
/* short desktop screens (laptops): tighten the gate so it still fits without scrolling */
@media (min-width: 901px) and (max-height: 860px) {
  .gate-hdr .wrap { height: 64px; }
  .gate:has(.gate-rs) .gate-main { padding-top: 16px; padding-bottom: 12px; }
  .gate-main h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
  .gate-choices { margin-top: 14px; }
  .gate:has(.gate-rs) .choice { min-height: 0; padding: 22px 28px; }
  .choice h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
  .choice p { margin-top: 4px; }
  .choice .choice-list { margin-top: 10px; }
  .choice .btn { margin-top: 14px; }
  .gate-rs { margin-top: 12px; padding-top: 16px; padding-bottom: 16px; }
  .gate-rs p { margin-top: 4px; }
}
@media (min-width: 901px) and (max-height: 700px) {
  .choice p, .gate-rs p { display: none; }
}
.gate-ftr { border-top: 0; }
/* footer is transparent so the shadow of the roadside band fades out naturally instead of being cut */
.gate-ftr { background: transparent; position: static; }

/* ---------------- Language switch v2: a sliding pill ---------------- */
.lang { isolation: isolate; }
.lang a { width: 44px; min-width: 0; padding: 6px 0; }
.lang a.on, .gate .lang a.on { background: transparent; box-shadow: none; color: #fff; }
.lang::before {
  content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: 44px; border-radius: 999px;
  background: var(--green-dark); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--green-deep) 80%, transparent);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background-color .3s ease;
}
.gate .lang::before { background: #121614; }
.lang:has(a[hreflang="en"].on)::before { transform: translateX(44px); }
/* hover previews the other language: the pill leans over and the labels swap colour */
.lang:has(a[hreflang="en"]:not(.on):hover)::before { transform: translateX(10px) scaleX(1.12); }
.lang:has(a[hreflang="nl"]:not(.on):hover)::before { transform: translateX(34px) scaleX(1.12); }
/* on click: slide all the way, then the page changes */
.lang.lang--go-en::before { transform: translateX(44px) !important; }
.lang.lang--go-nl::before { transform: translateX(0) !important; }
.lang.lang--go-en a[hreflang="en"], .lang.lang--go-nl a[hreflang="nl"] { color: #fff !important; }
.lang.lang--go-en a[hreflang="nl"], .lang.lang--go-nl a[hreflang="en"] { color: var(--muted) !important; }
.lang a:active { transform: scale(.92); }
.lang a { transition: color .35s ease, transform .15s ease; }
@media (max-width: 420px) {
  .lang a { width: 36px; padding: 5px 0; }
  .lang::before { width: 36px; }
  .lang:has(a[hreflang="en"].on)::before, .lang.lang--go-en::before { transform: translateX(36px) !important; }
}
@media (prefers-reduced-motion: reduce) { .lang::before { transition: none; animation: none !important; } }

/* ---------------- Gate header contact chips ---------------- */
.gate-hdr .ct { gap: 10px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 5px; border-radius: 999px; background: #f4f7f5; border: 1px solid rgba(21,32,27,.08); color: var(--text); font-weight: 500; transition: transform .25s var(--ease), box-shadow .25s ease, background-color .25s ease, border-color .25s ease; }
.chip i { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--green-dark); box-shadow: 0 2px 6px -2px rgba(0,0,0,.18); transition: background-color .25s ease, color .25s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.chip svg { width: 16px; height: 16px; }
.gate-hdr .ct a.chip:hover { color: var(--text); background: #fff; border-color: rgba(21,32,27,.14); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(10,42,30,.45); }
.chip:hover i { background: var(--green); color: #fff; transform: rotate(-12deg) scale(1.08); }
.chip--tel i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--green); opacity: 0; animation: chip-ring 2.6s ease-out infinite; }
@keyframes chip-ring { 0% { transform: scale(.85); opacity: .7; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chip--tel i::after { animation: none; } }
.gate-hdr .soc--sm { margin-left: 4px; }

/* centred heading on the website selector */
.gate-top { text-align: center; justify-content: center; }
.gate-top > div { margin: 0 auto; }

/* Kicker: only the hovered service word lights up (green for transport, red for rental) */
.gate-top .k, .gate[data-hover="transport"] .gate-top .k, .gate[data-hover="rental"] .gate-top .k { color: #a3aca7; }
.gate-top .k b { font-weight: inherit; position: relative; transition: color .45s ease; }
.gate-top .k b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.gate[data-hover="transport"] .kw-t { color: #20b878; }
.gate[data-hover="rental"] .kw-r { color: #d81030; }
.gate[data-hover="transport"] .kw-t::after, .gate[data-hover="rental"] .kw-r::after { transform: scaleX(1); }

/* ---------------- Language switch v3 ----------------
   One smooth slide on click (no lean on hover, no second animation on the next page),
   and the switch stays frozen in place while the page crossfades. */
.lang:has(a[hreflang="en"]:not(.on):hover)::before,
.lang:has(a[hreflang="nl"]:not(.on):hover)::before { transform: none; }
.lang:has(a[hreflang="en"].on):has(a[hreflang="nl"]:hover)::before { transform: translateX(44px); }
.lang::before { transition: transform .42s cubic-bezier(.65, 0, .35, 1), width .42s cubic-bezier(.65, 0, .35, 1), left .42s cubic-bezier(.65, 0, .35, 1); }
/* the pill stretches while travelling (like a drop of liquid), then settles */
@keyframes pill-go-en { 0% { left: 3px; width: 44px; } 45% { left: 3px; width: 88px; } 100% { left: 47px; width: 44px; } }
@keyframes pill-go-nl { 0% { left: 47px; width: 44px; } 45% { left: 3px; width: 88px; } 100% { left: 3px; width: 44px; } }
.lang.lang--go-en::before { transform: none !important; animation: pill-go-en .42s cubic-bezier(.65, 0, .35, 1) both; }
.lang.lang--go-nl::before { transform: none !important; animation: pill-go-nl .42s cubic-bezier(.65, 0, .35, 1) both; }
.lang a:not(.on):hover { color: var(--text); }
.lang a { transition: color .3s ease .1s, transform .15s ease; }
.gate-hdr .lang { view-transition-name: lang-switch; }
::view-transition-old(lang-switch) { animation: none; opacity: 0; }
::view-transition-new(lang-switch) { animation: none; }
::view-transition-group(lang-switch) { animation: none; }
@media (max-width: 420px) {
  @keyframes pill-go-en { 0% { left: 3px; width: 36px; } 45% { left: 3px; width: 72px; } 100% { left: 39px; width: 36px; } }
  @keyframes pill-go-nl { 0% { left: 39px; width: 36px; } 45% { left: 3px; width: 72px; } 100% { left: 3px; width: 36px; } }
}
/* the roadside band belongs to trailer rental: it dims while the transport card is hovered */
.gate-rs { transition: filter .5s ease, opacity .5s ease, transform .5s var(--ease); }
.gate[data-hover="transport"] .gate-rs { filter: grayscale(.85) brightness(.55); opacity: .75; }
/* Smooth hover hand-off on the gate: one slow, soft curve for every element that reacts */
.gate { --hov: cubic-bezier(.4, 0, .2, 1); }
.gate .choice { transition: filter .9s var(--hov), opacity .9s var(--hov), transform .9s var(--hov), border-color .5s ease, box-shadow .9s var(--hov); will-change: filter, opacity; }
.gate .gate-rs { transition: filter .9s var(--hov), opacity .9s var(--hov), transform .9s var(--hov); will-change: filter, opacity; }
.gate .gate-brands .gb { transition: opacity .9s var(--hov), filter .9s var(--hov); }
.gate-top .k b { transition: color .7s var(--hov); }
.gate-top .k b::after { transition: transform .7s var(--hov); }
.gate .choice-img img { transition: transform 1.2s var(--hov); }
/* entrance animations must not hold opacity/transform afterwards, or the hover transitions can't run */
.choice, .gate-rs { animation-fill-mode: backwards; }

/* ---------------- Floating WhatsApp v2: round logo, card grows out of the circle ---------------- */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 60px; height: 60px; }
.wa-btn { position: absolute; right: 0; bottom: 0; z-index: 2; width: 60px; height: 60px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: #25d366; color: #fff; box-shadow: 0 10px 28px -6px rgba(0, 0, 0, .35); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .4s ease, box-shadow .4s ease; }
.wa-btn:hover { transform: scale(1.07); }
.wa-btn:active { transform: scale(.94); }
.wa-btn > span { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease; }
.wa-ico svg { width: 32px; height: 32px; }
.wa-x svg { width: 24px; height: 24px; }
.wa-x { opacity: 0; transform: rotate(-90deg) scale(.4); }
.wa-float.open .wa-ico { opacity: 0; transform: rotate(90deg) scale(.4); }
.wa-float.open .wa-x { opacity: 1; transform: none; }
.wa-float.open .wa-btn { background: #128c4b; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .3); }
/* soft attention ring while closed */
.wa-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: wa-ring 3s ease-out infinite; pointer-events: none; }
.wa-float.open .wa-btn::after { animation: none; opacity: 0; }
@keyframes wa-ring { 0% { transform: scale(1); opacity: .6; } 60%, 100% { transform: scale(1.45); opacity: 0; } }

.wa-pop {
  position: absolute; right: 0; bottom: 0; width: 280px; padding: 18px 18px 84px; border-radius: 22px;
  background: #fff; color: var(--text); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .35);
  display: grid; gap: 8px; top: auto; left: auto;
  clip-path: circle(30px at calc(100% - 30px) calc(100% - 30px));
  visibility: hidden; pointer-events: none;
  transition: clip-path .55s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .55s;
}
.wa-float.open .wa-pop { clip-path: circle(150% at calc(100% - 30px) calc(100% - 30px)); visibility: visible; pointer-events: auto; transition: clip-path .6s cubic-bezier(.65, 0, .35, 1), visibility 0s; }
.wa-pop strong { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin-bottom: 4px; }
.wa-pop strong svg { width: 22px; height: 22px; color: #25d366; }
.wa-pop a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #effaf3; font-weight: 600; font-size: 1.05rem; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, background-color .2s ease; }
.wa-pop a:hover { background: #dcf5e6; }
.wa-pop a svg { width: 20px; height: 20px; color: #25d366; }
.wa-float.open .wa-pop a { opacity: 1; transform: none; transition: opacity .35s ease .25s, transform .4s var(--ease) .25s, background-color .2s ease; }
.wa-float.open .wa-pop a + a { transition-delay: .33s, .33s, 0s; }
@media (max-width: 640px) { .wa-float { right: 14px; bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .wa-btn::after { animation: none; } .wa-pop, .wa-float.open .wa-pop { transition: visibility 0s; } }
/* gate hover: a bit quicker than the .9s version (still soft, no snap) */
.gate .choice { transition: filter .5s var(--hov), opacity .5s var(--hov), transform .5s var(--hov), border-color .4s ease, box-shadow .5s var(--hov); }
.gate .gate-rs { transition: filter .5s var(--hov), opacity .5s var(--hov), transform .5s var(--hov); }
.gate .gate-brands .gb { transition: opacity .5s var(--hov), filter .5s var(--hov); }
.gate-top .k b { transition: color .45s var(--hov); }
.gate-top .k b::after { transition: transform .45s var(--hov); }
.gate .choice-img img { transition: transform .8s var(--hov); }
/* WhatsApp v3: the round button hides while open; the card carries its own small X in the header */
.wa-float, .wa-btn { width: 56px; height: 56px; }
.wa-ico svg { width: 30px; height: 30px; }
.wa-float.open .wa-ico { opacity: 1; transform: none; }
.wa-float.open .wa-btn { transform: scale(0); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .2s ease; }
.wa-btn { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1) .3s, opacity .25s ease .3s, background-color .4s ease, box-shadow .4s ease; }
.wa-btn:hover { transition-delay: 0s; }
.wa-pop { padding: 16px; width: 270px; clip-path: circle(28px at calc(100% - 28px) calc(100% - 28px)); }
.wa-float.open .wa-pop { clip-path: circle(150% at calc(100% - 28px) calc(100% - 28px)); }
.wa-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.wa-head strong { margin: 0; }
.wa-close { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; padding: 0; border-radius: 50%; background: #f1f3f2; color: var(--muted); cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.wa-close:hover { background: #e3e7e5; color: var(--text); transform: rotate(90deg); }
.wa-close svg { width: 16px; height: 16px; }
.wa-pop { width: 296px; } .wa-head strong { font-size: .95rem; white-space: nowrap; }

/* Roadside band v2: slimmer and lighter so it supports the two cards instead of competing with them */
.gate-rs { padding: 14px 24px; gap: 10px 24px; border-left-width: 4px; box-shadow: 0 18px 36px -26px rgba(76,14,24,.6); }
.gate-rs::after { width: 180px; height: 180px; top: -50px; right: -40px; opacity: .7; }
.rs-icon { width: 46px; height: 46px; }
.rs-icon svg { width: 26px; height: 26px; }
.rs-by { font-size: .74rem; }
.gate-rs h2 { margin-top: 2px; font-size: clamp(1.1rem, 1.4vw, 1.35rem); }
.gate-rs p { margin-top: 2px; font-size: .9rem; line-height: 1.45; }
.rs-act { gap: 6px; }
.rs-call { font-size: .72rem; }
.rs-phones { gap: 6px; }
.rs-phones a { padding: 6px 11px; font-size: .9rem; border-radius: 3px; }
.rs-more { font-size: .82rem; }
@media (min-width: 901px) {
  .gate:has(.gate-rs) .choice { min-height: clamp(260px, calc(100svh - 500px), 400px); }
}
@media (min-width: 901px) and (max-height: 860px) {
  .gate-rs { padding-top: 10px; padding-bottom: 10px; }
}
/* "Together Holding" sits on the same baseline as "Pechhulp onderweg door" (was dropped by vertical-align: middle) */
.rs-brand { vertical-align: baseline; align-items: baseline; gap: 6px; }
.rs-brand img { align-self: center; position: relative; top: .06em; }

/* Inner Together Holding pages (rental + roadside): dark blue instead of red (client request).
   The gate's rental card keeps its own colours; only body.brand-rental changes. */
body.brand-rental {
  --green: #1f5a9e;
  --green-hover: #184a85;
  --green-dark: #15335c;
  --green-deep: #0f2442;
  --green-tint: #eef3f9;
  --green-line: #d3deec;
  --muted-dark: #a5b5ca;
  --on-accent: #ffffff;
}

/* ================= Client palette ("theme-pro") =================
   Dark blue = trust (buttons, bands), antraciet = header strip, footer and headings,
   white / light grey backgrounds, and a soft green accent close to the logo so the FG mark blends in.
   Scoped to body.theme-pro so it can be rolled out page by page. */
body.theme-pro {
  --navy: #1b4a85;
  --navy-hover: #153b6b;
  --green: #22a873;          /* soft accent, near the logo green */
  --green-hover: #1b9163;
  --green-dark: #143a66;     /* bands, dark sections */
  --green-deep: #1d2633;     /* antraciet: topbar, footer, panels */
  --green-tint: #f3f6fa;     /* light grey-blue section background */
  --green-line: #d9e2ee;
  --text: #1d2633;
  --muted: #5b6678;
  --line: #e2e8f0;
  --on-dark: #e8eef6;
  --muted-dark: #a7b3c4;
  --on-accent: #ffffff;
}
.theme-pro .btn--green { background: var(--navy); color: #fff; }
.theme-pro .btn--green:hover { background: var(--navy-hover); }
.theme-pro .btn--outline { border-color: var(--navy); color: var(--navy); }
.theme-pro .btn--outline:hover { background: var(--navy); color: #fff; }
.theme-pro .hero, .theme-pro .hero-img::after { --green-deep: #0f2747; }
.theme-pro .more { color: var(--navy); }
.theme-pro .related a { color: var(--navy); }
/* on dark-blue surfaces the primary button turns white, so it doesn't vanish into the background */
.theme-pro .path.main .btn--green, .theme-pro .green .btn--green, .theme-pro .cta .btn--green, .theme-pro .panel .btn--green { background: #fff; color: var(--navy); }
.theme-pro .path.main .btn--green:hover, .theme-pro .green .btn--green:hover, .theme-pro .cta .btn--green:hover, .theme-pro .panel .btn--green:hover { background: var(--green); color: #fff; }

/* Roadside band v3: serious dark blue / antraciet; red only as a small emergency accent (client palette) */
.gate-rs { background: linear-gradient(105deg, #121b28 0%, #16263d 50%, #1d3a63 100%); border-left: 4px solid #d81030; box-shadow: 0 18px 36px -26px rgba(15, 39, 71, .7); }
.gate-rs::after { background: radial-gradient(closest-side, rgba(96, 150, 220, .22), transparent); }
.rs-pulse { border-color: rgba(216, 16, 48, .7); }
.rs-by { color: rgba(255, 255, 255, .7); }
.rs-call { color: #f6b92f; }
.rs-phones a { color: #16263d; }
.rs-phones a:hover { background: #f6b92f; color: #16263d; }
.rs-more { border-bottom-color: #f6b92f; }
.rs-more:hover { color: #ffd77a; }
.rs-brand small { color: rgba(255, 255, 255, .7); }
/* Roadside band v4: neutral antraciet only (no blue/yellow); the red icon is the single brand accent */
.gate-rs { background: linear-gradient(105deg, #15181d 0%, #1f2329 55%, #2a2f37 100%); border-left: 0; box-shadow: 0 18px 36px -26px rgba(0, 0, 0, .55); }
.gate-rs::after { background: radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent); }
.rs-call { color: rgba(255, 255, 255, .6); }
.rs-phones a { color: #1f2329; }
.rs-phones a:hover { background: #e9ebee; color: #1f2329; }
.rs-more { border-bottom-color: rgba(255, 255, 255, .5); }
.rs-more:hover { color: #fff; border-bottom-color: #fff; }
/* Roadside band v5: deep, desaturated dark red (serious, not alarming) */
.gate-rs { background: linear-gradient(105deg, #240a0f 0%, #33101a 55%, #451522 100%); box-shadow: 0 18px 36px -26px rgba(36, 10, 15, .7); }
.gate-rs::after { background: radial-gradient(closest-side, rgba(255, 255, 255, .05), transparent); }
.rs-phones a { color: #33101a; }
.rs-phones a:hover { background: #f1e6e8; color: #33101a; }
/* Roadside band v6: dark red on the left fading into a very dark grey */
.gate-rs { background: linear-gradient(105deg, #3d0f18 0%, #2a1015 40%, #17171a 75%, #111113 100%); }
/* Roadside band v7: dark red on the left -> lighter red on the right */
.gate-rs { background: linear-gradient(105deg, #2e0a11 0%, #4a0f1b 45%, #7a1426 80%, #9a1a2e 100%); }
.gate-rs { background: linear-gradient(105deg, #2a0910 0%, #400d17 50%, #5e1120 85%, #6e1424 100%); }

/* theme-pro v2 (client feedback): lighter, friendlier blue instead of the very dark navy; green stays as accent */
body.theme-pro {
  --navy: #2b6cb0;          /* buttons */
  --navy-hover: #245b96;
  --green-dark: #2a5f99;    /* bands, dark sections */
  --green-deep: #1f3f63;    /* topbar, footer: blue, not black */
  --green-tint: #eff5fb;
  --green-line: #d5e3f1;
  --text: #1f2d3d;
  --muted: #586779;
  --on-dark: #eaf2fb;
  --muted-dark: #b3c4d8;
}
.theme-pro .hero, .theme-pro .hero-img::after { --green-deep: #1d4573; }
/* theme-pro hero: logo colours (deep green + logo green button), with a soft blue touch on the right */
.theme-pro .hero { background: #0a2a1e; }
.theme-pro .hero-img::after {
  background:
    linear-gradient(90deg, rgba(10, 42, 30, .93) 0%, rgba(10, 42, 30, .72) 42%, rgba(10, 42, 30, .18) 100%),
    linear-gradient(200deg, rgba(43, 108, 176, .42) 0%, rgba(43, 108, 176, 0) 55%);
}
.theme-pro .hero .btn--green { background: #20b878; color: #0a2a1e; }
.theme-pro .hero .btn--green:hover { background: #1aa36a; color: #fff; }
.theme-pro .hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .18); }
.theme-pro .hero .lead { border-left: 3px solid #2b6cb0; padding-left: 14px; }

/* ================= Single header bar (the old top strip is gone) ================= */
:root { --hdr: 84px; }
.hdr .wrap { max-width: none; gap: 40px; padding-left: clamp(24px, 3vw, 56px); padding-right: clamp(24px, 3vw, 56px); }
.hdr-l { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.hdr-r { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.hdr .nav { margin: 0 auto; gap: 30px; }
.hdr .nav a { font-size: 1rem; padding: 30px 0 28px; }

/* company switch: a quiet segmented pill next to the logo */
.co-switch { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: #f2f5f8; border: 1px solid var(--line); isolation: isolate; }
.co-switch a { padding: 7px 14px; border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .25s ease; }
.co-switch a:hover { color: var(--text); }
.co-switch a.on { color: var(--text); }
.co-switch a { position: relative; }
.co-switch a.on::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--green); }
.co-switch a.on { background: #fff; box-shadow: 0 2px 8px -2px rgba(20, 40, 60, .2); } /* the active company carries the white pill */

/* phone: round icon + number, airy */
.hdr-tel { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); white-space: nowrap; }
.hdr-tel i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--green-tint); color: var(--green-dark); transition: background-color .25s ease, color .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.hdr-tel svg { width: 17px; height: 17px; }
.hdr-tel:hover i { background: var(--green); color: #fff; transform: rotate(-12deg); }
.hdr .lang { margin-left: 0; }
.hero .wrap { min-height: calc(100svh - var(--hdr)); }

/* step-down instead of squeezing (the company switch always stays visible):
   1) the phone number collapses to its icon, 2) the header CTA leaves (it is in the hero and the menu),
   3) the menu moves into the burger */
@media (max-width: 1720px) { .hdr-tel span { display: none; } }
@media (max-width: 1680px) { .hdr .hdr-r > .btn { display: none; } }
@media (max-width: 1300px) { .hdr .nav { display: none; } .menu-btn { display: block; margin-left: 0; } .hdr-r { margin-left: auto; } }
@media (max-width: 760px) { .hdr .co-switch, .hdr-tel { display: none; } }

/* mobile menu extras */
.co-switch--m { align-self: flex-start; margin: 8px 0 10px; }
.mnav-mail { color: var(--muted); font-weight: 500; }
.mnav-foot .soc { margin-top: 4px; }
@media (max-width: 760px) { .hdr .wrap { gap: 12px; padding-left: 16px; padding-right: 16px; } .hdr-r { gap: 8px; } }
@media (max-width: 420px) { .hdr .brand-name small { display: none; } .hdr .wrap { gap: 8px; } }

/* ================= Header v2: glass bar, gliding pills, compact phone chip ================= */
.hdr { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(20, 40, 60, .07); }
.hdr.is-scrolled { box-shadow: 0 10px 30px -18px rgba(20, 40, 60, .35); }

/* menu: no more full-height underline; a soft pill glides behind the hovered item */
.hdr .nav { position: relative; gap: 4px; align-items: center; }
.hdr .nav a { position: relative; z-index: 1; padding: 9px 16px; border: 0; border-radius: 999px; font-size: .97rem; font-weight: 500; color: #3a4757; transition: color .25s ease; }
.hdr .nav a::after { display: none; }
.hdr .nav a:hover, .hdr .nav a[aria-current="page"] { color: var(--text); }
.hdr .nav a[aria-current="page"] { font-weight: 600; }
.glide { position: absolute; z-index: 0; left: 0; top: 50%; height: 38px; margin-top: -19px; border-radius: 999px; background: var(--green-tint); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.65, 0, .35, 1), width .45s cubic-bezier(.65, 0, .35, 1), opacity .3s ease, background-color .3s ease; }
.hdr .nav .glide::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--green); transition: opacity .3s ease; }
.hdr .nav.is-hover .glide { background: #eef2f6; }

/* company switch: white pill glides between the two companies */
.co-switch a { position: relative; z-index: 1; }
.hdr .co-switch a.on { background: transparent; box-shadow: none; }
.hdr .co-switch a.on::after { display: none; }
.co-switch .glide { height: auto; top: 3px; bottom: 3px; margin: 0; background: #fff; box-shadow: 0 3px 10px -3px rgba(20, 40, 60, .25); }
.co-switch a { transition: color .3s ease; }
.co-switch:not(.is-hover) a.on, .co-switch a:hover { color: var(--text); }
.co-switch.is-hover a.on:not(:hover) { color: var(--muted); }
.co-switch a::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; vertical-align: 1px; background: #20b878; opacity: .35; transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.co-switch a + a::before { background: #d81030; }
.co-switch a.on::before, .co-switch a:hover::before { opacity: 1; transform: scale(1.2); }
.co-switch--m a.on { background: #fff; box-shadow: 0 2px 8px -2px rgba(20, 40, 60, .2); }

/* phone: compact chip with a small label */
.hdr-tel { gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: #fff; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.hdr-tel:hover { border-color: var(--green-line); box-shadow: 0 6px 18px -10px rgba(20, 40, 60, .35); transform: translateY(-1px); }
.hdr-tel i { width: 32px; height: 32px; }
.hdr-tel svg { width: 15px; height: 15px; }
.hdr-tel span { display: grid; line-height: 1.1; font-size: .9rem; font-weight: 600; }
.hdr-tel small { font-size: .68rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 1720px) { .hdr-tel { padding: 4px; } .hdr-tel span { display: none; } }

/* CTA: pill with an arrow that slides in on hover */
.hdr .hdr-cta { height: 44px; padding: 0 18px 0 22px; border-radius: 999px; gap: 8px; display: inline-flex; align-items: center; }
.hdr-cta svg { width: 17px; height: 17px; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.hdr-cta:hover svg { transform: translateX(4px); }

/* =====================================================================
   Transport home ("x" sections) — layouts + motion. Scoped to .theme-pro.
   ===================================================================== */
.theme-pro { --ink: #1f2d3d; --blue: #2b6cb0; --blue-soft: #e8f0fa; --leaf: #22a873; --leaf-soft: #e6f6ee; --ease-out: cubic-bezier(.16, 1, .3, 1); }
.theme-pro .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.theme-pro .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--leaf), var(--blue)); }
.theme-pro .eyebrow--light { color: #9fd9bf; }
.x-head { margin-bottom: clamp(32px, 4vw, 52px); max-width: 760px; }
.x-head h2 { margin-top: 14px; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -.01em; }
.x-head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.x-head--row > div { max-width: 720px; }

/* ---- generic entrance states (only when JS runs) ---- */
.x-js [data-a] { opacity: 0; transition: opacity .9s var(--ease-out) var(--ad, 0s), transform .9s var(--ease-out) var(--ad, 0s); }
.x-js [data-a="fade-up"] { transform: translateY(26px); }
.x-js [data-a="pop"] { transform: translateY(30px) scale(.96); }
.x-js [data-a="slide"] { transform: translateX(40px); }
.x-js [data-a="row"] { transform: translateY(18px); }
.x-js [data-a].a-in { opacity: 1; transform: none; }
.split-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.x-js .split-words .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease-out) calc(var(--wi) * 55ms + .05s); }
.x-js .split-words.a-in .w > span { transform: none; }

.btn--arrow { display: inline-flex; align-items: center; gap: 10px; }
.btn--arrow svg { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.btn--arrow:hover svg { transform: translateX(5px); }
@keyframes bob { 50% { translate: 0 -8px; } }

/* ---- intro + stats ---- */
.x-intro { padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 7vw, 100px); background: radial-gradient(60% 80% at 100% 0%, var(--blue-soft), transparent 70%), radial-gradient(40% 60% at 0% 100%, var(--leaf-soft), transparent 70%); }
.x-intro .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.x-intro h2 { margin-top: 16px; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.015em; }
.x-intro p { margin-top: 20px; font-size: 1.12rem; color: var(--muted); max-width: 34em; }
.x-stats { display: grid; gap: 14px; }
.x-stat { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 22px; align-items: center; padding: 22px 26px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -36px rgba(29, 69, 115, .45); overflow: hidden; transition: transform .4s var(--ease-out), box-shadow .4s ease; }
.x-stat:hover { transform: translateX(-6px); box-shadow: 0 30px 60px -34px rgba(29, 69, 115, .55); }
.x-stat::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--leaf), var(--blue)); transform: scaleY(0); transform-origin: top; transition: transform .9s var(--ease-out) calc(var(--ad, 0s) + .3s); }
.x-stat.a-in::after { transform: none; }
.x-stat b { grid-row: 1 / 3; font-size: clamp(2.8rem, 4.4vw, 3.8rem); line-height: 1; font-weight: 700; background: linear-gradient(135deg, var(--blue), var(--leaf)); -webkit-background-clip: text; background-clip: text; color: transparent; min-width: 1.3ch; }
.x-stat b sup { font-size: .45em; }
.x-stat span { font-weight: 600; font-size: 1.08rem; color: var(--ink); align-self: end; }
.x-stat small { color: var(--muted); font-size: .9rem; align-self: start; }
.x-stat--star::before { content: "★"; position: absolute; right: 18px; top: 50%; translate: 0 -50%; font-size: 4.4rem; color: var(--leaf); opacity: .1; animation: spin-slow 18s linear infinite; }
@keyframes spin-slow { to { rotate: 360deg; } }

/* ---- what do you need: rotating tabs + image panels ---- */
.x-need { padding: clamp(70px, 8vw, 120px) 0; }
.need { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(24px, 3vw, 44px); align-items: stretch; }
.need-tabs { display: grid; gap: 10px; align-content: start; }
.need-tabs button { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; text-align: left; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; cursor: pointer; font: inherit; color: var(--ink); overflow: hidden; transition: border-color .35s ease, background-color .35s ease, transform .35s var(--ease-out), box-shadow .35s ease; }
.need-tabs button:hover { transform: translateX(6px); }
.need-tabs .n { grid-row: 1 / 3; font-size: .85rem; font-weight: 700; color: var(--muted); padding-top: 4px; transition: color .3s ease; }
.need-tabs b { font-size: 1.25rem; }
.need-tabs small { color: var(--muted); font-size: .93rem; margin-top: 2px; }
.need-tabs button[aria-selected="true"] { border-color: transparent; background: linear-gradient(135deg, #1d4573, #2b6cb0); color: #fff; box-shadow: 0 24px 40px -24px rgba(29, 69, 115, .8); transform: translateX(10px); }
.need-tabs button[aria-selected="true"] small, .need-tabs button[aria-selected="true"] .n { color: #bcd6f2; }
.need-tabs .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #6fe0ae; transform: scaleX(0); transform-origin: left; }
.need.ticking button[aria-selected="true"] .bar { animation: bar var(--rot, 6s) linear forwards; }
@keyframes bar { to { transform: scaleX(1); } }
.need-panels { position: relative; min-height: 420px; border-radius: 26px; overflow: hidden; background: #0f2747; box-shadow: 0 40px 80px -50px rgba(15, 39, 71, .8); }
.need-panel { position: absolute; inset: 0; display: grid; align-items: end; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
.need-panel.is-on { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.need-img { position: absolute; inset: 0; }
.need-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.6s var(--ease-out); }
.need-panel.is-on .need-img img { transform: scale(1); }
.need-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 39, 71, 0) 20%, rgba(15, 39, 71, .92) 85%); }
.need-body { position: relative; padding: clamp(26px, 3vw, 40px); color: #fff; }
.need-body h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.need-body .checks { margin: 14px 0 22px; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.need-body .checks li { padding: 7px 14px 7px 32px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: .93rem; }
.need-body .checks li::before { top: 13px; left: 13px; border-color: #6fe0ae; }
.need-panel .need-body > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s var(--ease-out); }
.need-panel.is-on .need-body > * { opacity: 1; transform: none; }
.need-panel.is-on .need-body > :nth-child(2) { transition-delay: .1s; }
.need-panel.is-on .need-body > :nth-child(3) { transition-delay: .2s; }
.need-body .btn--green { background: #fff; color: #1d4573; }
.need-body .btn--green:hover { background: #6fe0ae; color: #0f2747; }

/* ---- services: big rows with a floating photo ---- */
.x-svc { padding: clamp(70px, 8vw, 120px) 0; background: #f6f8fb; }
.svc-list { position: relative; border-top: 1px solid var(--line); }
.svc-row { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr) auto 56px; align-items: center; gap: 24px; padding: 26px 8px; border-bottom: 1px solid var(--line); color: var(--ink); overflow: hidden; }
.svc-row::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, #fff, var(--blue-soft)); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease-out); }
.svc-row:hover::before { transform: none; }
.svc-row > * { position: relative; z-index: 1; }
.svc-n { font-size: .9rem; font-weight: 700; color: var(--muted); transition: color .3s ease; }
.svc-t b { display: block; font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 600; letter-spacing: -.01em; transition: transform .45s var(--ease-out), color .3s ease; }
.svc-t small { display: block; margin-top: 4px; color: var(--muted); font-size: .98rem; max-width: 40em; transition: transform .45s var(--ease-out) .03s; }
.svc-row:hover .svc-t b, .svc-row:hover .svc-t small { transform: translateX(14px); }
.svc-row:hover .svc-t b { color: var(--blue); }
.svc-row:hover .svc-n { color: var(--leaf); }
.svc-tag { font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.svc-go { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); transition: background-color .3s ease, color .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1), border-color .3s ease; }
.svc-go svg { width: 20px; height: 20px; }
.svc-row:hover .svc-go { background: var(--blue); border-color: var(--blue); color: #fff; transform: rotate(45deg); }
@media (max-width: 760px) { .svc-row { grid-template-columns: 40px minmax(0, 1fr) 44px; } .svc-tag { display: none; } }

/* ---- refrigerated: parallax photo + cold gauge + chain ---- */
.x-cold { padding: clamp(80px, 9vw, 130px) 0; overflow: hidden; }
.x-cold .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.cold-visual { position: relative; }
.cold-img { aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(15, 39, 71, .8); }
.cold-img img { width: 100%; height: 118%; object-fit: cover; transform: translateY(calc(-8% + var(--py, 0px))); }
.cold-gauge { position: absolute; right: -28px; bottom: 40px; display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; background: #fff; box-shadow: 0 30px 60px -30px rgba(15, 39, 71, .6); animation: bob 7s ease-in-out infinite; }
.cold-gauge svg { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); transform: rotate(-90deg); }
.g-bg, .g-fg { fill: none; stroke-width: 9; }
.g-bg { stroke: #e8f0fa; }
.g-fg { stroke: url(#none); stroke: #4aa3ff; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 2s var(--ease-out) .3s, stroke 2s ease .3s; }
.cold-gauge.a-in .g-fg { stroke-dashoffset: 70; stroke: #22a873; }
.g-val { position: relative; display: grid; justify-items: center; }
.g-snow { font-size: 2.2rem; color: #4aa3ff; animation: spin-slow 12s linear infinite; display: inline-block; }
.g-val small { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cold-txt h2 { margin: 14px 0 18px; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; }
.chain { list-style: none; margin: 30px 0; padding: 0 0 0 30px; position: relative; display: grid; gap: 22px; }
.chain::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(#4aa3ff, var(--leaf)); }
.chain li { position: relative; display: grid; }
.chain li::before { content: ""; position: absolute; left: -29px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); }
.chain li:last-child::before { border-color: var(--leaf); }
.chain b { font-size: 1.1rem; }
.chain span { color: var(--muted); }
.x-cold .btns { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .x-cold .wrap, .x-intro .wrap, .need { grid-template-columns: 1fr; } .cold-gauge { right: 12px; } }

/* ---- how it works: a calm progress line that fills with the scroll ---- */
.x-steps { padding: clamp(80px, 9vw, 130px) 0; background: linear-gradient(180deg, #0f2747, #173d68); color: #fff; overflow: hidden; }
.x-steps .eyebrow { color: #9fd9bf; }
.x-steps h2 { color: #fff; }
.road { position: relative; --p: 0; margin-top: 10px; }
.road-track { position: absolute; left: 12.5%; right: 12.5%; top: 11px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.road-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: 2px; background: linear-gradient(90deg, #20b878, #8fd8ff); }
.road-head { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(143, 216, 255, .18), 0 0 18px 2px rgba(143, 216, 255, .55); opacity: calc(min(1, var(--p) * 20)); }
.road-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.road-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px; }
.road-dot { position: relative; width: 24px; height: 24px; margin-bottom: 26px; border-radius: 50%; background: #0f2747; border: 2px solid rgba(255, 255, 255, .28); transition: border-color .8s ease, background-color .8s ease; }
.road-dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #20b878; transform: scale(0); transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.road-step.lit .road-dot { border-color: #20b878; }
.road-step.lit .road-dot::after { transform: scale(1); }
.road-n { font-size: .8rem; font-weight: 700; letter-spacing: .16em; color: rgba(255, 255, 255, .4); transition: color .8s ease; }
.road-step h3 { margin-top: 8px; color: rgba(255, 255, 255, .55); font-size: 1.35rem; transition: color .8s ease; }
.road-step p { margin-top: 8px; max-width: 18em; color: rgba(255, 255, 255, .45); transition: color .8s ease; }
.road-step.lit .road-n { color: #6fe0ae; }
.road-step.lit h3 { color: #fff; }
.road-step.lit p { color: rgba(255, 255, 255, .75); }
@media (max-width: 760px) {
  .road-track { left: 11px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; }
  .road-fill { width: auto; right: 0; height: calc(var(--p) * 100%); bottom: auto; }
  .road-head { left: 50%; top: calc(var(--p) * 100%); margin: -5px 0 0 -5px; }
  .road-steps { grid-template-columns: 1fr; gap: 34px; }
  .road-step { display: grid; grid-template-columns: 24px 1fr; column-gap: 20px; align-items: start; text-align: left; padding: 0; }
  .road-dot { grid-row: 1 / 4; margin: 0; }
  .road-step h3, .road-step p { grid-column: 2; }
}

/* ---- by situation: each card enters its own way and has its own icon motion ---- */
.x-sit { padding: clamp(80px, 9vw, 130px) 0; }
.sit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; perspective: 1200px; }
.sit { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 290px; padding: 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line); color: var(--ink); overflow: hidden; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .7s ease, border-color .7s ease, opacity 1.2s cubic-bezier(.22, 1, .36, 1) var(--ad, 0s); }
.x-js .sit[data-a] { transition: transform 1.2s cubic-bezier(.22, 1, .36, 1) var(--ad, 0s), opacity 1.2s cubic-bezier(.22, 1, .36, 1) var(--ad, 0s), box-shadow .7s ease, border-color .7s ease; }
.x-js .sit[data-a="from-left"]:not(.a-in) { transform: translateX(-60px) rotate(-1.5deg); }
.x-js .sit[data-a="from-right"]:not(.a-in) { transform: translateX(60px) rotate(1.5deg); }
.x-js .sit[data-a="rise"]:not(.a-in) { transform: translateY(70px); }
.x-js [data-a="from-left"], .x-js [data-a="from-right"], .x-js [data-a="rise"] { opacity: 0; }
.x-js .sit.a-in { opacity: 1; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.x-js .sit.a-in.is-settled { transition: transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .7s ease, border-color .7s ease; }
.sit:hover { box-shadow: 0 40px 70px -44px rgba(29, 69, 115, .5); border-color: transparent; }
.sit-glow { position: absolute; inset: 0; z-index: 0; background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 50%), rgba(43, 108, 176, .10), transparent 65%); opacity: 0; transition: opacity .7s ease; }
.sit:hover .sit-glow { opacity: 1; }
.sit > :not(.sit-glow) { position: relative; z-index: 1; }
.sit-ico { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 14px; border-radius: 16px; background: linear-gradient(135deg, var(--blue-soft), var(--leaf-soft)); color: var(--blue); overflow: hidden; transition: background .7s ease, color .7s ease; }
.sit-ico svg { width: 28px; height: 28px; }
.sit:hover .sit-ico { background: linear-gradient(135deg, var(--blue), var(--leaf)); color: #fff; }
.sit--lanes:hover .sit-ico svg { animation: ico-lanes 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
.sit--spot:hover .sit-ico svg { animation: ico-spot 1.4s ease-in-out infinite; }
.sit--trailer:hover .sit-ico svg { animation: ico-trailer 2.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.sit--tire:hover .sit-ico svg { animation: ico-tire 2.4s linear infinite; }
@keyframes ico-lanes { 0% { transform: translateX(0); opacity: 1; } 45% { transform: translateX(26px); opacity: 0; } 46% { transform: translateX(-26px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes ico-spot { 0%, 100% { transform: scale(1); filter: none; } 30% { transform: scale(1.18); filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)); } 60% { transform: scale(.96); } }
@keyframes ico-trailer { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(4px); } }
@keyframes ico-tire { to { transform: rotate(360deg); } }
.sit h3 { font-size: 1.3rem; }
.sit p { color: var(--muted); }
.sit-more { margin-top: auto; font-weight: 600; color: var(--blue); }
.sit-more i { display: inline-block; font-style: normal; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.sit:hover .sit-more i { transform: translateX(6px); }
@media (max-width: 1000px) { .sit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sit-grid { grid-template-columns: 1fr; } }

/* ---- coverage map: lanes draw in, trucks travel, cities pulse ---- */
.x-map .sec { background: radial-gradient(50% 70% at 20% 50%, var(--blue-soft), transparent 70%), #fff; }
.x-map .map svg .rt { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2.2s var(--ease-out); }
.x-map .map.a-in svg .rt { stroke-dashoffset: 0; }
.x-map .map svg .rt.on { stroke: var(--blue); stroke-width: 3; }
.x-map .map.a-in svg .rt.on { stroke-dasharray: 8 10; stroke-dashoffset: 0; animation: flow 1.6s linear 2.2s infinite; }
@keyframes flow { to { stroke-dashoffset: -36; } }
.x-map .map svg .city circle { fill: var(--leaf); transform-box: fill-box; transform-origin: center; animation: city 2.4s ease-in-out infinite; }
.x-map .map svg .city:nth-child(odd) circle { animation-delay: 1.2s; }
@keyframes city { 50% { transform: scale(1.6); } }
.x-map .countries > div { transition: transform .35s var(--ease-out), background-color .3s ease; border-radius: 12px; }
.x-map .countries > div:hover { transform: translateX(8px); background: var(--blue-soft); }

/* ---- why: dark band with numbered items and live badges ---- */
.x-why { position: relative; padding: clamp(80px, 9vw, 130px) 0; background: radial-gradient(60% 80% at 0% 0%, rgba(32, 184, 120, .22), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(43, 108, 176, .35), transparent 60%), #0f2340; color: #fff; overflow: hidden; }
.x-why .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.x-why h2 { color: #fff; margin: 16px 0 30px; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; }
.why-badges .mbr { gap: 12px; }
.why-badges .mbr a { background: rgba(255, 255, 255, .06); }
.why-r { display: grid; gap: 14px; }
.why-item { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; padding: 24px 26px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: background-color .4s ease, transform .4s var(--ease-out), border-color .4s ease; }
.why-item:hover { background: rgba(255, 255, 255, .1); border-color: rgba(111, 224, 174, .5); transform: translateX(-8px); }
.why-n { font-size: 1.7rem; font-weight: 700; line-height: 1; background: linear-gradient(135deg, #6fe0ae, #79b4f0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.why-item h3 { color: #fff; font-size: 1.2rem; }
.why-item p { color: rgba(255, 255, 255, .7); margin-top: 4px; }
@media (max-width: 900px) { .x-why .wrap { grid-template-columns: 1fr; } }

/* ---- news: date badges + hover lift ---- */
.x-news { padding: clamp(80px, 9vw, 120px) 0; }
.news-x { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.nx { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line); color: var(--ink); overflow: hidden; transition: transform .45s var(--ease-out), box-shadow .45s ease, border-color .45s ease, opacity .9s var(--ease-out) var(--ad, 0s); }
.nx::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--leaf), var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.nx:hover { transform: translateY(-8px); box-shadow: 0 40px 60px -40px rgba(29, 69, 115, .55); border-color: transparent; }
.nx:hover::after { transform: none; }
.nx time { display: inline-flex; align-items: baseline; gap: 6px; align-self: flex-start; padding: 8px 14px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-weight: 600; font-size: .9rem; }
.nx time b { font-size: 1.4rem; line-height: 1; }
.nx-cat { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf); }
.nx h3 { font-size: 1.25rem; line-height: 1.25; }
.nx p { color: var(--muted); }
.nx-go { margin-top: auto; font-weight: 600; color: var(--blue); }
.nx-go i { display: inline-block; font-style: normal; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.nx:hover .nx-go i { transform: translateX(6px); }
@media (max-width: 900px) { .news-x { grid-template-columns: 1fr; } }

/* ---- CTA band: moving road lines behind ---- */
.theme-pro .cta { position: relative; overflow: hidden; background: linear-gradient(120deg, #1d4573, #2b6cb0); }
.theme-pro .cta::before { content: ""; position: absolute; inset: -50% -10%; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 60px); animation: drift 14s linear infinite; }
.theme-pro .cta .wrap { position: relative; }
@keyframes drift { to { transform: translateX(120px); } }

@media (prefers-reduced-motion: reduce) {
  .x-stat--star::before, .cold-gauge, .g-snow, .x-map .map svg .city circle, .theme-pro .cta::before { animation: none !important; }
}
/* hover transforms must win over the "entered" reset */
.x-js .x-stat.a-in:hover { transform: translateX(-6px); }
.x-js .nx.a-in:hover { transform: translateY(-8px); }
.x-js .why-item.a-in:hover { transform: translateX(-8px); }
/* header v2 fit: tighter item padding, then a compact step before the burger */
.hdr .nav a { padding: 9px 13px; }
.co-switch a { padding: 7px 12px; }
@media (max-width: 1560px) { .hdr .wrap { gap: 24px; } .hdr .brand-name small { display: none; } .hdr .nav a { padding: 9px 11px; } .hdr-l { gap: 16px; } }
@media (max-width: 1380px) { .hdr .nav { display: none; } .menu-btn { display: block; margin-left: 0; } .hdr-r { margin-left: auto; } }
@media (max-width: 1840px) { .hdr-tel { padding: 4px; } .hdr-tel span { display: none; } }
.x-stat b span { font: inherit; color: inherit; align-self: auto; }
.x-stat b { white-space: nowrap; }

/* ---- cold gauge: content stays inside the ring ---- */
.cold-gauge { width: 168px; height: 168px; }
.g-val { gap: 2px; }
.g-snow { font-size: 1.7rem; line-height: 1; }
.g-val small { font-size: .58rem; letter-spacing: .08em; }

/* ---- advisor on the home page: a one-question-at-a-time wizard that fits one screen ---- */
.x-adv { padding: clamp(56px, 7vw, 96px) 0; background: radial-gradient(50% 80% at 100% 0%, var(--blue-soft), transparent 70%), #f6f8fb; }
.x-adv .shead { margin-bottom: 28px; }
.x-adv .shead h2 { margin-top: 12px; font-size: clamp(2rem, 3.2vw, 2.8rem); }
.x-adv .shead .lead { margin-top: 8px; }
.x-adv .adv { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border: 0; border-radius: 26px; box-shadow: 0 40px 80px -50px rgba(15, 39, 71, .55); min-height: 0; }
.x-adv .adv-form.is-wizard { position: relative; display: flex; flex-direction: column; gap: 0; padding: clamp(26px, 3vw, 44px); min-height: 460px; }
.wiz-top { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.wiz-count { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); white-space: nowrap; }
.wiz-bar { flex: 1; height: 4px; border-radius: 4px; background: #e6edf5; overflow: hidden; }
.wiz-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--leaf), var(--blue)); transition: width .6s cubic-bezier(.22, 1, .36, 1); }
.is-wizard > .field, .is-wizard > .fgrid { display: none; }
.is-wizard > .wiz-on { display: grid; flex: 1; align-content: start; animation: wiz-in-r .55s cubic-bezier(.22, 1, .36, 1); }
.is-wizard > .wiz-on.wiz-from-l { animation-name: wiz-in-l; }
@keyframes wiz-in-r { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes wiz-in-l { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
.is-wizard .fgrid.wiz-on { grid-template-columns: 1fr; gap: 26px; }
.is-wizard .field { gap: 16px; }
.is-wizard .field > .flabel, .is-wizard .field > label { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 600; color: var(--ink); line-height: 1.2; }
.is-wizard .fgrid .field > .flabel, .is-wizard .fgrid .field > label { font-size: 1.3rem; }
.is-wizard .seg { gap: 10px; }
.is-wizard .seg span { padding: 14px 20px; border-radius: 14px; border: 1.5px solid #dbe4ee; font-weight: 500; font-size: 1rem; transition: border-color .25s ease, background-color .25s ease, color .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease; }
.is-wizard .seg span:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(29, 69, 115, .6); }
.is-wizard .seg input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 12px 24px -14px rgba(29, 69, 115, .8); }
.is-wizard .field input { height: 54px; border-radius: 14px; border: 1.5px solid #dbe4ee; font-size: 1rem; }
.is-wizard .field input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(43, 108, 176, .15); }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid #e6edf5; }
.wiz-back { border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; padding: 10px 4px; transition: color .2s ease; }
.wiz-back:hover:not(:disabled) { color: var(--ink); }
.wiz-back:disabled { opacity: .35; cursor: default; }
.wiz-next { border-radius: 999px; padding: 0 26px; height: 48px; }
.x-adv .adv-out { padding: clamp(26px, 3vw, 40px); gap: 14px; background: linear-gradient(160deg, #1d4573, #2b6cb0); justify-content: flex-start; }
.x-adv .adv-out .k { color: #9fd9bf; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.x-adv .adv-out h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); margin-top: 6px; }
.x-adv .adv-out .why { font-size: .95rem; }
.x-adv .adv-out .facts div { padding: 9px 0; }
.x-adv .adv-out .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.x-adv .adv-out .checks li { font-size: .92rem; }
.x-adv .adv-out .btn { margin-top: auto; align-self: flex-start; border-radius: 999px; }
.adv-out.wiz-pulse h3 { animation: out-pulse .6s ease; }
@keyframes out-pulse { 0% { opacity: .3; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.adv-out.wiz-flash { animation: out-flash 1s ease; }
@keyframes out-flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: inset 0 0 0 3px #6fe0ae; } }
.x-adv > .wrap > .small { display: none; }
@media (max-width: 900px) { .x-adv .adv { grid-template-columns: 1fr; } .x-adv .adv-form.is-wizard { min-height: 400px; } }
.x-adv { padding: clamp(40px, 4.5vw, 64px) 0; }
.x-adv .shead { margin-bottom: 22px; }
.x-adv .adv-form.is-wizard { min-height: 400px; }
.x-adv .adv-form.is-wizard { min-height: 370px; } .wiz-top { margin-bottom: 24px; } .wiz-nav { margin-top: 22px; padding-top: 18px; }
.x-adv .adv-out { padding: 28px 32px; gap: 10px; } .x-adv .adv-out .facts div { padding: 7px 0; } .x-adv .adv-out .why { margin: 0; line-height: 1.45; }

/* ================= Footer v2: compact ================= */
.ftr--v2 { padding: 48px 0 0; font-size: .93rem; color: var(--muted-dark); }
.f-main { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); padding-bottom: 36px; }
.f-brand .brand { color: #fff; margin-bottom: 12px; }
.f-brand p { max-width: 30em; line-height: 1.55; }
.f-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.f-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #fff; font-weight: 500; font-size: .88rem; transition: background-color .25s ease, border-color .25s ease, transform .25s ease; }
.f-chip i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.f-chip svg { width: 13px; height: 13px; }
.f-chip:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.f-chip--wa i { background: #25d366; }
.f-col h4 { margin: 0 0 12px; color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.f-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.f-col a { position: relative; transition: color .2s ease, padding-left .25s ease; }
.f-col a:hover { color: #fff; padding-left: 6px; }
.f-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 16px 0; border-top: 1px solid var(--line-dark); font-size: .85rem; }
.f-mbr { display: flex; gap: 8px; }
.f-mbr a { display: grid; place-items: center; height: 34px; padding: 3px 8px; border-radius: 8px; background: #fff; opacity: .85; transition: opacity .2s ease, transform .2s ease; }
.f-mbr a:hover { opacity: 1; transform: translateY(-2px); }
.f-mbr img { max-height: 26px; max-width: 64px; width: auto; height: auto; }
.f-soc { margin: 0; gap: 6px; }
.f-soc a { width: 32px; height: 32px; }
.f-soc svg { width: 16px; height: 16px; }
.f-copy { margin-left: auto; }
.f-legal { display: flex; gap: 18px; }
.f-legal a:hover { color: #fff; }
@media (max-width: 1000px) { .f-main { grid-template-columns: 1fr 1fr 1fr; } .f-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .f-main { grid-template-columns: 1fr 1fr; } .f-copy { margin-left: 0; width: 100%; order: 3; } }
/* why band: two badges on top, Lean & Green centred underneath */
.why-badges .mbr { display: grid; grid-template-columns: auto auto; width: fit-content; }
.why-badges .mbr a:nth-child(3) { grid-column: 1 / -1; justify-self: center; }

/* ---- how it works v3: pinned while the line fills, richer background ---- */
.x-steps { padding: 0; height: 240vh; background: #0b1e36; overflow: visible; }
.steps-pin { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); min-height: 560px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; }
.steps-bg { position: absolute; inset: 0; z-index: -2; }
.steps-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: grayscale(.4) blur(1px); transform: scale(1.05); }
.steps-bg::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(55% 70% at 10% 15%, rgba(32, 184, 120, .22), transparent 60%),
  radial-gradient(50% 70% at 95% 90%, rgba(43, 108, 176, .45), transparent 60%),
  linear-gradient(180deg, rgba(11, 30, 54, .82), rgba(11, 30, 54, .94)); }
.steps-pin::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); }
.steps-big { position: absolute; z-index: -1; right: clamp(16px, 6vw, 120px); top: 50%; translate: 0 -55%; font-size: clamp(12rem, 26vw, 24rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .09); pointer-events: none; }
.steps-big.swap { animation: big-swap .7s cubic-bezier(.22, 1, .36, 1); }
@keyframes big-swap { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.road-step.now h3 { color: #fff; }
.road-step.now .road-dot { box-shadow: 0 0 0 8px rgba(32, 184, 120, .15); }
.road-step .road-dot { transition: border-color .8s ease, background-color .8s ease, box-shadow .8s ease; }
@media (max-width: 760px), (max-height: 600px) {
  .x-steps { height: auto; }
  .steps-pin { position: relative; top: 0; height: auto; padding: 80px 0; }
  .steps-big { display: none; }
}
@media (prefers-reduced-motion: reduce) { .x-steps { height: auto; } .steps-pin { position: relative; top: 0; height: auto; padding: 90px 0; } }
.road-dot { z-index: 1; }

/* services v2: two compact columns so the whole list fits one screen */
.x-svc { padding: clamp(56px, 6vw, 88px) 0; }
.x-svc .x-head { margin-bottom: 28px; }
.x-svc .x-head h2 { font-size: clamp(1.9rem, 2.8vw, 2.5rem); }
.svc-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; border-top: 0; }
.svc-row { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 18px; padding: 22px 8px; border-top: 1px solid var(--line); border-bottom: 0; }
.svc-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.svc-t b { font-size: clamp(1.15rem, 1.5vw, 1.35rem); }
.svc-t small { font-size: .92rem; }
.svc-tag { display: none; }
.svc-go { width: 42px; height: 42px; }
.svc-go svg { width: 18px; height: 18px; }
.svc-row:hover .svc-t b, .svc-row:hover .svc-t small { transform: translateX(8px); }
@media (max-width: 900px) { .svc-list { grid-template-columns: 1fr; } .svc-row:nth-last-child(2) { border-bottom: 0; } }
.svc-row { grid-template-columns: 44px minmax(0, 1fr) auto 42px; } .svc-tag { display: inline-block; font-size: .74rem; padding: 4px 10px; } @media (max-width: 560px) { .svc-row { grid-template-columns: 36px minmax(0, 1fr) 42px; } .svc-tag { display: none; } }
/* intro glows stay inside the section (no hard cut at top/bottom) */
.x-intro { background: radial-gradient(32% 38% at 82% 50%, var(--blue-soft), transparent 72%), radial-gradient(30% 36% at 14% 55%, var(--leaf-soft), transparent 72%), #fff; }
/* intro glows: same placement as before, but faded out at the top and bottom edges */
.x-intro { position: relative; isolation: isolate; background: #fff; }
.x-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 80% at 100% 0%, var(--blue-soft), transparent 70%), radial-gradient(40% 60% at 0% 100%, var(--leaf-soft), transparent 70%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); }
.x-intro::before { background: radial-gradient(60% 80% at 100% 0%, #d3e3f6, transparent 70%), radial-gradient(40% 60% at 0% 100%, #cfeedf, transparent 70%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
.is-wizard.wiz-busy > .wiz-on, .is-wizard.wiz-busy .wiz-nav { pointer-events: none; }

/* ================= Gate roadside band v8: client mock-up (light card, red accents, road photo right) ================= */
.gate-rs.gate-ph {
  position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 0 clamp(20px, 2.4vw, 40px);
  margin-top: 16px; padding: 22px clamp(24px, 3vw, 44px) 22px clamp(24px, 3.4vw, 52px); border: 0; border-radius: 12px; overflow: hidden; isolation: isolate;
  background: #f1f1f2; color: var(--text); box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .35), 0 2px 6px -2px rgba(0, 0, 0, .06);
}
.gate-rs.gate-ph::after { display: none; }
.ph-bg { position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: 52%; }
.ph-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; filter: grayscale(1) contrast(1.05); }
.ph-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #f1f1f2 0%, rgba(241, 241, 242, .92) 22%, rgba(241, 241, 242, .35) 55%, rgba(241, 241, 242, 0) 75%); }
.ph-bg::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; right: 0; width: 9%; background: #22272e; clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%); }
.ph-stripe { position: absolute; z-index: 3; top: 0; bottom: 0; right: 7.2%; width: 2.2%; background: #d81030; clip-path: polygon(70% 0, 100% 0, 30% 100%, 0 100%); }
.ph-icon { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #d42a32; color: #fff; box-shadow: 0 10px 22px -10px rgba(212, 42, 50, .8); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.ph-icon svg { width: 30px; height: 30px; transform: scaleX(-1); }
.ph-icon:hover { transform: scale(1.06) rotate(-8deg); }
.ph-sep { width: 1px; align-self: stretch; margin: 2px 0; background: #cfd0d3; }
.ph-k { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #d42a32; }
.gate-ph h2 { margin-top: 4px; font-size: clamp(1.5rem, 2.1vw, 2.05rem); line-height: 1.15; color: #1e2329; }
.gate-ph p { margin-top: 4px; font-size: .98rem; color: #5a5f66; max-width: none; }
.ph-act { position: relative; z-index: 4; display: grid; gap: 8px; }
.ph-label { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #6b7077; }
.ph-phones { display: flex; gap: 12px; flex-wrap: wrap; }
.ph-btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border-radius: 4px; background: #fff; color: #1e2329; font-weight: 700; font-size: .98rem; white-space: nowrap; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .35); border: 1px solid #e3e4e6; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.ph-btn svg { width: 17px; height: 17px; color: #4b5057; transform: scaleX(-1); }
.ph-btn--main { background: #d42a32; border-color: #d42a32; color: #fff; }
.ph-btn--main svg { color: #fff; }
.ph-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .45); }
.ph-btn--main:hover { background: #bf2229; }
@media (max-width: 1200px) {
  .gate-rs.gate-ph { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 16px; }
  .ph-act { grid-column: 1 / -1; }
  .ph-bg { width: 60%; opacity: .55; }
}
@media (max-width: 640px) {
  .gate-rs.gate-ph { grid-template-columns: auto minmax(0, 1fr); }
  .ph-sep { display: none; }
  .ph-icon { width: 56px; height: 56px; }
  .ph-btn { height: 44px; padding: 0 14px; }
}
/* roadside band v8: a size smaller overall */
.gate-rs.gate-ph { padding: 14px clamp(20px, 2.4vw, 34px) 14px clamp(20px, 2.6vw, 40px); gap: 0 clamp(16px, 1.8vw, 28px); }
.ph-icon { width: 56px; height: 56px; }
.ph-icon svg { width: 23px; height: 23px; }
.ph-k { font-size: .72rem; letter-spacing: .28em; }
.gate-ph h2 { margin-top: 2px; font-size: clamp(1.25rem, 1.6vw, 1.6rem); }
.gate-ph p { margin-top: 2px; font-size: .88rem; }
.ph-act { gap: 6px; }
.ph-label { font-size: .66rem; }
.ph-phones { gap: 8px; }
.ph-btn { height: 40px; padding: 0 15px; gap: 8px; font-size: .88rem; }
.ph-btn svg { width: 14px; height: 14px; }
/* roadside band: the client's own road photo (it already carries the red stripe and dark corner) */
.ph-bg { left: 0; width: auto; }
.ph-bg img { object-fit: cover; object-position: right 62%; filter: none; }
.ph-bg::before { background: linear-gradient(90deg, rgba(241, 241, 242, .96) 0%, rgba(241, 241, 242, .9) 35%, rgba(241, 241, 242, .35) 60%, rgba(241, 241, 242, 0) 78%); }
.ph-bg::after { display: none; }

/* ---- about: purpose, mission and vision ---- */
.chip-k { font-size: .68em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-right: 2px; }
.ab-purpose { padding: clamp(64px, 8vw, 110px) 0; }
.ab-intro { max-width: 820px; }
.ab-intro h2 { margin-top: 12px; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.ab-intro .lead { margin-top: 16px; }
.ab-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.ab-card { position: relative; padding: clamp(26px, 3vw, 38px); border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -48px rgba(15, 39, 71, .5); overflow: hidden; transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease; }
.ab-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #2b6cb0; }
.ab-card--green::before { background: #22a873; }
.ab-card:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -44px rgba(15, 39, 71, .55); }
.ab-k { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #2b6cb0; }
.ab-card--green .ab-k { color: #1c8a5e; }
.ab-card h3 { margin-top: 10px; font-size: 1.4rem; }
.ab-card p { margin-top: 12px; color: var(--muted); }
.ab-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; }
.ab-partners span { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.ab-partners b { padding: 8px 16px; border-radius: 999px; background: #eff5fb; color: #1f3f63; font-weight: 600; font-size: .95rem; }
@media (max-width: 760px) { .ab-mv { grid-template-columns: 1fr; } }

/* ---- "which one sounds like you": photo cards with a real call to action ---- */
.sit.sit--v2 { padding: 0; gap: 0; min-height: 0; border-radius: 20px; }
.sit-media { position: relative; display: block; height: 190px; overflow: hidden; background: #0f2747; }
.sit-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.sit--tire .sit-media img { object-position: right 60%; }
.sit-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 39, 71, .05) 30%, rgba(15, 39, 71, .55)); }
.sit--v2:hover .sit-media img { transform: scale(1.08); }
.sit-tag { position: absolute; z-index: 1; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1f3f63; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sit--v2 .sit-ico { position: absolute; z-index: 1; left: 22px; bottom: -26px; margin: 0; width: 56px; height: 56px; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px -14px rgba(15, 39, 71, .6); }
.sit--v2 .sit-media { overflow: visible; }
.sit--v2 .sit-media img { border-radius: 20px 20px 0 0; }
.sit-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 42px 22px 22px; }
.sit--v2 h3 { font-size: 1.3rem; }
.sit--v2 p { flex: 1; }
.sit-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 0 8px 0 20px; height: 54px; border-radius: 14px; background: #1f3f63; color: #fff; font-weight: 600; font-size: 1.02rem; transition: background-color .4s ease, box-shadow .4s ease; }
.sit-cta i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .14); transition: transform .5s cubic-bezier(.22, 1, .36, 1), background-color .4s ease; }
.sit-cta svg { width: 18px; height: 18px; }
.sit--v2:hover .sit-cta { background: #22a873; box-shadow: 0 16px 30px -16px rgba(34, 168, 115, .9); }
.sit--v2:hover .sit-cta i { transform: translateX(4px); background: rgba(255, 255, 255, .22); }
.sit--tire .sit-cta { background: #8e1d22; }
.sit--tire:hover .sit-cta { background: #b3262d; box-shadow: 0 16px 30px -16px rgba(179, 38, 45, .9); }

/* ---- trusted partners strip between the CTA and the footer ---- */
.partners { padding: 30px 0; background: #fff; border-top: 1px solid var(--line); }
.partners .wrap { display: flex; align-items: center; justify-content: center; gap: 18px 48px; flex-wrap: wrap; }
.partners-k { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.partners ul { display: flex; align-items: center; gap: 22px 52px; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.partners img { display: block; height: 38px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .4s ease, opacity .4s ease, transform .4s ease; }
.partners li:hover img { filter: none; opacity: 1; transform: translateY(-2px); }
.partners img[alt="DHL"] { height: 24px; }
.partners img[alt="Simon Loos"] { height: 28px; }
@media (max-width: 600px) { .partners ul { gap: 18px 32px; } .partners img { height: 30px; } .partners img[alt="DHL"] { height: 20px; } }
/* partners: full-colour logos read as more trustworthy than grey ones */
.partners { padding: 34px 0; }
.partners img { height: 46px; max-width: 160px; filter: none; opacity: 1; }
.partners img[alt="DHL"] { height: 28px; }
.partners img[alt="Simon Loos"] { height: 34px; }
/* the longer "FG Together Holding" name needs a smaller wordmark on phones */
@media (max-width: 480px) { .brand-rental .hdr .brand-name { font-size: 15px; } .brand-rental .hdr .brand img { width: 26px; height: 26px; } }
@media (max-width: 374px) { .brand-rental .hdr .brand-name { font-size: 13.5px; } .brand-rental .hdr .brand { gap: 7px; } }
/* pechhulp band v9: the photo is a framed window between the text and the phone buttons, not a full-width backdrop */
.gate-ph .ph-bg { left: 41%; right: 31%; width: auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 82%, transparent 100%); }
.gate-ph .ph-bg::before, .gate-ph .ph-bg::after { display: none; }
.gate-ph .ph-bg img { position: absolute; inset: auto; right: -12%; top: 50%; width: 185%; max-width: none; height: auto; object-fit: initial; transform: translateY(-60%); }
@media (max-width: 1100px) { .gate-ph .ph-bg { left: 50%; right: 0; } }
.gate-ph .ph-bg { left: 38%; right: 35%; }
/* pechhulp band v10: photo pinned to the far right, the phone buttons sit just before it */
.gate-ph .ph-bg { left: auto; right: 0; width: 25%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
.gate-ph .ph-bg img { right: -8%; width: 175%; }
.gate-ph .ph-act { margin-right: calc(25% - 34px); }
@media (max-width: 1100px) { .gate-ph .ph-bg { width: 45%; } .gate-ph .ph-act { margin-right: 0; } }
.gate-ph .ph-act { flex-shrink: 0; }
.gate-ph .ph-phones { flex-wrap: nowrap; }
.gate-ph .ph-txt { min-width: 0; }
@media (max-width: 1100px) { .gate-ph .ph-act { flex-shrink: 1; } .gate-ph .ph-phones { flex-wrap: wrap; } }
.gate-rs.gate-ph { grid-template-columns: 56px 1px minmax(0, 1fr) auto; padding-right: calc(25% - 20px); }
.gate-ph .ph-act { margin-right: 0; }
@media (max-width: 1100px) { .gate-rs.gate-ph { padding-right: 34px; } }
/* narrower screens: not enough room for text + buttons + photo side by side, so the photo goes back behind the buttons */
@media (max-width: 1499px) { .gate-rs.gate-ph { padding-right: clamp(20px, 2.4vw, 34px); } .gate-ph .ph-bg { width: 30%; } }
@media (min-width: 1500px) { .gate-rs.gate-ph { padding-right: calc(22% - 30px); } .gate-ph .ph-bg { width: 22%; } }

/* closing CTA: client's blue band artwork (diagonal lines + Europe map on the right) */
.cta, .theme-pro .cta { position: relative; overflow: hidden; background: #1a4a80 url("../img/cta-band.webp") center / cover no-repeat; }
.theme-pro .cta::before { display: none; }
.cta .wrap { position: relative; z-index: 1; }

/* FG Together subpages: page header matches the home hero (logo green with a blue touch) */
.theme-pro .phead { background: #0a2a1e; }
.theme-pro .phead-bg::after {
  background:
    linear-gradient(90deg, rgba(10, 42, 30, .93) 0%, rgba(10, 42, 30, .72) 42%, rgba(10, 42, 30, .18) 100%),
    linear-gradient(200deg, rgba(43, 108, 176, .42) 0%, rgba(43, 108, 176, 0) 55%);
}
.theme-pro .phead .lead { border-left: 3px solid #2b6cb0; padding-left: 14px; }
.theme-pro .phead .btn--green { background: #20b878; color: #0a2a1e; }
.theme-pro .phead .btn--green:hover { background: #1aa36a; color: #fff; }
@media (max-width: 760px) { .theme-pro .phead-bg::after { background: linear-gradient(0deg, rgba(10, 42, 30, .95) 10%, rgba(10, 42, 30, .6) 60%, rgba(10, 42, 30, .25)), linear-gradient(200deg, rgba(43, 108, 176, .4), transparent 55%); } }
/* situation cards: a direct phone line under the main button */
.sit--v2 .sit-media { color: inherit; }
.sit--v2 .sit-cta { text-decoration: none; }
.sit-tel { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; height: 46px; border-radius: 14px; border: 1.5px solid #dbe4ee; color: #1f3f63; font-size: .95rem; text-decoration: none; transition: border-color .3s ease, background-color .3s ease, color .3s ease; }
.sit-tel svg { width: 16px; height: 16px; color: #22a873; }
.sit-tel span { color: var(--muted); }
.sit-tel b { font-weight: 700; letter-spacing: .01em; }
.sit-tel:hover { border-color: #22a873; background: #f0faf5; }
.sit--tire .sit-tel svg { color: #b3262d; }
.sit--tire .sit-tel:hover { border-color: #b3262d; background: #fdf3f3; }
/* one shared "talk to someone" bar under the situation cards (instead of a phone line per card) */
.sit-call { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-top: 22px; padding: 20px 24px 20px 28px; border-radius: 20px; background: #eff5fb; border: 1px solid #dbe6f2; }
.sit-call-t { display: flex; flex-direction: column; gap: 4px; }
.sit-call-t b { font-size: 1.2rem; color: #1f2d3d; }
.sit-call-t span { color: var(--muted); }
.sit-call-a { display: flex; gap: 12px; flex-wrap: wrap; }
.sit-call-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 14px; background: #1f3f63; color: #fff; font-weight: 700; font-size: 1.02rem; text-decoration: none; transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.sit-call-btn svg { width: 18px; height: 18px; }
.sit-call-btn:hover { background: #2b6cb0; transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(29, 69, 115, .9); }
.sit-call-btn--wa { background: #22a873; }
.sit-call-btn--wa:hover { background: #1c8f62; box-shadow: 0 14px 26px -16px rgba(34, 168, 115, .9); }
/* roadside card keeps its own emergency number, sitting above the button so all buttons stay aligned */
.sit-sos { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fdf1f1; border: 1px solid #f3d3d4; color: #8e1d22; font-size: .92rem; text-decoration: none; transition: background-color .3s ease, border-color .3s ease; }
.sit-sos svg { width: 15px; height: 15px; }
.sit-sos span { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.sit-sos b { font-weight: 700; }
.sit-sos:hover { background: #fbe4e4; border-color: #b3262d; }
/* roadside card: calling is the main action (big red number), the info page is a quiet text link */
.sit-more2 { align-self: flex-start; margin-top: -2px; font-weight: 600; font-size: .95rem; color: #8e1d22; text-decoration: none; }
.sit-more2 i { display: inline-block; font-style: normal; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.sit-more2:hover i { transform: translateX(4px); }
.sit-cta--sos span { display: flex; flex-direction: column; line-height: 1.15; }
.sit-cta--sos small { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.sit-cta--sos i svg { width: 17px; height: 17px; }
.sit--tire:hover .sit-cta--sos i { transform: none; animation: sos-ring 1s ease-in-out infinite; }
@keyframes sos-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .sit--tire:hover .sit-cta--sos i { animation: none; } }

/* ================= Benelux transport page (bx-*) ================= */
.bx-intro { position: relative; padding: clamp(72px, 8vw, 120px) 0; overflow: hidden; }
.bx-intro::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 60% at 0% 30%, #d3e3f6, transparent 70%), radial-gradient(35% 55% at 100% 80%, #cfeedf, transparent 70%); opacity: .55; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.bx-intro-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.bx-intro-txt h2 { margin-top: 14px; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; }
.bx-intro-txt .lead { margin-top: 18px; max-width: 34em; }
.bx-stats { margin-top: 34px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bx-stats .x-stat b { white-space: nowrap; }
.bx-intro-media { position: relative; border-radius: 26px; }
.bx-intro-media img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 26px; box-shadow: 0 50px 90px -60px rgba(15, 39, 71, .7); }
.bx-float { position: absolute; left: -26px; bottom: 34px; display: flex; align-items: center; gap: 14px; padding: 16px 22px 16px 16px; border-radius: 18px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); box-shadow: 0 24px 50px -28px rgba(15, 39, 71, .6); animation: bx-bob 5s ease-in-out infinite; }
.bx-float i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #2b6cb0, #22a873); color: #fff; }
.bx-float i svg { width: 20px; height: 20px; }
.bx-float small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bx-float b { font-size: 1.05rem; color: #1f2d3d; }
@keyframes bx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.bx-fit { padding: 0 0 clamp(72px, 8vw, 110px); }
.bx-fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.bx-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 3vw, 44px); border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 70px -56px rgba(15, 39, 71, .6); overflow: hidden; }
.bx-card h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.15; }
.bx-card--dark { background: linear-gradient(150deg, #1d4573, #2b6cb0); color: #fff; border: 0; }
.bx-card--dark::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(111, 224, 174, .35), transparent 70%); pointer-events: none; }
.bx-card--dark h3 { color: #fff; }
.bx-card--dark .checks li { color: rgba(255, 255, 255, .9); }
.bx-need { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bx-need li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: #f4f8fc; font-weight: 500; transition: background-color .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
.bx-need li:hover { background: #e9f2fb; transform: translateX(4px); }
.bx-need span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: #2b6cb0; font-size: .82rem; font-weight: 700; box-shadow: 0 6px 14px -10px rgba(15, 39, 71, .6); }
.bx-card .btn { align-self: flex-start; margin-top: auto; border-radius: 999px; }

.bx-routes { padding: clamp(72px, 8vw, 120px) 0; background: radial-gradient(50% 70% at 15% 50%, #e6f0fa, transparent 70%), #f6f9fc; }
.bx-routes .x-head h2 { max-width: 20em; }
.bx-routes-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 60px); align-items: start; margin-top: 40px; }
.bx-map { position: sticky; top: calc(var(--hdr, 84px) + 24px); padding: 28px; border-radius: 26px; background: #fff; box-shadow: 0 40px 80px -60px rgba(15, 39, 71, .6); }
.bx-route-list { display: grid; gap: 14px; }
.bx-route { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 24px 26px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: border-color .4s ease, box-shadow .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1), opacity 1s ease var(--ad, 0s); }
.x-js .bx-route.a-in:hover, .bx-route:hover { border-color: transparent; box-shadow: 0 30px 60px -40px rgba(15, 39, 71, .55); transform: translateX(6px); }
.bx-route-n { font-size: .85rem; font-weight: 700; color: #2b6cb0; padding-top: 4px; }
.bx-route-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #e8f6ef; color: #1c8a5e; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bx-route h3 { margin-top: 10px; font-size: 1.25rem; }
.bx-route p { margin-top: 6px; color: var(--muted); }
.bx-route ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.bx-route li { padding: 6px 12px; border-radius: 999px; background: #f2f6fa; font-size: .88rem; color: #1f3f63; }

.bx-proc { padding: clamp(72px, 8vw, 120px) 0; }
.bx-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.bx-steps::before, .bx-steps::after { content: ""; position: absolute; top: 27px; left: calc(100% / 6); right: calc(100% / 6); height: 2px; border-radius: 2px; background: #e3ebf3; }
.bx-steps::after { background: linear-gradient(90deg, #22a873, #2b6cb0); transform-origin: left; transform: scaleX(0); transition: transform 1.8s cubic-bezier(.22, 1, .36, 1) .3s; }
.bx-steps.a-in::after, html:not(.x-js) .bx-steps::after { transform: scaleX(1); }
.x-js .bx-steps[data-a="line"] { opacity: 1; transform: none; }
.bx-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 12px; }
.bx-step-dot { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 22px; border-radius: 50%; background: #fff; border: 2px solid #dbe6f2; color: #2b6cb0; font-weight: 700; box-shadow: 0 0 0 8px #fff; transition: background-color .6s ease, color .6s ease, border-color .6s ease; }
.bx-step.a-in .bx-step-dot, html:not(.x-js) .bx-step-dot { background: #1f3f63; border-color: #1f3f63; color: #fff; transition-delay: calc(var(--ad, 0s) + .5s); }
.bx-step h3 { font-size: 1.3rem; }
.bx-step p { margin-top: 8px; color: var(--muted); }
.bx-step .checks { margin-top: 16px; text-align: left; }

.bx-plan { position: relative; padding: clamp(72px, 8vw, 110px) 0; background: #0f2747 url("../img/cta-band.webp") center / cover no-repeat; color: #fff; overflow: hidden; }
.bx-plan::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 39, 71, .85), rgba(15, 39, 71, .35)); }
.bx-plan-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.bx-plan h2 { margin-top: 12px; color: #fff; font-size: clamp(1.9rem, 3vw, 2.7rem); }
.bx-plan-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.bx-plan-act .btn { border-radius: 999px; }
.bx-plan-tel { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .35); color: #fff; font-weight: 700; text-decoration: none; transition: background-color .3s ease, border-color .3s ease; }
.bx-plan-tel svg { width: 17px; height: 17px; }
.bx-plan-tel:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.bx-plan-tel--wa svg { color: #6fe0ae; }
.bx-facts { display: grid; gap: 12px; margin: 0; }
.bx-facts div { padding: 18px 22px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); }
.bx-facts dt { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9fd9bf; }
.bx-facts dd { margin: 6px 0 0; font-size: 1.15rem; font-weight: 600; }

.bx-faq { padding: clamp(72px, 8vw, 110px) 0; }
.bx-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.bx-faq h2 { margin-top: 12px; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.bx-adv { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 20px 22px; border-radius: 20px; background: #eff5fb; border: 1px solid #dbe6f2; color: inherit; text-decoration: none; transition: border-color .3s ease, box-shadow .3s ease; }
.bx-adv b { display: block; font-size: 1.08rem; }
.bx-adv small { display: block; margin-top: 4px; color: var(--muted); }
.bx-adv i { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: #1f3f63; color: #fff; transition: transform .4s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; }
.bx-adv i svg { width: 18px; height: 18px; }
.bx-adv:hover { border-color: #2b6cb0; box-shadow: 0 20px 40px -30px rgba(15, 39, 71, .6); }
.bx-adv:hover i { transform: translateX(4px); background: #22a873; }

@media (max-width: 960px) {
  .bx-intro-grid, .bx-fit-grid, .bx-routes-grid, .bx-plan-grid, .bx-faq-grid { grid-template-columns: 1fr; }
  .bx-map { position: static; }
  .bx-float { left: 16px; bottom: 16px; }
}
@media (max-width: 760px) {
  .bx-steps { grid-template-columns: 1fr; gap: 34px; }
  .bx-steps::before, .bx-steps::after { display: none; }
  .bx-stats { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .bx-float { animation: none; } }
/* bx fixes: simple stat tiles, fuller dark card, routes as a 2x2 grid so the section fits one screen */
.bx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.bx-stat { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -44px rgba(15, 39, 71, .6); }
.bx-stat b { font-size: clamp(2.2rem, 3vw, 2.8rem); line-height: 1; font-weight: 700; color: #1f3f63; white-space: nowrap; }
.bx-stat b small { font-size: .45em; font-weight: 700; letter-spacing: .04em; color: #22a873; }
.bx-stat b i { font-style: normal; }
.bx-stat span { font-size: .92rem; color: var(--muted); line-height: 1.35; }
.bx-card--dark .checks { display: grid; gap: 6px; }
.bx-card--dark .checks li { font-size: 1.05rem; }
.bx-card-mark { position: absolute; right: clamp(24px, 3vw, 40px); bottom: clamp(20px, 2.6vw, 34px); font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 800; letter-spacing: -.01em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22); pointer-events: none; }
.bx-routes-grid { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
.bx-route-list { grid-template-columns: 1fr 1fr; }
.bx-route { grid-template-columns: 1fr; gap: 6px; padding: 22px 24px; }
.bx-route-n { padding: 0; }
.bx-map { padding: 18px; }
.bx-map svg { max-height: 430px; }
@media (max-width: 760px) { .bx-route-list { grid-template-columns: 1fr; } .bx-stats { grid-template-columns: 1fr 1fr 1fr; } .bx-stat { padding: 14px; } }
.bx-routes { padding: clamp(56px, 6vw, 84px) 0; }
.bx-routes .x-head h2 { max-width: none; font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.bx-routes-grid { margin-top: 28px; align-items: stretch; }
.bx-map { display: grid; place-items: center; }
.bx-route { padding: 18px 22px; }
.bx-route h3 { margin-top: 8px; font-size: 1.15rem; }
.bx-route ul { margin-top: 10px; gap: 6px; }
.bx-route li { padding: 5px 10px; font-size: .84rem; }
.bx-routes { padding: 56px 0; }
.bx-route { padding: 16px 20px; gap: 4px; }
.bx-route h3 { margin-top: 6px; }
.bx-route p { margin-top: 2px; }
.bx-proc { background: linear-gradient(180deg, #fff, #f6f9fc); }

/* ---- Benelux routes v2: tabs + live map + detail panel (one route at a time, auto-rotating) ---- */
.bx-routes { padding: clamp(56px, 6vw, 84px) 0; }
.rt { display: grid; grid-template-columns: minmax(250px, .9fr) minmax(0, 1.1fr) minmax(300px, 1.1fr); gap: 22px; align-items: stretch; margin-top: 30px; }
.x-js .rt[data-a] { transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1); }
.rt-tabs { display: flex; flex-direction: column; gap: 10px; }
.rt-tabs button { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.rt-tabs button:hover { transform: translateX(4px); }
.rt-n { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: #eff5fb; color: #2b6cb0; font-size: .85rem; font-weight: 700; transition: background-color .45s ease, color .45s ease; }
.rt-t small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .45s ease; }
.rt-t b { display: block; margin-top: 3px; font-size: 1.02rem; color: #1f2d3d; transition: color .45s ease; }
.rt-tabs button[aria-selected="true"] { background: #1f3f63; border-color: #1f3f63; box-shadow: 0 24px 44px -28px rgba(15, 39, 71, .9); }
.rt-tabs button[aria-selected="true"] .rt-n { background: #22a873; color: #fff; }
.rt-tabs button[aria-selected="true"] .rt-t small { color: #9fd9bf; }
.rt-tabs button[aria-selected="true"] .rt-t b { color: #fff; }
.rt-tabs .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #6fe0ae; transform: scaleX(0); transform-origin: left; }
.rt.ticking button[aria-selected="true"] .bar { animation: rt-bar var(--rot, 6s) linear forwards; }
@keyframes rt-bar { to { transform: scaleX(1); } }

.rt-map { position: relative; display: grid; place-items: center; padding: 16px; border-radius: 24px; background: radial-gradient(70% 60% at 50% 45%, #eef5fc, #fff 75%); border: 1px solid var(--line); overflow: hidden; }
.rt-map svg { width: 100%; height: auto; max-height: 470px; }
.rt-map .cc { fill: rgba(31, 63, 99, .07); font: 700 72px var(--font); }
.rm-base { stroke: #dbe4ee; stroke-width: 1.5; }
.rm-city { fill: #fff; stroke: #2b6cb0; stroke-width: 2.5; }
.rm-route { opacity: 0; transition: opacity .5s ease; }
.rm-route.is-on { opacity: 1; }
.rm-line { fill: none; stroke: #2b6cb0; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .18; }
.rm-route.is-on .rm-line { animation: rm-draw 1.2s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes rm-draw { to { stroke-dashoffset: 0; } }
.rm-flow { fill: none; stroke: #22a873; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 10; opacity: 0; }
.rm-route.is-on .rm-flow { opacity: 1; transition: opacity .6s ease 1s; animation: rm-flow 1.1s linear infinite; }
@keyframes rm-flow { to { stroke-dashoffset: -32; } }
.rm-end { fill: rgba(34, 168, 115, .18); stroke: none; transform-box: fill-box; transform-origin: center; }
.rm-route.is-on .rm-end { animation: rm-ping 1.8s ease-out 1.1s infinite; }
@keyframes rm-ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.rm-truck circle { fill: #1f3f63; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 4px 6px rgba(15, 39, 71, .45)); }
.rm-truck .rm-truck-c { fill: #6fe0ae; stroke: none; filter: none; }
.rm-truck { opacity: 0; }
.rm-route.is-on .rm-truck { opacity: 1; transition: opacity .4s ease 1.1s; }

.rt-panels { position: relative; border-radius: 24px; background: linear-gradient(160deg, #1d4573, #2b6cb0); color: #fff; overflow: hidden; min-height: 470px; }
.rt-panels::after { content: ""; position: absolute; right: -90px; bottom: -90px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(111, 224, 174, .3), transparent 70%); pointer-events: none; }
.rt-panel { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.6vw, 36px); opacity: 0; visibility: hidden; transform: translateX(28px); transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .6s; }
.rt-panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease .1s, transform .7s cubic-bezier(.22, 1, .36, 1) .1s, visibility 0s; }
.rt-tag { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: rgba(111, 224, 174, .18); color: #9fecc9; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rt-panel h3 { color: #fff; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.15; }
.rt-panel p { color: rgba(255, 255, 255, .8); }
.rt-panel ul { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.rt-panel li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); font-weight: 500; opacity: 0; transform: translateY(10px); }
.rt-panel.is-on li { animation: rt-li .6s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(.35s + var(--li) * .1s); }
@keyframes rt-li { to { opacity: 1; transform: none; } }
.rt-panel li i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #22a873; color: #fff; font-size: .7rem; font-style: normal; }
.rt-go { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; margin-top: auto; padding: 0 8px 0 20px; height: 50px; border-radius: 999px; background: #fff; color: #1f3f63; font-weight: 700; text-decoration: none; transition: box-shadow .3s ease; }
.rt-go i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #22a873; color: #fff; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.rt-go svg { width: 16px; height: 16px; }
.rt-go:hover { box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .6); }
.rt-go:hover i { transform: translateX(4px); }
html:not(.x-js) .rm-route[data-need-route="0"] { opacity: 1; }
html:not(.x-js) .rm-route[data-need-route="0"] .rm-line { stroke-dashoffset: 0; }

@media (max-width: 1100px) { .rt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .rt-panels { grid-column: 1 / -1; } }
@media (max-width: 700px) { .rt { grid-template-columns: 1fr; } .rt-map { order: -1; } }
@media (prefers-reduced-motion: reduce) { .rm-route.is-on .rm-line { animation: none; stroke-dashoffset: 0; } .rm-route.is-on .rm-flow, .rm-route.is-on .rm-end { animation: none; } .rt-panel.is-on li { animation: none; opacity: 1; transform: none; } }

/* ---- Benelux FAQ: numbered, animated accordion ---- */
.bx-faq { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff, #f6f9fc); }
.bx-faq::before { content: "?"; position: absolute; right: -2vw; top: -6vw; font-size: clamp(16rem, 28vw, 30rem); font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(43, 108, 176, .07); pointer-events: none; animation: fq-float 9s ease-in-out infinite; }
@keyframes fq-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(18px) rotate(4deg); } }
.bx-faq-grid { position: relative; }
.bx-faq-list { display: grid; gap: 12px; border: 0; }
.bx-faq-list details { border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: border-color .4s ease, box-shadow .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1), opacity 1s ease var(--ad, 0s); }
.bx-faq-list details:hover { border-color: #c9d8e8; transform: translateX(4px); }
.bx-faq-list details[open] { border-color: transparent; box-shadow: 0 30px 60px -40px rgba(15, 39, 71, .55); }
.bx-faq-list summary { display: flex; align-items: center; gap: 16px; padding: 20px 22px; list-style: none; cursor: pointer; font-weight: 600; font-size: 1.08rem; }
.bx-faq-list summary::-webkit-details-marker { display: none; }
.bx-faq-list summary::after { display: none; }
.fq-n { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: #eff5fb; color: #2b6cb0; font-size: .82rem; font-weight: 700; transition: background-color .4s ease, color .4s ease; }
details[open] .fq-n { background: #1f3f63; color: #fff; }
.fq-q { flex: 1; }
.fq-ico { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #f2f6fa; transition: background-color .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.fq-ico::before, .fq-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #1f3f63; transition: transform .5s cubic-bezier(.22, 1, .36, 1), background-color .4s ease; }
.fq-ico::after { transform: rotate(90deg); }
details[open] .fq-ico { background: #22a873; transform: rotate(180deg); }
details[open] .fq-ico::before, details[open] .fq-ico::after { background: #fff; }
details[open] .fq-ico::after { transform: rotate(0deg); }
.fq-a { overflow: hidden; }
.fq-a p { margin: 0; padding: 0 22px 22px 76px; color: var(--muted); }
.bx-adv { position: relative; overflow: hidden; }
.bx-adv-q { position: absolute; right: 70px; top: 50%; font-size: 5rem; font-weight: 800; line-height: 1; color: rgba(43, 108, 176, .08); transform: translateY(-50%) rotate(-10deg); transition: transform .6s cubic-bezier(.22, 1, .36, 1), color .4s ease; pointer-events: none; }
.bx-adv:hover .bx-adv-q { transform: translateY(-50%) rotate(6deg) scale(1.15); color: rgba(34, 168, 115, .14); }
.bx-adv > span:not(.bx-adv-q) { position: relative; }
@media (prefers-reduced-motion: reduce) { .bx-faq::before { animation: none; } }
.rm-line { opacity: .3; stroke-width: 7; }
.rt-tabs button { flex: 1; }
.bx-faq-list details .fq-a p { margin: 0; padding: 0 22px 22px 76px; }

/* closing band + planning band: crisp vector artwork instead of the low-res photo */
.cta, .theme-pro .cta { background: #17406f url("../img/cta-band.svg") center / cover no-repeat; }
.bx-plan { background: #0f2747 url("../img/cta-band.svg") center / cover no-repeat; }

/* "See also": real cards instead of a line of underlined links */
.rel2 { padding: clamp(48px, 5vw, 72px) 0; background: linear-gradient(180deg, #f6f9fc, #fff); }
.rel2-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rel2-head h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-top: 8px; width: 100%; }
.rel2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
.rel2-card { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 22px 24px; min-height: 130px; border-radius: 20px; background: #fff; border: 1px solid var(--line); color: #1f2d3d; text-decoration: none; overflow: hidden; opacity: 0; transform: translateY(18px); animation: rel2-in .8s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(.1s + var(--i) * .1s); animation-timeline: view(); animation-range: entry 0% entry 60%; transition: border-color .4s ease, box-shadow .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes rel2-in { to { opacity: 1; transform: none; } }
@supports not (animation-timeline: view()) { .rel2-card { animation-timeline: auto; } }
.rel2-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #1f3f63, #2b6cb0); opacity: 0; transition: opacity .5s ease; }
.rel2-card > * { position: relative; }
.rel2-n { font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: #2b6cb0; transition: color .4s ease; }
.rel2-card b { font-size: 1.15rem; line-height: 1.25; padding-right: 48px; transition: color .4s ease; }
.rel2-card i { position: absolute; right: 20px; bottom: 20px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #eff5fb; color: #1f3f63; transition: background-color .4s ease, color .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.rel2-card i svg { width: 17px; height: 17px; }
.rel2-card:hover { border-color: transparent; box-shadow: 0 30px 60px -36px rgba(15, 39, 71, .7); transform: translateY(-4px); }
.rel2-card:hover::before { opacity: 1; }
.rel2-card:hover b { color: #fff; }
.rel2-card:hover .rel2-n { color: #9fd9bf; }
.rel2-card:hover i { background: #22a873; color: #fff; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .rel2-card { animation: none; opacity: 1; transform: none; } }

/* "See also" v3: one calm line, links with a sliding underline and arrow */
.rel3 { padding: 34px 0; }
.rel3-in { display: flex; align-items: center; gap: 18px 40px; flex-wrap: wrap; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rel3-k { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rel3 ul { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin: 0; padding: 0; list-style: none; }
.rel3 li + li::before { content: ""; display: inline-block; width: 1px; height: 18px; margin: 0 26px; vertical-align: middle; background: var(--line); }
.rel3 a { display: inline-flex; align-items: center; gap: 8px; color: #1f3f63; font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.rel3 a span { background: linear-gradient(#22a873, #22a873) left bottom / 0 2px no-repeat; padding-bottom: 3px; transition: background-size .5s cubic-bezier(.22, 1, .36, 1), color .3s ease; }
.rel3 a svg { width: 16px; height: 16px; color: #22a873; opacity: 0; transform: translateX(-6px); transition: opacity .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.rel3 a:hover span { background-size: 100% 2px; color: #2b6cb0; }
.rel3 a:hover svg { opacity: 1; transform: none; }
@media (max-width: 600px) { .rel3 li + li::before { margin: 0 14px; } }

/* ================= Quote page: 3-step wizard + live ticket ================= */
.qx { padding: clamp(48px, 5vw, 80px) 0 clamp(64px, 7vw, 100px); background: radial-gradient(40% 50% at 0% 0%, #e3eefa, transparent 70%), radial-gradient(35% 45% at 100% 100%, #e3f5ec, transparent 70%), #f7fafd; }
.qx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: start; }
.qx-form { position: relative; padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 90px -60px rgba(15, 39, 71, .55); scroll-margin-top: calc(var(--hdr, 84px) + 16px); }
.qx-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.qx-form legend { padding: 0; margin-bottom: 18px; font-size: clamp(1.4rem, 2.1vw, 1.8rem); font-weight: 700; color: #1f2d3d; }
.qx-form .field { display: grid; gap: 8px; margin-top: 18px; }
.qx-form .flabel { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.qx-form input:not([type=radio]), .qx-form textarea { width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid #dbe4ee; background: #fbfdff; font: inherit; color: inherit; transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease; }
.qx-form textarea { height: auto; padding: 14px 16px; resize: vertical; }
.qx-form input:not([type=radio]):focus, .qx-form textarea:focus { outline: none; border-color: #2b6cb0; background: #fff; box-shadow: 0 0 0 4px rgba(43, 108, 176, .14); }
.qx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* progress */
.qx-prog { position: relative; display: flex; justify-content: space-between; margin: 0 0 30px; padding: 0; list-style: none; }
.qx-prog li { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding-right: 14px; background: #fff; cursor: default; }
.qx-prog li:last-of-type { padding: 0 0 0 14px; }
.qx-prog li:not(:first-child):not(:last-of-type) { padding: 0 14px; }
.qx-prog span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #dbe4ee; background: #fff; color: #8696a8; font-weight: 700; font-size: .9rem; transition: background-color .5s ease, border-color .5s ease, color .5s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.qx-prog b { font-size: .92rem; color: #8696a8; transition: color .5s ease; }
.qx-prog li.now span { background: #1f3f63; border-color: #1f3f63; color: #fff; transform: scale(1.08); }
.qx-prog li.now b { color: #1f2d3d; }
.qx-prog li.done { cursor: pointer; }
.qx-prog li.done span { background: #22a873; border-color: #22a873; color: transparent; }
.qx-prog li.done span::after { content: "✓"; position: absolute; color: #fff; font-size: .85rem; }
.qx-prog li.done b { color: #1c8a5e; }
.qx-prog-line { position: absolute; left: 18px; right: 18px; top: 17px; height: 2px; background: #e6edf5; font-style: normal; }
.qx-prog-line i { display: block; height: 100%; width: calc(var(--qp, 0) * 100%); background: linear-gradient(90deg, #22a873, #2b6cb0); transition: width .8s cubic-bezier(.22, 1, .36, 1); }

/* steps */
.qx-form.is-wiz .qstep { display: none; }
.qx-form.is-wiz .qstep.on { display: block; animation: qx-in-r .6s cubic-bezier(.22, 1, .36, 1); }
.qx-form.is-wiz .qstep.on.from-l { animation-name: qx-in-l; }
@keyframes qx-in-r { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes qx-in-l { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.qx-form:not(.is-wiz) .qstep + .qstep { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }

/* card radios */
.qc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.qc-card { position: relative; cursor: pointer; }
.qc-card input, .qc-pill input { position: absolute; opacity: 0; pointer-events: none; }
.qc-in { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 16px 16px; border-radius: 18px; border: 1.5px solid #dbe4ee; background: #fff; transition: border-color .35s ease, background-color .35s ease, box-shadow .35s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.qc-in i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 12px; background: #eff5fb; color: #2b6cb0; transition: background-color .35s ease, color .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.qc-in i svg { width: 22px; height: 22px; }
.qc-in b { font-size: 1rem; color: #1f2d3d; }
.qc-in small { font-size: .82rem; color: var(--muted); }
.qc-tick { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #dbe4ee; background: #fff; transition: background-color .35s ease, border-color .35s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.qc-tick::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .7rem; font-style: normal; transform: scale(0); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.qc-card:hover .qc-in { border-color: #9dbbdb; transform: translateY(-3px); box-shadow: 0 18px 32px -24px rgba(15, 39, 71, .6); }
.qc-card:hover .qc-in i { transform: rotate(-6deg) scale(1.06); }
.qc-card input:checked + .qc-in { border-color: #1f3f63; background: #f4f8fc; box-shadow: 0 20px 36px -26px rgba(15, 39, 71, .8); }
.qc-card input:checked + .qc-in i { background: #1f3f63; color: #fff; }
.qc-card input:checked + .qc-in .qc-tick { background: #22a873; border-color: #22a873; transform: scale(1.05); }
.qc-card input:checked + .qc-in .qc-tick::after { transform: scale(1); }
.qc-card input:focus-visible + .qc-in, .qc-pill input:focus-visible + span { outline: 3px solid rgba(43, 108, 176, .4); outline-offset: 2px; }

/* pill radios */
.qc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.qc-pill { position: relative; cursor: pointer; }
.qc-pill span { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #dbe4ee; background: #fff; font-weight: 500; transition: border-color .3s ease, background-color .3s ease, color .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.qc-pill:hover span { border-color: #9dbbdb; transform: translateY(-2px); }
.qc-pill input:checked + span { background: #1f3f63; border-color: #1f3f63; color: #fff; }

/* nav */
.qx-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.qx-back { border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; padding: 10px 4px; transition: color .2s ease, opacity .3s ease; }
.qx-back:hover { color: #1f2d3d; }
.qx-form.q-first .qx-back { opacity: 0; pointer-events: none; }
.qx-nav .btn { border-radius: 999px; height: 52px; padding: 0 26px; margin-left: auto; }
.qx-form.is-wiz:not(.q-last) .qx-send, .qx-form.is-wiz.q-last .qx-next, .qx-form:not(.is-wiz) .qx-next, .qx-form:not(.is-wiz) .qx-back { display: none; }
.qx-send svg { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.qx-send:hover svg { transform: translate(3px, -3px); }
.qx-privacy { margin-top: 18px; color: var(--muted); }
.qx-privacy a { text-decoration: underline; }

/* ticket */
.qx-side { position: sticky; top: calc(var(--hdr, 84px) + 20px); display: grid; gap: 14px; }
.qx-ticket { position: relative; border-radius: 24px; background: linear-gradient(160deg, #1d4573, #2b6cb0); color: #fff; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(15, 39, 71, .9); }
.qx-ticket::after { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(111, 224, 174, .35), transparent 70%); pointer-events: none; }
.qx-ticket-head { position: relative; padding: 22px 24px 18px; border-bottom: 2px dashed rgba(255, 255, 255, .2); }
.qx-ticket-head span { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9fd9bf; }
.qx-ticket-head b { display: block; margin-top: 6px; font-size: 1.15rem; }
.qx-ticket-head::before, .qx-ticket-head::after { content: ""; position: absolute; bottom: -11px; width: 20px; height: 20px; border-radius: 50%; background: #f7fafd; }
.qx-ticket-head::before { left: -10px; } .qx-ticket-head::after { right: -10px; }
.qx-ticket dl { position: relative; margin: 0; padding: 12px 24px 6px; }
.qx-ticket dl div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: .92rem; }
.qx-ticket dl div:last-child { border-bottom: 0; }
.qx-ticket dt { color: rgba(255, 255, 255, .65); }
.qx-ticket dd { margin: 0; text-align: right; font-weight: 600; }
.qx-ticket dd.empty { color: rgba(255, 255, 255, .4); font-weight: 500; }
.qx-ticket dd.flash { animation: qx-flash .7s ease; }
@keyframes qx-flash { 0% { color: #6fe0ae; transform: translateY(-4px); opacity: .3; } 100% { transform: none; opacity: 1; } }
.qx-ticket-foot { position: relative; padding: 14px 24px 18px; font-size: .84rem; color: rgba(255, 255, 255, .7); }
.qx-ticket-foot span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #6fe0ae; box-shadow: 0 0 0 0 rgba(111, 224, 174, .6); animation: qx-live 2s ease-out infinite; vertical-align: 1px; }
@keyframes qx-live { 0% { box-shadow: 0 0 0 0 rgba(111, 224, 174, .6); } 100% { box-shadow: 0 0 0 10px rgba(111, 224, 174, 0); } }
.qx-help { display: grid; gap: 8px; padding: 20px 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.qx-help b { margin-bottom: 4px; }
.qx-help-btn { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 12px; background: #1f3f63; color: #fff; font-weight: 700; text-decoration: none; transition: background-color .3s ease, transform .3s ease; }
.qx-help-btn svg { width: 17px; height: 17px; }
.qx-help-btn:hover { background: #2b6cb0; transform: translateX(3px); }
.qx-help-btn--wa { background: #22a873; }
.qx-help-btn--wa:hover { background: #1c8f62; }
.qx-sos { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 2px 0; border-top: 1px solid var(--line); color: #8e1d22; font-weight: 700; text-decoration: none; }
.qx-sos span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 1000px) { .qx-grid { grid-template-columns: 1fr; } .qx-side { position: static; } }
@media (max-width: 640px) { .qx-row { grid-template-columns: 1fr; } .qx-prog b { display: none; } .qc-cards { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .qx-form.is-wiz .qstep.on { animation: none; } .qx-ticket dd.flash, .qx-ticket-foot span::before { animation: none; } }
.qc-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.qstep[data-qstep="1"] .qc-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qc-in { padding: 14px 14px 14px; }
.qc-in i { width: 38px; height: 38px; margin-bottom: 6px; }
.qc-in i svg { width: 20px; height: 20px; }
.qc-in b { font-size: .95rem; }
.qstep[data-qstep="0"] .qx-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.qx-prog { margin-bottom: 24px; }
.qx-form legend { margin-bottom: 14px; }
@media (max-width: 1200px) { .qc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .qc-cards, .qstep[data-qstep="1"] .qc-cards { grid-template-columns: 1fr 1fr; } .qstep[data-qstep="0"] .qx-row { grid-template-columns: 1fr; } }

/* quote side: contact card v2, quiet rows instead of heavy buttons */
.qx-help { gap: 6px; padding: 8px; border-radius: 22px; box-shadow: 0 30px 60px -50px rgba(15, 39, 71, .6); }
.qh-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; }
.qh-head b { display: block; font-size: 1rem; margin: 0; }
.qh-head small { display: block; margin-top: 2px; font-size: .82rem; color: var(--muted); }
.qh-live { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #22a873; animation: qx-live 2s ease-out infinite; }
.qh-row, .qh-sos { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; color: #1f2d3d; text-decoration: none; transition: background-color .3s ease; }
.qh-row:hover { background: #f2f6fa; }
.qh-ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: #eaf1f9; color: #1f3f63; transition: background-color .3s ease, color .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.qh-ico svg { width: 18px; height: 18px; }
.qh-row span, .qh-sos span { flex: 1; min-width: 0; }
.qh-row small, .qh-sos small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.qh-row b, .qh-sos b { display: block; margin-top: 2px; font-size: 1.02rem; }
.qh-go { width: 18px; height: 18px; color: #9aabbd; transition: transform .4s cubic-bezier(.22, 1, .36, 1), color .3s ease; }
.qh-row:hover .qh-ico { background: #1f3f63; color: #fff; transform: rotate(-8deg); }
.qh-row:hover .qh-go { transform: translateX(4px); color: #1f3f63; }
.qh-row--wa .qh-ico { background: #e6f6ee; color: #1c8a5e; }
.qh-row--wa:hover .qh-ico { background: #22a873; color: #fff; }
.qh-row--wa:hover .qh-go { color: #1c8a5e; }
.qh-sos { margin-top: 4px; background: #fdf3f3; }
.qh-sos .qh-ico { background: #fff; color: #b3262d; }
.qh-sos b { color: #8e1d22; }
.qh-sos em { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .08em; padding: 4px 8px; border-radius: 999px; background: #b3262d; color: #fff; }
.qh-sos:hover { background: #fbe7e7; }
.qh-sos:hover .qh-ico { animation: sos-ring 1s ease-in-out infinite; }

/* ================= Refrigerated transport: cold-chain page (kx-*) ================= */
.kx-hero { --ice: #8fdcff; --ice-2: #c9f1ff; --deep: #061a2e; position: relative; min-height: min(760px, calc(100svh - var(--hdr, 84px))); display: flex; align-items: center; padding: 56px 0 80px; background: var(--deep); color: #fff; overflow: hidden; isolation: isolate; }
.kx-hero-bg { position: absolute; inset: 0; z-index: -1; }
.kx-hero-bg img { position: absolute; right: 0; top: 0; width: 64%; height: 100%; object-fit: cover; opacity: .75; filter: saturate(.55) hue-rotate(-8deg) brightness(.9); -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); animation: kx-zoom 22s ease-in-out infinite alternate; }
@keyframes kx-zoom { from { transform: scale(1.02); } to { transform: scale(1.1) translateX(-1.5%); } }
.kx-hero-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(60% 80% at 75% 40%, rgba(143, 220, 255, .22), transparent 60%), linear-gradient(90deg, var(--deep) 30%, rgba(6, 26, 46, .55) 60%, rgba(6, 26, 46, .25)); }
.kx-hero-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 1; background: linear-gradient(0deg, var(--deep), transparent); }
.kx-frost { position: absolute; inset: -20%; z-index: 2; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1.6px 1.6px at 20px 30px, #fff, transparent), radial-gradient(1.2px 1.2px at 120px 80px, #dff6ff, transparent), radial-gradient(2px 2px at 220px 160px, #fff, transparent), radial-gradient(1.4px 1.4px at 60px 210px, #cfefff, transparent), radial-gradient(1px 1px at 260px 40px, #fff, transparent), radial-gradient(1.8px 1.8px at 170px 250px, #e8f9ff, transparent);
  background-size: 300px 300px; animation: kx-drift 26s linear infinite; }
.kx-frost--2 { opacity: .3; background-size: 180px 180px; animation-duration: 40s; filter: blur(.6px); }
@keyframes kx-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-120px, 300px, 0); } }
.kx-hero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.kx-hero .crumbs { margin-bottom: 26px; color: rgba(255, 255, 255, .55); }
.kx-hero .crumbs a { color: rgba(255, 255, 255, .75); }
.kx-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(143, 220, 255, .1); border: 1px solid rgba(143, 220, 255, .28); color: var(--ice-2); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; animation: rise .8s var(--ease) both; }
.kx-kicker i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(143, 220, 255, .18); color: var(--ice); }
.kx-kicker svg { width: 16px; height: 16px; animation: kx-spin 14s linear infinite; }
@keyframes kx-spin { to { transform: rotate(360deg); } }
.kx-hero h1 { margin-top: 22px; color: #fff; font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: 1; letter-spacing: -.02em; animation: rise .9s var(--ease) .1s both; }
.kx-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--ice), #fff 60%, var(--ice)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: kx-sheen 6s ease-in-out infinite; }
@keyframes kx-sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.kx-lead { max-width: 33em; margin-top: 22px; font-size: 1.12rem; color: rgba(255, 255, 255, .78); animation: rise .9s var(--ease) .2s both; }
.kx-hero-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; animation: rise .9s var(--ease) .3s both; }
.kx-hero-act .btn { border-radius: 999px; }
.kx-ghost { display: inline-flex; align-items: center; height: 50px; padding: 0 22px; border-radius: 999px; border: 1.5px solid rgba(201, 241, 255, .4); color: #fff; font-weight: 700; text-decoration: none; transition: background-color .3s ease, border-color .3s ease; }
.kx-ghost:hover { background: rgba(143, 220, 255, .12); border-color: var(--ice); }
.kx-note { margin-top: 18px; font-size: .86rem; color: rgba(255, 255, 255, .5); animation: rise .9s var(--ease) .4s both; }

.kx-mon { position: relative; padding: 26px 28px 22px; border-radius: 26px; background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); border: 1px solid rgba(201, 241, 255, .25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .2); animation: kx-mon-in 1.1s var(--ease) .35s both, kx-float 7s ease-in-out 1.5s infinite; }
@keyframes kx-mon-in { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes kx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.kx-mon::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(130deg, rgba(143, 220, 255, .8), transparent 35%, transparent 65%, rgba(143, 220, 255, .5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.kx-mon-head { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.kx-mon-head em { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: rgba(34, 168, 115, .2); color: #8ff0c4; font-style: normal; letter-spacing: .06em; }
.kx-mon-head em i { width: 8px; height: 8px; border-radius: 50%; background: #3ee39a; animation: qx-live 1.8s ease-out infinite; }
.kx-mon-temp { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; }
.kx-mon-temp b { font-size: clamp(4rem, 7vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 40px rgba(143, 220, 255, .55); }
.kx-mon-temp b.tick { animation: kx-tick .6s ease; }
@keyframes kx-tick { 0% { opacity: .55; } 100% { opacity: 1; } }
.kx-mon-temp span { margin-top: 12px; font-size: 1.6rem; color: var(--ice); }
.kx-mon-range { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: .86rem; color: rgba(255, 255, 255, .62); }
.kx-spark { display: block; width: 100%; height: 64px; margin-top: 18px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.kx-spark polyline { fill: none; stroke: var(--ice); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(143, 220, 255, .7)); }
.kx-spark-run { animation: kx-run 9s linear infinite; }
@keyframes kx-run { to { transform: translateX(-600px); } }
.kx-mon-cap { display: block; margin-top: 8px; text-align: right; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .35); }
.kx-scroll { position: absolute; left: 50%; bottom: 22px; z-index: 3; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, .35); }
.kx-scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--ice); animation: kx-wheel 1.8s ease-in-out infinite; }
@keyframes kx-wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* product groups + thermometer */
.kx-range { position: relative; padding: clamp(64px, 7vw, 100px) 0; background: radial-gradient(45% 60% at 50% 40%, #e2f4fd, transparent 70%), #f5fafd; overflow: hidden; }
.kx-th { display: grid; grid-template-columns: minmax(240px, .9fr) 200px minmax(0, 1.2fr); gap: clamp(20px, 3vw, 44px); align-items: stretch; margin-top: 34px; }
.kx-tabs { display: flex; flex-direction: column; gap: 10px; }
.kx-tabs button { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid #d6e7f2; border-radius: 18px; background: rgba(255, 255, 255, .8); font: inherit; color: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.kx-tabs button:hover { transform: translateX(4px); border-color: #a9d6ee; }
.kx-tab-t { font-weight: 700; font-size: 1.05rem; color: #0f2747; transition: color .45s ease; }
.kx-tab-r { font-size: .85rem; color: #4f7ea3; font-variant-numeric: tabular-nums; transition: color .45s ease; }
.kx-tabs button[aria-selected="true"] { background: #0b2d4f; border-color: #0b2d4f; box-shadow: 0 24px 44px -26px rgba(6, 26, 46, .9); }
.kx-tabs button[aria-selected="true"] .kx-tab-t { color: #fff; }
.kx-tabs button[aria-selected="true"] .kx-tab-r { color: #8fdcff; }
.kx-tabs .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #8fdcff; transform: scaleX(0); transform-origin: left; }
.kx-th.ticking button[aria-selected="true"] .bar { animation: rt-bar var(--rot, 6s) linear forwards; }
.kx-disc { margin-top: auto; padding-top: 8px; font-size: .8rem; color: #6b8aa3; }

.kx-meter { display: grid; place-items: center; }
.kx-tube { position: relative; width: 100%; height: 440px; }
.kx-scale { position: absolute; left: 0; top: 0; bottom: 34px; width: 92px; }
.kx-tick { position: absolute; right: 0; display: flex; align-items: center; gap: 8px; transform: translateY(50%); font-size: .74rem; font-weight: 600; color: #7f9db5; font-variant-numeric: tabular-nums; flex-direction: row-reverse; }
.kx-tick i { width: 10px; height: 1.5px; background: #b8d3e5; }
.kx-tick.is-zero { color: #0b2d4f; }
.kx-tick.is-zero i { width: 16px; background: #0b2d4f; }
.kx-glass { position: absolute; left: 104px; top: 0; bottom: 34px; width: 34px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, #e9f5fc, #fff 45%, #e2f1fa); border: 1.5px solid #cfe4f1; border-bottom: 0; box-shadow: inset 0 2px 10px rgba(11, 45, 79, .06); }
.kx-bulb { position: absolute; left: 95px; bottom: 0; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c9f1ff, #3fa7e0 55%, #1a6fb0); border: 1.5px solid #cfe4f1; box-shadow: 0 10px 30px -10px rgba(26, 111, 176, .8); }
.kx-band { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.kx-band.is-on { opacity: 1; }
.kx-merc { position: absolute; left: 7px; right: 7px; bottom: -6px; height: calc(var(--hi) + 6px); border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #8fdcff, #3fa7e0 60%, #1a6fb0); transform-origin: bottom; transform: scaleY(0); box-shadow: 0 0 18px rgba(63, 167, 224, .45); }
.kx-band.is-on .kx-merc { animation: kx-fill 1.3s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes kx-fill { to { transform: scaleY(1); } }
.kx-brk { position: absolute; left: -12px; right: -12px; bottom: var(--lo); height: calc(var(--hi) - var(--lo)); min-height: 10px; border-radius: 8px; border: 2px solid #22a873; background: rgba(34, 168, 115, .12); opacity: 0; transform: scaleX(.6); }
.kx-band.is-on > .kx-brk { animation: kx-bracket .7s cubic-bezier(.34, 1.56, .64, 1) .9s forwards; }
@keyframes kx-bracket { to { opacity: 1; transform: none; } }
.kx-band > .kx-brk b { position: absolute; left: calc(100% + 10px); font-size: .78rem; font-weight: 700; color: #1c8a5e; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kx-band > .kx-brk b:first-child { bottom: -8px; } .kx-band > .kx-brk b:last-child { top: -8px; }

.kx-panels { position: relative; min-height: 440px; border-radius: 26px; background: linear-gradient(160deg, #0b2d4f, #12416e); color: #fff; overflow: hidden; }
.kx-panels::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.4px 1.4px at 30px 40px, rgba(255, 255, 255, .5), transparent), radial-gradient(1px 1px at 140px 120px, rgba(255, 255, 255, .4), transparent), radial-gradient(1.6px 1.6px at 90px 200px, rgba(255, 255, 255, .45), transparent); background-size: 220px 220px; opacity: .5; animation: kx-drift 40s linear infinite; }
.kx-panel { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: clamp(26px, 3vw, 40px); opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .6s; }
.kx-panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease .15s, transform .7s cubic-bezier(.22, 1, .36, 1) .15s, visibility 0s; }
.kx-panel-k { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8fdcff; }
.kx-panel-big { font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(143, 220, 255, .4); }
.kx-panel-big i { font-style: normal; color: #8fdcff; font-weight: 400; }
.kx-panel h3 { margin-top: 14px; color: #fff; font-size: 1.5rem; }
.kx-panel p { color: rgba(255, 255, 255, .78); max-width: 30em; }
.kx-panel ul { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 0; list-style: none; }
.kx-panel li { padding: 8px 14px; border-radius: 999px; background: rgba(143, 220, 255, .12); border: 1px solid rgba(143, 220, 255, .25); font-size: .9rem; opacity: 0; transform: translateY(8px); }
.kx-panel.is-on li { animation: rt-li .6s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(.45s + var(--li) * .1s); }

/* cold chain log */
.kx-chain { position: relative; padding: clamp(64px, 7vw, 104px) 0; background: radial-gradient(50% 70% at 80% 0%, rgba(63, 167, 224, .25), transparent 70%), #061a2e; color: #fff; overflow: hidden; }
.kx-chain::before { content: ""; position: absolute; inset: -20%; background-image: radial-gradient(1.4px 1.4px at 20px 30px, rgba(255, 255, 255, .6), transparent), radial-gradient(1px 1px at 200px 120px, rgba(255, 255, 255, .5), transparent), radial-gradient(1.8px 1.8px at 120px 240px, rgba(201, 241, 255, .5), transparent); background-size: 280px 280px; opacity: .35; animation: kx-drift 34s linear infinite; pointer-events: none; }
.kx-chain .wrap { position: relative; }
.kx-chain-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: end; }
.kx-chain h2 { margin-top: 12px; color: #fff; font-size: clamp(2rem, 3.4vw, 3rem); }
.kx-chain-head p { color: rgba(255, 255, 255, .72); font-size: 1.05rem; }
.kx-log { position: relative; margin-top: 44px; padding: 28px 28px 60px 74px; border-radius: 26px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(201, 241, 255, .14); }
.x-js .kx-log[data-a] { opacity: 1; transform: none; }
.kx-log-svg { display: block; width: 100%; height: 260px; overflow: visible; }
.kx-log-band { fill: rgba(143, 220, 255, .07); }
.kx-log-lim { stroke: rgba(143, 220, 255, .45); stroke-width: 1.2; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; }
.kx-log-stage { stroke: rgba(255, 255, 255, .14); stroke-width: 1; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .6s ease calc(.4s + var(--s) * .45s); }
.kx-log-line { fill: none; stroke: #8fdcff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(143, 220, 255, .6)); transition: stroke-dashoffset 2.6s cubic-bezier(.65, 0, .35, 1) .2s; }
.kx-log-dot { fill: #fff; stroke: #3ee39a; stroke-width: 3; opacity: 0; transition: opacity .4s ease 2.6s; }
.kx-log.a-in .kx-log-line, html:not(.x-js) .kx-log-line { stroke-dashoffset: 0; }
.kx-log.a-in .kx-log-stage, .kx-log.a-in .kx-log-dot, html:not(.x-js) .kx-log-stage { opacity: 1; }
.kx-log-labels { position: absolute; left: 74px; right: 28px; bottom: 18px; height: 30px; }
.kx-log-labels span { position: absolute; transform: translate(-50%, 8px); display: flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; font-size: .95rem; opacity: 0; transition: opacity .5s ease calc(.4s + var(--s) * .45s), transform .6s cubic-bezier(.22, 1, .36, 1) calc(.4s + var(--s) * .45s); }
.kx-log-labels span:first-child { transform: translate(0, 8px); }
.kx-log-labels b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(143, 220, 255, .16); color: #8fdcff; font-size: .72rem; }
.kx-log.a-in .kx-log-labels span { opacity: 1; transform: translate(-50%, 0); }
.kx-log.a-in .kx-log-labels span:first-child { transform: translate(0, 0); }
.kx-log-axis { position: absolute; left: 20px; top: 28px; height: 260px; font-size: .74rem; font-weight: 700; color: #8fdcff; font-variant-numeric: tabular-nums; }
.kx-log-axis span { position: absolute; left: 0; white-space: nowrap; }
.kx-log-axis span:first-child { top: calc(60 / 240 * 100%); transform: translateY(-50%); }
.kx-log-axis span:last-child { top: calc(180 / 240 * 100%); transform: translateY(-50%); }

/* what matters */
.kx-matters { padding: clamp(64px, 7vw, 100px) 0; background: #fff; }
.kx-m-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.kx-m { position: relative; padding: 26px 24px; border-radius: 22px; background: linear-gradient(180deg, #f5fafd, #fff); border: 1px solid #dceaf3; overflow: hidden; transition: transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease, border-color .5s ease, opacity 1s ease var(--ad, 0s); }
.kx-m::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(143, 220, 255, .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform 1s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.x-js .kx-m.a-in:hover, .kx-m:hover { transform: translateY(-6px); border-color: #a9d6ee; box-shadow: 0 30px 60px -40px rgba(11, 45, 79, .6); }
.kx-m:hover::after { transform: translateX(120%); }
.kx-m i { position: relative; display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 16px; background: #0b2d4f; color: #8fdcff; }
.kx-m i::before { content: ""; position: absolute; inset: -5px; border-radius: 20px; border: 1.5px dashed rgba(63, 167, 224, .5); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.kx-m:hover i::before { transform: rotate(90deg); }
.kx-m i svg { width: 26px; height: 26px; }
.kx-m h3 { font-size: 1.2rem; }
.kx-m p { margin-top: 8px; color: var(--muted); }
.kx-fit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.kx-fit span { margin-right: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kx-fit b { padding: 9px 16px; border-radius: 999px; background: #eef7fc; border: 1px solid #d3e8f4; color: #0b2d4f; font-weight: 600; font-size: .92rem; transition: background-color .3s ease, color .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.kx-fit b:hover { background: #0b2d4f; color: #fff; transform: translateY(-2px); }

/* briefing clipboard */
.kx-brief { padding: clamp(64px, 7vw, 100px) 0; background: linear-gradient(180deg, #fff, #f2f8fc); }
.kx-brief-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.kx-brief h2 { margin-top: 12px; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.kx-brief .lead { margin-top: 14px; }
.kx-brief-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.kx-brief-act .btn { border-radius: 999px; }
.kx-wa { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px; border-radius: 999px; border: 1.5px solid #cfe0ec; color: #0b2d4f; font-weight: 700; text-decoration: none; transition: border-color .3s ease, background-color .3s ease; }
.kx-wa svg { width: 18px; height: 18px; color: #22a873; }
.kx-wa:hover { border-color: #22a873; background: #f0faf5; }
.kx-clip { position: relative; border-radius: 24px; background: #fff; border: 1px solid #dceaf3; box-shadow: 0 50px 90px -60px rgba(11, 45, 79, .7); overflow: hidden; transform: rotate(1.2deg); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.kx-clip:hover { transform: rotate(0deg) translateY(-4px); }
.x-js .kx-clip[data-a] { opacity: 1; }
.kx-clip-head, .kx-clip-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; }
.kx-clip-head { background: #0b2d4f; color: #fff; }
.kx-clip-head span { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8fdcff; }
.kx-clip-foot { border-top: 1px dashed #d3e3ee; font-size: .9rem; }
.kx-clip-foot span { color: var(--muted); }
.kx-clip ol { margin: 0; padding: 8px 24px; list-style: none; }
.kx-clip li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid #eef3f7; }
.kx-clip li:last-child { border-bottom: 0; }
.kx-clip li b { display: block; font-size: 1.02rem; }
.kx-clip li small { display: block; margin-top: 2px; color: var(--muted); }
.kx-box { position: relative; flex: none; width: 24px; height: 24px; margin-top: 2px; border-radius: 7px; border: 2px solid #c4d7e5; transition: background-color .35s ease calc(.4s + var(--k) * .28s), border-color .35s ease calc(.4s + var(--k) * .28s); }
.kx-box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1) calc(.5s + var(--k) * .28s); }
.kx-clip.a-in .kx-box, html:not(.x-js) .kx-box { background: #22a873; border-color: #22a873; }
.kx-clip.a-in .kx-box::after, html:not(.x-js) .kx-box::after { transform: rotate(45deg) scale(1); }

@media (max-width: 1100px) {
  .kx-hero-grid { grid-template-columns: 1fr; }
  .kx-mon { max-width: 460px; }
  .kx-th { grid-template-columns: minmax(0, 1fr) 200px; }
  .kx-panels { grid-column: 1 / -1; min-height: 340px; }
  .kx-m-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .kx-hero-bg img { width: 100%; opacity: .35; }
  .kx-th { grid-template-columns: 1fr; }
  .kx-meter { display: none; }
  .kx-chain-head, .kx-brief-grid { grid-template-columns: 1fr; }
  .kx-log { padding: 20px 14px 70px 50px; }
  .kx-log-labels { left: 50px; right: 14px; }
  .kx-log-labels span { font-size: .78rem; flex-direction: column; gap: 4px; }
  .kx-m-grid { grid-template-columns: 1fr; }
  .kx-clip { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kx-hero-bg img, .kx-frost, .kx-kicker svg, .kx-hero h1 em, .kx-mon, .kx-spark-run, .kx-scroll span, .kx-panels::before, .kx-chain::before { animation: none !important; }
  .kx-band.is-on .kx-merc { animation: none; transform: none; }
  .kx-band.is-on > .kx-brk { animation: none; opacity: 1; transform: none; }
}
.kx-range { padding: clamp(56px, 6vw, 84px) 0; }
.kx-tube { height: 400px; }
.kx-panels { min-height: 400px; }
.qx-grid > * { min-width: 0; }
.qx-ticket dd { overflow-wrap: anywhere; }
@media (max-width: 1000px) { .qx-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- refrigerated "what matters" v2: line-art reefer truck with synced hotspots ---- */
.kx-matters { background: radial-gradient(50% 70% at 70% 50%, #e4f4fc, transparent 70%), #f7fbfd; }
.kx-stage { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: 30px; }
.kx-hl-list { display: flex; flex-direction: column; }
.kx-hl { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; padding: 18px 0 18px 4px; border: 0; border-bottom: 1px solid #d9e8f1; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.kx-hl:first-child { border-top: 1px solid #d9e8f1; }
.kx-hl-n { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: #b9cfdf; font-variant-numeric: tabular-nums; transition: color .5s ease; }
.kx-hl-b b { display: block; font-size: 1.15rem; color: #5d7a92; transition: color .5s ease; }
.kx-hl-b small { display: block; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; font-size: .95rem; line-height: 1.5; color: var(--muted); transition: max-height .6s cubic-bezier(.22, 1, .36, 1), opacity .5s ease, margin-top .5s ease; }
.kx-hl.is-on .kx-hl-n { color: #1a6fb0; }
.kx-hl.is-on .kx-hl-b b { color: #0b2d4f; }
.kx-hl.is-on .kx-hl-b small { max-height: 120px; opacity: 1; margin-top: 6px; }
.kx-hl-bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: linear-gradient(90deg, #3fa7e0, #22a873); transform: scaleX(0); transform-origin: left; }
.kx-hl.is-on .kx-hl-bar { transform: scaleX(1); transition: transform .5s ease; }
.kx-stage.ticking .kx-hl.is-on .kx-hl-bar { transform: scaleX(0); animation: rt-bar var(--rot, 4.5s) linear forwards; }

.kx-truck-wrap { position: relative; padding: 20px 10px; }
.kx-truck { display: block; width: 100%; height: auto; overflow: visible; }
.kx-road { stroke: #c9dce9; stroke-width: 2; }
.kx-road-dash line { stroke: #c9dce9; stroke-width: 3; stroke-dasharray: 26 22; stroke-linecap: round; }
.kx-road-dash { animation: kx-roadmove 1.4s linear infinite; }
@keyframes kx-roadmove { to { transform: translateX(-48px); } }
.kx-trailer { stroke: #0b2d4f; stroke-width: 2.5; }
.kx-door { stroke: #0b2d4f; stroke-width: 2; opacity: .5; }
.kx-handle { fill: #0b2d4f; opacity: .5; }
.kx-reefer { fill: #0b2d4f; }
.kx-fins { stroke: #8fdcff; stroke-width: 2; stroke-linecap: round; }
.kx-fan { fill: none; stroke: #8fdcff; stroke-width: 2; }
.kx-fan-b { stroke: #8fdcff; stroke-width: 2; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: kx-spin 1.6s linear infinite; }
.kx-cab { fill: #fff; stroke: #0b2d4f; stroke-width: 2.5; stroke-linejoin: round; }
.kx-win { fill: #dff2fb; stroke: #0b2d4f; stroke-width: 1.5; }
.kx-cabline { stroke: #0b2d4f; stroke-width: 2.5; }
.kx-wheel circle { fill: #0b2d4f; }
.kx-wheel .kx-hub { fill: #e6f3fb; }
.kx-spoke { stroke: #0b2d4f; stroke-width: 2.5; stroke-linecap: round; animation: kx-spin 1.2s linear infinite; transform-box: fill-box; transform-origin: center; }
.kx-air path { fill: none; stroke: #8fdcff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 18 26; opacity: .8; animation: kx-air 2.4s linear infinite; animation-delay: calc(var(--a) * -.45s); }
@keyframes kx-air { to { stroke-dashoffset: 88; } }
.kx-flakes text { font-size: 16px; fill: #8fdcff; opacity: .7; animation: kx-flake 6s ease-in-out infinite; animation-delay: calc(var(--f) * -1s); transform-box: fill-box; transform-origin: center; }
@keyframes kx-flake { 0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: .25; } 50% { transform: translate(-14px, 6px) rotate(90deg); opacity: .8; } }
.kx-readout rect { fill: #0b2d4f; }
.kx-readout text { fill: #fff; font: 700 22px var(--font); font-variant-numeric: tabular-nums; }

/* highlighted part */
.kx-part { transition: filter .5s ease; }
.kx-part.is-on { filter: drop-shadow(0 0 10px rgba(63, 167, 224, .65)); }
.kx-part[data-part="1"].is-on .kx-door, .kx-part[data-part="1"].is-on .kx-handle { opacity: 1; stroke: #1a6fb0; fill: #1a6fb0; }
.kx-part[data-part="1"].is-on .kx-door { animation: kx-blink 1.2s ease-in-out infinite; }
@keyframes kx-blink { 50% { opacity: .35; } }
.kx-part[data-part="0"].is-on .kx-reefer { fill: #1a6fb0; }
.kx-part[data-part="3"].is-on .kx-cab { fill: #eaf6fd; stroke: #1a6fb0; }
.kx-part[data-part="2"].is-on .kx-wheel circle:not(.kx-hub) { fill: #1a6fb0; }

/* hotspots */
.kx-hot { cursor: pointer; }
.kx-hot-dot { fill: #fff; stroke: #1a6fb0; stroke-width: 2.5; transition: fill .4s ease, stroke .4s ease; }
.kx-hot text { font: 700 13px var(--font); fill: #1a6fb0; pointer-events: none; transition: fill .4s ease; }
.kx-hot-ring { fill: rgba(63, 167, 224, .25); transform-box: fill-box; transform-origin: center; animation: rm-ping 2.2s ease-out infinite; }
.kx-hot.is-on .kx-hot-dot { fill: #22a873; stroke: #fff; }
.kx-hot.is-on text { fill: #fff; }
.kx-hot.is-on .kx-hot-ring { fill: rgba(34, 168, 115, .35); animation-duration: 1.4s; }

@media (max-width: 1000px) { .kx-stage { grid-template-columns: 1fr; } .kx-truck-wrap { order: -1; } }
@media (prefers-reduced-motion: reduce) { .kx-road-dash, .kx-fan-b, .kx-spoke, .kx-air path, .kx-flakes text, .kx-hot-ring, .kx-part.is-on .kx-door { animation: none !important; } }
.kx-stage { grid-template-columns: minmax(280px, .7fr) minmax(0, 1.6fr); }
.kx-part[data-part="3"] .kx-door, .kx-part[data-part="3"] .kx-handle { opacity: .5; }

/* ================= Services overview (sv-*) ================= */
.sv { padding: clamp(56px, 6vw, 88px) 0; }
.sv-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 230px; gap: 14px; margin-top: 30px; }
.sv-tile { position: relative; display: block; border-radius: 24px; overflow: hidden; background: #0f2747; color: #fff; text-decoration: none; isolation: isolate; transition: transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .6s ease, opacity 1s ease var(--ad, 0s); }
.sv-tile--xl { grid-column: span 2; grid-row: span 2; }
.sv-tile--m, .sv-tile--wide { grid-column: span 2; }
.sv-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.02); transition: transform 1.4s cubic-bezier(.22, 1, .36, 1), filter .8s ease; }
.sv-tile--wide.is-holding > img { object-position: right 60%; }
.sv-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 30, 55, .05) 20%, rgba(10, 30, 55, .82)), linear-gradient(200deg, rgba(43, 108, 176, .35), transparent 50%); transition: opacity .6s ease; }
.x-js .sv-tile.a-in:hover, .sv-tile:hover { transform: translateY(-5px); box-shadow: 0 40px 70px -40px rgba(15, 39, 71, .8); }
.sv-tile:hover > img { transform: scale(1.09); }
.sv-num { position: absolute; top: 18px; left: 20px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: rgba(255, 255, 255, .7); }
.sv-go { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); transition: background-color .4s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.sv-go svg { width: 18px; height: 18px; }
.sv-tile:hover .sv-go { background: #22a873; transform: rotate(45deg); }
.sv-tile.is-holding:hover .sv-go { background: #c8323a; }
.sv-body { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.sv-tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sv-tag i { width: 7px; height: 7px; border-radius: 50%; background: #3ee39a; }
.is-holding .sv-tag i { background: #ff6b72; }
.sv-body b { font-size: 1.35rem; line-height: 1.15; }
.sv-tile--xl .sv-body b { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.sv-body small { max-width: 30em; font-size: .95rem; color: rgba(255, 255, 255, .8); line-height: 1.45; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(6px); transition: max-height .6s cubic-bezier(.22, 1, .36, 1), opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.sv-tile--xl .sv-body small, .sv-tile:hover .sv-body small, .sv-tile:focus-visible .sv-body small { max-height: 80px; opacity: 1; transform: none; }

/* illustrated tiles */
.sv-art { position: absolute; inset: 0; z-index: -2; display: grid; place-items: center; padding-bottom: 60px; }
.sv-art--spoed { background: radial-gradient(70% 70% at 70% 30%, #1d4f86, #0b2d4f); }
.sv-art--net { background: radial-gradient(70% 70% at 30% 30%, #1f6b5a, #0b2d4f 75%); }
.sv-clock { width: 112px; height: 112px; overflow: visible; }
.sv-c-face { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .25); stroke-width: 2; }
.sv-c-tick { stroke: rgba(255, 255, 255, .55); stroke-width: 2; stroke-linecap: round; }
.sv-c-arc { fill: none; stroke: #3ee39a; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .25 1; transform: rotate(-90deg); transform-origin: 60px 60px; animation: sv-arc 3s linear infinite; }
@keyframes sv-arc { to { stroke-dashoffset: -1; } }
.sv-c-h, .sv-c-m { stroke: #fff; stroke-linecap: round; transform-origin: 60px 60px; }
.sv-c-h { stroke-width: 4; animation: kx-spin 12s linear infinite; }
.sv-c-m { stroke-width: 2.5; stroke: #3ee39a; animation: kx-spin 2s linear infinite; }
.sv-c-pin { fill: #fff; }
.sv-tile:hover .sv-c-m { animation-duration: .8s; }
.sv-net { width: 82%; max-width: 260px; overflow: visible; }
.sv-net line { stroke: rgba(143, 240, 196, .55); stroke-width: 1.6; stroke-dasharray: 4 6; animation: kx-air 1.8s linear infinite; animation-delay: calc(var(--e) * -.2s); }
.sv-net circle { fill: #fff; opacity: .9; transform-box: fill-box; transform-origin: center; animation: sv-node 2.6s ease-in-out infinite; animation-delay: calc(var(--n) * -.37s); }
.sv-net circle.hub { fill: #3ee39a; }
@keyframes sv-node { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

/* comparison rows */
.sv-cmp { padding: clamp(56px, 6vw, 88px) 0; background: #f6f9fc; }
.sv-cmp-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 30px; align-items: end; }
.sv-cmp-head h2 { margin-top: 12px; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.sv-cmp-head p { color: var(--muted); }
.sv-rows { display: grid; gap: 8px; margin-top: 30px; }
.sv-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: border-color .4s ease, box-shadow .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1), opacity 1s ease var(--ad, 0s); }
.sv-row--h { padding: 0 20px 4px; background: none; border: 0; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.x-js .sv-row.a-in:not(.sv-row--h):hover, .sv-row:not(.sv-row--h):hover { border-color: #c9d8e8; box-shadow: 0 20px 40px -30px rgba(15, 39, 71, .6); transform: translateX(4px); }
.sv-row-t { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 1.05rem; color: #1f2d3d; text-decoration: none; }
.sv-row-t:hover { color: #2b6cb0; }
.sv-row-n { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #eff5fb; color: #2b6cb0; font-size: .8rem; }
.sv-via { display: inline-flex; align-items: center; gap: 8px; font-style: normal; font-size: .9rem; font-weight: 600; color: #1f3f63; }
.sv-via i { width: 8px; height: 8px; border-radius: 50%; background: #22a873; }
.sv-via.is-holding i { background: #c8323a; }
.sv-row-need { color: var(--muted); font-size: .95rem; }
.sv-ch { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; font-size: .88rem; font-weight: 600; text-decoration: none; transition: background-color .3s ease, color .3s ease, transform .3s ease; }
.sv-ch svg { width: 15px; height: 15px; }
.sv-ch--form { background: #eff5fb; color: #1f3f63; }
.sv-ch--form:hover { background: #1f3f63; color: #fff; }
.sv-ch--call { background: #fdf1f1; color: #8e1d22; }
.sv-ch--call:hover { background: #b3262d; color: #fff; }

@media (max-width: 1000px) {
  .sv-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
  .sv-tile--xl { grid-column: span 2; grid-row: span 1; }
  .sv-tile--m, .sv-tile--wide { grid-column: span 2; }
  .sv-tile--xl .sv-body small { display: none; }
  .sv-row { grid-template-columns: 1fr 1fr; }
  .sv-row--h { display: none; }
  .sv-cmp-head { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .sv-bento { grid-template-columns: 1fr; } .sv-tile--xl, .sv-tile--m, .sv-tile--wide { grid-column: auto; } .sv-row { grid-template-columns: 1fr; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .sv-c-arc, .sv-c-h, .sv-c-m, .sv-net line, .sv-net circle { animation: none; } }
.sv { padding: 52px 0 64px; }
.sv .x-head h2 { max-width: none; font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
.sv-bento { grid-auto-rows: 185px; margin-top: 24px; }

/* ================= Services explorer (sx-*) ================= */
.sx { position: relative; padding: clamp(48px, 5vw, 72px) 0; background: radial-gradient(50% 60% at 85% 0%, rgba(43, 108, 176, .35), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(34, 168, 115, .18), transparent 70%), #071c33; color: #fff; overflow: hidden; }
.sx::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); pointer-events: none; }
.sx .wrap { position: relative; }
.sx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sx-head h2 { margin-top: 12px; color: #fff; font-size: clamp(1.9rem, 3vw, 2.7rem); }
.sx-ctrl { display: flex; align-items: center; gap: 10px; }
.sx-count { margin-right: 10px; font-size: .95rem; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.sx-count b { font-size: 1.6rem; color: #fff; }
.sx-arrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, transform .3s ease; }
.sx-arrow svg { width: 20px; height: 20px; }
.sx-arrow:hover { background: #fff; color: #071c33; border-color: #fff; }
.sx-arrow:active { transform: scale(.94); }

.sx-acc { display: flex; gap: 10px; height: clamp(480px, 62vh, 580px); margin-top: 28px; }
.x-js .sx-acc[data-a] { transition: opacity 1s ease, transform 1s cubic-bezier(.22, 1, .36, 1); }
.sx-p { position: relative; flex: 1 1 0; min-width: 0; border-radius: 22px; overflow: hidden; background: #0b2d4f; cursor: pointer; isolation: isolate; outline: none; transition: flex-grow .9s cubic-bezier(.22, 1, .36, 1), box-shadow .6s ease; }
.sx-p.is-on { flex-grow: 7; cursor: default; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.sx-p:focus-visible { box-shadow: 0 0 0 3px #8fdcff; }
.sx-p > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(.85) brightness(.55); transform: scale(1.15); transition: filter 1s ease, transform 2.4s cubic-bezier(.22, 1, .36, 1); }
.sx-p.is-on > img { filter: none; transform: scale(1.02); }
.sx-p--pechhulp > img { object-position: 75% 60%; }
.sx-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 28, 51, .2), rgba(7, 28, 51, .55) 50%, rgba(7, 28, 51, .95)); transition: background .8s ease; }
.sx-p.is-on .sx-shade { background: linear-gradient(90deg, rgba(7, 28, 51, .92) 0%, rgba(7, 28, 51, .6) 45%, rgba(7, 28, 51, .1) 75%), linear-gradient(0deg, rgba(7, 28, 51, .7), transparent 50%); }
.sx-p:not(.is-on):hover > img { filter: grayscale(.3) brightness(.7); }

/* collapsed rail */
.sx-rail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px 0; transition: opacity .4s ease; }
.sx-p.is-on .sx-rail { opacity: 0; pointer-events: none; }
.sx-rail b { font-size: .85rem; letter-spacing: .1em; color: rgba(255, 255, 255, .7); }
.sx-rail i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; transition: background-color .3s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.sx-rail i svg { width: 20px; height: 20px; }
.sx-p:not(.is-on):hover .sx-rail i { background: #22a873; transform: scale(1.08); }
.sx-p.is-holding:not(.is-on):hover .sx-rail i { background: #c8323a; }
.sx-rail em { margin-top: auto; writing-mode: vertical-rl; transform: rotate(180deg); font-style: normal; font-weight: 700; font-size: 1.05rem; white-space: nowrap; letter-spacing: .01em; }

/* expanded content */
.sx-open { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(22px, 2.6vw, 36px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.sx-p.is-on .sx-open { opacity: 1; pointer-events: auto; transition: opacity .6s ease .35s; }
.sx-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sx-co { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); backdrop-filter: blur(8px); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sx-co i { width: 7px; height: 7px; border-radius: 50%; background: #3ee39a; box-shadow: 0 0 0 0 rgba(62, 227, 154, .6); animation: qx-live 2s ease-out infinite; }
.is-holding .sx-co i { background: #ff6b72; }
.sx-main { max-width: 560px; }
.sx-main > * { opacity: 0; transform: translateY(18px); }
.sx-p.is-on .sx-main > * { animation: sx-rise .8s cubic-bezier(.22, 1, .36, 1) forwards; }
.sx-p.is-on .sx-main > :nth-child(1) { animation-delay: .4s; } .sx-p.is-on .sx-main > :nth-child(2) { animation-delay: .5s; } .sx-p.is-on .sx-main > :nth-child(3) { animation-delay: .6s; } .sx-p.is-on .sx-main > :nth-child(4) { animation-delay: .7s; } .sx-p.is-on .sx-main > :nth-child(5) { animation-delay: .8s; }
.sx-n { font-size: .9rem; font-weight: 700; color: #8fdcff; letter-spacing: .08em; }
.sx-n small { color: rgba(255, 255, 255, .45); font-size: inherit; }
.sx-main h3 { margin-top: 8px; color: #fff; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.02; letter-spacing: -.02em; }
.sx-main p { margin-top: 14px; color: rgba(255, 255, 255, .8); font-size: 1.05rem; max-width: 34em; }
.sx-main ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.sx-main li { padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); font-size: .88rem; }
.sx-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.sx-btn { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 8px 0 22px; border-radius: 999px; background: #fff; color: #071c33; font-weight: 700; text-decoration: none; transition: box-shadow .3s ease; }
.sx-btn i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #22a873; color: #fff; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.is-holding .sx-btn i { background: #c8323a; }
.sx-btn i svg { width: 16px; height: 16px; }
.sx-btn:hover { box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .7); }
.sx-btn:hover i { transform: rotate(45deg); }
.sx-btn2 { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .35); color: #fff; font-weight: 700; text-decoration: none; transition: background-color .3s ease, border-color .3s ease; }
.sx-btn2 svg { width: 16px; height: 16px; }
.sx-btn2:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.sx-btn2--call { border-color: rgba(255, 107, 114, .6); }
.sx-btn2--call svg { color: #ff8a90; }
.sx-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #22a873, #8fdcff); transform: scaleX(0); transform-origin: left; }
.sx.ticking .sx-p.is-on .sx-prog { animation: rt-bar var(--rot, 7s) linear forwards; }

/* signature visuals */
.sx-fx { opacity: 0; transform: translateY(-10px); }
.sx-p.is-on .sx-fx { animation: sx-rise .8s cubic-bezier(.22, 1, .36, 1) .55s forwards; }
.sx-fx--route { width: 220px; height: 120px; overflow: visible; }
.sx-fx--route path { fill: none; stroke: #8fdcff; stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.sx-p.is-on .sx-fx--route path { animation: rm-draw 1.6s cubic-bezier(.65, 0, .35, 1) .8s forwards; }
.sx-fx--route circle { fill: #fff; } .sx-fx--route circle.end { fill: #3ee39a; transform-box: fill-box; transform-origin: center; animation: sv-node 1.6s ease-in-out infinite; }
.sx-fx--route text { fill: rgba(255, 255, 255, .7); font: 700 11px var(--font); letter-spacing: .1em; }
.sx-fx--temp { position: relative; display: grid; grid-template-columns: auto auto; align-items: start; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(201, 241, 255, .3); backdrop-filter: blur(10px); }
.sx-fx--temp small { grid-column: 1 / -1; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8fdcff; }
.sx-fx--temp b { font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(143, 220, 255, .6); }
.sx-fx--temp span { margin: 4px 0 0 4px; color: #8fdcff; }
.sx-fx--temp i { position: absolute; right: 12px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #3ee39a; animation: qx-live 1.8s ease-out infinite; }
.sx-fx--terms { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px); }
.sx-fx--terms span { padding: 8px 14px; border-radius: 999px; font-size: .85rem; font-weight: 700; color: rgba(255, 255, 255, .7); animation: sx-term 4.5s ease-in-out infinite; animation-delay: calc(var(--t) * 1.5s); }
@keyframes sx-term { 0%, 30%, 100% { background: transparent; color: rgba(255, 255, 255, .7); } 5%, 25% { background: #fff; color: #071c33; } }
.sx-fx--clock { width: 110px; height: 110px; overflow: visible; }
.sx-fx--clock .f { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .3); stroke-width: 2; }
.sx-fx--clock .a { fill: none; stroke: #ff6b72; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: .3 1; transform: rotate(-90deg); transform-origin: 60px 60px; animation: sv-arc 2.4s linear infinite; }
.sx-fx--clock line { stroke: rgba(255, 255, 255, .6); stroke-width: 2; stroke-linecap: round; }
.sx-fx--clock .h, .sx-fx--clock .m { transform-origin: 60px 60px; }
.sx-fx--clock .h { stroke: #fff; stroke-width: 4; animation: kx-spin 10s linear infinite; }
.sx-fx--clock .m { stroke: #ff6b72; stroke-width: 2.5; animation: kx-spin 1.6s linear infinite; }
.sx-fx--clock .p { fill: #fff; }
.sx-fx--net { width: 220px; height: 120px; overflow: visible; }
.sx-fx--net line { stroke: rgba(143, 240, 196, .6); stroke-width: 1.6; stroke-dasharray: 4 6; animation: kx-air 1.8s linear infinite; animation-delay: calc(var(--e) * -.2s); }
.sx-fx--net circle { fill: #fff; transform-box: fill-box; transform-origin: center; animation: sv-node 2.6s ease-in-out infinite; animation-delay: calc(var(--n) * -.37s); }
.sx-fx--net circle.hub { fill: #3ee39a; }
.sx-fx--sos { position: relative; display: grid; justify-items: center; gap: 2px; padding: 16px 22px; border-radius: 18px; background: rgba(200, 50, 58, .25); border: 1px solid rgba(255, 107, 114, .5); backdrop-filter: blur(8px); }
.sx-fx--sos i { position: absolute; inset: -1px; border-radius: inherit; border: 2px solid #ff6b72; animation: sx-sos 1.8s ease-out infinite; }
@keyframes sx-sos { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
.sx-fx--sos b { font-size: 2rem; line-height: 1; }
.sx-fx--sos small { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffb3b7; }

/* ================= Who does what (so-*) ================= */
.so { padding: clamp(64px, 7vw, 100px) 0; background: radial-gradient(40% 60% at 70% 50%, #e6f0fa, transparent 70%), #fff; }
.so-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.so-txt h2 { margin-top: 12px; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.so-txt .lead { margin-top: 14px; }
.so-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; font-size: .9rem; font-weight: 600; color: #1f3f63; }
.so-legend span { display: inline-flex; align-items: center; gap: 8px; }
.so-legend i { width: 10px; height: 10px; border-radius: 50%; background: #22a873; }
.so-legend .is-holding i { background: #c8323a; }
.so-map { position: relative; width: 100%; aspect-ratio: 1000 / 420; }
.x-js .so-map[data-a] { opacity: 1; transform: none; }
.so-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.so-l { fill: none; stroke: #22a873; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; opacity: .75; transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1) var(--d, 0s), opacity .4s ease, stroke-width .3s ease; }
.so-l--co { stroke: #2b6cb0; }
.so-l.is-holding, .so-l--co[data-co="1"] { stroke: #c8323a; }
.so-map.a-in .so-l, html:not(.x-js) .so-l { stroke-dashoffset: 0; }
.so-dot { fill: #22a873; opacity: 0; transition: opacity .5s ease 2s; }
.so-dot.is-holding { fill: #c8323a; }
.so-map.a-in .so-dot { opacity: 1; }
.so-node { position: absolute; transform: translate(-50%, -50%); z-index: 1; }
.so-root { display: grid; justify-items: center; gap: 2px; padding: 12px 22px; border-radius: 16px; background: #1f3f63; color: #fff; text-align: center; box-shadow: 0 20px 40px -24px rgba(15, 39, 71, .8); opacity: 0; transition: opacity .6s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); transform: translate(-50%, -50%) scale(.8); }
.so-root span { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9fd9bf; }
.so-root b { font-size: 1.02rem; white-space: nowrap; }
.so-co { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px; background: #fff; border: 1.5px solid #cfe6db; box-shadow: 0 20px 40px -30px rgba(15, 39, 71, .7); white-space: nowrap; width: max-content; opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .6s ease .4s, transform .6s cubic-bezier(.34, 1.56, .64, 1) .4s, border-color .3s ease, box-shadow .3s ease; }
.so-co.is-holding { border-color: #f1d0d2; }
.so-co img { width: 36px; height: 36px; }
.so-co small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.so-co b { display: block; font-size: 1rem; color: #1f2d3d; }
.so-leaf { padding: 10px 14px; border-radius: 12px; background: #f2faf6; border: 1.5px solid #cfe6db; color: #1c6b4a; font-weight: 700; font-size: .88rem; text-align: center; text-decoration: none; white-space: nowrap; opacity: 0; transform: translate(-50%, -30%); transition: opacity .5s ease var(--d), transform .6s cubic-bezier(.22, 1, .36, 1) var(--d), background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.so-leaf.is-holding { background: #fdf3f3; border-color: #f1d0d2; color: #8e1d22; }
.so-map.a-in .so-root, .so-map.a-in .so-co, html:not(.x-js) .so-root, html:not(.x-js) .so-co { opacity: 1; transform: translate(-50%, -50%); }
.so-map.a-in .so-leaf, html:not(.x-js) .so-leaf { opacity: 1; transform: translate(-50%, -50%); }
.so-leaf:hover, .so-leaf.lit { background: #22a873; border-color: #22a873; color: #fff; box-shadow: 0 14px 28px -16px rgba(34, 168, 115, .9); }
.so-leaf.is-holding:hover, .so-leaf.is-holding.lit { background: #c8323a; border-color: #c8323a; box-shadow: 0 14px 28px -16px rgba(200, 50, 58, .9); }
.so-map.is-focus .so-l:not(.lit) { opacity: .15; }
.so-map.is-focus .so-l.lit { stroke-width: 3.5; opacity: 1; }
.so-map.is-focus .so-co.lit { border-color: currentColor; box-shadow: 0 24px 44px -24px rgba(15, 39, 71, .8); }
.so-map.is-focus .so-leaf:not(.lit) { opacity: .45; }

@media (max-width: 900px) {
  .sx-acc { flex-direction: column; height: auto; }
  .sx-p { flex: none; height: 72px; transition: height .8s cubic-bezier(.22, 1, .36, 1); }
  .sx-p.is-on { height: 520px; }
  .sx-rail { flex-direction: row; padding: 0 18px; }
  .sx-rail em { writing-mode: horizontal-tb; transform: none; margin: 0 0 0 auto; }
  .sx-top .sx-fx { display: none; }
  .so-grid { grid-template-columns: 1fr; }
  .so-map { aspect-ratio: auto; height: auto; display: grid; gap: 10px; }
  .so-svg { display: none; }
  .so-node { position: static; transform: none !important; opacity: 1 !important; }
  .so-leaf { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .sx-fx, .sx-main > * { opacity: 1 !important; transform: none !important; animation: none !important; } .sx-fx--terms span, .sx-fx--clock .h, .sx-fx--clock .m, .sx-fx--clock .a, .sx-fx--net line, .sx-fx--net circle, .sx-fx--sos i { animation: none; } }
@keyframes sx-rise { to { opacity: 1; transform: none; } }
.so-grid { grid-template-columns: minmax(0, .6fr) minmax(0, 1.7fr); }
.so-leaf { white-space: normal; width: 14%; min-width: 0; padding: 10px 8px; font-size: .84rem; line-height: 1.2; }
@media (max-width: 900px) { .so-co, .so-root b { white-space: normal; } .so-leaf { width: auto; } .so-co { width: auto; max-width: 46%; } }

/* Diensten explorer: light background instead of navy (less contrast vs green hero) */
.sx { background: radial-gradient(45% 55% at 90% 0%, rgba(34, 168, 115, .10), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(43, 108, 176, .07), transparent 70%), #f5f8f6; color: var(--ink, #0b2d4f); }
.sx::before { background-image: linear-gradient(rgba(11, 45, 79, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 45, 79, .04) 1px, transparent 1px); }
.sx-head h2 { color: #0b2d4f; }
.theme-pro .sx .eyebrow--light { color: var(--blue); }
.sx-count { color: rgba(11, 45, 79, .45); }
.sx-count b { color: #0b2d4f; }
.sx-arrow { border-color: rgba(11, 45, 79, .2); color: #0b2d4f; }
.sx-arrow:hover { background: #0b2d4f; color: #fff; border-color: #0b2d4f; }
.sx-p { box-shadow: 0 18px 40px -24px rgba(11, 45, 79, .45); }
/* no hard edge at the bottom: section fades into the white section below; softer, shorter shadows that never reach the edge */
.sx { background: radial-gradient(45% 55% at 90% 0%, rgba(34, 168, 115, .10), transparent 70%), linear-gradient(180deg, #f5f8f6 0%, #f5f8f6 55%, #fff 100%); }
.sx-p { box-shadow: 0 10px 24px -16px rgba(11, 45, 79, .35); }
.sx-p.is-on { box-shadow: 0 18px 36px -22px rgba(11, 45, 79, .5); }
.sx-p { color: #fff; }
.sx { background: linear-gradient(180deg, #f5f8f6 0%, #f5f8f6 55%, #fff 100%); }

/* ===== Fleet showroom (transport/fleet) ===== */
.fl { position: relative; padding: clamp(48px, 5vw, 68px) 0; background: linear-gradient(180deg, #f5f8f6 0%, #f5f8f6 60%, #fff 100%); color: #0b2d4f; }
.fl-head h2 { margin-top: 12px; color: #0b2d4f; font-size: clamp(1.9rem, 3vw, 2.7rem); }
.fl-stage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; height: clamp(420px, 54vh, 500px); margin-top: 26px; }
.fl-photo { position: relative; border-radius: 22px; overflow: hidden; background: #0b2d4f; box-shadow: 0 18px 36px -22px rgba(11, 45, 79, .5); }
.fl-img { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; }
.fl-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s cubic-bezier(.22, 1, .36, 1); }
.fl-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 28, 51, .55), transparent 45%); }
.fl-img.is-on { opacity: 1; }
.fl-img.is-on img { transform: scale(1); }
.fl-ghost { position: absolute; z-index: 1; right: 26px; bottom: -18px; font-size: clamp(7rem, 12vw, 11rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .45); opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .9s cubic-bezier(.22, 1, .36, 1); }
.fl-img.is-on .fl-ghost { opacity: 1; transform: none; transition-delay: .35s; }
.fl-badge { position: absolute; z-index: 1; left: 22px; top: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fl-badge i { width: 8px; height: 8px; border-radius: 50%; background: #22a873; box-shadow: 0 0 0 4px rgba(34, 168, 115, .25); }
.fl-badge.is-rent i { background: #ff6b72; box-shadow: 0 0 0 4px rgba(200, 50, 58, .3); }

.fl-sheet { position: relative; display: grid; border-radius: 22px; background: #fff; border: 1px solid rgba(11, 45, 79, .08); box-shadow: 0 18px 36px -24px rgba(11, 45, 79, .35); overflow: hidden; }
.fl-sheet::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(43, 108, 176, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(43, 108, 176, .06) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, transparent 25%, #000 45%, #000 62%, transparent 80%); mask-image: linear-gradient(180deg, transparent 25%, #000 45%, #000 62%, transparent 80%); pointer-events: none; }
.fl-spec { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 32px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.fl-spec.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease .15s; }
.fl-top { display: flex; justify-content: space-between; align-items: center; }
.fl-n { font-size: .9rem; font-weight: 700; color: #22a873; letter-spacing: .08em; }
.fl-n small { color: rgba(11, 45, 79, .4); font-size: .9em; }
.fl-tag { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.fl-spec h3 { margin: 10px 0 6px; font-size: clamp(1.5rem, 2vw, 1.9rem); color: #0b2d4f; }
.fl-spec p { margin: 0; color: #4a5d72; font-size: .98rem; line-height: 1.55; }
.fl-bp { display: block; width: 100%; max-height: 104px; margin: auto 0 2px; padding-top: 6px; fill: none; stroke: #0b2d4f; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fl-bp * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fl-bp .gnd { stroke: rgba(11, 45, 79, .25); stroke-dasharray: .012 .012; stroke-dashoffset: 0; opacity: 0; }
.fl-bp .hub { stroke: #22a873; }
.fl-bp .snow { stroke: var(--blue); }
.fl-spec.is-on .fl-bp * { animation: fl-draw 1.6s cubic-bezier(.65, 0, .35, 1) .3s forwards; }
.fl-spec.is-on .fl-bp .gnd { animation: fl-fade .6s ease .2s forwards; }
@keyframes fl-draw { to { stroke-dashoffset: 0; } }
@keyframes fl-fade { to { opacity: 1; } }
.fl-facts { margin: 6px 0 0; }
.fl-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid rgba(11, 45, 79, .08); opacity: 0; transform: translateX(-10px); }
.fl-spec.is-on .fl-facts div { animation: fl-in .6s cubic-bezier(.22, 1, .36, 1) var(--fd) forwards; }
@keyframes fl-in { to { opacity: 1; transform: none; } }
.fl-facts dt { color: rgba(11, 45, 79, .5); font-size: .82rem; font-weight: 600; }
.fl-facts dd { margin: 0; color: #0b2d4f; font-size: .88rem; font-weight: 700; text-align: right; }
.fl-link { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; height: 46px; margin-top: 12px; padding: 0 6px 0 20px; border-radius: 999px; background: #0b2d4f; color: #fff; font-weight: 700; text-decoration: none; transition: background-color .3s ease; }
.fl-link i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #22a873; transition: transform .3s ease; }
.fl-link i svg { width: 16px; height: 16px; }
.fl-link:hover { background: #12406d; }
.fl-link:hover i { transform: rotate(45deg); }

.fl-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.fl-tab { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 4px 18px; border: 0; background: none; color: rgba(11, 45, 79, .5); font: inherit; font-weight: 700; text-align: left; cursor: pointer; transition: color .3s ease; }
.fl-tab span { font-size: .8rem; letter-spacing: .08em; color: rgba(11, 45, 79, .35); transition: color .3s ease; }
.fl-tab::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(11, 45, 79, .1); }
.fl-prog { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, #22a873, var(--blue)); transform: scaleX(0); transform-origin: left; }
.fl-tab.is-on { color: #0b2d4f; }
.fl-tab.is-on span { color: #22a873; }
.fl-tab.is-on .fl-prog { transform: scaleX(1); }
.fl.ticking .fl-tab.is-on .fl-prog { transform: scaleX(0); animation: rt-bar var(--rot, 7s) linear forwards; }
.fl-tab:hover { color: #0b2d4f; }

/* Departure check */
.flc { padding: clamp(56px, 6vw, 88px) 0; background: #fff; }
.flc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.flc-txt h2 { margin-top: 12px; color: #0b2d4f; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.flc-txt .lead { margin-top: 16px; max-width: 520px; }
.flc-card { position: relative; padding: clamp(22px, 2.6vw, 34px); border-radius: 22px; background: #f5f8f6; border: 1px solid rgba(11, 45, 79, .07); }
.flc-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px dashed rgba(11, 45, 79, .18); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.flc-head b { color: rgba(11, 45, 79, .45); }
.flc-card ol { list-style: none; margin: 8px 0 0; padding: 0; }
.flc-card li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(11, 45, 79, .07); color: rgba(11, 45, 79, .45); font-weight: 600; transition: color .4s ease var(--cd); }
.flc-card li i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(11, 45, 79, .2); color: #fff; transition: background-color .4s ease var(--cd), border-color .4s ease var(--cd); }
.flc-card li svg { width: 15px; height: 15px; stroke-dasharray: 1; stroke-dashoffset: 1; }
.flc-card.a-in li { color: #0b2d4f; }
.flc-card.a-in li i { background: #22a873; border-color: #22a873; }
.flc-card.a-in li svg { animation: fl-draw .5s ease var(--cd) forwards; }
.flc-foot { display: flex; justify-content: flex-end; padding-top: 18px; }
.flc-stamp { display: inline-block; padding: 8px 16px; border: 2px solid #22a873; border-radius: 10px; color: #22a873; font-weight: 800; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: rotate(-6deg) scale(1.6); }
.flc-card.a-in .flc-stamp { animation: flc-stamp .5s cubic-bezier(.34, 1.56, .64, 1) var(--cd) forwards; }
@keyframes flc-stamp { to { opacity: 1; transform: rotate(-6deg) scale(1); } }

@media (max-width: 900px) {
  .fl-stage { grid-template-columns: 1fr; height: auto; }
  .fl-photo { height: 280px; }
  .fl-tabs { grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
  .flc-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-bp *, .flc-card li svg { stroke-dashoffset: 0 !important; animation: none !important; }
  .fl-facts div, .flc-stamp { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ===== Coverage (transport/coverage) ===== */
.cv { position: relative; padding: clamp(48px, 5vw, 68px) 0; background: linear-gradient(180deg, #f5f8f6 0%, #f5f8f6 60%, #fff 100%); color: #0b2d4f; }
.cv-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cv-txt h2 { margin: 12px 0 22px; color: #0b2d4f; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.cv-list { display: grid; }
.cv-i { position: relative; display: grid; grid-template-columns: 96px 1fr; align-items: baseline; column-gap: 14px; padding: 15px 0 16px; border: 0; border-top: 1px solid rgba(11, 45, 79, .1); background: none; font: inherit; text-align: left; color: rgba(11, 45, 79, .5); cursor: pointer; transition: color .3s ease; }
.cv-i:last-child { border-bottom: 1px solid rgba(11, 45, 79, .1); }
.cv-tag { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(11, 45, 79, .35); transition: color .3s ease; }
.cv-i b { font-size: 1.08rem; }
.cv-i:hover, .cv-i.is-on { color: #0b2d4f; }
.cv-i.is-on .cv-tag { color: #22a873; }
.cv-prog { position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: linear-gradient(90deg, #22a873, var(--blue)); transform: scaleX(0); transform-origin: left; }
.cv-i.is-on .cv-prog { transform: scaleX(1); }
.cv.ticking .cv-i.is-on .cv-prog { transform: scaleX(0); animation: rt-bar var(--rot, 7s) linear forwards; }
.cv-more { grid-column: 2; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.22, 1, .36, 1); }
.cv-i.is-on .cv-more { grid-template-rows: 1fr; }
.cv-in { overflow: hidden; }
.cv-p { display: block; padding-top: 8px; color: #4a5d72; font-size: .95rem; line-height: 1.55; opacity: 0; transition: opacity .3s ease; }
.cv-need { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 12px; opacity: 0; transition: opacity .3s ease; }
.cv-i.is-on .cv-p, .cv-i.is-on .cv-need { opacity: 1; transition: opacity .5s ease .25s; }
.cv-need small { margin-right: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.cv-need em { padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(11, 45, 79, .1); font-style: normal; font-size: .8rem; font-weight: 600; color: #0b2d4f; }

.cv-map { position: relative; }
.cv-map svg { display: block; width: 100%; max-height: min(700px, 76vh); overflow: visible; }
.cv-dots { fill: none; stroke: rgba(11, 45, 79, .16); stroke-width: 4.2; stroke-linecap: round; transition: stroke .8s ease; }
.cv-dots.lit { stroke: rgba(34, 168, 115, .55); }
.cv-cc { font-size: 34px; font-weight: 800; letter-spacing: .04em; fill: none; stroke: rgba(11, 45, 79, .18); stroke-width: 1; }
.cv-rings circle { fill: none; stroke: rgba(34, 168, 115, .5); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; transform: scale(.1); opacity: 0; animation: cv-ring 3.9s cubic-bezier(.22, 1, .36, 1) var(--rd) infinite; }
@keyframes cv-ring { 0% { transform: scale(.1); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.cv-base { fill: #22a873; stroke: #fff; stroke-width: 3; }
.cv-set { opacity: 0; transition: opacity .4s ease; }
.cv-set.is-on { opacity: 1; }
.cv-arc { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cv-set.is-on .cv-arc { animation: fl-draw 1.1s cubic-bezier(.65, 0, .35, 1) var(--ad) forwards; }
.cv-end { fill: #fff; stroke: var(--blue); stroke-width: 2.4; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.cv-set.is-on .cv-end { animation: cv-pop .5s cubic-bezier(.34, 1.56, .64, 1) var(--ad) forwards; }
@keyframes cv-pop { to { transform: scale(1); } }
.cv-run { fill: #22a873; }
.cv-set.is-ice .cv-arc, .cv-set.is-ice .cv-end { stroke: #4fb3e6; }
.cv-set.is-ice .cv-run { fill: #4fb3e6; }
.cv-set.is-out .cv-arc { stroke-dasharray: .02 .02; stroke-dashoffset: 0; opacity: 0; }
.cv-set.is-out.is-on .cv-arc { animation: fl-fade .8s ease var(--ad) forwards; }
.cv-legend { position: absolute; left: 0; bottom: 0; display: flex; gap: 18px; font-size: .78rem; font-weight: 600; color: rgba(11, 45, 79, .55); }
.cv-legend span { display: inline-flex; align-items: center; gap: 8px; }
.lg-base { width: 10px; height: 10px; border-radius: 50%; background: #22a873; box-shadow: 0 0 0 3px rgba(34, 168, 115, .25); }
.lg-arc { width: 22px; height: 2px; border-radius: 2px; background: var(--blue); }

/* Departures board */
.cvb { padding: clamp(56px, 6vw, 88px) 0; background: #fff; }
.cvb-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cvb-txt h2 { margin-top: 12px; color: #0b2d4f; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.cvb-txt .lead { margin-top: 14px; }
.cvb-why { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.cvb-why li { display: flex; gap: 14px; }
.cvb-why li > span { flex: none; padding-top: 2px; font-size: .8rem; font-weight: 700; color: #22a873; letter-spacing: .08em; }
.cvb-why b { color: #0b2d4f; }
.cvb-why p { margin: 2px 0 0; color: #4a5d72; font-size: .92rem; }
.cvb-board { border-radius: 22px; background: #0b2d4f; color: #fff; padding: 8px 8px 12px; box-shadow: 0 18px 36px -22px rgba(11, 45, 79, .55); }
.cvb-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 14px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.cvb-top span { display: inline-flex; align-items: center; gap: 10px; }
.cvb-top i { width: 8px; height: 8px; border-radius: 50%; background: #22a873; animation: cvb-blink 1.6s ease-in-out infinite; }
@keyframes cvb-blink { 50% { opacity: .25; } }
.cvb-top b { font-size: 1.1rem; letter-spacing: .08em; color: #fff; font-variant-numeric: tabular-nums; }
.cvb-row { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1.5fr) 40px; align-items: center; gap: 14px; padding: 15px 20px; border-radius: 14px; color: #fff; text-decoration: none; transition: background-color .3s ease; }
.cvb-row + .cvb-row { margin-top: 2px; }
.cvb-row--head { padding-top: 6px; padding-bottom: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
a.cvb-row { background: rgba(255, 255, 255, .04); opacity: 0; transform: translateY(10px); }
.cvb-board.a-in a.cvb-row { animation: fl-in .6s cubic-bezier(.22, 1, .36, 1) var(--bd) forwards; }
a.cvb-row:hover { background: rgba(255, 255, 255, .1); }
.cvb-route { font-weight: 700; font-size: 1.02rem; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvb-svc { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(34, 168, 115, .18); color: #7fe0b5; font-style: normal; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cvb-svc.is-rent { background: rgba(200, 50, 58, .2); color: #ff9aa0; }
.cvb-d { color: rgba(255, 255, 255, .65); font-size: .9rem; }
.cvb-go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .08); transition: background-color .3s ease, transform .3s ease; }
.cvb-go svg { width: 16px; height: 16px; }
a.cvb-row:hover .cvb-go { background: #22a873; transform: rotate(45deg); }

@media (max-width: 900px) {
  .cv-grid, .cvb-grid { grid-template-columns: 1fr; }
  .cv-map { order: -1; }
  .cv-map svg { max-height: 460px; }
  .cv-i { grid-template-columns: 1fr; }
  .cv-more { grid-column: 1; }
  .cvb-row { grid-template-columns: minmax(0, 1fr) auto 36px; }
  .cvb-row > :nth-child(3) { display: none; }
  .cvb-route { white-space: normal; font-size: .92rem; }
  .cvb-row { padding: 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-arc { stroke-dashoffset: 0 !important; animation: none !important; }
  .cv-end { transform: none !important; animation: none !important; }
  .cv-rings, .cv-run { display: none; }
  a.cvb-row { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ===== Route pages: animated lane + brief ticket ===== */
.rtc { --acc: #22a873; --rail: #2b6cb0; position: relative; padding: clamp(56px, 6vw, 84px) 0; background: linear-gradient(180deg, #f5f8f6 0%, #f5f8f6 60%, #fff 100%); color: #0b2d4f; }
.rtc--cold { --rail: #4fb3e6; }
.rtc--rent { --acc: #c8323a; --rail: #0b2d4f; }
.rtc-head { text-align: center; }
.rtc-head .eyebrow { justify-content: center; }
.rtc-head h2 { margin: 12px auto 0; max-width: 820px; color: #0b2d4f; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.rtc-track { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) minmax(150px, 220px); align-items: center; gap: clamp(14px, 2vw, 28px); margin-top: clamp(36px, 5vw, 64px); padding: clamp(26px, 3vw, 40px); border-radius: 26px; background: #fff; border: 1px solid rgba(11, 45, 79, .08); box-shadow: 0 18px 36px -24px rgba(11, 45, 79, .35); }
.rtc-end { display: grid; gap: 4px; }
.rtc-end--b { text-align: right; }
.rtc-end small { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.rtc-end b { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.15; }
.rtc-end span { color: #4a5d72; font-size: .9rem; }
.rtc-line { position: relative; height: 130px; }
.rtc-rail { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: rgba(11, 45, 79, .08); overflow: hidden; }
.rtc-flow { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--rail) 0 14px, transparent 14px 26px); opacity: .55; animation: rtc-flow 1.2s linear infinite; }
@keyframes rtc-flow { to { transform: translateX(26px); } }
.rtc-rail::before, .rtc-rail::after { content: ""; position: absolute; top: 0; bottom: 0; width: 26px; z-index: 1; }
.rtc-rail::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.rtc-rail::after { right: 0; background: linear-gradient(-90deg, #fff, transparent); }
.rtc-border { position: absolute; left: var(--pos); top: 8px; bottom: 8px; width: 0; border-left: 2px dashed rgba(11, 45, 79, .2); }
.rtc-border em { position: absolute; top: -2px; font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .1em; color: rgba(11, 45, 79, .4); }
.rtc-border em:first-child { right: 8px; }
.rtc-border em:last-child { left: 8px; }
.rtc-stop { position: absolute; left: var(--pos); top: 50%; display: grid; justify-items: center; transform: translate(-50%, -7px); }
.rtc-stop i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--rail); animation: rtc-hit 7s ease-out var(--sd) infinite; }
.rtc-stop b { position: absolute; top: 26px; white-space: nowrap; font-size: .8rem; font-weight: 700; color: #0b2d4f; }
@keyframes rtc-hit { 0% { background: var(--acc); border-color: var(--acc); box-shadow: 0 0 0 0 rgba(34, 168, 115, .45); } 12% { box-shadow: 0 0 0 12px rgba(34, 168, 115, 0); } 30%, 100% { background: #fff; border-color: var(--rail); box-shadow: none; } }
.rtc-rider { position: absolute; top: 50%; left: 0; display: grid; justify-items: center; width: 52px; margin-left: -26px; transform: translateY(-100%); color: #0b2d4f; animation: rtc-ride 7s linear infinite; }
.rtc--rent .rtc-rider { color: #c8323a; }
.rtc-rider svg { width: 52px; height: 30px; display: block; margin-bottom: 4px; }
@keyframes rtc-ride { 0% { left: 0; opacity: 0; } 4% { opacity: 1; } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.rtc-chip { margin-bottom: 6px; padding: 4px 10px; border-radius: 999px; background: #0b2d4f; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.rtc--cold .rtc-chip { background: #4fb3e6; }
.rtc--urgent .rtc-chip { background: #c8323a; animation: cvb-blink 1.2s ease-in-out infinite; }
.rtc-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px clamp(24px, 4vw, 64px); margin: 28px 0 0; }
.rtc-facts div { display: grid; gap: 2px; text-align: center; }
.rtc-facts dt { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(11, 45, 79, .45); }
.rtc-facts dd { margin: 0; font-weight: 700; color: #0b2d4f; }
.rtc-facts dd a { color: inherit; }

.rtb { padding: clamp(56px, 6vw, 88px) 0; background: #fff; }
.rtb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.rtb-txt h2 { margin-top: 12px; color: #0b2d4f; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.rtb-checks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.rtb-checks li { display: flex; align-items: center; gap: 14px; font-weight: 600; color: #0b2d4f; }
.rtb-checks li i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(34, 168, 115, .12); color: #22a873; }
.rtb--rent .rtb-checks li i { background: rgba(200, 50, 58, .1); color: #c8323a; }
.rtb-checks svg { width: 15px; height: 15px; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rtb-checks.a-in svg { animation: fl-draw .5s ease var(--cd) forwards; }
.rtb-ticket { position: relative; border-radius: 22px; background: #f5f8f6; border: 1px solid rgba(11, 45, 79, .07); }
.rtb-th { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px 16px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue, #2b6cb0); }
.rtb-th b { color: rgba(11, 45, 79, .4); }
.rtb-ticket ol { list-style: none; margin: 0; padding: 0 28px; }
.rtb-ticket li { display: grid; grid-template-columns: 32px auto 1fr; align-items: end; gap: 12px; padding: 14px 0; }
.rtb-ticket li span { font-size: .8rem; font-weight: 700; color: #22a873; letter-spacing: .08em; }
.rtb--rent .rtb-ticket li span { color: #c8323a; }
.rtb-ticket li b { color: #0b2d4f; }
.rtb-ticket li em { height: 1px; margin-bottom: 6px; background: rgba(11, 45, 79, .25); transform: scaleX(0); transform-origin: left; }
.rtb-ticket.a-in li em { animation: rt-bar .7s cubic-bezier(.22, 1, .36, 1) var(--cd) forwards; }
.rtb-tear { position: relative; height: 24px; margin-top: 8px; }
.rtb-tear::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; border-top: 2px dashed rgba(11, 45, 79, .15); }
.rtb-tear::after { content: ""; position: absolute; inset: 0 -1px; background: radial-gradient(circle at 0 50%, #fff 11px, transparent 12px), radial-gradient(circle at 100% 50%, #fff 11px, transparent 12px); }
.rtb-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px 28px 26px; }
.rtb-foot p { margin: 0; color: #4a5d72; font-size: .92rem; }
.rtb-btn { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 6px 0 20px; border-radius: 999px; background: #0b2d4f; color: #fff; font-weight: 700; text-decoration: none; transition: background-color .3s ease; }
.rtb-btn i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #22a873; transition: transform .3s ease; }
.rtb--rent .rtb-btn i { background: #c8323a; }
.rtb-btn i svg { width: 16px; height: 16px; }
.rtb-btn:hover { background: #12406d; }
.rtb-btn:hover i { transform: rotate(45deg); }
.rtb-btn--call { padding: 0 22px; background: #c8323a; }
.rtb-btn--call:hover { background: #a82830; }

@media (max-width: 900px) {
  .rtc-track { grid-template-columns: 1fr 1fr; }
  .rtc-line { grid-column: 1 / -1; grid-row: 2; }
  .rtc-end--b { grid-row: 1; grid-column: 2; }
  .rtb-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .rtc-stop b { font-size: .7rem; }
  .rtc-border em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rtc-flow, .rtc-stop i, .rtc-chip { animation: none !important; }
  .rtc-rider { animation: none !important; left: 50%; }
  .rtb-checks svg { stroke-dashoffset: 0 !important; animation: none !important; }
  .rtb-ticket li em { transform: none !important; animation: none !important; }
}
/* lane: bigger, calmer presence */
.rtc-line { height: 180px; }
.rtc-rail { height: 6px; margin-top: -3px; }
.rtc-stop { transform: translate(-50%, -9px); }
.rtc-stop i { width: 18px; height: 18px; }
.rtc-stop b { top: 34px; font-size: .9rem; }
.rtc-rider { width: 76px; margin-left: -38px; }
.rtc-rider svg { width: 76px; height: 44px; margin-bottom: 8px; }
.rtc-chip { font-size: .76rem; padding: 5px 12px; }
.rtc-border em { font-size: .8rem; }
.rtc-end b { font-size: clamp(1.5rem, 2.2vw, 2rem); }
/* eyebrow outside theme-pro (rental route page) */
.rtc .eyebrow, .rtb .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #2b6cb0; }
.rtc .eyebrow::before, .rtb .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #22a873, #2b6cb0); }
.rtc--rent .eyebrow, .rtb--rent .eyebrow { color: #c8323a; }
.rtc--rent .eyebrow::before, .rtb--rent .eyebrow::before { background: #c8323a; }

/* ===== Certifications: certificate cards ===== */
.ce { padding: clamp(56px, 6vw, 80px) 0; background: linear-gradient(180deg, #f5f8f6 0%, #f5f8f6 60%, #fff 100%); color: #0b2d4f; }
.ce-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.ce-head h2 { margin-top: 12px; color: #0b2d4f; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.ce-also { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ce-also li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(11, 45, 79, .08); font-size: .84rem; font-weight: 600; }
.ce-also i { width: 8px; height: 8px; border-radius: 50%; background: #22a873; }
.ce-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(28px, 3.5vw, 44px); perspective: 1200px; }
.ce-card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 34px); border-radius: 22px; background: #fff; border: 1px solid rgba(11, 45, 79, .08); box-shadow: 0 18px 36px -24px rgba(11, 45, 79, .35); overflow: hidden; isolation: isolate; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease; }
.ce-card.is-tilt { transition: transform .1s linear, box-shadow .5s ease; box-shadow: 0 28px 48px -26px rgba(11, 45, 79, .45); }
.ce-card::before { content: ""; position: absolute; inset: 10px; z-index: -1; border-radius: 15px; border: 1px solid rgba(11, 45, 79, .07); pointer-events: none; }
.ce-guil { position: absolute; right: -90px; top: -90px; z-index: -1; width: 300px; height: 300px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(34, 168, 115, .09) 0 1px, transparent 1px 7px); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.ce-top { display: flex; justify-content: space-between; align-items: flex-start; }
.ce-logo { display: grid; place-items: center; width: 92px; height: 64px; padding: 8px; border-radius: 14px; background: #f5f8f6; }
.ce-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ce-seal { width: 84px; height: 84px; margin: -6px -6px 0 0; }
.ce-s1 { fill: none; stroke: rgba(34, 168, 115, .35); stroke-width: 1.5; stroke-dasharray: 2 3; }
.ce-s2 { fill: #22a873; }
.ce-ring { transform-origin: 50px 50px; animation: ce-spin 24s linear infinite; }
.ce-ring text { font-size: 8.4px; font-weight: 800; letter-spacing: .12em; fill: #22a873; }
@keyframes ce-spin { to { transform: rotate(360deg); } }
.ce-tick { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ce-grid.a-in .ce-tick { animation: fl-draw .6s ease calc(var(--ad, 0s) + .6s) forwards; }
.ce-k { margin-top: 22px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #2b6cb0; }
.ce-card h3 { margin: 6px 0 8px; font-size: clamp(1.35rem, 1.8vw, 1.65rem); color: #0b2d4f; }
.ce-card p { margin: 0; color: #4a5d72; font-size: .95rem; line-height: 1.55; }
.ce-you { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: #f5f8f6; border-left: 3px solid #22a873; font-size: .9rem; font-weight: 600; line-height: 1.5; color: #0b2d4f; }
.ce-you small { display: block; margin-bottom: 2px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #22a873; }
.ce-verify { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; font-size: .9rem; font-weight: 700; color: #0b2d4f; text-decoration: none; }
.ce-verify svg { width: 16px; height: 16px; transition: transform .3s ease; }
.ce-verify:hover { color: #22a873; }
.ce-verify:hover svg { transform: translate(2px, -2px); }
.ce-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .55), transparent 45%), linear-gradient(115deg, transparent 30%, rgba(143, 220, 255, .12) 45%, rgba(34, 168, 115, .12) 55%, transparent 70%); mix-blend-mode: soft-light; transition: opacity .4s ease; }
.ce-card.is-tilt .ce-sheen { opacity: 1; }

/* Tender pack */
.cet { padding: clamp(56px, 6vw, 88px) 0; background: #fff; overflow: hidden; }
.cet-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.cet-txt h2 { margin-top: 12px; color: #0b2d4f; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.cet-txt .lead { margin-top: 14px; }
.cet-btn { margin-top: 26px; }
.cet-stack { position: relative; height: 420px; }
.cet-doc { position: absolute; left: 50%; top: 50%; width: 260px; height: 340px; margin: -170px 0 0 -130px; padding: 22px; border-radius: 14px; background: #fff; border: 1px solid rgba(11, 45, 79, .1); box-shadow: 0 16px 30px -20px rgba(11, 45, 79, .4); display: flex; flex-direction: column; gap: 18px; transform: rotate(0deg); transition: transform 1s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * .08s); z-index: calc(10 - var(--i)); }
.cet-stack.a-in .cet-doc { transform: translateX(calc((var(--i) - 2) * 62px)) translateY(calc((var(--i) - 2) * (var(--i) - 2) * 6px)) rotate(calc((var(--i) - 2) * 7deg)); }
.cet-stack.a-in:hover .cet-doc { transform: translateX(calc((var(--i) - 2) * 82px)) translateY(calc((var(--i) - 2) * (var(--i) - 2) * 9px - 6px)) rotate(calc((var(--i) - 2) * 9deg)); transition-delay: 0s; }
.cet-dh { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 2px solid #0b2d4f; }
.cet-dh b { font-size: 1rem; color: #0b2d4f; }
.cet-dh small { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #22a873; }
.cet-lines { display: grid; gap: 10px; }
.cet-lines i { height: 6px; border-radius: 4px; background: rgba(11, 45, 79, .08); }
.cet-lines i:nth-child(2) { width: 85%; }
.cet-lines i:nth-child(3) { width: 92%; }
.cet-lines i:nth-child(4) { width: 60%; }
.cet-n { margin-top: auto; align-self: flex-end; font-size: 2.4rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(11, 45, 79, .2); }
.cet-stamp { position: absolute; right: 6%; bottom: 4%; z-index: 20; padding: 9px 18px; border: 2.5px solid #22a873; border-radius: 10px; background: rgba(255, 255, 255, .85); color: #22a873; font-weight: 800; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: rotate(-8deg) scale(1.6); }
.cet-stack.a-in .cet-stamp { animation: flc-stamp .5s cubic-bezier(.34, 1.56, .64, 1) 1.1s forwards; }
.flc-stamp, .cet-stamp { will-change: transform; }

@media (max-width: 900px) {
  .ce-grid, .cet-grid { grid-template-columns: 1fr; }
  .cet-stack { height: 380px; }
  .cet-doc { width: 200px; height: 270px; margin: -135px 0 0 -100px; }
  .cet-stack.a-in .cet-doc, .cet-stack.a-in:hover .cet-doc { transform: translateX(calc((var(--i) - 2) * 30px)) rotate(calc((var(--i) - 2) * 6deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .ce-ring { animation: none; }
  .ce-tick { stroke-dashoffset: 0 !important; animation: none !important; }
  .cet-stamp { opacity: 1 !important; transform: rotate(-8deg) !important; animation: none !important; }
}
/* tender pack: cascade so every document header stays readable */
.cet-stack { height: 470px; }
.cet-doc { width: 300px; height: 230px; margin: -115px 0 0 -150px; z-index: calc(var(--i) + 1); gap: 14px; }
.cet-stack.a-in .cet-doc { transform: translate(calc((var(--i) - 2) * 24px), calc((var(--i) - 2) * 50px)) rotate(calc((var(--i) - 2) * -1.5deg)); }
.cet-stack.a-in:hover .cet-doc { transform: translate(calc((var(--i) - 2) * 34px), calc((var(--i) - 2) * 56px)) rotate(calc((var(--i) - 2) * -2.5deg)); }
.cet-n { position: absolute; right: 20px; top: 18px; margin: 0; font-size: 1.6rem; }
@media (max-width: 900px) {
  .cet-stack { height: 420px; }
  .cet-doc { width: 240px; height: 200px; margin: -100px 0 0 -120px; }
  .cet-stack.a-in .cet-doc, .cet-stack.a-in:hover .cet-doc { transform: translate(calc((var(--i) - 2) * 10px), calc((var(--i) - 2) * 44px)) rotate(calc((var(--i) - 2) * -1.5deg)); }
}

/* ===== About: story, mission/vision, principles ===== */
.abs { padding: clamp(56px, 6vw, 88px) 0; background: linear-gradient(180deg, #f5f8f6 0%, #f5f8f6 60%, #fff 100%); color: #0b2d4f; }
.abs-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.abs-side h2 { margin-top: 12px; color: #0b2d4f; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.abs-stats { margin: 30px 0 0; display: grid; gap: 4px; }
.abs-stats div { padding: 16px 0; border-top: 1px solid rgba(11, 45, 79, .1); }
.abs-stats dt { display: flex; align-items: baseline; gap: 10px; }
.abs-stats b { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 800; line-height: 1; color: #22a873; font-variant-numeric: tabular-nums; }
.abs-stats dt span { font-weight: 700; color: #0b2d4f; }
.abs-stats dd { margin: 4px 0 0; font-size: .9rem; color: #4a5d72; }
.abs-text p { margin: 0 0 .9em; font-size: clamp(1.25rem, 1.75vw, 1.6rem); font-weight: 600; line-height: 1.5; letter-spacing: -.005em; }
.abs-text .w { color: rgba(11, 45, 79, .16); transition: color .5s ease; }
.abs-text .w.on { color: #0b2d4f; }
.abs-text .w.hl { position: relative; }
.abs-text .w.hl.on { color: #1d8f62; }
.abs-text .w.hl::after { content: ""; position: absolute; left: -2px; right: -4px; bottom: .08em; height: .32em; z-index: -1; border-radius: 3px; background: rgba(34, 168, 115, .18); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.abs-text .w.hl.on::after { transform: scaleX(1); }
.abs-text { position: relative; z-index: 0; }

.abmv { padding: clamp(40px, 5vw, 72px) 0; background: #fff; }
.abmv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.abmv-card { position: relative; min-height: 460px; display: flex; align-items: flex-end; border-radius: 26px; overflow: hidden; isolation: isolate; }
.abmv-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s cubic-bezier(.22, 1, .36, 1); }
.abmv-card.a-in > img { transform: scale(1); }
.abmv-card--mission { color: #fff; }
.abmv-card--mission::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7, 28, 51, .94) 0%, rgba(7, 28, 51, .7) 45%, rgba(7, 28, 51, .15) 100%); }
.abmv-card--vision { background: #eef6f1; color: #0b2d4f; }
.abmv-in { padding: clamp(26px, 3vw, 44px); }
.abmv-k { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7fe0b5; }
.abmv-k::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; }
.abmv-card--vision .abmv-k { color: #1d8f62; }
.abmv-card h3 { margin: 12px 0 10px; font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: inherit; }
.abmv-card p { margin: 0; max-width: 560px; font-size: 1rem; line-height: 1.6; opacity: .85; }
.abmv-euro { position: absolute; left: clamp(20px, 3vw, 40px); top: clamp(18px, 3vw, 36px); width: min(78%, 460px); overflow: visible; }
.abmv-euro text { font-size: 112px; font-weight: 800; letter-spacing: -.02em; fill: rgba(34, 168, 115, 0); stroke: rgba(34, 168, 115, .55); stroke-width: 1.4; stroke-dasharray: 600; stroke-dashoffset: 600; }
.abmv-card.a-in .abmv-euro text { animation: abmv-draw 2.4s cubic-bezier(.65, 0, .35, 1) .3s forwards; }
@keyframes abmv-draw { 70% { fill: rgba(34, 168, 115, 0); } to { stroke-dashoffset: 0; fill: rgba(34, 168, 115, .14); } }
.abmv-lg { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; padding: 6px 16px 6px 6px; border-radius: 999px; background: #fff; font-size: .86rem; font-weight: 700; }
.abmv-lg img { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; }

.abv { padding: clamp(56px, 6vw, 88px) 0; background: #fff; }
.abv-head h2 { margin-top: 12px; color: #0b2d4f; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.abv-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); margin-top: clamp(28px, 3.5vw, 44px); }
.abv-i { position: relative; padding-top: 26px; }
.abv-i::before, .abv-i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.abv-i::before { background: rgba(11, 45, 79, .1); }
.abv-i::after { background: linear-gradient(90deg, #22a873, #2b6cb0); transform: scaleX(0); transform-origin: left; }
.abv-row.a-in .abv-i::after { animation: rt-bar .9s cubic-bezier(.22, 1, .36, 1) var(--vd) forwards; }
.abv-n { position: absolute; right: 0; top: 18px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: rgba(11, 45, 79, .35); }
.abv-i svg { width: 34px; height: 34px; fill: none; stroke: #22a873; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.abv-i svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.abv-row.a-in .abv-i svg path { animation: fl-draw 1s ease calc(var(--vd) + .3s) forwards; }
.abv-i h3 { margin: 16px 0 6px; font-size: 1.15rem; color: #0b2d4f; }
.abv-i p { margin: 0; color: #4a5d72; font-size: .95rem; }

@media (max-width: 900px) {
  .abs-grid, .abmv-grid { grid-template-columns: 1fr; }
  .abmv-card { min-height: 400px; }
  .abv-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .abs-text .w { color: #0b2d4f; }
  .abs-text .w.hl { color: #1d8f62; }
  .abs-text .w.hl::after { transform: none; }
  .abmv-euro text { stroke-dashoffset: 0; fill: rgba(34, 168, 115, .14); animation: none !important; }
  .abv-i svg path { stroke-dashoffset: 0 !important; animation: none !important; }
}
.abmv-card { min-height: 500px; }
.abmv-euro { width: min(62%, 360px); }

/* ===== News overview: featured story + editorial list ===== */
.nwl { padding: clamp(56px, 6vw, 84px) 0; background: linear-gradient(180deg, #f5f8f6 0%, #f5f8f6 55%, #fff 100%); color: #0b2d4f; }
.nwl-head h2 { margin-top: 12px; color: #0b2d4f; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.nwl-feat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-top: clamp(26px, 3vw, 40px); border-radius: 26px; overflow: hidden; background: #fff; border: 1px solid rgba(11, 45, 79, .08); box-shadow: 0 18px 36px -24px rgba(11, 45, 79, .4); color: inherit; text-decoration: none; }
.nwl-img { position: relative; min-height: 420px; overflow: hidden; background: #0b2d4f; }
.nwl-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.nwl-feat:hover .nwl-img img { transform: scale(1.04); }
.nwl-new { position: absolute; left: 22px; top: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #22a873; color: #fff; font-style: normal; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 0 0 0 rgba(34, 168, 115, .5); animation: nwl-ping 2.4s ease-out infinite; }
@keyframes nwl-ping { 0% { box-shadow: 0 0 0 0 rgba(34, 168, 115, .5); } 70%, 100% { box-shadow: 0 0 0 14px rgba(34, 168, 115, 0); } }
.nwl-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 3vw, 48px); }
.nwl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .85rem; font-weight: 600; color: rgba(11, 45, 79, .55); }
.nwl-cat { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(34, 168, 115, .12); color: #1d8f62; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nwl-feat h3 { margin: 14px 0 10px; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; color: #0b2d4f; }
.nwl-feat p { margin: 0; color: #4a5d72; line-height: 1.6; }
.nwl-btn { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; height: 48px; margin-top: 24px; padding: 0 6px 0 20px; border-radius: 999px; background: #0b2d4f; color: #fff; font-weight: 700; transition: background-color .3s ease; }
.nwl-btn i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #22a873; transition: transform .3s ease; }
.nwl-btn i svg { width: 16px; height: 16px; }
.nwl-feat:hover .nwl-btn { background: #12406d; }
.nwl-feat:hover .nwl-btn i { transform: rotate(45deg); }
.nwl-list { margin-top: clamp(22px, 3vw, 36px); border-top: 1px solid rgba(11, 45, 79, .1); }
.nwl-row { position: relative; display: grid; grid-template-columns: 110px 170px minmax(0, 1fr) 44px; align-items: center; gap: 20px; padding: 22px 8px; border-bottom: 1px solid rgba(11, 45, 79, .1); color: inherit; text-decoration: none; transition: padding .4s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; }
.nwl-row::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: linear-gradient(90deg, #22a873, #2b6cb0); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.nwl-row:hover { padding-left: 18px; background: rgba(255, 255, 255, .7); }
.nwl-row:hover::before { transform: scaleX(1); }
.nwl-row time { display: grid; font-size: .82rem; font-weight: 600; color: rgba(11, 45, 79, .5); }
.nwl-row time b { font-size: 1.9rem; font-weight: 800; line-height: 1; color: #0b2d4f; }
.nwl-row .nwl-cat { justify-self: start; }
.nwl-t b { display: block; font-size: 1.15rem; color: #0b2d4f; }
.nwl-t small { display: block; margin-top: 4px; font-size: .92rem; color: #4a5d72; }
.nwl-go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(11, 45, 79, .15); color: #0b2d4f; transition: background-color .3s ease, color .3s ease, transform .3s ease, border-color .3s ease; }
.nwl-go svg { width: 16px; height: 16px; }
.nwl-row:hover .nwl-go { background: #22a873; border-color: #22a873; color: #fff; transform: rotate(45deg); }

/* Article extras: spec strip + photo gallery */
.nws { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; }
.nws div { padding: 16px 18px; border-radius: 16px; background: #f5f8f6; border: 1px solid rgba(11, 45, 79, .07); }
.nws dt { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; line-height: 1.1; color: #22a873; }
.nws dd { margin: 4px 0 0; font-size: .82rem; font-weight: 600; color: #4a5d72; }
.nwg { padding: 0 0 clamp(48px, 5vw, 72px); }
.nwg-grid { display: grid; grid-template-columns: 1.15fr 1.4fr .85fr; gap: 14px; }
.nwg figure { position: relative; margin: 0; height: clamp(300px, 34vw, 440px); border-radius: 22px; overflow: hidden; background: #0b2d4f; }
.nwg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.nwg figure:hover img { transform: scale(1.05); }
.nwg figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; background: linear-gradient(0deg, rgba(7, 28, 51, .75), transparent); color: #fff; font-size: .88rem; font-weight: 600; }

@media (max-width: 900px) {
  .nwl-feat { grid-template-columns: 1fr; }
  .nwl-img { min-height: 260px; }
  .nwl-row { grid-template-columns: 70px minmax(0, 1fr) 40px; gap: 14px; }
  .nwl-row .nwl-cat { display: none; }
  .nwl-row time b { font-size: 1.5rem; }
  .nws { grid-template-columns: 1fr; }
  .nwg-grid { grid-template-columns: 1fr; }
  .nwg figure { height: 280px; }
}
@media (prefers-reduced-motion: reduce) { .nwl-new { animation: none; } }
/* news overview fits one screen */
.nwl { padding: clamp(44px, 4.5vw, 60px) 0; }
.nwl-img { min-height: 330px; }
.nwl-img img { object-position: 50% 45%; }
.nwl-feat { margin-top: 22px; }
.nwl-list { margin-top: 18px; }
.nwl-row { padding: 14px 8px; }
.nwl-row time b { font-size: 1.6rem; }
.nwl-body { padding: clamp(24px, 2.4vw, 34px) clamp(24px, 2.6vw, 40px); }
.nwl-feat h3 { font-size: clamp(1.35rem, 1.8vw, 1.7rem); margin: 10px 0 8px; }
.nwl-btn { margin-top: 18px; }
.nwl-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nwl-row { padding: 10px 8px; }
@media (max-width: 900px) { .nwl-t small { white-space: normal; } }
.nwg figure:nth-child(2) img { object-position: 25% 30%; }
.nwg figure:nth-child(3) img { object-position: 70% 15%; }

/* ===== Article pages ===== */
.ar-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 200; height: 3px; pointer-events: none; }
.ar-progress i { display: block; height: 100%; background: linear-gradient(90deg, #22a873, #2b6cb0); transform: scaleX(var(--p, 0)); transform-origin: left; }
.arx { padding: clamp(48px, 5.5vw, 80px) 0; background: #fff; color: #0b2d4f; }
.arx-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.arx-side { position: relative; }
.arx-short { padding: clamp(22px, 2.4vw, 30px); border-radius: 22px; background: #f5f8f6; border: 1px solid rgba(11, 45, 79, .07); }
.arx-k { display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #2b6cb0; }
.arx-k::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #22a873, #2b6cb0); }
.arx-short ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.arx-short li { display: flex; gap: 12px; font-weight: 600; line-height: 1.45; }
.arx-short li i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%; background: #22a873; color: #fff; }
.arx-short li svg { width: 14px; height: 14px; stroke-dasharray: 1; stroke-dashoffset: 1; }
.arx-short.a-in li svg { animation: fl-draw .5s ease var(--cd) forwards; }
.arx-meta { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px dashed rgba(11, 45, 79, .15); font-size: .85rem; font-weight: 600; color: rgba(11, 45, 79, .55); }
.arx-copy { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid rgba(11, 45, 79, .15); background: #fff; color: #0b2d4f; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; transition: border-color .3s ease, color .3s ease; }
.arx-copy svg { width: 16px; height: 16px; }
.arx-copy:hover, .arx-copy.is-done { border-color: #22a873; color: #1d8f62; }
.arx-body { max-width: 720px; }
.arx-body p { margin: 0 0 1.3em; font-size: clamp(1.05rem, 1.2vw, 1.18rem); line-height: 1.8; color: #2c3e52; }
.arx-body p.arx-first::first-letter { float: left; margin: .06em .12em 0 0; font-size: 3.6em; font-weight: 800; line-height: .8; color: #22a873; }
.arx-quote { position: relative; margin: 36px 0 0; padding: 26px 28px 26px 70px; border-radius: 20px; background: linear-gradient(135deg, rgba(34, 168, 115, .1), rgba(43, 108, 176, .08)); font-size: 1.15rem; font-weight: 600; line-height: 1.6; color: #0b2d4f; }
.arx-quote span { position: absolute; left: 22px; top: 6px; font-size: 4.2rem; font-weight: 800; line-height: 1; color: #22a873; }
.arb { background: #f5f8f6; }
.arb .rtb-ticket { background: #fff; }
.arb .rtb-tear::after { background: radial-gradient(circle at 0 50%, #f5f8f6 11px, transparent 12px), radial-gradient(circle at 100% 50%, #f5f8f6 11px, transparent 12px); }
.arb-sub { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.arb-sub li { display: flex; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(11, 45, 79, .08); }
.arb-sub li:last-child { border-bottom: 0; }
.arb-sub li > span { flex: none; padding-top: 3px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: #22a873; }
.arb-sub b { color: #0b2d4f; font-size: 1.05rem; }
.arb-sub p { margin: 3px 0 0; color: #4a5d72; font-size: .95rem; }
.arm { padding: clamp(44px, 5vw, 72px) 0; background: #fff; }
.arm-head { display: flex; justify-content: space-between; align-items: center; }
.arm-all { font-weight: 700; color: #0b2d4f; text-decoration: none; }
.arm-all:hover { color: #22a873; }
.arm .nwl-list { margin-top: 18px; }
@media (max-width: 900px) {
  .arx-grid { grid-template-columns: 1fr; }
  .arx-side { position: static; }
}
@media (prefers-reduced-motion: reduce) { .arx-short li svg { stroke-dashoffset: 0 !important; animation: none !important; } }

/* ===== Contact: channel picker + business card ===== */
.ctx { --acc: #22a873; padding: clamp(52px, 5.5vw, 80px) 0; background: linear-gradient(180deg, #f5f8f6 0%, #f5f8f6 60%, #fff 100%); color: #0b2d4f; }
.ctx--rent { --acc: #c8323a; }
.ctx .eyebrow, .ctb .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #2b6cb0; }
.ctx .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #22a873, #2b6cb0); }
.ctx-head h2 { margin-top: 12px; color: #0b2d4f; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.ctx-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(26px, 3vw, 40px); align-items: stretch; }
.ctx-list { display: grid; gap: 10px; }
.ctx-i { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 36px; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(11, 45, 79, .08); background: #fff; color: #0b2d4f; font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: border-color .3s ease, box-shadow .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
.ctx-i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--acc); transform: scaleY(0); transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.ctx-i:hover { transform: translateX(4px); }
.ctx-i.is-on { border-color: transparent; box-shadow: 0 16px 32px -22px rgba(11, 45, 79, .45); }
.ctx-i.is-on::before { transform: scaleY(1); }
.ctx-i > i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #f1f5f3; color: #0b2d4f; transition: background-color .3s ease, color .3s ease; }
.ctx-i > i svg { width: 24px; height: 24px; }
.ctx-i.is-on > i { background: var(--acc); color: #fff; }
.ctx-i--urgent.is-on > i { background: #c8323a; }
.ctx-i--chat.is-on > i { background: #25d366; }
.ctx-i b { display: block; font-size: 1.05rem; }
.ctx-i small { display: block; margin-top: 2px; font-size: .86rem; color: #4a5d72; }
.ctx-i em { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: rgba(11, 45, 79, .35); transition: transform .3s ease, color .3s ease; }
.ctx-i em svg { width: 16px; height: 16px; }
.ctx-i.is-on em { color: #0b2d4f; transform: rotate(45deg); }
.ctx-panel { position: relative; display: grid; border-radius: 24px; background: #fff; border: 1px solid rgba(11, 45, 79, .08); box-shadow: 0 18px 36px -24px rgba(11, 45, 79, .35); overflow: hidden; }
.ctx-panel::before { content: ""; position: absolute; right: -120px; top: -120px; width: 340px; height: 340px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(34, 168, 115, .08) 0 1px, transparent 1px 8px); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); pointer-events: none; }
.ctx-card { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 3vw, 44px); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, visibility 0s .3s; }
.ctx-card.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .1s, transform .6s cubic-bezier(.22, 1, .36, 1) .1s; }
.ctx-tag { padding: 5px 12px; border-radius: 999px; background: rgba(34, 168, 115, .12); color: #1d8f62; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ctx-tag--red { background: rgba(200, 50, 58, .1); color: #c8323a; }
.ctx-tag--wa { background: rgba(37, 211, 102, .14); color: #128c4a; }
.ctx-card h3 { margin: 14px 0 8px; font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: #0b2d4f; }
.ctx-card p { margin: 0; max-width: 520px; color: #4a5d72; line-height: 1.6; }
.ctx-big { display: inline-flex; align-items: center; gap: 18px; margin-top: 28px; padding: 14px 28px 14px 14px; border-radius: 999px; color: #fff; text-decoration: none; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: .01em; }
.ctx-big--red { background: #c8323a; box-shadow: 0 18px 34px -18px rgba(200, 50, 58, .7); transition: background-color .3s ease; }
.ctx-big--red:hover { background: #a82830; }
.ctx-big small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.ctx-ring { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.ctx-ring svg { width: 26px; height: 26px; }
.ctx-ring::before, .ctx-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); animation: ctx-ring 2s ease-out infinite; }
.ctx-ring::after { animation-delay: 1s; }
@keyframes ctx-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.ctx-steps { list-style: none; margin: 22px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ctx-steps li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: #f5f8f6; font-size: .9rem; font-weight: 600; }
.ctx-steps span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0b2d4f; color: #fff; font-size: .72rem; font-weight: 700; }
.ctx-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 22px; }
.ctx-line { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(11, 45, 79, .1); color: #0b2d4f; text-decoration: none; font-weight: 700; transition: border-color .3s ease, background-color .3s ease; }
.ctx-line i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #f1f5f3; }
.ctx-line i svg { width: 20px; height: 20px; }
.ctx-line--wa i { background: #25d366; color: #fff; }
.ctx-line small { display: block; font-size: .72rem; font-weight: 600; color: #4a5d72; }
.ctx-line:hover { border-color: #22a873; background: #f5f8f6; }
.ctx-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0 22px; }
.ctx-mail a { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 800; color: #0b2d4f; text-decoration: none; }
.ctx-mail a:hover { color: #22a873; }
.ctx-mail .arx-copy { margin-top: 0; }
.ctx-card .rtb-btn { margin-top: auto; }
.ctx-card--quote .rtb-btn, .ctx-card--mail .rtb-btn { margin-top: 0; }
.ctx--rent .rtb-btn i { background: #c8323a; }

.ctb { padding: clamp(48px, 5vw, 80px) 0; background: #fff; }
.ctb-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; perspective: 1200px; }
.ctb-card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%; position: relative; padding: clamp(28px, 3vw, 44px); border-radius: 26px; background: #0b2d4f; color: #fff; overflow: hidden; isolation: isolate; box-shadow: 0 30px 50px -30px rgba(11, 45, 79, .7); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.ctb-card.is-tilt { transition: transform .1s linear; }
.ctb-card .ce-guil { background: repeating-radial-gradient(circle, rgba(127, 224, 181, .12) 0 1px, transparent 1px 7px); }
.ctb-brand { display: flex; align-items: center; gap: 14px; }
.ctb-brand img { width: 52px; height: 52px; }
.ctb-brand b { font-size: 1.6rem; }
.ctb-brand small { font-size: .95rem; opacity: .7; }
.ctb-sub { margin: 10px 0 0; color: rgba(255, 255, 255, .65); }
.ctb-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
.ctb-dl dt { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7fe0b5; }
.ctb-dl dd { margin: 6px 0 0; font-weight: 600; line-height: 1.6; }
.ctb-dl a { color: #fff; text-decoration: none; }
.ctb-dl a:hover { color: #7fe0b5; }
.ctb-badges { margin-top: 26px; }
.ctb-badges .mbr a { color: #fff; }
.ctb-card .ce-sheen { mix-blend-mode: overlay; }
.ctb-map { position: relative; }
.ctb-map svg { display: block; width: 100%; max-height: 520px; overflow: visible; }
.ctb-pin { position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: rgba(11, 45, 79, .6); }
.ctb-pin::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #22a873; box-shadow: 0 0 0 3px rgba(34, 168, 115, .25); }
.ctb-map .cv-dots { stroke: rgba(34, 168, 115, .35); }

@media (max-width: 900px) {
  .ctx-grid, .ctb-grid { grid-template-columns: 1fr; }
  .ctx-lines, .ctb-dl { grid-template-columns: 1fr; }
  .ctb-map svg { max-height: 380px; }
}
@media (prefers-reduced-motion: reduce) { .ctx-ring::before, .ctx-ring::after { animation: none; opacity: 0; } }
/* chat card: one row per number with WhatsApp + call actions */
.ctx-lines { grid-template-columns: 1fr; gap: 10px; }
.ctx-line { justify-content: space-between; padding: 14px 14px 14px 20px; }
.ctx-line:hover { background: #fff; border-color: rgba(11, 45, 79, .1); }
.ctx-num { font-size: 1.25rem; font-weight: 800; }
.ctx-num small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #4a5d72; }
.ctx-acts { display: flex; gap: 8px; }
.ctx-act { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 12px; border-radius: 999px; background: #f1f5f3; color: #0b2d4f; font-size: .88rem; font-weight: 700; text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.ctx-act svg { width: 18px; height: 18px; }
.ctx-act:hover { background: #0b2d4f; color: #fff; }
.ctx-act--wa { background: #25d366; color: #fff; }
.ctx-act--wa:hover { background: #1ebe5a; color: #fff; }
@media (max-width: 480px) { .ctx-line { flex-wrap: wrap; gap: 10px; } .ctx-act span { display: none; } .ctx-act { padding: 0 12px; } }
/* business card: badges 2 + 1, third centered */
.ctb-badges .mbr { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 10px; }
.ctb-badges .mbr > a:nth-child(3) { grid-column: 1 / -1; justify-self: center; }
.ctb-muted { font-weight: 500; color: rgba(255, 255, 255, .6); font-size: .9rem; }
.ctb-pin { font-weight: 700; color: #0b2d4f; }
@media (max-width: 480px) { .ctb-badges .mbr { grid-template-columns: 1fr; } .ctb-badges .mbr > a:nth-child(3) { justify-self: start; } }
/* base city label on the dotted maps */
.cv-blabel rect { fill: #0b2d4f; }
.cv-blabel text { fill: #fff; font-size: 17px; font-weight: 700; text-anchor: middle; letter-spacing: .02em; }

/* ================= MOBILE PASS (must stay last) ================= */
@media (max-width: 1000px) {
  .kx-stage { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .so-grid { grid-template-columns: 1fr; }
  .flc-foot { justify-content: center; }
  .flc-card { overflow: hidden; }
  /* comfortable tap targets */
  .rel3 a { display: inline-flex; align-items: center; min-height: 40px; }
  .crumbs a { display: inline-block; padding: 8px 0; }
  .sit-more2, .arm-all, .x-head .more { display: inline-flex; align-items: center; min-height: 40px; }
  .ftr li a, .ftr nav a { display: inline-block; padding: 5px 0; }
  /* nothing below ~11.5px */
  .g-val small, .ph-label, .cvb-row--head, .ce-you small, .sit-cta small { font-size: .72rem; }
}
@media (max-width: 900px) {
  .need-tabs button:hover, .need-tabs button[aria-selected="true"] { transform: none; }
}
/* gate header: both brands + language switch fit on a phone */
@media (max-width: 520px) {
  .gate-hdr .wrap { gap: 10px; }
  .gate-brands { gap: 10px; min-width: 0; }
  .gate-brands .gb { gap: 6px; }
  .gate-brands img { width: 24px; height: 24px; }
  .gate-brands .brand-name { font-size: .82rem; white-space: nowrap; }
  .gate-hdr .lang a { width: 38px; }
}
/* gate roadside band: stacked card on phones */
@media (max-width: 640px) {
  .gate-rs.gate-ph { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; row-gap: 16px; padding: 22px 20px; }
  .ph-icon { width: 52px; height: 52px; align-self: start; }
  .ph-icon svg { width: 22px; height: 22px; }
  .ph-bg { width: 100%; opacity: .14; }
  .ph-bg::after, .ph-stripe { display: none; }
  .ph-txt { min-width: 0; }
  .ph-k { font-size: .7rem; letter-spacing: .16em; }
  .gate-ph h2 { font-size: 1.35rem; }
  .gate-ph p { font-size: .92rem; }
  .ph-act { grid-column: 1 / -1; }
  .ph-phones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ph-btn { justify-content: center; padding: 0 10px; font-size: .9rem; }
  .ph-btn--main { grid-column: 1 / -1; height: 50px; font-size: 1rem; }
}
/* never let an animating/decorative element widen the page on phones (prevents mobile zoom-out) */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
@media (max-width: 900px) {
  /* grid children must never grow past the column */
  .wrap > *, [class*="-grid"] > *, .why-l, .why-r { min-width: 0; }
  .mbr { flex-wrap: wrap; }
  .crumbs { align-items: center; }
  .crumbs a { padding: 8px 0; }
  /* "Zie ook": a clean stacked list */
  .rel3-in { flex-direction: column; align-items: stretch; gap: 6px; }
  .rel3 ul { flex-direction: column; align-items: stretch; gap: 0; }
  .rel3 li + li::before { display: none; }
  .rel3 li { border-top: 1px solid var(--line); }
  .rel3 li:first-child { border-top: 0; }
  .rel3 a { display: flex; justify-content: space-between; min-height: 48px; }
  .rel3 a svg { opacity: 1; transform: none; }
  /* "Wie doet wat": root, two companies side by side, then the services */
  .so-map { grid-template-columns: 1fr 1fr; }
  .so-root, .so-leaf { grid-column: 1 / -1; }
  .so-co { width: auto !important; max-width: none !important; min-width: 0; }
  .so-co small { letter-spacing: .06em; }
}
@media (max-width: 520px) {
  .why-badges .mbr { grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; }
  .why-badges .mbr a { min-width: 0; padding: 8px 10px 8px 8px; gap: 8px; }
  .why-badges .mbr a:nth-child(3) { justify-self: stretch; }
  .why-badges .mbr-logo { height: 36px; min-width: 36px; }
  .why-badges .mbr-logo img { max-width: 64px; max-height: 26px; }
  .why-badges .mbr span { min-width: 0; }
  .why-badges .mbr b { font-size: .88rem; }
  .why-badges .mbr small { font-size: .72rem; }
}
@media (max-width: 520px) {
  .cet-stack { height: 400px; }
  .cet-doc { width: min(270px, 74vw); height: 200px; margin: -100px 0 0 calc(min(270px, 74vw) / -2); padding: 18px; }
  .cet-stack.a-in .cet-doc, .cet-stack.a-in:hover .cet-doc { transform: translate(calc((var(--i) - 2) * 12px), calc((var(--i) - 2) * 44px)) rotate(calc((var(--i) - 2) * -1deg)); }
  .cet-dh b { padding-right: 44px; font-size: .95rem; }
  .cet-n { right: 16px; top: 16px; font-size: 1.4rem; }
  .cet-stamp { right: 4%; bottom: 2%; font-size: .78rem; padding: 7px 14px; }
}
@media (max-width: 640px) {
  .nwl-row { grid-template-columns: auto minmax(0, 1fr) 40px; grid-template-areas: "time cat go" "txt txt go"; column-gap: 12px; row-gap: 10px; padding: 20px 2px; align-items: center; }
  .nwl-row:hover { padding-left: 2px; }
  .nwl-row time { grid-area: time; display: flex; align-items: baseline; gap: 6px; }
  .nwl-row time b { font-size: 1.35rem; }
  .nwl-row .nwl-cat { grid-area: cat; }
  .nwl-row .nwl-t { grid-area: txt; }
  .nwl-row .nwl-go { grid-area: go; width: 40px; height: 40px; }
  .nws { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .nws div { padding: 12px 10px; border-radius: 12px; }
  .nws dt { font-size: 1.2rem; }
  .nws dd { font-size: .72rem; line-height: 1.3; }
}
@media (max-width: 640px) {
  .nwl-row .nwl-cat { display: inline-block; justify-self: start; }
  .nwl-t b { font-size: 1.05rem; line-height: 1.3; }
  .nwl-t small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; }
  .nwg figure { height: 240px; }
}
@media (max-width: 640px) {
  .abmv-card--mission { min-height: 440px; }
  .abmv-card--vision { min-height: 0; }
  .abmv-card--vision .abmv-in { padding-top: 116px; }
  .abmv-euro { width: min(70%, 260px); }
  .abmv-lg { font-size: .8rem; }
}
@media (max-width: 480px) {
  .ctb-badges .mbr { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ctb-badges .mbr > a { min-width: 0; padding: 8px 10px 8px 8px; gap: 8px; }
  .ctb-badges .mbr > a:nth-child(3) { justify-self: stretch; }
  .ctb-badges .mbr-logo { height: 34px; min-width: 34px; }
  .ctb-badges .mbr-logo img { max-width: 60px; max-height: 24px; }
  .ctb-badges .mbr span { min-width: 0; }
  .ctb-badges .mbr b { font-size: .85rem; }
  .ctb-badges .mbr small { font-size: .7rem; }
}
@media (max-width: 640px) {
  .bx-card-mark { display: none; }
  .rt-map { padding: 8px; }
  .rt-map svg { max-height: 320px; }
}
@media (max-width: 640px) {
  .kx-log { padding-bottom: 92px; }
  .kx-log-labels { bottom: 40px; }
  .kx-log-labels span { font-size: .74rem; }
  .kx-log-labels span:nth-child(even) b { margin-bottom: 18px; }
  .kx-log-labels span:last-child { transform: translate(-100%, 8px); align-items: flex-end; }
  .kx-log.a-in .kx-log-labels span:last-child { transform: translate(calc(-100% + 13px), 0); }
}
@media (max-width: 640px) {
  .rtc-end { min-width: 0; }
  .rtc-end b { font-size: 1.3rem; }
  .rtc-end span { font-size: .8rem; line-height: 1.35; }
  .rtb-th { flex-wrap: wrap; gap: 4px 12px; padding: 20px 20px 12px; font-size: .68rem; }
  .rtb-ticket ol { padding: 0 20px; }
  .rtb-ticket li { grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(11, 45, 79, .08); }
  .rtb-ticket li em { display: none; }
}
.brand-rental .green .step::before { color: #9cc4f2; }
@media (max-width: 760px) {
  .gallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 6px; scroll-padding: 0 20px; scrollbar-width: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery .stack { display: contents; }
  .gallery .ph, .gallery .stack .ph { flex: 0 0 84%; height: auto; aspect-ratio: 4 / 3; scroll-snap-align: start; border-radius: 16px; overflow: hidden; }
  .gallery .ph img { width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 640px) {
  .steps .step { padding: 20px 22px; }
}
@media (max-width: 640px) {
  .sel-main .facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .sel-main .facts > div { min-width: 0; padding: 10px 0; }
  .sel-main .facts dt { font-size: .74rem; }
  .sel-main .facts dd { font-size: .88rem; line-height: 1.35; }
}
/* home advisor: advice revealed only at the end, live recap meanwhile */
.x-adv .adv-out.adv-pending > :not(.adv-wait) { display: none; }
.x-adv .adv-out.adv-done > .adv-wait { display: none; }
.x-adv .adv-out:not(.adv-done) > .adv-redo { display: none; }
.adv-wait { display: grid; gap: 14px; align-content: start; }
.adv-recap { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.adv-recap li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: .92rem; color: rgba(255, 255, 255, .45); transition: color .3s ease; }
.adv-recap li b { font-weight: 600; text-align: right; }
.adv-recap li.done { color: rgba(255, 255, 255, .78); }
.adv-recap li.done b { color: #fff; }
.adv-recap li.now { color: #fff; }
.adv-recap li.now b { color: #9fd9bf; }
.adv-wait-note { margin: 4px 0 0; font-size: .88rem; color: rgba(255, 255, 255, .6); }
.adv-out.adv-done > :not(.adv-wait) { animation: adv-reveal .6s cubic-bezier(.22, 1, .36, 1) both; }
.adv-out.adv-done > :nth-child(3) { animation-delay: .06s; } .adv-out.adv-done > :nth-child(4) { animation-delay: .12s; } .adv-out.adv-done > :nth-child(5) { animation-delay: .18s; } .adv-out.adv-done > :nth-child(6) { animation-delay: .24s; }
@keyframes adv-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.adv-redo { align-self: flex-start; margin-top: 2px; padding: 8px 0; border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 600; color: rgba(255, 255, 255, .75); cursor: pointer; }
.adv-redo:hover { color: #fff; }
.is-wizard.wiz-finished .wiz-next { background: #22a873; }
@media (max-width: 900px) {
  .x-adv .adv-out { scroll-margin-top: 90px; padding: 24px 22px; }
  .x-adv .adv-form.is-wizard { min-height: 0; padding: 24px 22px; }
  .is-wizard > .wiz-on { min-height: 230px; }
  .is-wizard .seg span { padding: 12px 16px; font-size: .95rem; }
  .is-wizard .field > .flabel, .is-wizard .field > label { font-size: 1.3rem; }
  .is-wizard .fgrid .field > .flabel, .is-wizard .fgrid .field > label { font-size: 1.1rem; }
  .x-adv .adv-out .checks { grid-template-columns: 1fr; }
  .x-adv .adv-out .btn { align-self: stretch; justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .adv-out.adv-done > * { animation: none !important; } }
/* mobile menu: fits one screen, numbered links, page behind is locked */
html.menu-lock, html.menu-lock body { overflow: hidden; overscroll-behavior: none; }
.mnav { height: calc(100dvh - var(--hdr)); bottom: auto; padding: 16px var(--gutter) max(20px, env(safe-area-inset-bottom)); overscroll-behavior: contain; counter-reset: mn; background: linear-gradient(180deg, #fff 60%, #f3f7fb); }
.mnav .co-switch--m { align-self: flex-start; margin-bottom: 6px; }
.mnav a.big { counter-increment: mn; display: flex; align-items: center; gap: 14px; padding: 13px 0; font-size: 1.22rem; }
.mnav a.big::before { content: counter(mn, decimal-leading-zero); min-width: 22px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--green); }
.brand-rental .mnav a.big::before { color: #c8323a; }
.mnav a.big::after { content: "→"; margin-left: auto; font-size: 1rem; color: rgba(11, 45, 79, .3); transition: transform .3s ease, color .3s ease; }
.mnav a.big:active::after, .mnav a.big[aria-current="page"]::after { color: var(--green); transform: translateX(4px); }
.mnav a.big[aria-current="page"] { color: var(--green-dark); }
.mnav-foot { margin-top: auto; padding-top: 18px; grid-template-columns: 1fr; gap: 10px; }
.mnav-foot .btn { height: 48px; padding: 0 10px; font-size: .9rem; border-radius: 999px; }
.mnav-foot .mnav-mail, .mnav-foot .soc { grid-column: 1 / -1; }
.mnav-foot .mnav-mail { display: flex; justify-content: center; font-size: .92rem; }
.mnav-foot .soc { justify-content: center; }
.menu-open .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }
.wa-float { transition: opacity .3s ease, visibility .3s; }
html.menu-lock .hdr { position: fixed; left: 0; right: 0; top: 0; }
/* ================= SWIPE CAROUSELS (phones) ================= */
.swipe-dots { display: none; }
@media (max-width: 760px) {
  .swipe { display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important; gap: 12px !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 20px); margin-inline: calc(-1 * var(--gutter, 20px)); padding: 6px var(--gutter, 20px) 18px !important; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; align-items: stretch !important; }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe::after { content: ""; flex: 0 0 1px; }
  .swipe > * { flex: 0 0 84% !important; width: auto !important; max-width: none !important; min-width: 0; margin: 0 !important; scroll-snap-align: start; scroll-snap-stop: always; grid-column: auto !important; }
  .swipe > [data-a], .swipe > .rv, .swipe [data-a] { opacity: 1 !important; transform: none !important; }
  .swipe > a:hover, .swipe > div:hover { transform: none !important; }
  .swipe-dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
  .swipe-dots i { width: 6px; height: 6px; border-radius: 6px; background: rgba(11, 45, 79, .18); transition: width .35s cubic-bezier(.22, 1, .36, 1), background-color .35s ease; }
  .swipe-dots i.on { width: 22px; background: var(--green, #22a873); }
  .brand-rental .swipe-dots i.on { background: #1f5a9e; }
  .green .swipe-dots i, .x-why .swipe-dots i { background: rgba(255, 255, 255, .25); }
  .green .swipe-dots i.on, .x-why .swipe-dots i.on { background: #fff; }
}
@media (max-width: 760px) {
  .swipe > .frow { align-content: start; align-items: start; }
  .swipe > .svc-row { grid-template-columns: minmax(0, 1fr) 42px !important; grid-template-rows: auto 1fr; align-items: start; gap: 10px 14px; padding: 20px 18px !important; border: 1px solid var(--line) !important; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px -24px rgba(15, 39, 71, .35); }
  .swipe > .svc-row .svc-n { grid-column: 1; grid-row: 1; }
  .swipe > .svc-row .svc-t { grid-column: 1 / -1; grid-row: 2; }
  .swipe > .svc-row .svc-go { grid-column: 2; grid-row: 1; }
  .swipe > .svc-row .svc-tag { display: none; }
  .swipe > .svc-row::before { display: none; }
}
/* ================= MOBILE MENU v2: dark editorial panel ================= */
@media (max-width: 1380px) {
  .hdr { transition: background-color .45s ease, border-color .45s ease, box-shadow .3s ease; }
  .menu-open .hdr { background: #0a2540 !important; border-bottom-color: rgba(255, 255, 255, .08) !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-open .hdr .brand-name, .menu-open .hdr .brand-name small, .menu-open .menu-btn { color: #fff; }
  .menu-open .hdr .lang { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
  .menu-open .hdr .lang a:not(.on) { color: rgba(255, 255, 255, .6); }

  .mnav { --mn-acc: #3ddc97; background: radial-gradient(120% 60% at 100% 0%, rgba(43, 108, 176, .45), transparent 60%), radial-gradient(90% 50% at 0% 100%, rgba(34, 168, 115, .22), transparent 65%), #0a2540; color: #fff; padding: 18px var(--gutter) max(22px, env(safe-area-inset-bottom)); clip-path: circle(0 at calc(100% - 40px) -40px); opacity: 1; transform: none; transition: clip-path .7s cubic-bezier(.77, 0, .18, 1), visibility 0s .7s; }
  .brand-rental .mnav { --mn-acc: #ff6b72; background: radial-gradient(120% 60% at 100% 0%, rgba(43, 108, 176, .4), transparent 60%), radial-gradient(90% 50% at 0% 100%, rgba(200, 50, 58, .2), transparent 65%), #0a2540; }
  .menu-open .mnav { clip-path: circle(150% at calc(100% - 40px) -40px); transition: clip-path .75s cubic-bezier(.77, 0, .18, 1), visibility 0s; }
  .mnav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.2px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
  .mnav { isolation: isolate; }

  .mnav .co-switch--m { margin: 0 0 14px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
  .mnav .co-switch--m a { color: rgba(255, 255, 255, .6); }
  .mnav .co-switch--m a.on { color: #0a2540; background: #fff; }
  .mnav .co-switch--m a.on::after { background: var(--mn-acc); }

  .mnav a.big { position: relative; gap: 16px; padding: 12px 2px; border-bottom: 1px solid rgba(255, 255, 255, .09); font-size: 1.62rem; font-weight: 600; letter-spacing: -.01em; color: #fff; opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1), color .25s ease; }
  .mnav a.big::before { min-width: 24px; align-self: flex-start; margin-top: 6px; font-size: .68rem; color: var(--mn-acc); }
  .mnav a.big::after { content: ""; flex: none; width: 34px; height: 34px; margin-left: auto; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); opacity: .55; transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, border-color .3s ease, opacity .3s ease; }
  .mnav a.big:active { color: var(--mn-acc); }
  .mnav a.big:active::after, .mnav a.big[aria-current="page"]::after { opacity: 1; transform: rotate(45deg); background-color: var(--mn-acc); border-color: var(--mn-acc); }
  .mnav a.big[aria-current="page"] { color: var(--mn-acc); }
  .menu-open .mnav a.big { opacity: 1; transform: none; }
  .menu-open .mnav a.big:nth-of-type(1) { transition-delay: .18s; } .menu-open .mnav a.big:nth-of-type(2) { transition-delay: .23s; } .menu-open .mnav a.big:nth-of-type(3) { transition-delay: .28s; } .menu-open .mnav a.big:nth-of-type(4) { transition-delay: .33s; } .menu-open .mnav a.big:nth-of-type(5) { transition-delay: .38s; } .menu-open .mnav a.big:nth-of-type(6) { transition-delay: .43s; } .menu-open .mnav a.big:nth-of-type(7) { transition-delay: .48s; }

  .mnav-foot { position: relative; padding-top: 22px; gap: 10px; opacity: 0; transform: translateY(16px); transition: opacity .5s ease .1s, transform .6s cubic-bezier(.22, 1, .36, 1) .1s; }
  .menu-open .mnav-foot { opacity: 1; transform: none; transition-delay: .5s; }
  .mnav-foot .btn { height: 54px; border-radius: 16px; font-size: .95rem; }
  .mnav-foot .btn--green { background: #fff; color: #0a2540; border: 0; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6); }
  .mnav-foot .btn--outline { position: relative; justify-content: flex-start; gap: 12px; padding: 0 18px; background: rgba(200, 50, 58, .14); border: 1px solid rgba(255, 107, 114, .35); color: #fff; }
  .mnav-foot .btn--outline::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ff5a62; box-shadow: 0 0 0 0 rgba(255, 90, 98, .6); animation: mn-pulse 1.8s ease-out infinite; }
  .mnav-foot .mnav-mail { color: rgba(255, 255, 255, .65); }
  .mnav-foot .soc a { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .12); }
  @keyframes mn-pulse { 70% { box-shadow: 0 0 0 9px rgba(255, 90, 98, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 98, 0); } }
}
@media (max-width: 1380px) and (max-height: 700px) { .mnav a.big { font-size: 1.35rem; padding: 9px 2px; } .mnav-foot .btn { height: 48px; } }
@media (prefers-reduced-motion: reduce) { .mnav, .menu-open .mnav { transition: none; } .mnav a.big, .mnav-foot { transition: none !important; } .mnav-foot .btn--outline::before { animation: none; } }
/* menu v2: always fits the screen height */
@media (max-width: 1380px) {
  .mnav { padding-top: clamp(10px, 2vh, 18px); }
  .mnav .co-switch--m { margin-bottom: clamp(4px, 1.2vh, 14px); }
  .mnav a.big { font-size: clamp(1.15rem, 3.4vh, 1.62rem); padding: clamp(6px, 1.25vh, 12px) 2px; }
  .mnav a.big::before { margin-top: .35em; }
  .mnav a.big::after { width: clamp(28px, 4vh, 34px); height: clamp(28px, 4vh, 34px); }
  .mnav-foot { padding-top: clamp(12px, 2.4vh, 22px); grid-template-columns: 1fr auto; align-items: center; gap: clamp(8px, 1.2vh, 10px) 10px; }
  .mnav-foot .btn { grid-column: 1 / -1; height: clamp(44px, 6.2vh, 54px); }
  .mnav-foot .mnav-mail { grid-column: 1; justify-content: flex-start; }
  .mnav-foot .soc { grid-column: 2; margin: 0; }
  .mnav-foot .soc a { width: 36px; height: 36px; }
}
@media (max-width: 760px) {
  .swipe > .sit { display: flex; flex-direction: column; }
  .swipe > .sit .sit-body { flex: 1; display: flex; flex-direction: column; }
  .swipe > .sit .sit-cta, .swipe > .sit .sit-call { margin-top: auto; }
}
@media (max-width: 1380px) and (max-height: 680px) {
  .mnav .co-switch--m a { padding: 5px 12px; }
  .mnav a.big { font-size: 1.12rem; padding: 6px 2px; }
  .mnav a.big::after { width: 26px; height: 26px; background-size: 12px; }
  .mnav-foot { padding-top: 10px; }
  .mnav-foot .btn { height: 42px; }
}
/* ================= HOME HERO on phones ================= */
.hero h1 em { font-style: normal; }
.hm-kick, .hm-call, .hm-facts { display: none; }
@media (max-width: 760px) {
  .hero .wrap { min-height: calc(100svh - var(--hdr)); justify-content: flex-end; padding-top: 28px; padding-bottom: 22px; }
  .hero-img::after { background: linear-gradient(180deg, rgba(10, 37, 64, .15) 0%, rgba(10, 37, 64, .25) 30%, rgba(10, 37, 64, .82) 58%, #0a2540 100%) !important; }
  .hero-img img, .hero-img video { object-position: 62% 30%; }
  .hm-kick { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; margin-bottom: 16px; padding: 7px 14px 7px 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; animation: rise .9s var(--ease) both; }
  .hm-kick i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); animation: mn-pulse-g 2s ease-out infinite; }
  @keyframes mn-pulse-g { 70% { box-shadow: 0 0 0 8px rgba(61, 220, 151, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); } }
  .hero h1 { font-size: clamp(2.2rem, 10.5vw, 2.9rem); line-height: 1.04; letter-spacing: -.025em; max-width: none; }
  .hero h1 em { color: #3ddc97; background: linear-gradient(transparent 72%, rgba(61, 220, 151, .22) 72%); }
  .hero .lead { margin-top: 14px; padding-left: 0 !important; border: 0 !important; font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, .78); }
  .hero .lead::before { display: none !important; }
  .hero .btns { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .hero .btns .btn--green { height: 56px; border-radius: 16px; font-size: 1rem; justify-content: space-between; padding: 0 8px 0 22px; }
  .hero .btns .btn--green::after { content: ""; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .18) center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
  .hm-call { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
  .hm-call i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ff5a62; animation: mn-pulse 1.8s ease-out infinite; }
  .hm-call span { display: grid; line-height: 1.2; font-weight: 700; font-size: 1rem; }
  .hm-call small { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
  .hm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 22px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); animation: rise .9s var(--ease) .6s both; }
  .hm-facts li { display: grid; gap: 2px; padding: 0 10px; border-left: 1px solid rgba(255, 255, 255, .12); }
  .hm-facts li:first-child { padding-left: 0; border-left: 0; }
  .hm-facts b { font-size: 1.05rem; font-weight: 700; color: #fff; }
  .hm-facts span { font-size: .72rem; line-height: 1.3; color: rgba(255, 255, 255, .6); }
}
@media (max-width: 760px) and (max-height: 700px) { .hero .lead { display: none; } .hm-facts { margin-top: 16px; } }
.wa-wait .wa-float { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); } .wa-float { transition: opacity .35s ease, visibility .35s, transform .35s ease; }
/* home advisor: question + recap fit one phone screen */
@media (max-width: 760px) {
  .x-adv { padding: 36px 0; }
  .x-adv .shead { margin-bottom: 16px; }
  .x-adv .shead h2 { font-size: 1.75rem; }
  .x-adv .shead .lead { font-size: .92rem; margin-top: 6px; }
  .x-adv .adv-form.is-wizard { padding: 18px 18px 16px; }
  .is-wizard > .wiz-on { min-height: 0; }
  .wiz-top { margin-bottom: 14px; }
  .is-wizard .field { gap: 12px; }
  .is-wizard .field > .flabel, .is-wizard .field > label { font-size: 1.15rem; }
  .is-wizard .fgrid.wiz-on { gap: 14px; }
  .is-wizard .fgrid .field > .flabel, .is-wizard .fgrid .field > label { font-size: 1rem; }
  .is-wizard .seg { gap: 8px; }
  .is-wizard .seg span { padding: 10px 14px; font-size: .9rem; border-radius: 12px; }
  .is-wizard .field input { height: 46px; }
  .wiz-nav { margin-top: 16px; padding-top: 12px; }
  .wiz-next { height: 44px; padding: 0 20px; }
  /* recap: only the answers given so far, as chips */
  .x-adv .adv-out.adv-pending { padding: 14px 18px 16px; }
  .adv-wait { gap: 8px; }
  .adv-recap { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
  .adv-recap li { display: none; padding: 5px 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .78rem; }
  .adv-recap li.done, .adv-recap li.now { display: inline-flex; gap: 6px; }
  .adv-recap li span { color: rgba(255, 255, 255, .55); }
  .adv-recap li span::after { content: ":"; }
  .adv-wait-note { margin: 2px 0 0; font-size: .76rem; }
  /* advice: compact */
  .x-adv .adv-out.adv-done { gap: 10px; padding: 20px 18px; }
  .x-adv .adv-out h3 { font-size: 1.35rem; }
  .x-adv .adv-out .why { font-size: .88rem; }
  .x-adv .adv-out .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border: 0; }
  .x-adv .adv-out .facts div { display: grid; gap: 2px; padding: 8px 10px !important; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .08); }
  .x-adv .adv-out .facts dt { font-size: .68rem; }
  .x-adv .adv-out .facts dd { font-size: .78rem; line-height: 1.25; }
  .x-adv .adv-out .checks { grid-template-columns: 1fr 1fr; gap: 2px 10px; }
  .x-adv .adv-out .checks li { font-size: .8rem; }
  .x-adv .adv-out .btn { height: 48px; }
}
.co-switch a.on::after, .mnav .co-switch--m a.on::after { display: none !important; }
@media (max-width: 900px) { .x-adv .adv { grid-template-columns: minmax(0, 1fr); } .x-adv .adv > * { min-width: 0; } }
.wiz-back, .wiz-next { white-space: nowrap; } @media (max-width: 400px) { .wiz-next { padding: 0 16px; font-size: .9rem; } }
/* menu v3: white panel (user: dark background rejected) */
@media (max-width: 1380px) {
  .menu-open .hdr { background: #fff !important; border-bottom-color: rgba(11, 45, 79, .08) !important; }
  .menu-open .hdr .brand-name, .menu-open .hdr .brand-name small, .menu-open .menu-btn { color: inherit; }
  .menu-open .hdr .lang { background: var(--green-tint); border-color: var(--green-line); }
  .menu-open .hdr .lang a:not(.on) { color: var(--muted); }
  .mnav, .brand-rental .mnav { background: #fff; color: #0b2d4f; }
  .mnav { --mn-acc: #22a873; }
  .brand-rental .mnav { --mn-acc: #c8323a; }
  .mnav::before { background-image: radial-gradient(rgba(11, 45, 79, .07) 1px, transparent 1.2px); }
  .mnav .co-switch--m { background: #f2f5f8; border-color: rgba(11, 45, 79, .08); }
  .mnav .co-switch--m a { color: var(--muted); }
  .mnav .co-switch--m a.on { color: #0b2d4f; background: #fff; box-shadow: 0 4px 12px -6px rgba(11, 45, 79, .35); }
  .mnav a.big { color: #0b2d4f; border-bottom-color: rgba(11, 45, 79, .08); }
  .mnav a.big::after { border-color: rgba(11, 45, 79, .14); opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2d4f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
  .mnav a.big:active::after, .mnav a.big[aria-current="page"]::after { background-color: var(--mn-acc); border-color: var(--mn-acc); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
  .mnav-foot .btn--green { background: #0b2d4f; color: #fff; box-shadow: 0 18px 36px -20px rgba(11, 45, 79, .7); }
  .brand-rental .mnav-foot .btn--green { background: #1f5a9e; }
  .mnav-foot .btn--outline { background: #fff5f5; border-color: rgba(200, 50, 58, .25); color: #a3232b; }
  .mnav-foot .mnav-mail { color: var(--muted); }
  .mnav-foot .soc a { background: #f2f5f8; color: #0b2d4f; border-color: rgba(11, 45, 79, .08); }
}
@media (max-width: 1380px) { .mnav a.big::before { align-self: center; margin-top: 0; } }
/* home hero on phones v2: same content as desktop, title on top, button at the bottom */
@media (max-width: 760px) {
  .hero .wrap { justify-content: flex-start; padding-top: 36px; padding-bottom: 28px; }
  .hero-img::after { background: linear-gradient(180deg, #0a2540 0%, rgba(10, 37, 64, .88) 30%, rgba(10, 37, 64, .35) 58%, rgba(10, 37, 64, .2) 74%, rgba(10, 37, 64, .7) 100%) !important; }
  .hero-img img, .hero-img video { object-position: 60% 70%; }
  .hero h1 em { background: none; }
  .hero .lead { margin-top: 16px; max-width: 30em; }
  .hero .btns { margin-top: auto; padding-top: 24px; }
}
@media (max-width: 760px) and (max-height: 700px) { .hero .lead { display: block; } }
/* ================= GATE on phones: everything in one screen, no vertical scroll ================= */
@media (max-width: 760px) {
  .gate { height: 100vh; height: 100svh; min-height: 0 !important; display: flex; flex-direction: column; overflow: hidden; }
  .gate ~ .wa-float { display: none; }
  .gate-hdr { flex: none; }
  .gate-hdr .wrap { min-height: 0; height: clamp(52px, 7.5svh, 64px); padding-top: 0; padding-bottom: 0; }
  .gate-main { flex: 1; min-height: 0; display: flex; padding: 0 !important; }
  .gate-main > .wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.4svh, 12px); padding-top: clamp(10px, 2svh, 18px); padding-bottom: clamp(8px, 1.4svh, 12px); }
  .gate-top { flex: none; margin: 0 !important; text-align: left; }
  .gate-top .k { display: none; }
  .gate-top h1 { margin: 0; font-size: clamp(1.3rem, 3.2svh, 1.75rem); line-height: 1.15; text-align: left; }
  .gate-choices { flex: 1; min-height: 0; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: 1fr 1fr; gap: clamp(8px, 1.4svh, 12px) !important; margin: 0 !important; }
  .choice { min-height: 0 !important; height: auto !important; display: flex !important; flex-direction: column; justify-content: flex-end; gap: 0; padding: clamp(12px, 2svh, 20px) 18px !important; border-radius: 18px !important; overflow: hidden; }
  .choice .co { margin: 0 0 auto !important; font-size: .78rem; }
  .choice .co img { width: 20px; height: 20px; }
  .choice h2 { margin: 0 !important; font-size: clamp(1.45rem, 4svh, 2rem) !important; line-height: 1.05; }
  .choice p { margin: 4px 0 0 !important; font-size: .82rem !important; line-height: 1.4; max-width: 30em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .choice .choice-list { display: none !important; }
  .choice .btn { align-self: flex-start; margin-top: clamp(8px, 1.4svh, 14px) !important; height: clamp(38px, 5svh, 46px) !important; padding: 0 18px !important; font-size: .88rem !important; border-radius: 12px; }
  .gate-rs.gate-ph { flex: none; grid-template-columns: 40px minmax(0, 1fr) !important; column-gap: 12px !important; row-gap: 10px !important; padding: 12px 14px !important; margin: 0 !important; border-radius: 18px; }
  .gate-ph .ph-icon { width: 40px !important; height: 40px !important; align-self: center !important; }
  .gate-ph .ph-icon svg { width: 18px !important; height: 18px !important; }
  .gate-ph .ph-k { font-size: .62rem !important; }
  .gate-ph h2 { font-size: 1.05rem !important; margin: 0 !important; }
  .gate-ph .ph-txt p, .gate-ph .ph-label { display: none !important; }
  .gate-ph .ph-act { gap: 0 !important; }
  .gate-ph .ph-phones { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .gate-ph .ph-btn { grid-column: auto !important; height: 38px !important; padding: 0 4px !important; font-size: .74rem !important; gap: 4px; white-space: nowrap; }
  .gate-ph .ph-btn svg { width: 11px; height: 11px; flex: none; }
  .gate-ftr { flex: none; padding: 0 !important; }
  .gate-ftr .wrap { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .gate-ftr .mbr { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; }
  .gate-ftr .mbr a { padding: 3px !important; border-radius: 8px; }
  .gate-ftr .mbr a > span { display: none; }
  .gate-ftr .mbr-logo { height: 26px !important; min-width: 26px !important; padding: 1px 3px !important; }
  .gate-ftr .mbr-logo img { max-height: 22px !important; max-width: 56px !important; }
  .gate-ftr .wrap > span:last-child { font-size: .62rem; line-height: 1.3; text-align: right; color: var(--muted); }
}
@media (max-width: 380px) { .gate-ph .ph-btn svg { display: none; } .gate-ph .ph-btn { font-size: .72rem !important; } .gate-brands .brand-name { font-size: .78rem; } }
/* ================= RENTAL HOME (Together Holding) ================= */
.rh, .rd, .rf, .rk, .rs { --rn: #0b2d4f; --rb: #1f5a9e; --rr: #c8323a; }
/* hero */
.rh { position: relative; overflow: hidden; color: #fff; background: #0a2540; isolation: isolate; }
.rh-bg { position: absolute; inset: 0; z-index: -1; }
.rh-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform: scale(1.08); animation: rh-zoom 2.6s cubic-bezier(.22, 1, .36, 1) forwards; }
.rh-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 37, 64, .96) 0%, rgba(10, 37, 64, .82) 38%, rgba(10, 37, 64, .25) 75%, rgba(10, 37, 64, .45) 100%), linear-gradient(0deg, rgba(10, 37, 64, .7), transparent 40%); }
@keyframes rh-zoom { to { transform: scale(1); } }
.rh-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 110px); align-items: center; min-height: calc(100svh - var(--hdr)); max-height: 835px; padding-top: 40px; padding-bottom: 40px; }
.rh-k { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-size: .82rem; font-weight: 600; letter-spacing: .02em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rh-k img { width: 26px; height: 26px; padding: 3px; border-radius: 50%; background: #fff; object-fit: contain; }
.rh h1 { margin: 22px 0 0; max-width: 12em; font-size: clamp(2.6rem, 4.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.03em; color: #fff; }
.rh-lead { margin: 22px 0 0; max-width: 34em; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6; color: rgba(255, 255, 255, .78); }
.rh-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.rh-btn { display: inline-flex; align-items: center; gap: 14px; height: 54px; padding: 0 8px 0 24px; border-radius: 999px; background: var(--rb, #1f5a9e); color: #fff; font-weight: 700; box-shadow: 0 18px 36px -18px rgba(31, 90, 158, .9); transition: background-color .3s ease, transform .3s ease; }
.rh-btn i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .18); transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.rh-btn i svg { width: 16px; height: 16px; }
.rh-btn:hover { background: #184a85; color: #fff; }
.rh-btn:hover i { transform: rotate(45deg); }
.rh-ghost { display: inline-flex; align-items: center; height: 54px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-weight: 600; transition: background-color .3s ease, border-color .3s ease; }
.rh-ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; color: #fff; }
.rh-wa { display: inline-block; margin-top: 26px; font-size: .92rem; color: rgba(255, 255, 255, .65); }
.rh-wa b { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.rh-card { padding: 26px 28px 22px; border-radius: 26px; background: rgba(255, 255, 255, .94); color: var(--rn); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.rh-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rb); }
.rh-card-top em { display: inline-flex; align-items: center; gap: 7px; font-style: normal; letter-spacing: .04em; text-transform: none; font-size: .78rem; color: #4a5d72; }
.rh-card-top em i { width: 7px; height: 7px; border-radius: 50%; background: var(--rr); box-shadow: 0 0 0 4px rgba(200, 50, 58, .15); }
.rh-bp { display: block; width: 100%; margin: 18px 0 8px; fill: none; stroke: var(--rn); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rh-bp * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rh-bp .gnd { stroke: rgba(11, 45, 79, .25); stroke-dasharray: .012 .012; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s ease 1.6s; }
.rh-bp .hub { stroke: var(--rr); }
.rh-card.a-in .rh-bp * { animation: fl-draw 1.8s cubic-bezier(.65, 0, .35, 1) .6s forwards; }
.rh-card.a-in .rh-bp .gnd { animation: none; opacity: 1; }
.rh-card dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid rgba(11, 45, 79, .1); }
.rh-card dl div { padding: 14px 0; border-bottom: 1px solid rgba(11, 45, 79, .08); }
.rh-card dl div:nth-child(odd) { padding-right: 14px; border-right: 1px solid rgba(11, 45, 79, .08); }
.rh-card dl div:nth-child(even) { padding-left: 18px; }
.rh-card dl div:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 2px; }
.rh-card dt { font-size: .76rem; color: #6b7c90; }
.rh-card dd { margin: 2px 0 0; font-weight: 700; font-size: 1rem; }

/* duration picker */
.rd { padding: clamp(56px, 6vw, 88px) 0; background: #f5f8fb; }
.rd-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.rd-head h2 { margin-top: 12px; color: var(--rn); font-size: clamp(1.9rem, 3vw, 2.6rem); }
.rd-head p { max-width: 26em; margin: 0; color: #4a5d72; }
.rd-box { margin-top: 32px; padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: #fff; border: 1px solid rgba(11, 45, 79, .07); box-shadow: 0 40px 80px -60px rgba(11, 45, 79, .5); --at: 1; }
.rd-road { position: relative; padding: 46px 0 0; margin: 0 clamp(20px, 6vw, 90px); }
.rd-line { position: absolute; left: 0; right: 0; top: 64px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(11, 45, 79, .14) 0 14px, transparent 14px 24px); }
.rd-line i { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--at) * 50%); border-radius: 4px; background: linear-gradient(90deg, var(--rb), var(--rn)); transition: width .8s cubic-bezier(.65, 0, .35, 1); }
.rd-truck { position: absolute; top: 18px; left: calc(var(--at) * 50%); width: 66px; color: var(--rn); transform: translateX(-50%); transition: left .8s cubic-bezier(.65, 0, .35, 1); }
.rd-truck svg { display: block; width: 100%; }
.rd-stops { position: relative; height: 88px; }
.rd-stops button { position: absolute; left: var(--p); top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; padding: 6px 10px; border: 0; background: none; font: inherit; color: #6b7c90; cursor: pointer; }
.rd-stops button:first-child { transform: translateX(-19px); justify-items: start; }
.rd-stops button:last-child { transform: translateX(calc(-100% + 19px)); justify-items: end; }
.rd-stops i { width: 18px; height: 18px; margin-bottom: 8px; border-radius: 50%; background: #fff; border: 3px solid rgba(11, 45, 79, .2); transition: border-color .4s ease, transform .4s ease, background-color .4s ease, box-shadow .4s ease; }
.rd-stops b { font-size: 1.15rem; color: var(--rn); opacity: .55; transition: opacity .3s ease; }
.rd-stops small { font-size: .82rem; }
.rd-stops button[aria-selected="true"] i { border-color: var(--rb); background: var(--rb); transform: scale(1.25); box-shadow: 0 0 0 6px rgba(31, 90, 158, .15); }
.rd-stops button[aria-selected="true"] b, .rd-stops button:hover b { opacity: 1; }
.rd-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: 18px; padding-top: 26px; border-top: 1px solid rgba(11, 45, 79, .08); }
.rd-text { margin: 0; font-size: 1.12rem; line-height: 1.55; color: var(--rn); font-weight: 500; animation: fade .5s ease; }
.rd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 20px 0 0; }
.rd-facts div { padding: 12px 16px 12px 0; border-top: 1px solid rgba(11, 45, 79, .08); animation: fade .5s ease; }
.rd-facts dt { font-size: .76rem; color: #6b7c90; }
.rd-facts dd { margin: 3px 0 0; font-weight: 600; color: var(--rn); font-size: .95rem; }
.rd-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 24px; border-radius: 20px; background: #f5f8fb; }
.rd-label { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rb); }
.rd-uses { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-uses button { padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgba(11, 45, 79, .14); background: #fff; font: inherit; font-size: .92rem; font-weight: 600; color: var(--rn); cursor: pointer; transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.rd-uses button:hover { border-color: var(--rb); }
.rd-uses button[aria-pressed="true"] { background: var(--rn); border-color: var(--rn); color: #fff; }
.rd-go { margin-top: 6px; }
.rd-side small { font-size: .78rem; color: #6b7c90; }

/* filmstrip */
.rf { padding: clamp(56px, 6vw, 88px) 0; background: #fff; overflow: hidden; }
.rf-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.rf-txt h2 { margin-top: 12px; color: var(--rn); font-size: clamp(1.9rem, 3vw, 2.6rem); }
.rf-role { list-style: none; margin: 28px 0 0; padding: 0; display: grid; }
.rf-role li { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid rgba(11, 45, 79, .08); }
.rf-role li:last-child { border-bottom: 1px solid rgba(11, 45, 79, .08); }
.rf-role span { font-size: .8rem; font-weight: 700; color: var(--rr); padding-top: 3px; }
.rf-role b { color: var(--rn); }
.rf-role p { margin: 2px 0 0; font-size: .92rem; color: #4a5d72; }
.rf-links { display: flex; gap: 24px; margin-top: 24px; }
.rf-links a { font-weight: 700; color: var(--rb); border-bottom: 2px solid rgba(31, 90, 158, .25); padding-bottom: 2px; transition: border-color .3s ease; }
.rf-links a:hover { border-color: var(--rb); }
.rf-film { display: grid; gap: 14px; min-width: 0; margin-right: calc(-1 * max(var(--gutter, 20px), (100vw - 1320px) / 2)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 100%); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 100%); }
.rf-row { overflow: hidden; }
.rf-track { display: flex; gap: 14px; width: max-content; animation: rf-l 60s linear infinite; }
.rf-row--r .rf-track { animation-name: rf-r; }
.rf-film:hover .rf-track { animation-play-state: paused; }
.rf-track figure { flex: none; width: clamp(220px, 20vw, 330px); aspect-ratio: 4 / 3; margin: 0; border-radius: 18px; overflow: hidden; background: #eef3f9; }
.rf-track img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.rf-track figure:hover img { transform: scale(1.06); }
@keyframes rf-l { to { transform: translateX(calc(-50% - 7px)); } }
@keyframes rf-r { from { transform: translateX(calc(-50% - 7px)); } to { transform: translateX(0); } }

/* contract */
.rk { padding: clamp(56px, 6vw, 88px) 0; background: linear-gradient(180deg, #f5f8fb, #eef3f9); }
.rk-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.rk-txt h2 { margin-top: 12px; color: var(--rn); font-size: clamp(1.9rem, 3vw, 2.6rem); }
.rk-txt .lead { margin: 16px 0 28px; }
.rk-doc { position: relative; padding: 28px 32px 22px; border-radius: 6px 6px 22px 22px; background: #fff; box-shadow: 0 50px 90px -50px rgba(11, 45, 79, .55), 0 0 0 1px rgba(11, 45, 79, .05); transform: rotate(-1.2deg); }
.rk-doc.a-in { transform: rotate(-1.2deg); }
.rk-doc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, var(--rn), var(--rb) 70%, var(--rr)); }
.rk-doc-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 2px solid var(--rn); }
.rk-doc-h small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rb); }
.rk-doc-h b { font-size: 1.15rem; color: var(--rn); }
.rk-doc-h img { width: 34px; height: 34px; object-fit: contain; }
.rk-doc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
.rk-doc li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 24px; gap: 10px; align-items: start; padding: 14px 0; border-bottom: 1px dashed rgba(11, 45, 79, .14); }
.rk-doc li > span { font-size: .8rem; font-weight: 700; color: #8a99ab; padding-top: 2px; }
.rk-doc li b { font-size: .98rem; color: var(--rn); }
.rk-doc li p { margin: 2px 0 0; font-size: .84rem; line-height: 1.45; color: #4a5d72; }
.rk-doc li i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(31, 90, 158, .1); color: var(--rb); }
.rk-doc li i svg { width: 13px; height: 13px; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rk-doc.a-in li i svg { animation: fl-draw .5s ease var(--cd) forwards; }
.rk-sign { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 18px; }
.rk-sign svg { display: block; width: 150px; height: 38px; fill: none; stroke: var(--rn); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rk-sign svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rk-doc.a-in .rk-sign svg path { animation: fl-draw 1.6s cubic-bezier(.65, 0, .35, 1) 1.9s forwards; }
.rk-sign small { display: block; margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(11, 45, 79, .3); font-size: .74rem; color: #6b7c90; }
.rk-stamp { padding: 9px 18px; border: 2.5px solid var(--rr); border-radius: 10px; color: var(--rr); font-weight: 800; font-size: .86rem; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: rotate(-8deg) scale(1.6); }
.rk-doc.a-in .rk-stamp { animation: rk-stamp .5s cubic-bezier(.34, 1.56, .64, 1) 3.1s forwards; }
@keyframes rk-stamp { to { opacity: 1; transform: rotate(-8deg) scale(1); } }

/* process rail */
.rs { padding: clamp(56px, 6vw, 88px) 0; background: #0b2d4f; color: #fff; }
.rs-head h2 { margin-top: 12px; color: #fff; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.rs .eyebrow { color: #9cc4f2; }
.rs-rail { position: relative; list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.rs-rail::before, .rs-rail::after { content: ""; position: absolute; left: 0; right: 0; top: 75px; height: 2px; background: rgba(255, 255, 255, .14); }
.rs-rail::after { background: linear-gradient(90deg, #9cc4f2, #fff); transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.65, 0, .35, 1) .3s; }
.rs-rail.a-in::after { transform: scaleX(1); }
.rs-rail li { position: relative; padding-right: 10px; }
.rs-n { display: block; font-size: 3.6rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .35); }
.rs-dot { position: relative; z-index: 1; display: block; width: 14px; height: 14px; margin: 12px 0 22px; border-radius: 50%; background: #0b2d4f; border: 2px solid rgba(255, 255, 255, .35); transition: background-color .4s ease var(--sd), border-color .4s ease var(--sd), box-shadow .4s ease var(--sd); }
.rs-rail.a-in .rs-dot { background: #fff; border-color: #fff; box-shadow: 0 0 0 6px rgba(156, 196, 242, .2); }
.rs-rail.a-in li:last-child .rs-dot { background: var(--rr); border-color: var(--rr); box-shadow: 0 0 0 6px rgba(200, 50, 58, .25); }
.rs-rail b { font-size: 1.2rem; }
.rs-rail p { margin: 6px 0 0; color: rgba(255, 255, 255, .65); font-size: .95rem; }

@media (max-width: 1000px) {
  .rh-grid, .rf-grid, .rk-grid, .rd-body { grid-template-columns: minmax(0, 1fr); }
  .rh-grid { max-height: none; }
  .rh-card { max-width: 460px; }
  .rd-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rf-film { margin-right: calc(-1 * var(--gutter, 20px)); margin-left: calc(-1 * var(--gutter, 20px)); -webkit-mask-image: none; mask-image: none; }
  .rs-rail { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .rs-rail::before, .rs-rail::after { display: none; }
}
@media (max-width: 760px) {
  .rh-grid { min-height: calc(100svh - var(--hdr)); align-content: space-between; padding-top: 28px; padding-bottom: 24px; gap: 26px; }
  .rh-bg::after { background: linear-gradient(180deg, rgba(10, 37, 64, .95) 0%, rgba(10, 37, 64, .8) 45%, rgba(10, 37, 64, .55) 100%); }
  .rh h1 { font-size: clamp(2.1rem, 9.5vw, 2.7rem); margin-top: 16px; }
  .rh-lead { margin-top: 14px; font-size: .98rem; }
  .rh-btns { margin-top: 22px; display: grid; grid-template-columns: 1fr; }
  .rh-btn { justify-content: space-between; }
  .rh-ghost { justify-content: center; }
  .rh-wa { margin-top: 16px; }
  .rh-card { display: none; }
  .rd-box { padding: 20px 18px; border-radius: 22px; }
  .rd-road { margin: 0 8px; padding-top: 40px; }
  .rd-line { top: 58px; }
  .rd-truck { top: 14px; width: 52px; }
  .rd-stops { height: 76px; }
  .rd-stops b { font-size: 1rem; }
  .rd-stops small { font-size: .7rem; }
  .rd-facts { grid-template-columns: 1fr 1fr; }
  .rd-text { font-size: 1rem; }
  .rd-side { padding: 18px; }
  .rd-side .rh-btn { align-self: stretch; justify-content: space-between; }
  .rf-track figure { width: 64vw; }
  .rk-doc, .rk-doc.a-in { padding: 22px 18px 18px; transform: none; }
  .rk-doc ol { grid-template-columns: 1fr; }
  .rs-rail { grid-template-columns: 1fr; gap: 0; }
  .rs-rail li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
  .rs-n { grid-row: span 2; font-size: 2.4rem; }
  .rs-dot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-bg img { animation: none; transform: none; }
  .rf-track { animation: none; }
  .rh-bp *, .rk-doc li i svg, .rk-sign svg path { stroke-dashoffset: 0 !important; animation: none !important; }
  .rk-stamp { opacity: 1 !important; transform: rotate(-8deg) !important; animation: none !important; }
  .rd-line i, .rd-truck { transition: none; }
}
.rd .eyebrow, .rf .eyebrow, .rk .eyebrow, .rs .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1f5a9e; }
.rd .eyebrow::before, .rf .eyebrow::before, .rk .eyebrow::before, .rs .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #1f5a9e, #c8323a); }
.rs .eyebrow { color: #9cc4f2; }
.rs .eyebrow::before { background: linear-gradient(90deg, #9cc4f2, #c8323a); }
.rd { padding: clamp(48px, 5vw, 72px) 0; }
.rd-box { margin-top: 26px; }
.rd-road { padding-top: 40px; }
.rd-line { top: 58px; }
.rd-truck { top: 12px; }
.rd-stops { height: 76px; }
.rd-stops small { white-space: nowrap; }
.rd-body { margin-top: 10px; padding-top: 22px; }
.rd-stops { height: 84px; } @media (max-width: 760px) { .rd-stops { height: 78px; } .rd-stops small { white-space: normal; max-width: 9em; } }
@media (max-width: 760px) {
  .rh-grid { display: flex; flex-direction: column; }
  .rh-txt { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
  .rh-btns { margin-top: auto; padding-top: 22px; width: 100%; }
  .rh-wa { margin-top: 14px; }
  .rh-btn { white-space: nowrap; font-size: .95rem; }
  .rd-side .rh-btn { padding-left: 18px; font-size: .9rem; }
  .rk-doc ol { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .rk-doc li { grid-template-columns: minmax(0, 1fr) 22px; gap: 6px; padding: 11px 0; align-items: center; }
  .rk-doc li > span, .rk-doc li p { display: none; }
  .rk-doc li b { font-size: .86rem; line-height: 1.25; }
  .rk-doc li i { width: 22px; height: 22px; }
  .rk-stamp { font-size: .74rem; padding: 7px 12px; }
  .rk-sign svg { width: 120px; }
}
.rh-bp { margin: 16px 0 6px; stroke-width: 1.7; }
.rh-bp .seam { stroke: rgba(11, 45, 79, .35); stroke-width: 1.2; }
.rh-bp .lamp { stroke: var(--rr); }
.rh-bp .gnd { stroke-dasharray: .01 .012; }
.rd-road { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer; }
.rd-truck { cursor: grab; padding: 4px; margin-top: -4px; }
.rd-drag .rd-truck { cursor: grabbing; }
.rd-drag .rd-truck, .rd-drag .rd-line i { transition: none !important; }
.rd-drag .rd-truck svg { transform: translateY(-2px) rotate(-2deg); }
.rd-truck svg { transition: transform .3s ease; }
.rd-hint { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: var(--rn); color: #fff; font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap; animation: rd-hint 1.6s ease-in-out infinite; transition: opacity .4s ease; }
.rd-hint::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--rn); }
.rd-used .rd-hint { opacity: 0; animation: none; }
@keyframes rd-hint { 50% { transform: translate(-50%, -4px); } }
.rd-road { padding-top: 64px; } .rd-line { top: 82px; } .rd-truck { top: 34px; }
.rd-info { width: 100%; }
.rd-info > div { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(11, 45, 79, .07); }
.rd-info > div.rd-in { animation: rd-in .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes rd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rd-info p { margin: 0 0 8px; font-size: .92rem; line-height: 1.45; color: var(--rn); }
.rd-info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rd-info li { display: flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 600; color: #4a5d72; }
.rd-info li i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(31, 90, 158, .1); color: var(--rb); }
.rd-info li i svg { width: 11px; height: 11px; }
.rd-side small { display: none; }
@media (max-width: 760px) { .rd-road { padding-top: 58px; } .rd-line { top: 76px; } .rd-truck { top: 30px; } }
@media (prefers-reduced-motion: reduce) { .rd-hint { animation: none; } }
@media (min-width: 761px) {
  .rd { padding: 40px 0; }
  .rd-box { margin-top: 20px; padding: 22px 34px 26px; }
  .rd-road { padding-top: 54px; } .rd-line { top: 72px; } .rd-truck { top: 26px; }
  .rd-stops { height: 76px; }
  .rd-body { padding-top: 18px; margin-top: 4px; }
  .rd-side { padding: 18px 20px; gap: 10px; }
  .rd-uses { flex-wrap: nowrap; gap: 6px; }
  .rd-uses button { padding: 8px 12px; font-size: .84rem; white-space: nowrap; }
  .rd-info > div { padding: 12px 14px; }
  .rd-info ul { grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 14px; }
  .rd-info li { font-size: .8rem; gap: 6px; }
  .rd-go { margin-top: 2px; height: 48px; }
}
@media (min-width: 761px) { .rd-stops { height: 88px; } .rd-info ul { grid-template-columns: 1fr; gap: 5px; } .rd-info li { font-size: .84rem; } }
@media (max-width: 760px) { .rd-stops { height: 88px; } .rd-uses button { padding: 8px 12px; font-size: .82rem; } .rd-info p { font-size: .88rem; } }
/* ================= BOX TRAILERS page ================= */
.bxs, .bxu, .bxa { --rn: #0b2d4f; --rb: #1f5a9e; --rr: #c8323a; }
.bxs .eyebrow, .bxu .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1f5a9e; }
.bxs .eyebrow::before, .bxu .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #1f5a9e, #c8323a); }
.bxs-head h2, .bxu-head h2 { margin-top: 12px; color: var(--rn); font-size: clamp(1.9rem, 3vw, 2.6rem); }
/* spec explorer */
.bxs { padding: clamp(48px, 5vw, 72px) 0; background: #fff; }
.bxs-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: 26px; }
.bxs-draw { padding: 28px 30px 22px; border-radius: 26px; background: radial-gradient(80% 70% at 50% 40%, #fff, #f2f6fa); border: 1px solid rgba(11, 45, 79, .07); }
.bxs-svg { position: relative; }
.bxs-bp { margin: 0 !important; }
.bxs-draw.a-in .bxs-bp * { animation: fl-draw 1.8s cubic-bezier(.65, 0, .35, 1) .3s forwards; }
.bxs-draw.a-in .bxs-bp .gnd { animation: none; opacity: 1; }
.bxs-dot { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--rn); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; box-shadow: 0 0 0 2px var(--rn), 0 8px 18px -8px rgba(11, 45, 79, .6); opacity: 0; transform: scale(.4); transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1), background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.bxs-draw.a-in .bxs-dot { opacity: 1; transform: none; transition-delay: 1.6s, 1.6s, 0s, 0s, 0s; }
.bxs-dot::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--rb); opacity: 0; }
.bxs-dot[aria-pressed="true"] { background: var(--rb); color: #fff; box-shadow: 0 0 0 2px var(--rb), 0 10px 22px -8px rgba(31, 90, 158, .9); }
.bxs-dot[aria-pressed="true"]::before { animation: bxs-ring 1.8s ease-out infinite; }
.bxs-dot:hover { transform: scale(1.12); }
@keyframes bxs-ring { from { opacity: .7; transform: scale(.8); } to { opacity: 0; transform: scale(1.6); } }
.bxs-tabs { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bxs-tabs button { position: relative; width: 100%; display: grid; gap: 2px; padding: 10px 10px 12px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: .86rem; font-weight: 600; color: #6b7c90; text-align: left; cursor: pointer; overflow: hidden; transition: background-color .3s ease, color .3s ease; }
.bxs-tabs button span { font-size: .7rem; font-weight: 700; color: var(--rr); }
.bxs-tabs button i { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(11, 45, 79, .1); overflow: hidden; }
.bxs-tabs button i::after { content: ""; position: absolute; inset: 0; background: var(--rb); transform: scaleX(0); transform-origin: left; }
.bxs-tabs button[aria-pressed="true"] { background: #fff; color: var(--rn); box-shadow: 0 8px 20px -14px rgba(11, 45, 79, .6); }
.bxs-tabs button[aria-pressed="true"] i::after { animation: bxs-prog 4.5s linear forwards; }
.bx-manual .bxs-tabs button[aria-pressed="true"] i::after { animation: none; transform: none; }
@keyframes bxs-prog { to { transform: scaleX(1); } }
.bxs-card { position: relative; display: grid; border-radius: 26px; background: #0b2d4f; color: #fff; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(11, 45, 79, .8); }
.bxs-item { grid-area: 1 / 1; display: grid; grid-template-rows: auto 1fr; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.bxs-item.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.bxs-item figure { margin: 0; height: 250px; overflow: hidden; }
.bxs-item img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.bxs-item.is-on img { transform: scale(1); }
.bxs-item > div { padding: 22px 28px 96px; }
.bxs-item span { font-size: .74rem; font-weight: 700; letter-spacing: .14em; color: #9cc4f2; }
.bxs-item h3 { margin: 6px 0 8px; font-size: 1.5rem; color: #fff; }
.bxs-item p { margin: 0; color: rgba(255, 255, 255, .75); line-height: 1.55; }
.bxs-item.is-on h3, .bxs-item.is-on p { animation: rd-in .5s cubic-bezier(.22, 1, .36, 1) both; }
.bxs-item.is-on p { animation-delay: .08s; }
.bxs-go { position: absolute; left: 28px; bottom: 24px; background: #fff; color: var(--rn); box-shadow: none; }
.bxs-go:hover { background: #eef3f9; color: var(--rn); }
.bxs-go i { background: rgba(11, 45, 79, .08); }
/* use panels */
.bxu { padding: clamp(48px, 5vw, 72px) 0; background: #f5f8fb; }
.bxu-row { display: flex; gap: 12px; height: 440px; margin-top: 26px; }
.bxu-p { position: relative; flex: 1; min-width: 0; border-radius: 22px; overflow: hidden; cursor: pointer; isolation: isolate; color: #fff; transition: flex-grow .7s cubic-bezier(.22, 1, .36, 1); outline: none; }
.bxu-p.is-on { flex-grow: 3.2; cursor: default; }
.bxu-p:focus-visible { box-shadow: 0 0 0 3px var(--rb); }
.bxu-p > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.bxu-p.is-on > img { transform: scale(1); }
.bxu-p::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 37, 64, .95) 0%, rgba(10, 37, 64, .55) 50%, rgba(10, 37, 64, .25) 100%); transition: background-color .5s ease; }
.bxu-p:not(.is-on)::before { background-color: rgba(10, 37, 64, .35); }
.bxu-n { position: absolute; top: 20px; left: 22px; font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: #fff; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bxu-in { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 28px; opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1); pointer-events: none; min-width: 360px; }
.bxu-p.is-on .bxu-in { opacity: 1; transform: none; transition-delay: .25s; }
.bxu-in h3 { margin: 0 0 6px; font-size: 1.6rem; color: #fff; }
.bxu-in p { margin: 0 0 14px; color: rgba(255, 255, 255, .78); }
.bxu-in ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bxu-in li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .86rem; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bxu-in li i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--rb); }
.bxu-in li i svg { width: 11px; height: 11px; }
.bxu-v { position: absolute; left: 22px; bottom: 26px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.1rem; white-space: nowrap; transition: opacity .3s ease; }
.bxu-p.is-on .bxu-v { opacity: 0; }
/* assessment ticket heading spacing */
.bxa .rtb-txt h2 { margin-top: 12px; }
@media (max-width: 1000px) {
  .bxs-grid { grid-template-columns: minmax(0, 1fr); }
  .bxs-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .bxs-draw { padding: 16px 12px 12px; border-radius: 20px; }
  .bxs-dot { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: .68rem; }
  .bxs-tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding: 0 12px; }
  .bxs-tabs::-webkit-scrollbar { display: none; }
  .bxs-tabs li { flex: none; }
  .bxs-tabs button { white-space: nowrap; }
  .bxs-item figure { height: 190px; }
  .bxs-item > div { padding: 18px 20px 88px; }
  .bxs-item h3 { font-size: 1.3rem; }
  .bxs-go { left: 20px; right: 20px; bottom: 20px; justify-content: space-between; }
  .bxu-row { flex-direction: column; height: auto; }
  .bxu-p { flex: none; height: 76px; transition: height .6s cubic-bezier(.22, 1, .36, 1); }
  .bxu-p.is-on { height: 330px; }
  .bxu-v { writing-mode: horizontal-tb; transform: none; bottom: 26px; left: 70px; font-size: 1rem; }
  .bxu-n { top: auto; bottom: 22px; left: 18px; }
  .bxu-p.is-on .bxu-n { top: 18px; bottom: auto; }
  .bxu-in { min-width: 0; padding: 20px; }
  .bxu-in h3 { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bxs-bp * { stroke-dashoffset: 0 !important; animation: none !important; }
  .bxs-dot { opacity: 1; transform: none; }
  .bxs-dot::before, .bxs-tabs button i::after { animation: none !important; }
}
.bxs-item img { object-position: 50% 35%; }
.bxu-p > img { object-position: 50% 30%; }
.rtb--rent .arb-sub span { color: #c8323a; }
.bxs-grid { align-items: stretch; } .bxs-draw { display: flex; flex-direction: column; justify-content: center; }
.bxs-grid { align-items: center; } .bxs-item figure { height: 220px; } .bxs-draw { padding: 34px 34px 24px; }
/* box trailers v2: technical blueprint explorer (different from the rental home) */
.bxs-draw { position: relative; background-color: #0b2d4f; background-image: linear-gradient(rgba(156, 196, 242, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(156, 196, 242, .09) 1px, transparent 1px), linear-gradient(rgba(156, 196, 242, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(156, 196, 242, .045) 1px, transparent 1px); background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px; border: 0; color: #fff; padding: 22px 30px 20px; box-shadow: 0 40px 80px -50px rgba(11, 45, 79, .9); }
.bxs-tb { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid rgba(156, 196, 242, .25); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(156, 196, 242, .8); }
.bxs-draw .bxs-bp { stroke: #fff; }
.bxs-draw .bxs-bp .seam { stroke: rgba(156, 196, 242, .45); }
.bxs-draw .bxs-bp .gnd { stroke: rgba(156, 196, 242, .4); }
.bxs-draw .bxs-bp .hub, .bxs-draw .bxs-bp .lamp { stroke: #ff6b72; }
.bxs-dim { position: relative; height: 26px; margin: 8px 0 0 5%; width: 88.3%; }
.bxs-dim::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: rgba(156, 196, 242, .7); transform: scaleX(0); transition: transform 1.2s cubic-bezier(.65, 0, .35, 1) 1.4s; }
.bxs-dim::after { content: ""; position: absolute; inset: 6px 0; border-left: 1px solid rgba(156, 196, 242, .7); border-right: 1px solid rgba(156, 196, 242, .7); opacity: 0; transition: opacity .4s ease 1.4s; }
.bxs-draw.a-in .bxs-dim::before { transform: none; }
.bxs-draw.a-in .bxs-dim::after { opacity: 1; }
.bxs-dim span { position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 2px 10px; background: #0b2d4f; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .74rem; color: #9cc4f2; opacity: 0; transition: opacity .4s ease 2.2s; }
.bxs-draw.a-in .bxs-dim span { opacity: 1; }
.bxs-draw .bxs-dot { background: #0b2d4f; color: #fff; box-shadow: 0 0 0 2px #9cc4f2; }
.bxs-draw .bxs-dot[aria-pressed="true"] { background: #fff; color: #0b2d4f; box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(255, 255, 255, .15); }
.bxs-draw .bxs-dot::before { border-color: #fff; }
.bxs-draw .bxs-tabs { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(156, 196, 242, .25); }
.bxs-draw .bxs-tabs button { color: rgba(255, 255, 255, .6); }
.bxs-draw .bxs-tabs button span { color: #ff8a90; }
.bxs-draw .bxs-tabs button i { background: rgba(255, 255, 255, .12); }
.bxs-draw .bxs-tabs button i::after { background: #fff; }
.bxs-draw .bxs-tabs button[aria-pressed="true"] { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }
/* detail card light */
.bxs-card { background: #fff; color: #0b2d4f; border: 1px solid rgba(11, 45, 79, .08); box-shadow: 0 40px 80px -60px rgba(11, 45, 79, .6); }
.bxs-item span { color: #c8323a; }
.bxs-item h3 { color: #0b2d4f; }
.bxs-item p { color: #4a5d72; }
.bxs-go { background: #0b2d4f; color: #fff; }
.bxs-go:hover { background: #15335c; color: #fff; }
.bxs-go i { background: rgba(255, 255, 255, .16); }

/* load planner */
.bxl { padding: clamp(48px, 5vw, 72px) 0; background: #fff; }
.bxl .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1f5a9e; }
.bxl .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #1f5a9e, #c8323a); }
.bxl-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.bxl-txt h2 { margin-top: 12px; color: #0b2d4f; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.bxl-ctrl { display: grid; gap: 12px; margin-top: 28px; }
.bxl-lab { display: flex; justify-content: space-between; align-items: baseline; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b7c90; }
.bxl-lab output { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: #0b2d4f; }
.bxl-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.bxl-types button { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid rgba(11, 45, 79, .14); background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.bxl-types b { color: #0b2d4f; }
.bxl-types small { color: #6b7c90; font-size: .82rem; }
.bxl-types button:hover { border-color: #1f5a9e; }
.bxl-types button[aria-pressed="true"] { border-color: #0b2d4f; background: #f2f6fa; box-shadow: inset 0 0 0 1px #0b2d4f; }
.bxl-ctrl input[type=range] { --fill: 35%; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 8px; background: linear-gradient(90deg, #1f5a9e var(--fill), rgba(11, 45, 79, .12) var(--fill)); outline: none; cursor: pointer; }
.bxl-ctrl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid #0b2d4f; box-shadow: 0 6px 14px -6px rgba(11, 45, 79, .6); }
.bxl-ctrl input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #0b2d4f; }
.bxl-ctrl input[type=range]:focus-visible { box-shadow: 0 0 0 4px rgba(31, 90, 158, .25); }
.bxl-scale { display: flex; justify-content: space-between; font-size: .74rem; color: #8a99ab; }
.bxl-vis { padding: 26px 28px; border-radius: 26px; background: #f5f8fb; border: 1px solid rgba(11, 45, 79, .07); }
.bxl-out { display: flex; align-items: center; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(11, 45, 79, .08); }
.bxl-out > div { display: flex; align-items: baseline; gap: 8px; flex: none; }
.bxl-out b { font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #0b2d4f; }
.bxl-out span { font-weight: 700; color: #1f5a9e; }
.bxl-out p { margin: 0; color: #4a5d72; font-size: .95rem; animation: fade .4s ease; }
.bxl-floors { display: grid; gap: 14px; margin: 20px 0 18px; }
.bxl-floor { position: relative; display: flex; align-items: stretch; animation: rd-in .5s cubic-bezier(.22, 1, .36, 1) both; }
.bxl-cab { flex: none; width: 34px; margin-right: 6px; border-radius: 10px 4px 4px 10px; background: #0b2d4f; position: relative; }
.bxl-cab::after { content: ""; position: absolute; right: 6px; top: 18%; bottom: 18%; width: 6px; border-radius: 3px; background: rgba(156, 196, 242, .6); }
.bxl-deck { flex: 1; display: grid; grid-template-columns: repeat(var(--rows), minmax(0, 1fr)); grid-template-rows: repeat(var(--cols), auto); grid-auto-flow: column; gap: 3px; padding: 6px; border-radius: 6px; background: #fff; border: 2px solid #0b2d4f; }
.bxl-deck i { aspect-ratio: 1.5 / 1; border-radius: 3px; border: 1px dashed rgba(11, 45, 79, .18); background: transparent; transform: scale(.6); opacity: .6; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background-color .3s ease, opacity .3s ease, border-color .3s ease; }
.bxl-floor[style*="--cols: 2"] .bxl-deck i, .bxl-floor[style*="--cols:2"] .bxl-deck i { aspect-ratio: 1.25 / 1; }
.bxl-deck i.on { transform: none; opacity: 1; border: 1px solid #a8743c; background: repeating-linear-gradient(90deg, #d9a66a 0 22%, #c58f55 22% 30%) ; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.bxl-floor em { position: absolute; right: 8px; top: -9px; padding: 1px 8px; border-radius: 999px; background: #0b2d4f; color: #fff; font-style: normal; font-size: .7rem; font-weight: 700; }
.bxl-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.bxl-foot small { max-width: 30em; font-size: .78rem; color: #6b7c90; line-height: 1.45; }
.bxl-go { flex: none; height: 50px; }
@media (max-width: 1000px) { .bxl-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .bxs-tb span:last-child { display: none; }
  .bxs-tb { margin-bottom: 14px; font-size: .62rem; }
  .bxl-vis { padding: 18px 14px; }
  .bxl-out { flex-direction: column; align-items: flex-start; gap: 6px; }
  .bxl-out b { font-size: 2.6rem; }
  .bxl-cab { width: 22px; }
  .bxl-deck { gap: 2px; padding: 4px; }
  .bxl-foot { flex-direction: column; align-items: stretch; }
  .bxl-go { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .bxl-deck i { transition: none; } .bxs-dim::before, .bxs-dim::after, .bxs-dim span { transition: none; } }
@media (max-width: 760px) { .bxs-tb span:first-child { display: none; } .bxs-tb { justify-content: center; } .bxs-draw .bxs-dot { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: .64rem; } }
/* ================= RENTAL FLEET page ================= */
.rfg, .rfs, .rfc { --rn: #0b2d4f; --rb: #1f5a9e; --rr: #c8323a; }
.rfg .eyebrow, .rfs .eyebrow, .rfc .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1f5a9e; }
.rfg .eyebrow::before, .rfs .eyebrow::before, .rfc .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #1f5a9e, #c8323a); }
.rfg h2, .rfs h2, .rfc h2 { margin-top: 12px; color: var(--rn); font-size: clamp(1.9rem, 3vw, 2.6rem); }
/* photo viewer */
.rfg { padding: clamp(44px, 4.5vw, 64px) 0; background: #fff; }
.rfg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.rfg-ctrl { display: flex; align-items: center; gap: 10px; }
.rfg-count { margin-right: 8px; font-size: .9rem; color: #6b7c90; font-variant-numeric: tabular-nums; }
.rfg-count b { color: var(--rn); font-size: 1.2rem; }
.rfg-ctrl button { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(11, 45, 79, .15); background: #fff; color: var(--rn); cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.rfg-ctrl button svg { width: 18px; height: 18px; }
.rfg-ctrl button:hover { background: var(--rn); border-color: var(--rn); color: #fff; }
.rfg-view { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; margin-top: 24px; height: 520px; outline: none; }
.rfg-stage { position: relative; border-radius: 24px; overflow: hidden; background: #0b2d4f; }
.rfg-big { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s ease; }
.rfg-big.is-on { opacity: 1; }
.rfg-big img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s linear; }
.rfg-big.is-on img { transform: scale(1); }
.rfg-bar { position: absolute; left: 24px; right: 24px; bottom: 20px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; opacity: 0; transition: opacity .3s ease; }
.rfg-bar i { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.rfg-tick .rfg-bar { opacity: 1; }
.rfg-tick .rfg-bar i { animation: bxs-prog 5s linear forwards; }
.rfg-thumbs { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; scrollbar-width: none; padding: 2px; }
.rfg-thumbs::-webkit-scrollbar { display: none; }
.rfg-thumbs button { flex: none; height: 92px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer; opacity: .5; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .3s ease, outline-color .3s ease; }
.rfg-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.rfg-thumbs button:hover { opacity: .85; }
.rfg-thumbs button[aria-pressed="true"] { opacity: 1; outline-color: var(--rb); }
/* who rents what */
.rfs { padding: clamp(48px, 5vw, 72px) 0; background: #f5f8fb; }
.rfs-board { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); margin-top: 26px; border-radius: 28px; background: #fff; border: 1px solid rgba(11, 45, 79, .07); box-shadow: 0 40px 80px -60px rgba(11, 45, 79, .5); overflow: hidden; }
.rfs-side { padding: 30px 34px; display: flex; flex-direction: column; align-items: flex-start; }
.rfs-side--rent { background: linear-gradient(160deg, #fff, #f2f6fa); }
.rfs-top { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; width: 100%; border-bottom: 1px solid rgba(11, 45, 79, .08); }
.rfs-top img { width: 34px; height: 34px; object-fit: contain; }
.rfs-top b { display: block; color: var(--rn); }
.rfs-top small { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rr); }
.rfs-side--tr .rfs-top small { color: #1d8f62; }
.rfs-hero { width: 100%; margin: 20px 0 6px; }
.rfs-bp { display: block; width: 100%; fill: none; stroke: var(--rn); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rfs-bp .seam { stroke: rgba(11, 45, 79, .3); stroke-width: 1.2; }
.rfs-bp .gnd { stroke: rgba(11, 45, 79, .25); stroke-dasharray: .01 .012; }
.rfs-bp .hub, .rfs-bp .lamp { stroke: var(--rr); }
.rfs-side h3 { margin: 6px 0 6px; font-size: 1.4rem; color: var(--rn); }
.rfs-side p { margin: 0 0 20px; color: #4a5d72; max-width: 32em; }
.rfs-mid { position: relative; display: grid; place-items: center; }
.rfs-mid::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed rgba(11, 45, 79, .18); }
.rfs-mid span { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rn); color: #fff; font-size: .8rem; font-weight: 700; text-transform: uppercase; }
.rfs-side--tr ul { list-style: none; margin: 16px 0 14px; padding: 0; width: 100%; display: grid; gap: 4px; }
.rfs-side--tr li { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 18px; padding: 8px 0; border-bottom: 1px solid rgba(11, 45, 79, .06); color: var(--rn); font-weight: 600; }
.rfs-mini { width: 120px; fill: none; stroke: rgba(11, 45, 79, .55); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rfs-mini .gnd { stroke: rgba(11, 45, 79, .15); stroke-dasharray: .01 .015; }
.rfs-mini .hub { stroke: #22a873; }
.rfs-mini .snow { stroke: #2b6cb0; }
.rfs-link { margin-top: auto; font-weight: 700; color: #1d8f62; border-bottom: 2px solid rgba(34, 168, 115, .3); padding-bottom: 2px; }
.rfs-link:hover { border-color: #1d8f62; }
/* maintenance ring */
.rfc { padding: clamp(48px, 5vw, 72px) 0; background: #fff; }
.rfc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.rfc-list { list-style: none; margin: 26px 0 0; padding: 0; }
.rfc-list button { width: 100%; display: flex; align-items: center; gap: 16px; padding: 16px 4px; border: 0; border-bottom: 1px solid rgba(11, 45, 79, .08); background: none; font: inherit; font-size: 1.1rem; font-weight: 600; color: #8a99ab; text-align: left; cursor: pointer; transition: color .3s ease, padding .4s cubic-bezier(.22, 1, .36, 1); }
.rfc-list li:first-child button { border-top: 1px solid rgba(11, 45, 79, .08); }
.rfc-list button span { font-size: .78rem; font-weight: 700; color: inherit; }
.rfc-list button.is-done { color: #4a5d72; }
.rfc-list button[aria-pressed="true"] { color: var(--rn); padding-left: 14px; }
.rfc-list button[aria-pressed="true"] span { color: var(--rr); }
.rfc-ring { --i: 0; position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; }
.rfc-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rfc-track { fill: none; stroke: rgba(11, 45, 79, .08); stroke-width: 14; }
.rfc-arc { fill: none; stroke: url(#none); stroke: var(--rb); stroke-width: 14; stroke-linecap: round; stroke-dasharray: calc((var(--i) + 1) * 25 - 3) 100; transition: stroke-dasharray .9s cubic-bezier(.65, 0, .35, 1); }
.rfc-node { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 0; background: #fff; color: #8a99ab; font: inherit; font-weight: 800; font-size: .86rem; cursor: pointer; box-shadow: 0 0 0 2px rgba(11, 45, 79, .12), 0 10px 22px -12px rgba(11, 45, 79, .5); transform: rotate(var(--a)) translateY(calc(-1 * min(440px, 100%) * .4)) rotate(calc(-1 * var(--a))); transition: background-color .4s ease, color .4s ease, box-shadow .4s ease; }
.rfc-node.is-done { color: var(--rb); box-shadow: 0 0 0 2px var(--rb); }
.rfc-node[aria-pressed="true"] { background: var(--rn); color: #fff; box-shadow: 0 0 0 6px rgba(31, 90, 158, .18), 0 14px 26px -12px rgba(11, 45, 79, .8); }
.rfc-core { position: absolute; inset: 22%; display: grid; place-items: center; border-radius: 50%; background: #f5f8fb; text-align: center; }
.rfc-c { grid-area: 1 / 1; padding: 0 12%; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.rfc-c.is-on { opacity: 1; transform: none; transition-delay: .15s; }
.rfc-c small { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--rr); }
.rfc-c b { display: block; margin: 6px 0; font-size: 1.25rem; line-height: 1.2; color: var(--rn); }
.rfc-c p { margin: 0; font-size: .88rem; line-height: 1.45; color: #4a5d72; }
@media (max-width: 1000px) {
  .rfs-board { grid-template-columns: minmax(0, 1fr); }
  .rfs-mid { height: 44px; }
  .rfs-mid::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 1px dashed rgba(11, 45, 79, .18); }
  .rfc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .rfg-head { flex-direction: column; align-items: flex-start; }
  .rfg-view { grid-template-columns: minmax(0, 1fr); height: auto; }
  .rfg-stage { aspect-ratio: 4 / 3; border-radius: 18px; }
  .rfg-thumbs { flex-direction: row; overflow-x: auto; }
  .rfg-thumbs button { width: 76px; height: 56px; border-radius: 10px; }
  .rfs-side { padding: 22px 20px; }
  .rfs-side--tr li { grid-template-columns: 90px minmax(0, 1fr); gap: 12px; }
  .rfs-mini { width: 90px; }
  .rfs-side .rh-btn { align-self: stretch; justify-content: space-between; }
  .rfc-list { display: none; }
  .rfc-node { width: 42px; height: 42px; margin: -21px 0 0 -21px; font-size: .76rem; transform: rotate(var(--a)) translateY(-37vw) rotate(calc(-1 * var(--a))); }
  .rfc-ring { width: 92vw; max-width: 380px; }
  .rfc-c b { font-size: 1.05rem; }
  .rfc-c p { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .rfg-big, .rfg-big img, .rfc-arc, .rfc-c { transition: none; } }
.rfg-thumbs { position: relative; }
.rfc-ring { width: 440px; max-width: 100%; }
.rfc-node { transform: rotate(var(--a)) translateY(-176px) rotate(calc(-1 * var(--a))); }
@media (max-width: 760px) { .rfc-ring { width: min(92vw, 380px); } .rfc-node { transform: rotate(var(--a)) translateY(calc(min(92vw, 380px) * -.4)) rotate(calc(-1 * var(--a))); } }
.rfc-node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--rb); opacity: 0; }
.rfc-node[aria-pressed="true"]::after { animation: bxs-ring 1.8s ease-out infinite; }
/* ================= RENTAL CERTIFICATIONS ================= */
.rcb, .rcp { --rn: #0b2d4f; --rb: #1f5a9e; --rr: #c8323a; }
.rcb .eyebrow, .rcp .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1f5a9e; }
.rcb .eyebrow::before, .rcp .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #1f5a9e, #c8323a); }
.rcb h2, .rcp h2 { margin-top: 12px; color: var(--rn); font-size: clamp(1.9rem, 3vw, 2.6rem); }
/* binder */
.rcb { padding: clamp(48px, 5vw, 72px) 0; background: linear-gradient(180deg, #f5f8fb, #eef3f9); }
.rcb-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.rcb-txt .lead { margin-top: 14px; }
.rcb-binder { position: relative; height: 560px; margin-right: 84px; border-radius: 10px 22px 22px 10px; background: linear-gradient(90deg, #0b2d4f 0 46px, #15335c 46px); padding: 18px 18px 18px 64px; box-shadow: 0 50px 90px -50px rgba(11, 45, 79, .8); perspective: 1600px; }
.rcb-rings { position: absolute; left: 30px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; padding: 60px 0; z-index: 5; }
.rcb-rings i { width: 46px; height: 18px; border-radius: 10px; border: 4px solid #cfd8e3; border-left-color: #8fa0b5; background: transparent; box-shadow: 0 3px 6px rgba(0, 0, 0, .3); }
.rcb-pages { position: relative; height: 100%; }
.rcb-page { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 26px 34px 26px 40px; border-radius: 6px 14px 14px 6px; background: #fff; background-image: linear-gradient(90deg, transparent 22px, rgba(200, 50, 58, .25) 22px 23px, transparent 23px); box-shadow: 0 1px 0 #e3e9f0, 0 3px 0 #f4f7fa, 0 4px 0 #dde4ec; transform-origin: left center; visibility: hidden; backface-visibility: hidden; }
.rcb-page.is-on { visibility: visible; z-index: 2; }
.rcb-page.in-fwd { animation: rcb-in-f .8s cubic-bezier(.65, 0, .35, 1) both; }
.rcb-page.out-fwd { visibility: visible; z-index: 3; animation: rcb-out-f .8s cubic-bezier(.65, 0, .35, 1) both; }
.rcb-page.in-back { z-index: 3; animation: rcb-in-b .8s cubic-bezier(.65, 0, .35, 1) both; }
.rcb-page.out-back { visibility: visible; z-index: 2; animation: rcb-hold .8s linear both; }
@keyframes rcb-out-f { 0% { transform: rotateY(0); } 100% { transform: rotateY(-100deg); visibility: hidden; } }
@keyframes rcb-in-f { 0% { opacity: .6; } 100% { opacity: 1; } }
@keyframes rcb-in-b { 0% { transform: rotateY(-100deg); } 100% { transform: rotateY(0); } }
@keyframes rcb-hold { 0%, 99% { visibility: visible; } 100% { visibility: hidden; } }
.rcb-ph { display: flex; justify-content: space-between; width: 100%; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid rgba(11, 45, 79, .1); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a99ab; }
.rcb-no { color: var(--rr); }
.rcb-logo { display: grid; place-items: center start; height: 78px; margin-bottom: 18px; }
.rcb-logo img { max-height: 70px; max-width: 220px; object-fit: contain; }
.rcb-logo svg { height: 70px; fill: none; stroke: var(--rn); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rcb-logo svg .seam { stroke: rgba(11, 45, 79, .3); stroke-width: 1.4; }
.rcb-logo svg .gnd { stroke: rgba(11, 45, 79, .25); stroke-dasharray: .01 .012; }
.rcb-logo svg .hub, .rcb-logo svg .lamp { stroke: var(--rr); }
.rcb-sub { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rb); }
.rcb-page h3 { margin: 6px 0 8px; font-size: 1.7rem; color: var(--rn); }
.rcb-page > p { margin: 0; color: #4a5d72; line-height: 1.55; max-width: 34em; }
.rcb-you { margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--rr); border-radius: 0 12px 12px 0; background: #f5f8fb; color: var(--rn); font-weight: 600; line-height: 1.5; }
.rcb-you b { display: block; margin-bottom: 2px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rr); }
.rcb-verify { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--rb); border-bottom: 2px solid rgba(31, 90, 158, .25); padding-bottom: 2px; }
.rcb-verify svg { width: 15px; height: 15px; }
.rcb-verify:hover { border-color: var(--rb); }
.rcb-verify--req { color: #6b7c90; border-color: rgba(11, 45, 79, .12); }
.rcb-tabs { position: absolute; right: -84px; top: 34px; display: grid; gap: 8px; width: 92px; }
.rcb-tabs button { height: 52px; padding: 0 12px 0 18px; border: 0; border-radius: 0 12px 12px 0; background: #dfe7f0; color: #4a5d72; font: inherit; font-size: .78rem; font-weight: 700; text-align: left; cursor: pointer; transform: translateX(-10px); transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, color .3s ease; box-shadow: 4px 4px 10px -6px rgba(11, 45, 79, .4); }
.rcb-tabs button:nth-child(1) { background: #e6eef8; } .rcb-tabs button:nth-child(2) { background: #e2ebf6; } .rcb-tabs button:nth-child(3) { background: #e8f3ec; } .rcb-tabs button:nth-child(4) { background: #f6e9ea; }
.rcb-tabs button:hover { transform: translateX(-4px); }
.rcb-tabs button[aria-selected="true"] { transform: translateX(0); background: #fff; color: var(--rn); box-shadow: 6px 6px 14px -8px rgba(11, 45, 79, .5), inset 3px 0 0 var(--rr); }
/* document pack */
.rcp { padding: clamp(48px, 5vw, 72px) 0; background: #fff; }
.rcp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.rcp-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 8px; }
.rcp-list label { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; border: 1.5px solid rgba(11, 45, 79, .1); cursor: pointer; font-weight: 600; color: var(--rn); transition: border-color .25s ease, background-color .25s ease; }
.rcp-list label:hover { border-color: var(--rb); }
.rcp-list input { position: absolute; opacity: 0; pointer-events: none; }
.rcp-list i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid rgba(11, 45, 79, .25); color: #fff; transition: background-color .25s ease, border-color .25s ease; }
.rcp-list i svg { width: 13px; height: 13px; opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.rcp-list input:checked + i { background: var(--rb); border-color: var(--rb); }
.rcp-list input:checked + i svg { opacity: 1; transform: none; stroke-dashoffset: 0 !important; }
.rcp-list label:has(input:checked) { border-color: var(--rb); background: #f2f6fa; }
.rcp-list input:focus-visible + i { box-shadow: 0 0 0 4px rgba(31, 90, 158, .25); }
.rcp-env { position: relative; height: 470px; }
.rcp-back { position: absolute; left: 6%; right: 6%; bottom: 120px; height: 240px; border-radius: 16px 16px 6px 6px; background: #c9d6e5; }
.rcp-back::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 120px; background: #b7c7da; clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 16px 16px 0 0; transform-origin: top; transform: scaleY(-1) translateY(100%); }
.rcp-docs { position: absolute; left: 12%; right: 12%; bottom: 150px; height: 300px; }
.rcp-doc { --k: 0; position: absolute; left: 50%; bottom: 0; width: 82%; height: 200px; margin-left: -41%; padding: 18px 20px; border-radius: 10px; background: #fff; border: 1px solid rgba(11, 45, 79, .1); box-shadow: 0 10px 24px -14px rgba(11, 45, 79, .5); font-weight: 700; color: var(--rn); font-size: .92rem; background-image: linear-gradient(rgba(11, 45, 79, .06) 2px, transparent 2px); background-size: 100% 22px; background-position: 0 54px; transform: translateY(calc(-30px - var(--k) * 22px)) rotate(calc((var(--k) - 2) * 1.6deg)); transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .35s ease; animation: rcp-drop .6s cubic-bezier(.22, 1, .36, 1) both; }
.rcp-doc::before { content: ""; display: block; width: 34px; height: 4px; margin-bottom: 10px; border-radius: 2px; background: var(--rr); }
.rcp-doc.is-out { opacity: 0; transform: translateY(-160px) rotate(6deg); }
@keyframes rcp-drop { from { opacity: 0; transform: translateY(-220px) rotate(-6deg); } }
.rcp-front { position: absolute; left: 6%; right: 6%; bottom: 120px; height: 150px; display: flex; align-items: flex-end; gap: 14px; padding: 18px 22px; border-radius: 6px 6px 16px 16px; background: linear-gradient(160deg, #1f5a9e, #0b2d4f); color: #fff; box-shadow: 0 30px 60px -30px rgba(11, 45, 79, .8); clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%); z-index: 2; }
.rcp-front img { width: 34px; height: 34px; padding: 4px; border-radius: 8px; background: #fff; object-fit: contain; }
.rcp-front small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9cc4f2; }
.rcp-front b { font-size: 1.15rem; }
.rcp-cta { position: absolute; left: 6%; right: 6%; bottom: 0; display: grid; gap: 12px; }
.rcp-cta p { margin: 0; font-size: .86rem; color: #6b7c90; }
.rcp-cta .rh-btn { justify-self: start; }
@media (max-width: 1000px) {
  .rcb-grid, .rcp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .rcb-binder { height: 520px; margin-right: 0; padding: 14px 12px 64px 44px; background: linear-gradient(90deg, #0b2d4f 0 30px, #15335c 30px); }
  .rcb-rings { left: 14px; }
  .rcb-rings i { width: 34px; height: 14px; border-width: 3px; }
  .rcb-page { padding: 18px 18px 18px 30px; background-image: linear-gradient(90deg, transparent 14px, rgba(200, 50, 58, .25) 14px 15px, transparent 15px); }
  .rcb-ph span:last-child { display: none; }
  .rcb-logo { height: 56px; margin-bottom: 10px; }
  .rcb-logo img { max-height: 50px; }
  .rcb-page h3 { font-size: 1.35rem; }
  .rcb-page > p { font-size: .9rem; }
  .rcb-you { font-size: .88rem; padding: 10px 12px; }
  .rcb-tabs { right: 12px; left: 44px; top: auto; bottom: 10px; width: auto; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .rcb-tabs::-webkit-scrollbar { display: none; }
  .rcb-tabs button { flex: none; height: 40px; padding: 0 12px; border-radius: 10px; transform: none !important; font-size: .74rem; }
  .rcb-tabs button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--rr); }
  .rcp-env { height: 420px; }
  .rcp-cta .rh-btn { justify-self: stretch; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .rcb-page { animation: none !important; } .rcp-doc { animation: none; transition: none; } }
.rcp-back::before { top: auto; bottom: calc(100% - 1px); height: 86px; transform: none; border-radius: 0; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.rcp-doc { z-index: calc(20 - var(--k)); transform: translateY(calc(-24px - var(--k) * 30px)) rotate(calc((var(--k) - 2) * 1.2deg)); }
.rcp-env { height: 500px; } .rcp-docs { bottom: 150px; }
@media (max-width: 760px) { .rcp-env { height: 460px; } }
.rcp-docs { z-index: 1; }
.rcp-front { z-index: 2; }
.rcp-doc { display: block; padding: 8px 18px; font-size: .86rem; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-position: 0 40px; }
.rcp-doc::before { display: inline-block; width: 18px; height: 4px; margin: 0 10px 2px 0; vertical-align: middle; }

/* ================= RENTAL VISION page ================= */
.vsh, .vsg, .vsr { --rn: #0b2d4f; --rb: #1f5a9e; --rr: #c8323a; }
.vsg .eyebrow, .vsr .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1f5a9e; }
.vsg .eyebrow::before, .vsr .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #1f5a9e, #c8323a); }
/* hero: photo clipped inside giant type */
.vsh { position: relative; padding: clamp(120px, 12vw, 160px) 0 clamp(44px, 5vw, 70px); background: #f5f8fb; overflow: hidden; }
.vsh .crumbs { color: #6b7c90; margin-bottom: 30px; }
.vsh .crumbs a { color: #4a5d72; }
.vsh .crumbs a:hover { color: var(--rn); }
.vsh-k { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rr); }
.vsh-h { margin: 14px 0 0; font-size: clamp(3rem, 9.4vw, 10.5rem); font-weight: 800; line-height: .9; letter-spacing: -.045em; }
.vsh-h span { display: block; width: fit-content; color: transparent; background: linear-gradient(rgba(11, 45, 79, .35), rgba(11, 45, 79, .55)), url("../img/trailers/trailer-01.jpg?v=np1") center 55% / cover fixed; -webkit-background-clip: text; background-clip: text; opacity: 0; transform: translateY(.25em); animation: vsh-up 1s cubic-bezier(.22, 1, .36, 1) var(--d) forwards; }
.vsh-h span:nth-child(2) { margin-left: 8%; }
.vsh-h span:nth-child(3) { margin-left: 16%; }
@keyframes vsh-up { to { opacity: 1; transform: none; } }
.vsh-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-top: clamp(26px, 3vw, 44px); padding-top: 22px; border-top: 1px solid rgba(11, 45, 79, .12); }
.vsh-foot p { margin: 0; max-width: 32em; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; color: #33475e; }
.vsh-foot span { flex: none; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a99ab; }
/* growth line */
.vsg { padding: clamp(48px, 5vw, 76px) 0; background: #fff; }
.vsg h2 { margin-top: 12px; color: var(--rn); font-size: clamp(1.9rem, 3vw, 2.6rem); }
.vsg-chart { position: relative; height: 420px; margin-top: 30px; }
.vsg-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vsg-grid { stroke: rgba(11, 45, 79, .07); stroke-width: 1; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.vsg-line { fill: none; stroke: var(--rn); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.vsg-area { opacity: 0; transition: opacity 1.2s ease 1.6s; }
.vsg-chart.a-in .vsg-line { animation: fl-draw 2.2s cubic-bezier(.65, 0, .35, 1) .2s forwards; }
.vsg-chart.a-in .vsg-area { opacity: 1; }
.vsg-pt { position: absolute; width: 0; height: 0; }
.vsg-pt i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--rn); transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) var(--d); }
.vsg-pt i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--rb); opacity: 0; }
.vsg-chart.a-in .vsg-pt i { transform: none; }
.vsg-chart.a-in .vsg-pt i::after { animation: bxs-ring 2.4s ease-out calc(var(--d) + .5s) infinite; }
.vsg-pt:last-of-type i { box-shadow: 0 0 0 4px var(--rr); }
.vsg-pt > div { position: absolute; left: -10px; top: 26px; width: 250px; opacity: 0; transform: translateY(10px); transition: opacity .6s ease calc(var(--d) + .15s), transform .7s cubic-bezier(.22, 1, .36, 1) calc(var(--d) + .15s); }
.vsg-pt:last-of-type > div { left: auto; right: -10px; text-align: right; }
.vsg-chart.a-in .vsg-pt > div { opacity: 1; transform: none; }
.vsg-pt span { font-size: .76rem; font-weight: 700; letter-spacing: .14em; color: var(--rr); }
.vsg-pt b { display: block; margin: 4px 0 6px; font-size: 1.5rem; line-height: 1.15; color: var(--rn); }
.vsg-pt p { margin: 0; color: #4a5d72; line-height: 1.5; }
/* role */
.vsr { padding: clamp(48px, 5vw, 76px) 0; background: #f5f8fb; }
.vsr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.vsr-img { position: relative; margin: 0; height: 520px; border-radius: 28px; overflow: hidden; }
.vsr-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.8s cubic-bezier(.22, 1, .36, 1); }
.vsr-img.a-in img { transform: none; }
.vsr-img figcaption { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 12px 16px; border-radius: 14px; background: rgba(11, 45, 79, .78); backdrop-filter: blur(6px); color: #fff; font-size: .88rem; font-weight: 600; }
.vsr-list { list-style: none; margin: 22px 0 30px; padding: 0; counter-reset: none; }
.vsr-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 20px 0; border-bottom: 1px solid rgba(11, 45, 79, .1); }
.vsr-list li:first-child { border-top: 1px solid rgba(11, 45, 79, .1); }
.vsr-list span { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.2px var(--rb); }
.vsr-list b { display: block; font-size: 1.25rem; color: var(--rn); }
.vsr-list p { margin: 4px 0 0; color: #4a5d72; }
@media (max-width: 1000px) {
  .vsr-grid { grid-template-columns: minmax(0, 1fr); }
  .vsr-img { height: 340px; }
}
@media (max-width: 760px) {
  .vsh { padding-top: 104px; }
  .vsh .crumbs { margin-bottom: 18px; }
  .vsh-h { font-size: 15.5vw; }
  .vsh-h span { background-attachment: scroll; }
  .vsh-h span:nth-child(2) { margin-left: 5%; }
  .vsh-h span:nth-child(3) { margin-left: 10%; }
  .vsh-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .vsg-chart { height: auto; padding-left: 30px; }
  .vsg-chart svg { display: none; }
  .vsg-chart::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: linear-gradient(var(--rb), var(--rr)); transform: scaleY(0); transform-origin: top; transition: transform 1.4s cubic-bezier(.65, 0, .35, 1); }
  .vsg-chart.a-in::before { transform: none; }
  .vsg-pt { position: relative; left: auto !important; top: auto !important; width: auto; height: auto; padding: 0 0 26px; }
  .vsg-pt i { left: -30px; top: 4px; }
  .vsg-pt > div, .vsg-pt:last-of-type > div { position: static; width: auto; text-align: left; }
  .vsg-pt b { font-size: 1.3rem; }
  .vsr-img { height: 260px; border-radius: 20px; }
  .vsr-list li { grid-template-columns: 48px minmax(0, 1fr); }
  .vsr-list span { font-size: 1.6rem; }
  .vsr .rh-btn { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .vsh-h span { animation: none; opacity: 1; transform: none; } .vsg-line { stroke-dashoffset: 0; } .vsg-pt i, .vsg-pt > div, .vsg-area { transition: none; } }
.vsh { padding-top: clamp(110px, 10vw, 140px); }
.vsh-h { font-size: clamp(3rem, 8vw, 8.6rem); }
@media (max-width: 760px) { .vsh { padding-top: 100px; } .vsh-h { font-size: 17.5vw; } }
/* vision hero: give descenders (p, q, y) room inside the clipped background */
.vsh-h span { padding: .02em .04em .2em; margin-bottom: -.2em; }

/* ================= RENTAL ADVISOR page ================= */
.rma { --rn: #0b2d4f; --rb: #1f5a9e; --rr: #c8323a; padding: clamp(110px, 10vw, 136px) 0 clamp(48px, 5vw, 72px); background: #f5f8fb; }
.rma .crumbs { color: #6b7c90; margin-bottom: 26px; }
.rma .crumbs a { color: #4a5d72; }
.rma .crumbs a:hover { color: var(--rn); }
.rma .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1f5a9e; }
.rma .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #1f5a9e, #c8323a); }
.rma-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.rma-h { margin: 12px 0 0; color: var(--rn); font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; }
.rma-prog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 28px 0 22px; }
.rma-prog i { height: 4px; border-radius: 4px; background: rgba(11, 45, 79, .1); position: relative; overflow: hidden; }
.rma-prog i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--rb), var(--rn)); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.rma-prog i.is-on::after { transform: none; }
.rma-steps { display: grid; }
.rma-step { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; min-width: 0; opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1), visibility 0s .5s; }
.rma-step.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.rma-step legend { padding: 0; margin-bottom: 18px; font-size: 1.45rem; font-weight: 700; color: var(--rn); }
.rma-step legend span { display: block; margin-bottom: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; color: var(--rr); }
.rma-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rma-opts button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 150px; padding: 20px 20px 54px; border: 1.5px solid rgba(11, 45, 79, .12); border-radius: 18px; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, background-color .25s ease; }
.rma-opts b { font-size: 1.15rem; color: var(--rn); }
.rma-opts small { font-size: .88rem; line-height: 1.45; color: #5a6d82; }
.rma-opts button i { position: absolute; left: 20px; bottom: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(11, 45, 79, .07); color: var(--rn); transition: background-color .25s ease, color .25s ease, transform .35s ease; }
.rma-opts button i svg { width: 14px; height: 14px; }
.rma-opts button:hover { border-color: var(--rb); transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(11, 45, 79, .6); }
.rma-opts button:hover i { transform: translateX(4px); }
.rma-opts button[aria-pressed="true"] { border-color: var(--rn); background: var(--rn); }
.rma-opts button[aria-pressed="true"] b { color: #fff; }
.rma-opts button[aria-pressed="true"] small { color: rgba(255, 255, 255, .75); }
.rma-opts button[aria-pressed="true"] i { background: #fff; color: var(--rn); }
.rma-back { margin-top: 18px; padding: 6px 0; border: 0; background: none; font: inherit; font-weight: 600; color: #6b7c90; cursor: pointer; }
.rma-back:hover { color: var(--rn); }
.rma-back[hidden] { display: none; }
/* live ticket */
.rma-t { position: relative; padding: 24px 26px 22px; border-radius: 24px; background: #fff; border: 1px solid rgba(11, 45, 79, .08); box-shadow: 0 40px 80px -50px rgba(11, 45, 79, .55); }
.rma-t::before, .rma-t::after { content: ""; position: absolute; top: 86px; width: 22px; height: 22px; border-radius: 50%; background: #f5f8fb; }
.rma-t::before { left: -11px; } .rma-t::after { right: -11px; }
.rma-t-top { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 2px dashed rgba(11, 45, 79, .12); }
.rma-t-top img { width: 34px; height: 34px; object-fit: contain; }
.rma-t-top small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a99ab; }
.rma-t-top b { color: var(--rn); font-size: 1.1rem; }
.rma-stamp { margin-left: auto; padding: 4px 10px; border-radius: 999px; border: 1.5px solid rgba(11, 45, 79, .2); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b7c90; transition: all .4s ease; }
.rma-done .rma-stamp { border-color: var(--rr); color: var(--rr); transform: rotate(-6deg); }
.rma-rows { margin: 8px 0 0; }
.rma-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(11, 45, 79, .06); }
.rma-rows dt { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a99ab; }
.rma-rows dd { margin: 0; font-weight: 700; color: #b5c0cc; text-align: right; }
.rma-rows .is-set dd { color: var(--rn); }
.rma-rows .is-new dd { animation: rd-in .5s cubic-bezier(.22, 1, .36, 1); }
.rma-res { margin-top: 18px; animation: rd-in .6s cubic-bezier(.22, 1, .36, 1); }
.rma-res > span { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rr); }
.rma-res > b { display: block; margin: 4px 0; font-size: 1.4rem; color: var(--rn); }
.rma-res > p { margin: 0; color: #4a5d72; font-size: .94rem; }
.rma-res ul { list-style: none; margin: 12px 0 18px; padding: 0; display: grid; gap: 6px; }
.rma-res li { position: relative; padding-left: 24px; font-size: .9rem; color: #33475e; }
.rma-res li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 12px; height: 7px; border-left: 2px solid var(--rb); border-bottom: 2px solid var(--rb); transform: rotate(-45deg); }
.rma-act { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rma-redo { border: 0; background: none; padding: 6px 0; font: inherit; font-weight: 600; color: #6b7c90; cursor: pointer; }
.rma-redo:hover { color: var(--rn); }
.rma-hint { margin: 16px 0 0; font-size: .86rem; color: #8a99ab; }
.rma-res[hidden], .rma-hint[hidden] { display: none; }
@media (max-width: 1000px) { .rma-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .rma { padding-top: 100px; }
  .rma .crumbs { margin-bottom: 18px; }
  .rma-prog { margin: 20px 0 16px; }
  .rma-step legend { font-size: 1.2rem; }
  .rma-opts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rma-opts button { min-height: 0; padding: 14px 52px 14px 16px; gap: 2px; }
  .rma-opts button i { left: auto; right: 14px; top: 50%; bottom: auto; margin-top: -14px; }
  .rma-t { padding: 20px 18px; }
  .rma-act .rh-btn { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .rma-step, .rma-prog i::after, .rma-stamp { transition: none; } .rma-res, .rma-rows .is-new dd { animation: none; } }
/* rental quote: four rental cards instead of five services */
.qx-only + .qc-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .qx-only + .qc-cards { grid-template-columns: 1fr 1fr; } }
/* rental advisor: compact ticket so the section fits one screen */
.rma { padding-top: clamp(100px, 8.5vw, 116px); padding-bottom: clamp(40px, 4vw, 56px); }
.rma .crumbs { margin-bottom: 18px; }
.rma-t { padding: 20px 24px 18px; }
.rma-t::before, .rma-t::after { top: 74px; }
.rma-t-top { padding-bottom: 16px; }
.rma-rows > div { padding: 8px 0; }
.rma-res { margin-top: 14px; }
.rma-res > b { font-size: 1.25rem; }
.rma-res ul { margin: 10px 0 14px; gap: 4px; }
.rma-act { flex-wrap: nowrap; gap: 14px; }
.rma-act .rh-btn { padding-top: 8px; padding-bottom: 8px; font-size: .95rem; white-space: nowrap; }
@media (max-width: 760px) { .rma-act { flex-wrap: wrap; } }
/* ---- Holding mobile pass (same rules as the Together pass: no long stacked cards, swipe where it groups) ---- */
.rma-steps { overflow-x: clip; }
@media (max-width: 760px) {
  /* blueprint tabs: five number chips instead of a clipped scroller; the card below names the part */
  .bxs-draw .bxs-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; overflow: visible; }
  .bxs-draw .bxs-tabs button { font-size: 0; padding: 10px 0 12px; justify-items: center; }
  .bxs-draw .bxs-tabs button span { font-size: .82rem; }
  /* "one fleet, two companies": two swipeable panels instead of one tall card */
  .rfs-board { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: none; border: 0; box-shadow: none; border-radius: 0; margin-left: -16px; margin-right: -16px; padding: 4px 16px 18px; }
  .rfs-board::-webkit-scrollbar { display: none; }
  .rfs-mid { display: none; }
  .rfs-side { flex: 0 0 86%; scroll-snap-align: center; border-radius: 22px; background: #fff; border: 1px solid rgba(11, 45, 79, .08); box-shadow: 0 24px 50px -36px rgba(11, 45, 79, .5); }
  .rfs-side--rent { background: linear-gradient(160deg, #fff, #f2f6fa); }
}

/* ================= Mobile pass 2: footer, holding hero, duration picker, document pack ================= */
/* footer groups are <details>: neutral on desktop */
.f-col summary { list-style: none; cursor: default; }
.f-col summary::-webkit-details-marker { display: none; }
.f-col summary i { display: none; }
/* document pack: CTA under the envelope (desktop keeps the same look) */
.rcp-grid { grid-template-areas: "txt env" "txt cta"; row-gap: 22px; }
.rcp-txt { grid-area: txt; }
.rcp-env { grid-area: env; height: 380px; }
.rcp-back, .rcp-front { bottom: 0; }
.rcp-docs { bottom: 30px; }
.rcp-cta { grid-area: cta; position: static; padding: 0 6%; }
@media (max-width: 1000px) {
  .rcp-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .rcp-txt { display: contents; }
  .rcp-txt .eyebrow { order: 1; align-self: flex-start; }
  .rcp-txt h2 { order: 2; }
  .rcp-env { order: 3; height: 330px; margin-top: 10px; }
  .rcp-list { order: 4; margin-top: 18px; }
  .rcp-cta { order: 5; padding: 0; margin-top: 18px; }
}
@media (max-width: 760px) {
  /* ---- footer: brand card, two contact buttons, accordion groups, centered bottom ---- */
  .ftr--v2 { padding-top: 34px; font-size: .92rem; }
  .f-main { display: block; padding-bottom: 8px; }
  .f-brand { padding-bottom: 22px; }
  .f-brand .brand { margin-bottom: 10px; }
  .f-brand p { font-size: .9rem; margin: 0; }
  .f-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .f-chip { justify-content: center; min-width: 0; padding: 11px 10px; border-radius: 14px; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .f-chip i { width: 22px; height: 22px; flex: none; }
  .f-chip:first-child { background: rgba(200, 50, 58, .16); border-color: rgba(255, 120, 126, .35); color: #fff; }
  .f-chip:first-child i { background: #c8323a; }
  .f-col { border-top: 1px solid var(--line-dark); }
  .f-col:last-of-type { border-bottom: 1px solid var(--line-dark); }
  .f-col summary { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; cursor: pointer; }
  .f-col summary h4 { margin: 0; font-size: .8rem; }
  .f-col summary i { display: block; position: relative; width: 14px; height: 14px; }
  .f-col summary i::before, .f-col summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .7); transition: transform .3s ease; }
  .f-col summary i::after { transform: rotate(90deg); }
  .f-col[open] summary i::after { transform: rotate(0); }
  .f-col ul { grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 0 0 16px; animation: rd-in .4s cubic-bezier(.22, 1, .36, 1); }
  .f-col a { font-size: .9rem; }
  .f-bar { flex-direction: column; align-items: center; gap: 14px; padding: 20px 0 26px; border-top: 0; text-align: center; }
  .f-mbr { justify-content: center; }
  .f-copy { margin: 0; width: auto; order: 4; font-size: .76rem; opacity: .7; }
  .f-legal { order: 3; }

  /* ---- holding hero: title, lead, the drawn trailer card, one button ---- */
  .rh-grid { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; gap: 0; padding-top: 26px; padding-bottom: 26px; }
  .rh-txt { display: contents; }
  .rh-k, .rh-wa, .rh-ghost { display: none !important; }
  .rh-txt h1 { order: 1; margin: 0; }
  .rh-lead { order: 2; margin-top: 12px; }
  .rh-card { order: 3; display: block; max-width: none; margin-top: 20px; padding: 14px 16px 10px; border-radius: 20px; }
  .rh-card-top { font-size: .68rem; }
  .rh-card-top em { font-size: .72rem; }
  .rh-card dl div { padding: 9px 0; }
  .rh-card dl div:nth-child(even) { padding-left: 12px; }
  .rh-card dt { font-size: .7rem; }
  .rh-card dd { font-size: .88rem; }
  .rh-btns { order: 4; margin-top: 18px; padding-top: 0; width: 100%; }

  /* ---- duration picker: one screen — no fact grid, chips in one row, short info ---- */
  .rd-head p { display: none; }
  .rd-stops button small { display: none; }
  .rd-stops button b { white-space: nowrap; font-size: .86rem; }
  .rd-stops { height: 64px; }
  .rd-facts { display: none !important; }
  .rd-text { margin-bottom: 4px; font-size: .95rem; }
  .rd-uses { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .rd-uses::-webkit-scrollbar { display: none; }
  .rd-uses button { flex: none; white-space: nowrap; }
  .rd-info ul { display: none; }
  .rd-info p { margin: 0; font-size: .88rem; }
  .rd-side > small { display: none; }
}
@media (max-width: 760px) { .f-contact { grid-template-columns: minmax(0, 1fr); } .f-chip { justify-content: flex-start; padding: 10px 14px 10px 10px; font-size: .88rem; } .f-bar { padding-bottom: 92px; } }
/* holding hero on phones: fill the screen again — title top, card in the middle, button at the bottom */
@media (max-width: 760px) {
  .rh-grid { min-height: calc(100svh - var(--hdr)); padding-top: 34px; padding-bottom: 30px; }
  .rh-lead { margin-top: 16px; }
  .rh-card { margin: auto 0; padding: 18px 18px 12px; }
  .rh-card .rh-bp { margin: 8px 0 4px; }
  .rh-card dl div { padding: 12px 0; }
  .rh-btns { margin-top: 26px; }
}
/* holding hero without the trailer card: text column only, photo breathes on the right */
.rh-grid { grid-template-columns: minmax(0, 1fr); }
.rh-txt { max-width: 640px; }
@media (max-width: 760px) {
  .rh-txt { display: flex; flex-direction: column; flex: 1; max-width: none; }
  .rh-btns { margin-top: auto; padding-top: 26px; }
}

.rh h1 { margin-top: 0; }
/* ================= ROADSIDE SUPPORT page ================= */
.rsh, .rsp, .rsf { --rn: #0b2d4f; --rb: #1f5a9e; --rr: #c8323a; }
.rsp .eyebrow, .rsf .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1f5a9e; }
.rsp .eyebrow::before, .rsf .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #1f5a9e, #c8323a); }
.rsf .eyebrow { color: #9cc4f2; }
/* hero */
.rsh { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: radial-gradient(120% 90% at 85% 40%, #15426f 0%, #0b2d4f 45%, #071d33 100%); }
.rsh-road { position: absolute; inset: 0; z-index: -1; perspective: 600px; pointer-events: none; }
.rsh-road i { position: absolute; left: 50%; bottom: -10%; width: 34%; height: 140%; transform: translateX(-120%) rotateX(62deg); transform-origin: bottom; background: linear-gradient(90deg, transparent 0 46%, rgba(255, 255, 255, .07) 46% 54%, transparent 54%); }
.rsh-road i + i { background: repeating-linear-gradient(transparent 0 40px, rgba(255, 210, 120, .22) 40px 80px); width: 6px; transform: translateX(-60vw) rotateX(62deg); animation: rsh-dash 1.2s linear infinite; }
@keyframes rsh-dash { to { background-position: 0 80px; } }
.rsh-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 100px); align-items: center; min-height: calc(100svh - var(--hdr)); max-height: 835px; padding-top: 40px; padding-bottom: 50px; }
.rsh .crumbs { color: rgba(255, 255, 255, .6); margin-bottom: 26px; }
.rsh .crumbs a:hover { color: #fff; }
.rsh-k { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(200, 50, 58, .16); border: 1px solid rgba(255, 120, 126, .35); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffb3b7; }
.rsh-k i { width: 8px; height: 8px; border-radius: 50%; background: #ff5a62; box-shadow: 0 0 0 0 rgba(255, 90, 98, .6); animation: mn-pulse 1.8s ease-out infinite; }
.rsh h1 { margin: 18px 0 0; max-width: 12em; font-size: clamp(2.5rem, 4.3vw, 4.2rem); line-height: 1.03; letter-spacing: -.03em; color: #fff; }
.rsh-lead { margin: 18px 0 0; max-width: 30em; font-size: 1.12rem; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.rsh-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
.rsh-call { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 10px 26px 10px 10px; border-radius: 999px; background: #c8323a; color: #fff; box-shadow: 0 20px 40px -18px rgba(200, 50, 58, .9); transition: transform .3s cubic-bezier(.22, 1, .36, 1), background-color .25s ease; }
.rsh-call::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255, 90, 98, .55); animation: rsh-beat 2.2s ease-out infinite; }
@keyframes rsh-beat { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 98, .55); } 70%, 100% { box-shadow: 0 0 0 18px rgba(255, 90, 98, 0); } }
.rsh-call:hover { transform: translateY(-2px); background: #b02a32; color: #fff; }
.rsh-call i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #c8323a; }
.rsh-call i svg { width: 22px; height: 22px; animation: rsh-ring 2.2s ease-in-out infinite; }
@keyframes rsh-ring { 0%, 60%, 100% { transform: none; } 65% { transform: rotate(-14deg); } 72% { transform: rotate(12deg); } 79% { transform: rotate(-8deg); } 86% { transform: rotate(5deg); } }
.rsh-call small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.rsh-call b { font-size: 1.35rem; letter-spacing: -.01em; }
.rsh-wa { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .25); color: #fff; font-weight: 600; transition: background-color .25s ease, border-color .25s ease; }
.rsh-wa svg { width: 20px; height: 20px; color: #25d366; }
.rsh-wa:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); color: #fff; }
/* radar */
.rsh-radar { position: relative; justify-self: center; width: min(100%, 460px); }
.rsh-map { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, rgba(31, 90, 158, .35) 0%, rgba(11, 45, 79, .2) 60%, transparent 70%), repeating-radial-gradient(circle, transparent 0 58px, rgba(156, 196, 242, .14) 58px 59px), linear-gradient(rgba(156, 196, 242, .08) 1px, transparent 1px) 0 0 / 38px 38px, linear-gradient(90deg, rgba(156, 196, 242, .08) 1px, transparent 1px) 0 0 / 38px 38px; border: 1px solid rgba(156, 196, 242, .25); }
.rsh-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(156, 196, 242, .28), transparent 22%); animation: rsh-spin 4s linear infinite; }
@keyframes rsh-spin { to { transform: rotate(1turn); } }
.rsh-ring { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px; border-radius: 50%; border: 2px solid rgba(255, 90, 98, .7); animation: rsh-ping 3s ease-out infinite; }
.rsh-ring:nth-of-type(3) { animation-delay: 1s; } .rsh-ring:nth-of-type(4) { animation-delay: 2s; }
@keyframes rsh-ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(4.2); opacity: 0; } }
.rsh-pin { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -46px 0 0 -28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #c8323a; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6); }
.rsh-pin svg { width: 26px; height: 26px; color: #fff; transform: rotate(45deg); }
.rsh-pin svg path { stroke: #fff; }
.rsh-van { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: #fff; color: var(--rn); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); animation: rsh-come 6s cubic-bezier(.65, 0, .35, 1) infinite; }
.rsh-van svg { width: 22px; height: 22px; }
@keyframes rsh-come { 0% { transform: translate(-150px, 120px); opacity: 0; } 10% { opacity: 1; } 70% { transform: translate(-42px, 26px); opacity: 1; } 85%, 100% { transform: translate(-42px, 26px); opacity: 0; } }
.rsh-tag { position: absolute; right: -6px; bottom: 6%; margin: 0; display: grid; gap: 2px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .95); color: var(--rn); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.rsh-tag div { display: flex; justify-content: space-between; gap: 18px; padding: 4px 0; }
.rsh-tag div + div { border-top: 1px solid rgba(11, 45, 79, .08); }
.rsh-tag dt { font-size: .78rem; color: #6b7c90; }
.rsh-tag dd { margin: 0; font-weight: 700; font-size: .9rem; }
/* call prep */
.rsp { padding: clamp(48px, 5vw, 76px) 0; background: #f5f8fb; }
.rsp-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.rsp h2 { margin-top: 12px; color: var(--rn); font-size: clamp(1.9rem, 3vw, 2.6rem); }
.rsp-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rsp-list button { position: relative; width: 100%; height: 100%; display: flex; align-items: flex-start; gap: 14px; padding: 18px 44px 18px 18px; border-radius: 18px; border: 1.5px solid rgba(11, 45, 79, .1); background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .25s ease, background-color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.rsp-list button:hover { border-color: var(--rb); transform: translateY(-2px); }
.rsp-list button > i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(31, 90, 158, .1); color: var(--rb); transition: background-color .25s ease, color .25s ease; }
.rsp-list button > i svg { width: 20px; height: 20px; }
.rsp-list b { display: block; color: var(--rn); }
.rsp-list small { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.45; color: #5a6d82; }
.rsp-list em { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(11, 45, 79, .18); color: #fff; transition: background-color .25s ease, border-color .25s ease; }
.rsp-list em svg { width: 12px; height: 12px; opacity: 0; transition: opacity .2s ease; }
.rsp-list button[aria-pressed="true"] { border-color: var(--rn); background: #eef3f8; }
.rsp-list button[aria-pressed="true"] > i { background: var(--rn); color: #fff; }
.rsp-list button[aria-pressed="true"] em { background: #1d8f62; border-color: #1d8f62; }
.rsp-list button[aria-pressed="true"] em svg { opacity: 1; stroke-dashoffset: 0 !important; }
.rsp-note { margin: 18px 0 0; max-width: 40em; font-size: .92rem; color: #5a6d82; }
.rsp-phone { justify-self: center; width: 300px; padding: 12px; border-radius: 46px; background: #0b2d4f; box-shadow: 0 50px 90px -40px rgba(11, 45, 79, .8), inset 0 0 0 2px rgba(255, 255, 255, .08); }
.rsp-screen { position: relative; display: flex; flex-direction: column; align-items: center; padding: 40px 22px 24px; border-radius: 36px; background: linear-gradient(180deg, #123b66, #0a2540); color: #fff; text-align: center; }
.rsp-notch { position: absolute; top: 12px; left: 50%; width: 84px; height: 20px; margin-left: -42px; border-radius: 12px; background: #0b2d4f; }
.rsp-st { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9cc4f2; }
.rsp-done .rsp-st { color: #6fe0ae; }
.rsp-av { position: relative; width: 112px; height: 112px; margin: 16px 0 12px; }
.rsp-av svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rsp-trk { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 5; }
.rsp-arc { fill: none; stroke: #6fe0ae; stroke-width: 5; stroke-linecap: round; stroke-dasharray: var(--p, 0) 100; transition: stroke-dasharray .6s cubic-bezier(.22, 1, .36, 1); }
.rsp-av img { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); padding: 16px; border-radius: 50%; background: #fff; object-fit: contain; }
.rsp-name { font-size: 1.3rem; }
.rsp-num { margin-top: 2px; font-size: .92rem; color: rgba(255, 255, 255, .65); }
.rsp-sheet { list-style: none; width: 100%; margin: 18px 0 20px; padding: 0; display: grid; gap: 6px; text-align: left; }
.rsp-sheet li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: .84rem; color: rgba(255, 255, 255, .45); transition: color .3s ease, background-color .3s ease; }
.rsp-sheet li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: background-color .3s ease, box-shadow .3s ease; }
.rsp-sheet li.on { color: #fff; background: rgba(111, 224, 174, .1); }
.rsp-sheet li.on::before { background: #6fe0ae; box-shadow: 0 0 0 4px rgba(111, 224, 174, .18); }
.rsp-go { display: inline-flex; align-items: center; gap: 10px; padding: 8px 22px 8px 8px; border-radius: 999px; background: #c8323a; color: #fff; font-weight: 700; transition: transform .3s ease, background-color .25s ease; }
.rsp-go i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.rsp-go svg { width: 18px; height: 18px; }
.rsp-go:hover { color: #fff; background: #b02a32; transform: translateY(-2px); }
.rsp-done .rsp-go { background: #1d8f62; animation: rsh-beat 2s ease-out infinite; }
/* breakdown road */
.rsf { padding: clamp(48px, 5vw, 76px) 0; background: #0b2d4f; color: #fff; }
.rsf h2 { margin-top: 12px; color: #fff; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.rsf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.rsf-for { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 520px; }
.rsf-for small { width: 100%; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.rsf-for span { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); font-size: .88rem; font-weight: 600; }
.rsf-road { margin-top: 40px; }
.rsf-line { position: relative; height: 54px; margin: 0 calc(100% / 6); }
.rsf-line::before { content: ""; position: absolute; left: 0; right: 0; top: 26px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 14px, transparent 14px 26px); }
.rsf-line > i { position: absolute; left: 0; top: 26px; width: 100%; height: 2px; background: linear-gradient(90deg, #c8323a, #9cc4f2, #6fe0ae); transform: scaleX(0); transform-origin: left; }
.rsf-truck { position: absolute; left: 0; top: 4px; display: grid; place-items: center; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; background: #fff; color: var(--rn); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); }
.rsf-truck svg { width: 22px; height: 22px; }
.rsf-road.a-in .rsf-line > i { animation: rsf-fill 4.5s cubic-bezier(.65, 0, .35, 1) .4s forwards; }
.rsf-road.a-in .rsf-truck { animation: rsf-move 4.5s cubic-bezier(.65, 0, .35, 1) .4s forwards; }
@keyframes rsf-fill { to { transform: scaleX(1); } }
@keyframes rsf-move { to { left: 100%; } }
.rsf-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rsf-steps > li { padding: 22px 24px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); text-align: center; opacity: .35; transition: opacity .6s ease, background-color .6s ease, border-color .6s ease; }
.rsf-road.a-in .rsf-steps > li { opacity: 1; transition-delay: calc(.4s + var(--k) * 2s); }
.rsf-road.a-in .rsf-steps > li:last-child { background: rgba(111, 224, 174, .08); border-color: rgba(111, 224, 174, .3); }
.rsf-n { font-size: .76rem; font-weight: 700; letter-spacing: .14em; color: #ff8a90; }
.rsf-steps > li:last-child .rsf-n { color: #6fe0ae; }
.rsf-steps b { display: block; margin: 6px 0; font-size: 1.3rem; }
.rsf-steps p { margin: 0; color: rgba(255, 255, 255, .72); font-size: .95rem; }
.rsf-steps ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rsf-steps ul li { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: .8rem; color: rgba(255, 255, 255, .85); }
@media (max-width: 1000px) {
  .rsh-grid, .rsp-grid { grid-template-columns: minmax(0, 1fr); max-height: none; }
  .rsh-radar { width: min(100%, 380px); }
}
@media (max-width: 760px) {
  .rsh-grid { min-height: 0; padding-top: 26px; padding-bottom: 34px; gap: 26px; }
  .rsh .crumbs { margin-bottom: 16px; }
  .rsh h1 { font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
  .rsh-lead { font-size: 1rem; }
  .rsh-act { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .rsh-call { padding-right: 18px; }
  .rsh-call b { font-size: 1.25rem; }
  .rsh-wa { justify-content: center; }
  .rsh-radar { width: 270px; }
  .rsh-tag { right: -20px; bottom: -4px; padding: 10px 14px; }
  .rsp-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rsp-list button { padding: 14px 44px 14px 14px; }
  .rsp-phone { width: 280px; }
  .rsf-line { display: none; }
  .rsf-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 26px; }
  .rsf-steps > li { text-align: left; padding: 18px; }
  .rsf-road.a-in .rsf-steps > li { transition-delay: calc(.2s + var(--k) * .35s); }
  .rsf-steps ul { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .rsh-road i + i, .rsh-k i, .rsh-call::before, .rsh-call i svg, .rsh-sweep, .rsh-ring, .rsh-van, .rsp-done .rsp-go { animation: none; } .rsh-van { opacity: 0; } .rsf-road.a-in .rsf-line > i, .rsf-road.a-in .rsf-truck { animation-duration: .01s; } .rsf-steps > li { opacity: 1; } }
.rsh-road { display: none; }
.rsh::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(156, 196, 242, .16) 1px, transparent 1.5px) 0 0 / 26px 26px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%); mask-image: linear-gradient(90deg, transparent 30%, #000 75%); }
@media (max-width: 760px) { .rsh-tag { position: static; margin-top: 14px; } .rsh-radar { width: 100%; max-width: 330px; } .rsh-map { width: 250px; margin: 0 auto; } .rsp-sheet { display: none; } .rsp-av { margin: 12px 0 8px; } .rsp-go { margin-top: 18px; } .rsp-screen { padding-bottom: 26px; } }
/* duration picker chips on phones: stay inside the card (wrap, no bleed) */
@media (max-width: 760px) { .rd-uses { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; gap: 6px; } .rd-uses button { flex: 0 1 auto; white-space: nowrap; padding-left: 12px; padding-right: 12px; } }
@media (max-width: 380px) { .rd-uses button { font-size: .8rem; padding-left: 10px; padding-right: 10px; } }
/* phones: one photo carousel row in the rental film, not two */
@media (max-width: 760px) { .rf-film .rf-row + .rf-row { display: none; } }
/* roadside call prep on phones: title, then the phone, then the four buttons */
@media (max-width: 1000px) { .rsp-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .rsp-txt { display: contents; } .rsp-txt .eyebrow { order: 1; align-self: flex-start; } .rsp-txt h2 { order: 2; } .rsp-phone { order: 3; align-self: center; margin-top: 22px; } .rsp-list { order: 4; } .rsp-note { order: 5; } }
@media (max-width: 760px) { .rsp-phone { width: 250px; border-radius: 40px; } .rsp-screen { padding: 34px 18px 22px; border-radius: 30px; } .rsp-av { width: 92px; height: 92px; } .rsp-av img { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); padding: 12px; } }
@media (max-width: 760px) { .rd-uses { justify-content: center; } .rd-side .rd-label { display: block; text-align: center; } }
@media (max-width: 760px) { .rd-side .rd-label { display: flex !important; justify-content: center; width: 100%; } }

/* =====================================================================
   PAGE TRANSITIONS v2
   Same company: the old page sinks back, the new one slides up like a sheet.
   Other company: a circle in the new company's colour grows from where you clicked,
   the logo appears, and the cover lifts away to reveal the new site.
   ===================================================================== */
::view-transition-old(root) { animation: vt2-out .6s cubic-bezier(.65, 0, .35, 1) both; mix-blend-mode: normal; }
::view-transition-new(root) { animation: vt2-in .75s cubic-bezier(.22, 1, .36, 1) .06s both; mix-blend-mode: normal; }
@keyframes vt2-out { to { opacity: 0; transform: scale(.965); filter: blur(3px); } }
@keyframes vt2-in { from { opacity: 0; transform: translateY(48px); clip-path: inset(4% 2% 0 2% round 28px); } 60% { opacity: 1; } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0); } }

/* ---- company switch ---- */
html:active-view-transition-type(brand) .topbar,
html:active-view-transition-type(brand) .hdr,
html:active-view-transition-type(brand) .hdr .brand,
html:active-view-transition-type(brand) .hero .wrap { view-transition-name: none; }
/* Company switch: the two sites sit side by side like two cards — Transport on the left, Trailerverhuur on the right.
   The page shrinks into a card, slides over to the other company, and grows back to full size. No colour wash. */
html:active-view-transition-type(brand)::view-transition { background: #e8edf2; }
html:active-view-transition-type(brand)::view-transition-old(root),
html:active-view-transition-type(brand)::view-transition-new(root) { mix-blend-mode: normal; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(11, 30, 50, .45); }
html:active-view-transition-type(to-rental)::view-transition-old(root) { animation: vtc-out-l 1.15s cubic-bezier(.7, 0, .2, 1) both; }
html:active-view-transition-type(to-rental)::view-transition-new(root) { animation: vtc-in-r 1.15s cubic-bezier(.7, 0, .2, 1) both; }
html:active-view-transition-type(to-transport)::view-transition-old(root) { animation: vtc-out-r 1.15s cubic-bezier(.7, 0, .2, 1) both; }
html:active-view-transition-type(to-transport)::view-transition-new(root) { animation: vtc-in-l 1.15s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes vtc-out-l { 0% { transform: none; border-radius: 0; } 30% { transform: scale(.84); border-radius: 26px; } 70%, 100% { transform: translateX(-104%) scale(.84); border-radius: 26px; } }
@keyframes vtc-out-r { 0% { transform: none; border-radius: 0; } 30% { transform: scale(.84); border-radius: 26px; } 70%, 100% { transform: translateX(104%) scale(.84); border-radius: 26px; } }
@keyframes vtc-in-r { 0%, 30% { transform: translateX(104%) scale(.84); border-radius: 26px; } 70% { transform: scale(.84); border-radius: 26px; } 100% { transform: none; border-radius: 0; } }
@keyframes vtc-in-l { 0%, 30% { transform: translateX(-104%) scale(.84); border-radius: 26px; } 70% { transform: scale(.84); border-radius: 26px; } 100% { transform: none; border-radius: 0; } }
.vt-brand { display: none !important; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }
html:active-view-transition-type(brand) .hdr .lang, html:active-view-transition-type(brand) .gate-hdr .lang { view-transition-name: none; }
html:active-view-transition-type(brand) .hero-img { view-transition-name: none !important; }

/* ================= eActros 600 showcase (transport home) ================= */
.evx { --ev: #2fe39a; --ev2: #6fd3ff; position: relative; overflow: hidden; isolation: isolate; padding: clamp(64px, 6vw, 96px) 0; color: #fff; background: #06121d; }
.evx-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 78% 45%, rgba(47, 160, 255, .22), transparent 70%), radial-gradient(45% 60% at 12% 85%, rgba(47, 227, 154, .14), transparent 70%), linear-gradient(180deg, #071726, #050d16); }
.evx-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(111, 211, 255, .06) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(111, 211, 255, .06) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(70% 80% at 70% 50%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 70% 50%, #000, transparent 75%); }
/* current pulses running along the grid */
.evx-bg i { position: absolute; height: 2px; width: 180px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--ev), transparent); filter: drop-shadow(0 0 6px var(--ev)); opacity: 0; animation: evx-run 6s linear infinite; }
.evx-bg i:nth-child(1) { top: 22%; animation-delay: .5s; }
.evx-bg i:nth-child(2) { top: 58%; animation-delay: 2.6s; background: linear-gradient(90deg, transparent, var(--ev2), transparent); filter: drop-shadow(0 0 6px var(--ev2)); }
.evx-bg i:nth-child(3) { top: 86%; animation-delay: 4.2s; }
@keyframes evx-run { 0% { left: -200px; opacity: 0; } 8% { opacity: 1; } 60% { opacity: 1; } 75%, 100% { left: 110%; opacity: 0; } }
.evx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.evx-k { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(47, 227, 154, .1); border: 1px solid rgba(47, 227, 154, .35); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a8f5d2; }
.evx-k i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ev); color: #06121d; box-shadow: 0 0 0 0 rgba(47, 227, 154, .6); animation: mn-pulse 2s ease-out infinite; }
.evx-k svg { width: 15px; height: 15px; }
.evx-h { margin: 20px 0 0; line-height: .9; letter-spacing: -.045em; }
.evx-big { display: block; font-size: clamp(4.4rem, 9vw, 9rem); font-weight: 800; background: linear-gradient(100deg, #fff 0%, #fff 30%, var(--ev) 45%, var(--ev2) 55%, #fff 70%, #fff 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: evx-shine 5s ease-in-out infinite; }
@keyframes evx-shine { 0%, 15% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
.evx-word { display: block; margin-top: 4px; font-size: clamp(2.4rem, 4.4vw, 4.4rem); font-weight: 800; color: #fff; }
.evx-model { margin: 18px 0 0; font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.evx-model b { color: #fff; letter-spacing: .1em; }
.evx-lead { margin: 14px 0 0; max-width: 32em; font-size: 1.08rem; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.evx-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 30px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.evx-specs div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 18px 16px 18px 0; }
.evx-specs div + div { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .12); }
.evx-specs dd { margin: 0; font-size: clamp(1.8rem, 2.6vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.evx-specs dd b { color: var(--ev); }
.evx-specs dt { font-size: .82rem; color: rgba(255, 255, 255, .62); line-height: 1.35; }
.evx-specs dt small { display: block; font-size: .7rem; color: rgba(255, 255, 255, .4); }
.evx-charge { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.evx-bar { position: relative; flex: 1; height: 10px; border-radius: 10px; padding: 2px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); overflow: hidden; }
.evx-bar i { position: absolute; inset: 2px; border-radius: 8px; background: linear-gradient(90deg, var(--ev2), var(--ev)); box-shadow: 0 0 14px rgba(47, 227, 154, .6); transform: scaleX(0); transform-origin: left; transition: transform 2.2s cubic-bezier(.4, 0, .2, 1) .6s; }
.evx-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent) 0 0 / 40% 100% no-repeat; animation: evx-flow 1.6s linear infinite; }
@keyframes evx-flow { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.evx-on .evx-bar i { transform: none; }
.evx-charge b { min-width: 3.2em; text-align: right; color: var(--ev); font-variant-numeric: tabular-nums; letter-spacing: 0; font-size: .95rem; }
.evx-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.evx-btns .btn { box-shadow: 0 18px 40px -16px rgba(47, 227, 154, .7); }
.evx-link { font-weight: 700; color: #fff; border-bottom: 2px solid rgba(111, 211, 255, .45); padding-bottom: 2px; transition: border-color .25s ease; }
.evx-link:hover { color: #fff; border-color: var(--ev2); }
/* photo stage */
.evx-stage { --rx: 0deg; --ry: 0deg; position: relative; perspective: 1400px; }
.evx-frame { position: relative; height: clamp(440px, 34vw, 580px); border-radius: 28px; overflow: hidden; background: #0b1c2c; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.22, 1, .36, 1); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .9), 0 0 0 1px rgba(111, 211, 255, .15); touch-action: pan-y; }
.evx-ph { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s ease; }
.evx-ph.is-on { opacity: 1; }
.evx-ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 6s linear; }
.evx-ph.is-on img { transform: scale(1); }
.evx-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(5, 13, 22, .75)); }
/* charging reveal: a glowing line scans down and uncovers the photo */
.evx-frame { clip-path: inset(0 0 100% 0 round 28px); }
.evx-on .evx-frame { clip-path: inset(0 0 0 0 round 28px); transition: clip-path 1.4s cubic-bezier(.65, 0, .35, 1) .2s, transform .5s cubic-bezier(.22, 1, .36, 1); }
.evx-scan { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 3px; background: var(--ev); box-shadow: 0 0 24px 6px rgba(47, 227, 154, .55); opacity: 0; }
.evx-on .evx-scan { animation: evx-scan 1.4s cubic-bezier(.65, 0, .35, 1) .2s both; }
@keyframes evx-scan { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
/* electric current running around the frame */
.evx-wire { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.evx-wire rect { fill: none; stroke: var(--ev); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 14 86; filter: drop-shadow(0 0 5px var(--ev)); opacity: 0; }
.evx-on .evx-wire rect { opacity: 1; animation: evx-wire 4s linear 1.6s infinite; }
@keyframes evx-wire { to { stroke-dashoffset: -100; } }
.evx-cap { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 3; display: flex; align-items: baseline; gap: 14px; }
.evx-cap span { font-size: .74rem; font-weight: 700; letter-spacing: .14em; color: var(--ev); font-variant-numeric: tabular-nums; }
.evx-cap b { font-size: 1.05rem; animation: fade .5s ease; }
/* rotating badge */
.evx-badge { position: absolute; top: -34px; right: -26px; z-index: 4; width: 124px; height: 124px; border-radius: 50%; background: #06121d; box-shadow: 0 0 0 1px rgba(47, 227, 154, .35), 0 20px 40px -16px rgba(0, 0, 0, .8); }
.evx-badge svg { width: 100%; height: 100%; animation: rsh-spin 16s linear infinite; }
.evx-badge text { fill: #a8f5d2; font-size: 10.2px; font-weight: 700; letter-spacing: .14em; }
.evx-badge i { position: absolute; inset: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ev); color: #06121d; box-shadow: 0 0 30px rgba(47, 227, 154, .6); }
.evx-badge i svg { width: 26px; height: 26px; animation: none; }
/* thumbs */
.evx-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.evx-thumbs button { position: relative; height: 70px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer; opacity: .45; background: #0b1c2c; transition: opacity .3s ease, transform .3s ease; }
.evx-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.evx-thumbs button:hover { opacity: .8; transform: translateY(-2px); }
.evx-thumbs button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--ev); }
.evx-thumbs button i { position: absolute; left: 8px; right: 8px; bottom: 6px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; opacity: 0; }
.evx-thumbs button i::after { content: ""; position: absolute; inset: 0; background: var(--ev); transform: scaleX(0); transform-origin: left; }
.evx-tick .evx-thumbs button[aria-pressed="true"] i { opacity: 1; }
.evx-tick .evx-thumbs button[aria-pressed="true"] i::after { animation: bxs-prog 5s linear forwards; }
/* hero teaser pill */
.hero-ev { display: inline-flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; border-radius: 999px; background: rgba(6, 18, 29, .55); border: 1px solid rgba(47, 227, 154, .45); color: #fff; backdrop-filter: blur(8px); transition: border-color .25s ease, transform .3s ease; }
.hero-ev:hover { color: #fff; border-color: #2fe39a; transform: translateY(-2px); }
.hero-ev i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #2fe39a; color: #06121d; animation: mn-pulse 2s ease-out infinite; }
.hero-ev i svg { width: 18px; height: 18px; }
.hero-ev small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a8f5d2; }
.hero-ev span { font-weight: 700; font-size: .95rem; line-height: 1.25; }
@media (max-width: 1000px) {
  .evx-grid { grid-template-columns: minmax(0, 1fr); }
  .evx-stage { max-width: 620px; }
}
@media (max-width: 760px) {
  .evx { padding: 56px 0 60px; }
  .evx-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .evx-txt { display: contents; }
  .evx-k { order: 1; align-self: flex-start; }
  .evx-h { order: 2; margin-top: 16px; }
  .evx-big { font-size: 25vw; }
  .evx-word { font-size: 12vw; }
  .evx-model { order: 3; font-size: .82rem; }
  .evx-stage { order: 4; margin-top: 26px; }
  .evx-frame { height: 112vw; max-height: 470px; border-radius: 22px; }
  .evx-badge { width: 92px; height: 92px; top: -22px; right: -6px; }
  .evx-badge i { inset: 25px; }
  .evx-badge i svg { width: 20px; height: 20px; }
  .evx-badge text { font-size: 10.2px; }
  .evx-thumbs { gap: 8px; }
  .evx-thumbs button { height: 56px; border-radius: 12px; }
  .evx-lead { order: 5; margin-top: 22px; font-size: 1rem; }
  .evx-specs { order: 6; }
  .evx-specs div { padding: 14px 8px 14px 0; }
  .evx-specs div + div { padding-left: 12px; }
  .evx-specs dd { font-size: 1.6rem; }
  .evx-specs dt { font-size: .74rem; }
  .evx-charge { order: 7; }
  .evx-btns { order: 8; display: grid; gap: 14px; }
  .evx-btns .btn { justify-content: space-between; }
  .evx-link { justify-self: center; }
  .hero-ev { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .evx-bg i, .evx-big, .evx-k i, .evx-bar i::after, .evx-badge svg, .hero-ev i, .evx-on .evx-wire rect, .evx-on .evx-scan { animation: none !important; }
  .evx-frame { clip-path: none !important; }
  .evx-bar i { transform: none; transition: none; }
}
/* eActros: fit one screen on desktop, current = one spark travelling round the frame */
.evx { padding: clamp(48px, 4.5vw, 70px) 0; }
.evx-big { font-size: clamp(4rem, 7vw, 7.4rem); }
.evx-word { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }
.evx-h { margin-top: 16px; }
.evx-model { margin-top: 14px; }
.evx-lead { margin-top: 10px; font-size: 1.02rem; }
.evx-specs { margin-top: 22px; }
.evx-specs div { padding-top: 14px; padding-bottom: 14px; }
.evx-specs dd { white-space: nowrap; font-size: clamp(1.6rem, 2.2vw, 2.2rem); }
.evx-charge { margin-top: 18px; }
.evx-btns { margin-top: 24px; }
.evx-frame { height: clamp(400px, 29vw, 520px); }
@property --evx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.evx-ring { position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 2px; pointer-events: none; background: conic-gradient(from var(--evx-a), transparent 0 78%, rgba(111, 211, 255, .9) 88%, #2fe39a 94%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .6s ease 1.5s; }
.evx-on .evx-ring { opacity: 1; animation: evx-orbit 4.5s linear infinite; }
@keyframes evx-orbit { to { --evx-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .evx-on .evx-ring { animation: none; } }
@media (max-width: 760px) { .evx-big { font-size: 25vw; } .evx-word { font-size: 12vw; } .evx-frame { height: 112vw; max-height: 470px; } .evx-specs dd { font-size: 1.45rem; } }
.evx-cap span { white-space: nowrap; } @media (max-width: 760px) { .evx-cap { left: 16px; right: 16px; bottom: 14px; gap: 10px; } .evx-cap b { font-size: .95rem; } }
/* eActros showcase on a white background (client request): navy text, green/blue electric accents */
.evx { --ev: #14b87a; --ev2: #2a8fd6; background: #fff; color: #0b2340; }
.evx-bg { background: radial-gradient(55% 65% at 78% 45%, rgba(42, 143, 214, .10), transparent 70%), radial-gradient(40% 55% at 10% 90%, rgba(20, 184, 122, .09), transparent 70%), #fff; }
.evx-bg::before { background: linear-gradient(rgba(11, 35, 64, .05) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(11, 35, 64, .05) 1px, transparent 1px) 0 0 / 56px 56px; }
.evx-bg i { filter: none; opacity: 0; }
.evx-k { background: rgba(20, 184, 122, .08); border-color: rgba(20, 184, 122, .35); color: #0f8a5c; }
.evx-k i { color: #fff; }
.evx-big { background-image: linear-gradient(100deg, #0b2340 0%, #0b2340 30%, var(--ev) 45%, var(--ev2) 55%, #0b2340 70%, #0b2340 100%); }
.evx-word { color: #0b2340; }
.evx-model { color: #6b7c90; }
.evx-model b { color: #0b2340; }
.evx-lead { color: #4a5d72; }
.evx-specs { border-color: rgba(11, 35, 64, .1); }
.evx-specs div + div { border-left-color: rgba(11, 35, 64, .1); }
.evx-specs dd { color: #0b2340; }
.evx-specs dt { color: #5a6d82; }
.evx-specs dt small { color: #8a99ab; }
.evx-charge { color: #6b7c90; }
.evx-bar { background: #eef3f7; border-color: rgba(11, 35, 64, .1); }
.evx-bar i { box-shadow: 0 0 12px rgba(20, 184, 122, .35); }
.evx-btns .btn { box-shadow: 0 18px 40px -18px rgba(20, 120, 90, .55); }
.evx-link { color: #0b2340; border-bottom-color: rgba(42, 143, 214, .4); }
.evx-link:hover { color: #0b2340; }
.evx-frame { background: #eef3f7; box-shadow: 0 50px 100px -50px rgba(11, 35, 64, .55), 0 0 0 1px rgba(11, 35, 64, .08); }
.evx-badge { background: #fff; box-shadow: 0 0 0 1px rgba(20, 184, 122, .3), 0 20px 40px -18px rgba(11, 35, 64, .45); }
.evx-badge text { fill: #0f8a5c; }
.evx-badge i { color: #fff; box-shadow: 0 0 24px rgba(20, 184, 122, .45); }
.evx-thumbs button { background: #eef3f7; opacity: .55; }
.evx-thumbs button i { background: rgba(255, 255, 255, .6); }
.evx-cap span { color: #6ff0b8; }
.evx-cap b { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.evx-thumbs button { opacity: .7; }
/* white showcase: glows fully inside the section (no hard cut at the bottom edge) */
.evx-bg { background: radial-gradient(closest-side at 80% 45%, rgba(42, 143, 214, .10), transparent), radial-gradient(closest-side at 14% 62%, rgba(20, 184, 122, .10), transparent), #fff; background-size: 100% 100%; }
.evx-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(transparent, #fff); }
.evx-bg i { display: none; }

/* ================= JOBS: nav pill, recruiting band, careers page ================= */
.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; }
/* header pill */
.hdr .nav a.nav-hot { display: inline-flex; align-items: center; gap: 7px; color: #148a5c; font-weight: 700; }
.hdr .nav a.nav-hot i { width: 8px; height: 8px; border-radius: 50%; background: #22a873; box-shadow: 0 0 0 0 rgba(34, 168, 115, .55); animation: mn-pulse 1.8s ease-out infinite; }
.mnav a.big-hot { color: #148a5c; }
.mnav a.big-hot em { margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: #e6f6ee; color: #148a5c; font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
.f-hot { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(34, 168, 115, .18); color: #7ee2b4; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* eActros hook */
.evx-job { flex-basis: 100%; display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 8px 16px 8px 8px; border-radius: 999px; background: #e6f6ee; color: #0f6e4a; font-weight: 700; font-size: .92rem; transition: background-color .25s ease, transform .3s ease; }
.evx-job i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #14b87a; color: #fff; }
.evx-job svg { width: 14px; height: 14px; }
.evx-job:hover { background: #d4f0e2; color: #0f6e4a; transform: translateX(3px); }

/* recruiting band */
.jb { --jg: #22a873; position: relative; overflow: hidden; isolation: isolate; padding: 0 0 clamp(52px, 5vw, 76px); background: radial-gradient(60% 90% at 85% 30%, rgba(34, 168, 115, .22), transparent 70%), linear-gradient(135deg, #143a66, #0e2b4d); color: #fff; }
.jb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.5px) 0 0 / 24px 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.jb-marquee { overflow: hidden; padding: 12px 0; margin-bottom: clamp(40px, 4vw, 60px); background: var(--jg); color: #0b2a1f; transform: rotate(-1deg) scale(1.02); transform-origin: left; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .6); }
.jb-marquee > div { display: flex; width: max-content; gap: 22px; animation: jb-roll 28s linear infinite; }
.jb-marquee span { font-size: .95rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.jb-marquee i { font-style: normal; opacity: .6; }
@keyframes jb-roll { to { transform: translateX(-50%); } }
.jb-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.jb-k { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 999px; background: rgba(34, 168, 115, .16); border: 1px solid rgba(126, 226, 180, .4); color: #9ff0ca; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.jb-k i { width: 8px; height: 8px; border-radius: 50%; background: #3fe0a0; animation: mn-pulse 1.8s ease-out infinite; }
.jb-h { margin: 18px 0 0; font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; color: #fff; }
.jb-rot { display: inline-grid; height: 1.12em; overflow: hidden; vertical-align: bottom; color: #5fe8b0; }
.jb-rot b { display: block; height: 1.12em; animation: jb-words 6s cubic-bezier(.76, 0, .24, 1) infinite; }
@keyframes jb-words { 0%, 40% { transform: translateY(0); } 50%, 90% { transform: translateY(-100%); } 100% { transform: translateY(-200%); } }
.jb-lead { margin: 16px 0 0; max-width: 30em; font-size: 1.06rem; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.jb-btn { margin-top: 26px; background: var(--jg) !important; border-color: var(--jg) !important; color: #06281a !important; box-shadow: 0 18px 40px -18px rgba(34, 168, 115, .9); }
.jb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jb-card { position: relative; display: flex; flex-direction: column; min-height: 360px; border-radius: 24px; overflow: hidden; background: #fff; color: #142c47; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease; }
.jb-card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8); color: #142c47; }
.jb-ph { position: relative; height: 170px; overflow: hidden; background: #eef3f8; }
.jb-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.jb-card:hover .jb-ph img { transform: scale(1.06); }
/* office card: abstract "planning board" instead of a photo */
.jb-ph--art { background: linear-gradient(135deg, #e8f0fa, #e6f6ee); }
.jb-ph--art i { position: absolute; left: 22px; right: 22px; height: 26px; border-radius: 8px; background: #fff; box-shadow: 0 8px 18px -12px rgba(20, 44, 71, .5); }
.jb-ph--art i::before { content: ""; position: absolute; left: 10px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #22a873; }
.jb-ph--art i::after { content: ""; position: absolute; left: 28px; top: 10px; height: 6px; border-radius: 4px; background: #c9d6e5; width: var(--w, 55%); }
.jb-ph--art i:nth-child(1) { top: 26px; --w: 60%; animation: jb-row 4s ease-in-out infinite; }
.jb-ph--art i:nth-child(2) { top: 66px; --w: 42%; animation: jb-row 4s ease-in-out .6s infinite; }
.jb-ph--art i:nth-child(3) { top: 106px; --w: 70%; animation: jb-row 4s ease-in-out 1.2s infinite; }
.jb-ph--art i:nth-child(2)::before { background: #2b6cb0; }
@keyframes jb-row { 0%, 100% { transform: none; } 50% { transform: translateX(8px); } }
.jb-ico { position: absolute; left: 20px; top: 146px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #143a66; color: #fff; box-shadow: 0 12px 24px -12px rgba(20, 58, 102, .8); }
.jb-card--driver .jb-ico { background: #22a873; }
.jb-ico svg { width: 24px; height: 24px; }
.jb-body { display: grid; gap: 4px; padding: 34px 22px 0; }
.jb-body small { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #22a873; }
.jb-body b { font-size: 1.3rem; line-height: 1.2; }
.jb-body span { font-size: .92rem; line-height: 1.5; color: #4a5d72; }
.jb-go { display: inline-flex; align-items: center; gap: 8px; margin: auto 22px 22px; padding-top: 16px; font-weight: 700; color: #143a66; }
.jb-go svg { width: 16px; height: 16px; transition: transform .3s ease; }
.jb-card:hover .jb-go svg { transform: translateX(4px); }
@media (max-width: 1000px) { .jb-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .jb-marquee { margin-bottom: 36px; padding: 10px 0; }
  .jb-marquee span { font-size: .8rem; }
  .jb-h { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .jb-btn { width: 100%; justify-content: space-between; }
  .jb-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .jb-card { min-height: 0; flex-direction: row; align-items: stretch; }
  .jb-ph { width: 104px; height: auto; flex: none; }
  .jb-ph--art i { left: 10px; right: 10px; height: 18px; }
  .jb-ph--art i::after { left: 22px; top: 7px; height: 4px; }
  .jb-ph--art i::before { left: 7px; top: 6px; width: 6px; height: 6px; }
  .jb-ph--art i:nth-child(1) { top: 18px; } .jb-ph--art i:nth-child(2) { top: 46px; } .jb-ph--art i:nth-child(3) { top: 74px; }
  .jb-ico { display: none; }
  .jb-body { padding: 16px 16px 0; flex: 1; }
  .jb-body b { font-size: 1.08rem; }
  .jb-body span { font-size: .84rem; }
  .jb-go { position: absolute; right: 14px; top: 14px; margin: 0; padding: 0; font-size: 0; }
  .jb-go svg { width: 18px; height: 18px; }
  .jb-card:hover { transform: none; }
}

/* careers hero */
.crh { position: relative; overflow: hidden; padding: clamp(40px, 4vw, 64px) 0 clamp(48px, 5vw, 76px); background: linear-gradient(180deg, #f3f6fa, #fff); }
.crh .crumbs { color: #6b7c90; margin-bottom: 22px; }
.crh .crumbs a { color: #4a5d72; }
.crh .jb-k { background: #e6f6ee; border-color: rgba(34, 168, 115, .35); color: #148a5c; }
.crh .jb-k i { background: #22a873; }
.crh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; min-height: min(640px, calc(100svh - var(--hdr) - 60px)); }
.crh-h { margin: 18px 0 0; font-size: clamp(2.8rem, 5.4vw, 5.2rem); line-height: .98; letter-spacing: -.035em; color: #142c47; }
.crh-h span { display: block; opacity: 0; transform: translateY(.3em); animation: vsh-up .9s cubic-bezier(.22, 1, .36, 1) forwards; }
.crh-h span:nth-child(2) { animation-delay: .15s; }
.crh-h span:nth-child(3) { animation-delay: .3s; }
.crh-em { background: linear-gradient(90deg, #22a873, #2b6cb0); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.crh-lead { margin: 20px 0 0; max-width: 32em; font-size: 1.1rem; line-height: 1.6; color: #4a5d72; }
.crh-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.crh-wa { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; border: 1.5px solid #d9e2ee; background: #fff; color: #142c47; font-weight: 700; transition: border-color .25s ease; }
.crh-wa svg { width: 20px; height: 20px; color: #25d366; }
.crh-wa:hover { border-color: #25d366; color: #142c47; }
.crh-media { position: relative; height: clamp(380px, 32vw, 540px); }
.crh-media > img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; border-radius: 30px; box-shadow: 0 50px 100px -50px rgba(20, 44, 71, .6); }
.crh-chip { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; background: #fff; color: #142c47; font-weight: 700; box-shadow: 0 24px 48px -20px rgba(20, 44, 71, .5); animation: crh-float 5s ease-in-out infinite; }
.crh-chip svg { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: #e6f6ee; color: #148a5c; flex: none; }
.crh-chip small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b7c90; }
.crh-chip--a { left: -28px; top: 14%; }
.crh-chip--b { right: -22px; top: 46%; animation-delay: -1.6s; }
.crh-chip--b svg { background: #e8f0fa; color: #2b6cb0; }
.crh-chip--c { left: 10%; bottom: -18px; animation-delay: -3s; background: #143a66; color: #fff; }
.crh-chip--c > svg { background: #22a873; color: #fff; }
.crh-chip:hover { color: inherit; }
@keyframes crh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* roles */
.crr { padding: clamp(52px, 5vw, 80px) 0; background: #fff; }
.crr h2 { margin-top: 12px; color: #142c47; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.crr .eyebrow, .crf .eyebrow { color: #148a5c; }
.crr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.crr-card { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 26px; border: 1px solid #e3eaf2; background: linear-gradient(180deg, #fff, #f7fafc); overflow: hidden; scroll-margin-top: 110px; }
.crr-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, #22a873, #2b6cb0); }
.crr-top { display: flex; align-items: center; gap: 16px; }
.crr-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #22a873; color: #fff; flex: none; }
.crr-card--office .crr-ico { background: #143a66; }
.crr-ico svg { width: 28px; height: 28px; }
.crr-top small { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #148a5c; }
.crr-top h3 { margin: 2px 0 0; font-size: 1.5rem; color: #142c47; }
.crr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 22px 0 24px; }
.crr-cols b { display: block; margin-bottom: 10px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #6b7c90; }
.crr-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.crr-cols li { display: flex; gap: 10px; font-size: .94rem; line-height: 1.45; color: #33475e; }
.crr-cols li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 3px; border-radius: 50%; background: #e6f6ee; color: #148a5c; }
.crr-go { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 13px 22px; border-radius: 999px; background: #143a66; color: #fff; font-weight: 700; transition: background-color .25s ease, transform .3s ease; }
.crr-card--driver .crr-go { background: #22a873; color: #06281a; }
.crr-go svg { width: 16px; height: 16px; }
.crr-go:hover { transform: translateY(-2px); color: inherit; filter: brightness(1.08); }
/* why */
.crw { padding: 0 0 clamp(40px, 4vw, 60px); background: #fff; }
.crw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.crw-item { padding: 22px 24px; border-radius: 20px; background: #f3f6fa; }
.crw-item span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: #2b6cb0; box-shadow: 0 8px 18px -12px rgba(20, 44, 71, .5); }
.crw-item span svg { width: 22px; height: 22px; }
.crw-item b { display: block; margin-top: 12px; font-size: 1.1rem; color: #142c47; }
.crw-item p { margin: 4px 0 0; font-size: .92rem; color: #4a5d72; }
/* form */
.crf { padding: clamp(52px, 5vw, 80px) 0; background: linear-gradient(135deg, #143a66, #0e2b4d); color: #fff; scroll-margin-top: 80px; }
.crf .eyebrow { color: #9ff0ca; }
.crf h2 { margin-top: 12px; color: #fff; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.crf-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.crf-txt p { margin: 14px 0 0; color: rgba(255, 255, 255, .78); line-height: 1.6; }
.crf-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.crf-steps li { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.crf-steps b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(34, 168, 115, .2); color: #7ee2b4; border: 1px solid rgba(126, 226, 180, .4); }
.crf-form { display: grid; gap: 16px; padding: 28px; border-radius: 26px; background: #fff; color: #142c47; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .8); }
.crf-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.crf-roles legend { grid-column: 1 / -1; margin-bottom: 8px; padding: 0; }
.crf-role input, .cr-pill input, .cr-chk input { position: absolute; opacity: 0; pointer-events: none; }
.crf-role span { display: grid; justify-items: center; gap: 8px; padding: 16px 10px; border-radius: 16px; border: 1.5px solid #d9e2ee; text-align: center; cursor: pointer; transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.crf-role svg { width: 28px; height: 28px; color: #2b6cb0; }
.crf-role b { font-size: .9rem; line-height: 1.25; }
.crf-role:hover span { border-color: #22a873; }
.crf-role input:checked + span { border-color: #22a873; background: #f0faf5; box-shadow: inset 0 0 0 1px #22a873; }
.crf-role input:checked + span svg { color: #148a5c; }
.crf-role input:focus-visible + span { box-shadow: 0 0 0 4px rgba(34, 168, 115, .25); }
.crf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cr-pills, .cr-chks { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-pill span { display: inline-block; padding: 9px 14px; border-radius: 999px; border: 1.5px solid #d9e2ee; font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .2s ease; }
.cr-pill input:checked + span { background: #143a66; border-color: #143a66; color: #fff; }
.cr-chk { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; border-radius: 12px; border: 1.5px solid #d9e2ee; font-size: .88rem; font-weight: 600; cursor: pointer; }
.cr-chk i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 2px solid #c3cfdd; color: #fff; flex: none; transition: all .2s ease; }
.cr-chk i svg { width: 12px; height: 12px; opacity: 0; }
.cr-chk input:checked ~ i { background: #22a873; border-color: #22a873; }
.cr-chk input:checked ~ i svg { opacity: 1; }
.cr-chk:has(input:checked) { border-color: #22a873; background: #f0faf5; }
.cr-consent { border: 0; padding: 0; font-weight: 500; color: #4a5d72; align-items: flex-start; }
.cr-consent:has(input:checked) { background: none; }
.cr-consent a { color: #2b6cb0; text-decoration: underline; }
.crf-only[hidden] { display: none; }
.crf-send { justify-self: start; }
.crf .form-ok { color: #142c47; }
@media (max-width: 1000px) {
  .crh-grid, .crf-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .crr-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .crh { padding-top: 26px; }
  .crh-h { font-size: clamp(2.5rem, 12vw, 3.2rem); }
  .crh-btns { display: grid; }
  .crh-btns .btn { justify-content: space-between; }
  .crh-wa { justify-content: center; }
  .crh-media { height: 300px; margin: 0 6px; }
  .crh-chip { padding: 8px 12px 8px 8px; font-size: .85rem; }
  .crh-chip svg { width: 28px; height: 28px; padding: 6px; }
  .crh-chip--a { left: -10px; top: 8%; }
  .crh-chip--b { right: -10px; top: auto; bottom: 26%; }
  .crh-chip--c { left: 12px; bottom: -16px; }
  .crr-card { padding: 22px 18px; }
  .crr-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .crr-go { align-self: stretch; justify-content: space-between; }
  .crw-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .crf-form { padding: 20px 16px; }
  .crf-roles { grid-template-columns: minmax(0, 1fr); }
  .crf-role span { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; padding: 12px 14px; }
  .crf-row { grid-template-columns: minmax(0, 1fr); }
  .crf-send { justify-self: stretch; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .jb-marquee > div, .jb-rot b, .jb-ph--art i, .crh-chip, .hdr .nav a.nav-hot i { animation: none !important; } .crh-h span { animation: none; opacity: 1; transform: none; } }
.jb-marquee { transform: rotate(-1deg) scale(1.06); transform-origin: center; margin-top: 6px; }
/* Careers form: compact on desktop so the section fits one screen */
@media (min-width: 981px) {
  .crf { padding: 34px 0; }
  .crf-form { gap: 12px; padding: 22px 26px; }
  .crf-role span { grid-auto-flow: column; justify-content: center; align-items: center; gap: 8px; padding: 11px 10px; min-height: 52px; }
  .crf-role svg { width: 22px; height: 22px; }
  .crf-form .field input { height: 44px; }
  .crf-form .field textarea { height: 72px; }
  .crf-form .field label, .crf-form .field > span { margin-bottom: 4px; }
  .cr-pill span { padding: 7px 13px; }
  .cr-chk { padding: 6px 11px 6px 7px; }
}
.crf-role, .cr-pill, .cr-chk { position: relative; }
.crf-role input, .cr-pill input, .cr-chk input { width: 1px !important; height: 1px !important; left: 0; top: 0; margin: 0; padding: 0; }

/* ---- 2026-10-13 polish ---- */
/* Rental CTA: white button on the blue band, same as the transport side */
.brand-rental .cta .btn--green { background: #fff; color: #15335c; box-shadow: 0 14px 30px -16px rgba(5, 20, 45, .55); }
.brand-rental .cta .btn--green:hover { background: #e6eef8; color: #0f2442; transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(5, 20, 45, .6); }
.brand-rental .cta .btn--green:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* "Wie doet wat" on phones: logo on top so the labels get the full card width */
@media (max-width: 520px) {
  .so-co { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 14px 16px; }
  .so-co img { width: 32px; height: 32px; }
  .so-co span { min-width: 0; }
  .so-co small { font-size: .64rem; letter-spacing: .05em; line-height: 1.35; margin-bottom: 4px; }
  .so-co b { font-size: .98rem; line-height: 1.25; }
}
/* Certification badges on phones: one clean row each, nothing touches the edge */
@media (max-width: 520px) {
  .why-badges .mbr, .ctb-badges .mbr { grid-template-columns: 1fr; width: 100%; gap: 8px; }
  .why-badges .mbr a, .ctb-badges .mbr > a, .why-badges .mbr a:nth-child(3), .ctb-badges .mbr > a:nth-child(3) { justify-self: stretch; padding: 8px 14px 8px 8px; gap: 12px; }
  .why-badges .mbr-logo, .ctb-badges .mbr-logo { width: 72px; height: 40px; }
  .why-badges .mbr-logo img, .ctb-badges .mbr-logo img { max-width: 60px; max-height: 28px; }
  .why-badges .mbr b, .ctb-badges .mbr b { font-size: .95rem; }
  .why-badges .mbr small, .ctb-badges .mbr small { font-size: .78rem; }
}/* Job cards on phones: breathing room around the text, clear of the arrow */
@media (max-width: 760px) {
  .jb-body { padding: 20px 46px 22px 20px; gap: 5px; align-content: center; }
  .jb-body small { margin-bottom: 2px; }
  .jb-go { right: 18px; top: 18px; }
}/* "Wie doet wat": company cards link to their own site */
a.so-co { text-decoration: none; color: #22a873; padding-right: 46px; cursor: pointer; }
a.so-co.is-holding { color: #c8323a; }
a.so-co:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.so-go { position: absolute; right: 12px; top: 50%; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: #f2faf6; color: #22a873; transition: background-color .3s ease, color .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
.so-co.is-holding .so-go { background: #fdf3f3; color: #c8323a; }
.so-go svg { width: 14px; height: 14px; }
@media (hover: hover) {
  a.so-co:hover { border-color: currentColor; box-shadow: 0 26px 48px -24px rgba(15, 39, 71, .8); }
  a.so-co:hover .so-go { background: currentColor; transform: rotate(45deg); }
  a.so-co:hover .so-go svg { color: #fff; }
}
@media (max-width: 520px) {
  a.so-co { padding-right: 14px; }
  .so-go { top: 14px; right: 12px; margin-top: 0; }
}/* "Welke past bij jou?": green call-to-action buttons, matching the logo */
.sit-cta { background: linear-gradient(135deg, #22a873, #188a5c); box-shadow: 0 12px 26px -16px rgba(24, 138, 92, .85); }
.sit-cta i { background: rgba(255, 255, 255, .18); }
.sit--v2:hover .sit-cta { background: linear-gradient(135deg, #1c9466, #12744d); box-shadow: 0 18px 32px -16px rgba(18, 116, 77, .95); }
.sit--v2:hover .sit-cta i { background: rgba(255, 255, 255, .26); }
.sit-cta:focus-visible { outline: 2px solid #188a5c; outline-offset: 3px; }
.sit--tire .sit-cta { background: #8e1d22; box-shadow: none; }
.sit--tire:hover .sit-cta { background: #b3262d; box-shadow: 0 16px 30px -16px rgba(179, 38, 45, .9); }
/* ---- Brand accents (2026-10-13) ----
   Blue stays the dominant colour (trust). Each company gets its own colour in small,
   consistent details: green = FG Together B.V. (transport), red = FG Together Holding B.V. (rental). */
body.brand-transport { --brand: #22a873; --brand-ink: #148a5c; --brand-tint: #e8f6ef; --brand-soft: rgba(34, 168, 115, .14); }
body.brand-rental { --brand: #c8323a; --brand-ink: #a8262d; --brand-tint: #fbeeee; --brand-soft: rgba(200, 50, 58, .12); }
/* thin brand line across the top of the header */
.brand-transport .hdr::before, .brand-rental .hdr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 35%, #1b4a85 100%); pointer-events: none; z-index: 2; }
/* active menu item: small brand dot */
.brand-transport .hdr .nav a[aria-current="page"]::after, .brand-rental .hdr .nav a[aria-current="page"]::after { content: ""; display: block; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--brand); }
/* section eyebrows: the short line carries the brand colour, the text stays blue */
.brand-transport .eyebrow::before, .brand-rental .eyebrow::before { background: var(--brand); }
/* FAQ: open state in the brand colour */
.brand-transport details[open] .fq-n, .brand-rental details[open] .fq-n { background: var(--brand-ink); }
.brand-rental details[open] .fq-ico { background: var(--brand); }
/* footer: brand line on top */
.brand-transport .ftr, .brand-rental .ftr { box-shadow: inset 0 3px 0 var(--brand); }
/* text selection + keyboard focus */
.brand-transport ::selection, .brand-rental ::selection { background: var(--brand-soft); color: inherit; }
.brand-transport :focus-visible, .brand-rental :focus-visible { outline-color: var(--brand); }
/* ---- Together Holding: more red, still balanced (2026-10-13) ----
   Mirrors the transport side: main call-to-action buttons carry the brand colour,
   blue keeps the bands, headings and structure. */
.brand-rental .rh-btn, .brand-rental .hdr-cta.btn--green, .brand-rental .mnav-foot .btn--green {
  background: linear-gradient(135deg, #d0353d, #a8262d); color: #fff; box-shadow: 0 18px 34px -18px rgba(168, 38, 45, .9);
}
.brand-rental .rh-btn:hover, .brand-rental .hdr-cta.btn--green:hover, .brand-rental .mnav-foot .btn--green:hover {
  background: linear-gradient(135deg, #b82d34, #8e1d22); color: #fff; box-shadow: 0 20px 38px -18px rgba(142, 29, 34, .95);
}
.brand-rental .rh-btn i { background: rgba(255, 255, 255, .2); }
/* checkmarks in the included-in-rental lists */
.brand-rental .rk-doc li i, .brand-rental .rd-info li i, .brand-rental .bxu-in li i { background: rgba(200, 50, 58, .1); color: #c8323a; }
/* duration slider: the chosen stop */
.brand-rental .rd-stops button[aria-selected="true"] i { border-color: #c8323a; background: #c8323a; box-shadow: 0 0 0 6px rgba(200, 50, 58, .15); }
/* text links: blue text, red underline */
.brand-rental .rf-links a { border-bottom-color: rgba(200, 50, 58, .35); }
.brand-rental .rf-links a:hover { border-bottom-color: #c8323a; }
/* "Zo werkt huren" step numbers get a red outline */
.brand-rental .rs-n { -webkit-text-stroke-color: rgba(255, 107, 114, .75); }
/* FAQ numbers */
.brand-rental .fq-n { background: #fbeeee; color: #a8262d; }.brand-rental main .btn--green { background: linear-gradient(135deg, #d0353d, #a8262d); color: #fff; box-shadow: 0 16px 30px -18px rgba(168, 38, 45, .9); }
.brand-rental main .btn--green:hover { background: linear-gradient(135deg, #b82d34, #8e1d22); color: #fff; }
/* ---- Mobile menu: compact, every item visible without scrolling (2026-10-13) ----
   Sized on the *visible* screen height (dvh), so browser bars are taken into account. */
@media (max-width: 1380px) {
  .mnav { padding-top: clamp(8px, 1.6dvh, 16px); }
  .mnav .co-switch--m { margin-bottom: clamp(4px, 1dvh, 10px); }
  .mnav .co-switch--m a { padding: 6px 12px; font-size: .84rem; }
  .mnav a.big { font-size: clamp(1rem, 2.6dvh, 1.26rem); padding: clamp(6px, 1.05dvh, 10px) 2px; gap: 14px; }
  .mnav a.big::before { min-width: 20px; font-size: .64rem; }
  .mnav a.big::after { width: clamp(26px, 3.4dvh, 30px); height: clamp(26px, 3.4dvh, 30px); background-size: 12px; }
  .mnav-foot { padding-top: clamp(10px, 1.8dvh, 18px); gap: clamp(6px, 1dvh, 10px) 10px; }
  .mnav-foot .btn { height: clamp(42px, 5.6dvh, 50px); font-size: .92rem; }
  .mnav-foot .soc a { width: 34px; height: 34px; }
}
/* "We zoeken je" tag always on one line */
.mnav a.big-hot em { flex: none; white-space: nowrap; line-height: 1.4; }@media (max-width: 1380px) and (max-height: 640px) {
  .mnav a.big { padding-top: 4px; padding-bottom: 4px; }
  .mnav-foot { padding-top: 8px; gap: 6px 10px; }
  .mnav-foot .btn { height: 40px; }
  .mnav-foot .soc a { width: 30px; height: 30px; }
}

/* ---- Mobile menu v3: app-style tiles (2026-10-13) ----
   Company switch, 2-column tiles with brand-coloured icons, contact card at the bottom.
   Everything is sized on the visible screen height (dvh) so it never scrolls. */
@media (max-width: 1380px) {
  .mnav { --mn-ink: #0b2d4f; --mn-tint: #e8f6ef; --mn-hi: #148a5c; padding: clamp(10px, 1.6dvh, 16px) var(--gutter) max(clamp(10px, 1.6dvh, 16px), env(safe-area-inset-bottom)); gap: 0; }
  .brand-rental .mnav { --mn-tint: #fbeeee; --mn-hi: #a8262d; }
  /* company switch: full-width segmented control */
  .mnav .co-switch--m { display: grid; grid-template-columns: 1fr 1fr; align-self: stretch; width: 100%; margin: 0 0 clamp(10px, 1.6dvh, 14px); padding: 4px; border-radius: 14px; }
  .mnav .co-switch--m a { display: flex; align-items: center; justify-content: center; height: clamp(34px, 4.8dvh, 40px); padding: 0 10px; border-radius: 10px; font-size: .86rem; font-weight: 600; }
  /* tiles */
  .mnav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 1dvh, 10px); }
  .mnav-grid a.big { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; min-height: clamp(48px, 9.2dvh, 78px); padding: 8px 10px 8px 8px; border: 1px solid rgba(11, 45, 79, .07); border-bottom: 1px solid rgba(11, 45, 79, .07); border-radius: 14px; background: #f6f8fb; color: var(--mn-ink); font-size: clamp(.86rem, 2.05dvh, .98rem); font-weight: 600; line-height: 1.2; letter-spacing: 0; transition: opacity .45s ease, transform .5s cubic-bezier(.22, 1, .36, 1), background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
  .mnav-grid a.big::before { content: ""; counter-increment: none; grid-row: auto; align-self: center; width: clamp(30px, 4.4dvh, 36px); height: clamp(30px, 4.4dvh, 36px); min-width: 0; margin: 0; border-radius: 10px; background: var(--mn-tint); transition: background-color .25s ease; }
  .mnav-grid a.big::after { content: ""; position: absolute; left: calc(8px + clamp(30px, 4.4dvh, 36px) / 2 - 9px); top: 50%; width: 18px; height: 18px; margin: -9px 0 0; border: 0; border-radius: 0; opacity: 1; transform: none; background: var(--mn-acc); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; transition: background-color .25s ease; }
  .mnav-grid a.big:active, .mnav-grid a.big:hover { background: #fff; border-color: color-mix(in srgb, var(--mn-acc) 45%, transparent); box-shadow: 0 10px 22px -16px rgba(11, 45, 79, .45); color: var(--mn-ink); }
  .mnav-grid a.big:active::after, .mnav-grid a.big:hover::after { transform: none; background-color: var(--mn-acc); }
  /* current page */
  .mnav-grid a.big[aria-current="page"] { background: #fff; border-color: var(--mn-acc); color: var(--mn-ink); box-shadow: 0 10px 22px -16px rgba(11, 45, 79, .45); }
  .mnav-grid a.big[aria-current="page"]::before { background: var(--mn-acc); }
  .mnav-grid a.big[aria-current="page"]::after { background: #fff; border-color: transparent; transform: none; }
  /* vacatures: highlighted tile, tag becomes a subtitle */
  .mnav-grid a.big-hot { background: var(--mn-tint); border-color: rgba(34, 168, 115, .28); color: var(--mn-ink); }
  .mnav-grid a.big-hot::before { grid-row: span 2; background: #fff; }
  .mnav-grid a.big-hot { align-content: center; row-gap: 0; }
  .mnav-grid a.big-hot em { grid-column: 2; display: inline-flex; align-items: center; gap: 5px; justify-self: start; margin: 2px 0 0; padding: 0; background: none; color: var(--mn-hi); font-size: .6rem; letter-spacing: .08em; line-height: 1.2; }
  .mnav-grid a.big-hot em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22a873; animation: mn-pulse 1.8s ease-out infinite; }
  /* staggered entrance */
  .mnav-grid a.big { transform: translateY(10px) scale(.98); }
  .menu-open .mnav-grid a.big { transform: none; }
  .menu-open .mnav-grid a.big:nth-child(1) { transition-delay: .12s; } .menu-open .mnav-grid a.big:nth-child(2) { transition-delay: .16s; }
  .menu-open .mnav-grid a.big:nth-child(3) { transition-delay: .2s; }  .menu-open .mnav-grid a.big:nth-child(4) { transition-delay: .24s; }
  .menu-open .mnav-grid a.big:nth-child(5) { transition-delay: .28s; } .menu-open .mnav-grid a.big:nth-child(6) { transition-delay: .32s; }
  .menu-open .mnav-grid a.big:nth-child(7) { transition-delay: .36s; } .menu-open .mnav-grid a.big:nth-child(8) { transition-delay: .4s; }
  /* contact card */
  .mnav-grid { margin-bottom: clamp(10px, 1.6dvh, 16px); }
  .mnav-foot { margin-top: auto; padding: clamp(10px, 1.5dvh, 14px); border: 1px solid rgba(11, 45, 79, .07); border-radius: 18px; background: #f6f8fb; grid-template-columns: 1fr auto; gap: clamp(6px, 1dvh, 10px) 10px; }
  .mnav-foot .btn { height: clamp(42px, 5.6dvh, 50px); border-radius: 12px; font-size: .92rem; }
  .brand-transport .mnav-foot .btn--green { background: linear-gradient(135deg, #22a873, #188a5c); color: #fff; box-shadow: 0 14px 28px -16px rgba(24, 138, 92, .9); }
  .mnav-foot .btn--outline { height: clamp(38px, 5dvh, 44px); background: #fff; }
  .mnav-foot .mnav-mail { font-size: .86rem; }
  .mnav-foot .soc a { width: 32px; height: 32px; background: #fff; }
  .mnav-grid a.big[href$="services.html"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 8l9 5 9-5-9-5ZM3 12l9 5 9-5M3 16l9 5 9-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 8l9 5 9-5-9-5ZM3 12l9 5 9-5M3 16l9 5 9-5'/%3E%3C/svg%3E"); }
  .mnav-grid a.big[href$="fleet.html"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7M7 19a2 2 0 1 0 0-.1M17 19a2 2 0 1 0 0-.1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7M7 19a2 2 0 1 0 0-.1M17 19a2 2 0 1 0 0-.1'/%3E%3C/svg%3E"); }
  .mnav-grid a.big[href$="coverage.html"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11ZM12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11ZM12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E"); }
  .mnav-grid a.big[href$="certifications.html"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3ZM9 12l2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3ZM9 12l2 2 4-4'/%3E%3C/svg%3E"); }
  .mnav-grid a.big[href$="about.html"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM2 21a7 7 0 0 1 14 0M17 3.5a4 4 0 0 1 0 7.5M22 21a7 7 0 0 0-4-6.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM2 21a7 7 0 0 1 14 0M17 3.5a4 4 0 0 1 0 7.5M22 21a7 7 0 0 0-4-6.3'/%3E%3C/svg%3E"); }
  .mnav-grid a.big[href$="news.html"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h13v14H6a2 2 0 0 1-2-2V5ZM17 9h3v8a2 2 0 0 1-2 2M8 9h5M8 13h5M8 16h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h13v14H6a2 2 0 0 1-2-2V5ZM17 9h3v8a2 2 0 0 1-2 2M8 9h5M8 13h5M8 16h3'/%3E%3C/svg%3E"); }
  .mnav-grid a.big[href$="contact.html"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4V5ZM8 10h8M8 13h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4V5ZM8 10h8M8 13h5'/%3E%3C/svg%3E"); }
  .mnav-grid a.big[href$="careers.html"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v11H4zM9 8V5h6v3M4 13h16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v11H4zM9 8V5h6v3M4 13h16'/%3E%3C/svg%3E"); }
  .mnav-grid a.big[href$="box-trailers.html"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h17v10H2zM19 11h3M6 19a2 2 0 1 0 0-.1M15 19a2 2 0 1 0 0-.1M2 16h17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h17v10H2zM19 11h3M6 19a2 2 0 1 0 0-.1M15 19a2 2 0 1 0 0-.1M2 16h17'/%3E%3C/svg%3E"); }
  .mnav-grid a.big[href$="vision.html"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E"); }
  .mnav-grid a.big[href$="roadside-support.html"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 3.5a5 5 0 0 0-5.3 6.7L3 16.4 7.6 21l6.2-6.2a5 5 0 0 0 6.7-5.3l-3 3-3.5-1-1-3.5 3-3a5 5 0 0 0-1.5-1.5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 3.5a5 5 0 0 0-5.3 6.7L3 16.4 7.6 21l6.2-6.2a5 5 0 0 0 6.7-5.3l-3 3-3.5-1-1-3.5 3-3a5 5 0 0 0-1.5-1.5Z'/%3E%3C/svg%3E"); }
}
@media (max-width: 1380px) and (max-height: 640px) {
  .mnav-grid a.big { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { .mnav-grid a.big { transform: none !important; } .mnav-grid a.big-hot em::before { animation: none; } }
@media (max-width: 1380px) {
  .mnav-grid a.big { min-height: clamp(48px, 10dvh, 82px); }
  .brand-rental .mnav-grid a.big { min-height: clamp(52px, 12dvh, 96px); }
}
@media (max-width: 1380px) and (max-height: 640px) {
  .mnav-grid a.big { min-height: 50px; }
  .brand-rental .mnav-grid a.big { min-height: 62px; }
}
/* ---- Phone header: menu left, logo centred, language right (2026-10-13) ---- */
@media (max-width: 760px) {
  .hdr .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px; }
  .hdr .hdr-l, .hdr .hdr-r { display: contents; }
  .hdr .nav, .hdr .co-switch, .hdr .hdr-tel, .hdr .hdr-cta { display: none !important; }
  .hdr .menu-btn { grid-column: 1; grid-row: 1; justify-self: start; display: block; margin: 0 0 0 -10px; }
  .hdr .brand { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; min-width: 0; }
  .hdr .lang { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
}@media (max-width: 760px) { .hdr .wrap { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
@media (max-width: 350px) { .hdr .lang a { padding-left: 8px; padding-right: 8px; font-size: .78rem; } .hdr .wrap { column-gap: 4px; } }@media (max-width: 350px) { .hdr .brand { gap: 6px; } .hdr .brand img { width: 24px; height: 24px; } .brand-rental .hdr .brand-name { font-size: 13px; } }@media (max-width: 350px) { .hdr .wrap { padding-left: 12px; padding-right: 12px; } .hdr .menu-btn { margin-left: -8px; } }/* a bit more room between the screen edge and the menu button */
@media (max-width: 760px) { .hdr .menu-btn { margin-left: -2px; } }
@media (max-width: 350px) { .hdr .menu-btn { margin-left: -2px; } }
/* ================= 2026-10-19 client feedback =================
   1) Certifications "dossier": no corporate red (reads as warning) — trust colours only: navy, blue, calm green.
   2) Landing pechhulp band: two choices ("Ik heb pech" red / "Ik heb een vraag" white) that reveal the right number(s). */
.rcb, .rcp { --rr: #23885c; }
.rcb .eyebrow::before, .rcp .eyebrow::before { background: linear-gradient(90deg, #1f5a9e, #23885c); }
.rcb-page { background-image: linear-gradient(90deg, transparent 22px, rgba(31, 90, 158, .16) 22px 23px, transparent 23px); }
.rcb-tabs button:nth-child(4) { background: #eef1f5; }
.rcb-you { background: #f2f8f5; }
@media (max-width: 760px) {
  .rcb-page { background-image: linear-gradient(90deg, transparent 14px, rgba(31, 90, 158, .16) 14px 15px, transparent 15px); }
}

.ph-views { display: grid; }
.ph-view { grid-area: 1 / 1; }
html.js .ph-view { visibility: hidden; opacity: 0; transform: translateY(5px); transition: opacity .28s ease, transform .32s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .32s; }
html.js .ph-view.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity .28s ease .06s, transform .32s cubic-bezier(.22, 1, .36, 1) .06s, visibility 0s; }
html:not(.js) .ph-view[data-ph-view="choose"] { display: none; }
html:not(.js) .ph-view { grid-area: auto; }
button.ph-btn { font: inherit; font-weight: 700; cursor: pointer; }
.gate-ph button.ph-btn { font-size: .88rem; }
.ph-btn svg.ph-ask { transform: none; }
.ph-back { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid #e3e4e6; border-radius: 4px; background: rgba(255, 255, 255, .9); color: #6b7077; cursor: pointer; transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.ph-back svg { width: 15px; height: 15px; }
.ph-back:hover { color: #1e2329; background: #fff; transform: translateY(-2px); }
.ph-label { transition: color .2s ease; }
.ph-act[data-ph="sos"] .ph-label { color: #d42a32; }
.ph-btn:focus-visible, .ph-back:focus-visible { outline: 2px solid #1f5a9e; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html.js .ph-view, html.js .ph-view.is-on { transition: none; transform: none; } }
@media (max-width: 640px) {
  .ph-view[data-ph-view="choose"] { grid-template-columns: 1fr 1fr; }
  .ph-view[data-ph-view="choose"] .ph-btn--main { grid-column: auto; height: 44px; font-size: .9rem; }
  .ph-view[data-ph-view="sos"] { grid-template-columns: minmax(0, 1fr) auto; }
  .ph-view[data-ph-view="sos"] .ph-btn--main { grid-column: auto; height: 44px; }
  .ph-view[data-ph-view="info"] { grid-template-columns: 1fr 1fr auto; }
  .ph-back { width: 44px; height: 44px; }
}
@media (max-width: 760px) {
  .gate-ph .ph-view[data-ph-view="choose"] { grid-template-columns: 1fr 1fr !important; }
  .gate-ph .ph-view[data-ph-view="sos"] { grid-template-columns: minmax(0, 1fr) 38px !important; }
  .gate-ph .ph-view[data-ph-view="info"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px !important; }
  .gate-ph .ph-back { width: 38px; height: 38px; }
  .gate-ph button.ph-btn { font-size: .8rem !important; }
}
/* 2026-10-19: gauge label is now "koeltransport" (longer than "koudeketen"), keep it clear of the ring */
.cold-gauge .g-val small { letter-spacing: .04em; }
@media (max-width: 900px) { .cold-gauge .g-val small { font-size: .64rem; } }
/* 2026-10-19: one green dot only: the current page already has the highlighted pill, so no extra dot under it (the Vacatures dot stays) */
.brand-transport .hdr .nav a[aria-current="page"]::after, .brand-rental .hdr .nav a[aria-current="page"]::after { display: none; }
/* 2026-10-19: forms send directly (fgmail): sending / sent / error states + CV upload */
.form-err { display: none; padding: 16px 18px; border-left: 3px solid #b7791f; border-radius: 0 10px 10px 0; background: #fff8e8; color: #4a3608; line-height: 1.55; }
.form-err.on { display: block; }
.form-err a, .form-ok a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.form-ok { border-radius: 0 10px 10px 0; line-height: 1.55; }
.form-ok b { display: block; margin-bottom: 2px; }
.form-ok [data-form-ref] { display: block; margin-top: 6px; font-size: .86rem; font-weight: 700; letter-spacing: .04em; opacity: .75; }
form.is-sending [type="submit"] { opacity: .65; cursor: progress; }
form.is-sending [type="submit"] svg { animation: fg-send 1s ease-in-out infinite; }
@keyframes fg-send { 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { form.is-sending [type="submit"] svg { animation: none; } }
.crf-cv .flabel small { font-weight: 500; opacity: .7; }
.crf-file { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1.5px dashed #c9d6e5; border-radius: 12px; background: #f7fafc; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.crf-file:hover, .crf-file:focus-within { border-color: #20b878; background: #f1faf6; }
.crf-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.crf-file-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: #fff; color: #178a5a; box-shadow: 0 4px 10px -6px rgba(20, 44, 71, .4); }
.crf-file-ico svg { width: 19px; height: 19px; }
.crf-file-t { flex: 1 1 140px; min-width: 0; font-weight: 700; color: #142c47; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crf-file small { color: #6b7c90; font-size: .8rem; }
.crf-file.has-file { border-style: solid; border-color: #20b878; background: #f1faf6; }
/* 2026-10-19: advisor steps with one question advance on click, so their Next button is hidden */
.wiz-next[hidden] { display: none !important; }
.wiz-nav:has(.wiz-next[hidden]) { justify-content: flex-start; }