/* RN Group — "Clearance Desk" (Demo H2)
   Soft grey page with white rounded panels; deep harbour navy for type and dark bands;
   one teal accent for actions. Home opens on a full-screen port video. */
:root {
  --bg: #F5F7F8;
  --panel: #FFFFFF;
  --line: #E1E7EA;
  --field: #CBD6DB;
  --ink: #0C2A3A;
  --text: #33464F;
  --muted: #4B6470;
  --navy: #0C2A3A;
  --teal: #0B6E6D;
  --teal-2: #095857;
  --teal-soft: #E3F2F1;
  --wa: #1F9D55;
  --ok: #1D7A4F;
  --err: #B3261E;
  --display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1320px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.65 var(--body); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--teal); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(40px, 6vw, 80px); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; letter-spacing: -0.015em; }
h3 { font-size: 22px; font-weight: 700; }
p { margin: 0; }
.muted { color: var(--muted); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.wrap.narrow { max-width: 900px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--teal); color: #fff; padding: 10px 14px; z-index: 100; }
.skip:focus { left: 12px; }
.stack { display: grid; gap: 16px; align-content: start; }
.pill { display: inline-flex; align-self: flex-start; justify-self: start; align-items: center; gap: 8px; background: var(--teal-soft); color: var(--teal); font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 12px; font: 700 15px/1 var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-2); color: #fff; }
.btn-glass { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.45); color: #fff; }
.btn-glass:hover { background: rgba(255,255,255,0.24); color: #fff; }
.btn-wa { background: var(--wa); color: #fff; min-height: 44px; padding: 0 18px; border-radius: 10px; font-size: 14px; }
.btn-wa:hover { background: #188546; color: #fff; }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* top bar + header (solid version for inner pages) */
.topbar { background: var(--navy); color: #B9CBD4; font-size: 13px; }
.topbar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-block: 9px; }
.topbar a { color: #fff; text-decoration: none; }
.topbar .tb-right { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-header { background: var(--panel); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; gap: 18px; min-height: 80px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 8px; padding: 2px; }
.brand b { display: block; font: 800 21px/1.1 var(--display); color: var(--ink); }
.brand small { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; border-radius: 8px; white-space: nowrap; }
.nav a:hover { background: var(--bg); }
.nav a[aria-current="page"] { color: var(--teal); }
.nav .nav-cta { display: none; }
.menu-btn { display: none; width: 46px; height: 46px; border: 1px solid var(--line); background: #fff; border-radius: 10px; color: var(--ink); cursor: pointer; place-items: center; }
.menu-btn svg { width: 22px; height: 22px; }
/* header over the video (home) */
.on-video .topbar { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.16); color: #D3E0E6; position: relative; }
.on-video .site-header { background: transparent; border-bottom: 0; }
.on-video .brand b, .on-video .nav a { color: #fff; }
.on-video .brand small { color: #D3E0E6; }
.on-video .nav a:hover { background: rgba(255,255,255,0.12); }
.on-video .menu-btn { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4); color: #fff; }
@media (max-width: 1100px) {
  .menu-btn { display: grid; }
  .site-header .btn-wa { display: none; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 8px max(24px, env(safe-area-inset-right, 0px)) 18px max(24px, env(safe-area-inset-left, 0px)); box-shadow: 0 18px 30px rgba(12,42,58,0.12); }
  .nav.open { display: flex; }
  .nav a, .on-video .nav a { color: var(--ink); min-height: 50px; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 16px; }
  .nav .nav-cta { display: flex; justify-content: center; margin-top: 14px; border: 0; border-radius: 12px; background: var(--wa); color: #fff !important; }
}
@media (max-width: 560px) { .brand small, .tb-area { display: none; } }
/* home hero */
.hero { position: relative; overflow: hidden; background: var(--navy); min-height: 780px; display: flex; flex-direction: column; isolation: isolate; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12,42,58,0.72) 0%, rgba(12,42,58,0.35) 45%, rgba(12,42,58,0) 75%), linear-gradient(180deg, rgba(12,42,58,0.62) 0%, rgba(12,42,58,0.08) 28%, rgba(12,42,58,0.18) 55%, rgba(12,42,58,0.94) 100%); }
.hero-body { position: relative; flex: 1; display: flex; align-items: flex-end; padding-bottom: 44px; }
.hero-body > .wrap { width: 100%; }
.hero-copy { max-width: 820px; display: grid; gap: 22px; }
.hero-copy h1 { color: #fff; }
.hero-copy p { font-size: 19px; color: #E1EBF0; max-width: 620px; }
.hero .pill { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.35); color: #fff; }
.hero-stats { position: relative; border-top: 1px solid rgba(255,255,255,0.18); background: rgba(12,42,58,0.55); }
.hero-stats .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; padding-block: 22px 70px; color: #fff; }
.hero-stats b { display: block; font: 800 34px/1.15 var(--display); font-variant-numeric: tabular-nums; }
.hero-stats span { font-size: 14px; color: #C7D6DD; }
@media (max-width: 700px) { .hero { min-height: 680px; } .hero-stats .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-stats b { font-size: 28px; } }
/* call-back bar overlapping the hero */
.quickbar { position: relative; margin-top: -48px; z-index: 5; }
.quickbar form { background: var(--panel); border-radius: 20px; padding: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; align-items: end; box-shadow: 0 24px 60px rgba(12,42,58,0.18); }
.quickbar .note { grid-column: 1 / -1; }
/* fields (shared) */
.field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); min-width: 0; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; border: 1px solid var(--field); border-radius: 10px; padding: 11px 12px; font: 400 15px/1.4 var(--body); color: var(--ink); background: #fff; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
.note { padding: 12px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; }
.note.ok { background: #E4F4EC; color: var(--ok); }
.note.err { background: #FBE7E6; color: var(--err); }
/* inner page hero */
.page-hero { background: var(--navy); color: #C7D6DD; }
.page-hero .wrap { padding-block: clamp(56px, 7vw, 96px); display: grid; gap: 16px; }
.page-hero h1 { color: #fff; font-size: clamp(36px, 4.8vw, 62px); }
.page-hero .lead { font-size: 18px; max-width: 64ch; }
.crumbs { display: flex; gap: 8px; font-size: 14px; }
.crumbs a { color: #C7D6DD; text-decoration: none; }
.crumbs a:hover { color: #fff; }
/* sections */
.section { padding-block: clamp(64px, 8vw, 96px); }
.section.white { background: var(--panel); }
.section.dark { background: var(--navy); color: #B9CBD4; }
.section.dark h2, .section.dark h3 { color: #fff; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 34px; }
.section-head p { max-width: 520px; }
.split { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: flex-start; }
.split > * { flex: 1 1 380px; min-width: 0; }
.prose { display: grid; gap: 14px; }
.prose p, .prose li { overflow-wrap: anywhere; }
.prose strong { color: var(--ink); }
.prose ul { margin: 0; padding-left: 20px; }
.prose h2, .prose h3, .prose h4 { margin-top: 10px; font-size: 22px; }
.prose hr { display: none; }
/* services */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }
.svc { background: var(--panel); border-radius: 20px; padding: 28px; display: grid; gap: 10px; align-content: start; }
.svc .code { width: 46px; height: 46px; border-radius: 12px; background: var(--teal-soft); color: var(--teal); display: grid; place-items: center; font: 800 16px/1 var(--display); }
.svc.dark { background: var(--navy); color: #B9CBD4; }
.svc.dark h3 { color: #fff; }
.svc.dark .code { background: rgba(255,255,255,0.1); color: #8FD6D3; }
.section.white .svc { background: var(--bg); }
/* documents (tabs) */
.docs { display: flex; flex-wrap: wrap; gap: 40px; }
.docs-side { flex: 1 1 320px; min-width: 0; display: grid; gap: 14px; align-content: start; }
.tabs { display: grid; gap: 8px; margin-top: 6px; }
.tabs button { text-align: left; border: 0; background: var(--bg); color: var(--ink); font: 700 15.5px/1.35 var(--body); padding: 14px 16px; border-radius: 12px; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.tabs button:hover:not([aria-selected="true"]) { background: var(--teal-soft); }
.docs-panel { flex: 1.4 1 480px; min-width: 0; background: var(--bg); border-radius: 20px; padding: clamp(22px, 3vw, 34px); }
.docs-panel h3 { font-size: 20px; margin-bottom: 16px; }
.docs-panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px 24px; font-weight: 600; color: var(--ink); }
.docs-panel li { position: relative; padding-left: 26px; }
.docs-panel li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 11px; height: 6px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.docs-all h3 { margin-top: 26px; }
.docs-all h3:first-child { margin-top: 0; }
/* stations */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chips span { background: var(--panel); border-radius: 999px; padding: 14px 22px; font-weight: 700; color: var(--ink); }
.chips span.all { background: var(--ink); color: #fff; }
.chips span small { font-weight: 600; color: var(--teal); margin-left: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
/* cargo */
.cargo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.cargo div { display: flex; align-items: center; gap: 14px; background: var(--panel); border-radius: 14px; padding: 14px 18px; font-weight: 700; color: var(--ink); }
.cargo img { width: 40px; height: 40px; object-fit: contain; flex: none; }
/* MD */
.md { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.md-photo { flex: 0 1 220px; aspect-ratio: 1; max-width: 100%; border-radius: 50%; overflow: hidden; border: 1px dashed #4B6470; display: grid; place-items: center; text-align: center; font-size: 14px; padding: 0; }
.md-photo img { width: 100%; height: 100%; object-fit: cover; }
.md-text { flex: 1 1 520px; min-width: 0; display: grid; gap: 16px; }
.md-text blockquote { margin: 0; font: 500 clamp(21px, 2.3vw, 28px)/1.45 var(--display); color: #fff; }
.md-text b { color: #fff; display: block; }
.md-text a { color: #8FD6D3; font-weight: 700; }
.md-page { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.md-page .md-photo { border-color: var(--field); background: var(--panel); color: var(--muted); border-radius: 20px; aspect-ratio: 4 / 5; flex: 0 1 280px; }
.md-page .md-body { flex: 1 1 520px; min-width: 0; background: var(--panel); border-radius: 20px; padding: clamp(24px, 3.4vw, 44px); }
/* clients */
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.logos div { height: 96px; background: var(--panel); border-radius: 14px; display: grid; place-items: center; padding: 12px; }
.logos img { max-height: 66px; width: auto; object-fit: contain; }
.logos.lg div { height: 130px; }
.logos.lg img { max-height: 92px; }
/* offices */
.offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.office { background: var(--bg); border-radius: 18px; padding: 24px; display: grid; gap: 6px; align-content: start; }
.section:not(.white) .office { background: var(--panel); }
.office small { font-size: 12px; font-weight: 700; color: var(--teal); letter-spacing: 1px; text-transform: uppercase; }
.office h3 { font-size: 20px; margin-bottom: 4px; }
.office a, .office b { font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
/* group */
.concerns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.concern { background: var(--panel); border-radius: 20px; padding: 26px; min-height: 190px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
a.concern:hover { box-shadow: 0 14px 34px rgba(12,42,58,0.1); color: inherit; }
.concern small { font-size: 12px; font-weight: 700; color: var(--teal); letter-spacing: 1px; text-transform: uppercase; }
.concern h3 { font-size: 22px; }
.concern p { font-size: 15px; }
.concern .go { margin-top: auto; font-weight: 700; color: var(--teal); font-size: 15px; }
.concern.flag { background: var(--navy); color: #B9CBD4; }
.concern.flag h3 { color: #fff; }
.concern.flag small, .concern.flag .go { color: #8FD6D3; }
/* contact */
.contact-info { display: grid; gap: 16px; }
.contact-info li { list-style: none; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
.contact-info ul { margin: 0; padding: 0; display: grid; gap: 12px; }
.contact-info svg { width: 22px; height: 22px; color: var(--teal); margin-top: 2px; }
.contact-info a, .contact-info span { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.form { background: var(--panel); border-radius: 20px; padding: clamp(22px, 3.4vw, 38px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form h2 { grid-column: 1 / -1; font-size: clamp(24px, 2.6vw, 32px); }
.form .full, .form .note { grid-column: 1 / -1; }
@media (max-width: 560px) { .form { grid-template-columns: minmax(0, 1fr); } }
/* footer */
.site-footer { background: var(--navy); color: #9FB4BE; font-size: 15px; }
.site-footer .wrap { padding-block: 56px 24px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }
.foot-grid b.fb { font: 800 22px/1.1 var(--display); color: #fff; display: block; margin-bottom: 10px; }
.foot-grid h4 { color: #fff; font-size: 15px; margin: 0 0 12px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: #D3E0E6; text-decoration: none; overflow-wrap: anywhere; }
.site-footer a:hover { color: #8FD6D3; }
.foot-bottom { margin-top: 40px; padding-top: 18px; border-top: 1px solid #1E4255; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: 14px; }
.wa-float { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; z-index: 40; box-shadow: 0 10px 26px rgba(0,0,0,0.25); }
.wa-float svg { width: 28px; height: 28px; }
.wa-float:hover { color: #fff; }

/* document lists as stored in the admin panel (headings + numbered lists) */
.docs-panel:not(.docs-all) > h3:first-child { display: none; }
.docs-panel :is(h1, h2, h3, h4) { font-family: var(--display); font-size: 20px; line-height: 1.25; color: var(--ink); margin: 0 0 14px; }
.docs-all :is(h1, h2, h3, h4) { margin-top: 28px; }
.docs-all > :is(h1, h2, h3, h4):first-child { margin-top: 0; }
.docs-panel ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px 24px; font-weight: 600; color: var(--ink); }
.docs-panel p:empty { display: none; }

/* Services page: the admin-panel document layout (blue boxes) shown as clean white cards */
.docs-all { background: transparent; padding: 0; }
.docs-all .layoutmanager, .docs-all .layout-container, .docs-all .layout-column, .docs-all .layout-column-editable { all: unset; display: block; }
.docs-all .layout-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 760px) { .docs-all .layout-row { grid-template-columns: minmax(0, 1fr); } }
.docs-all [style] { text-align: left !important; }
.docs-all div[style*="background"] { background: var(--panel) !important; color: var(--text) !important; min-height: 0 !important; height: 100%; padding: 24px !important; border-radius: 18px !important; border: 1px solid var(--line); }
.docs-all div[style*="background"] * { color: inherit !important; }
.docs-all div[style*="background"] h4:first-child { color: var(--ink) !important; font-size: 18px; margin: 0 0 16px; }
.docs-all ol, .docs-all ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)) !important; }
.docs-all li h4, .docs-all li h3 { all: unset; font: inherit !important; font-weight: 600 !important; }
.docs-all .layout-column-one > h3:first-child, .docs-all .layout-column-one > h3:first-child ~ p, .docs-all .layout-column-one > h3:first-child ~ h2 { display: none; }

/* v6: document cards on one even grid (fixes overlapping rows) and a clearer card outline */
.docs-all { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
@media (max-width: 760px) { .docs-all { grid-template-columns: minmax(0, 1fr); } }
.docs-all .layoutmanager, .docs-all .layout-container, .docs-all .layout-row, .docs-all .layout-column { display: contents !important; }
.docs-all .layout-column-editable:not([style*="background"]) { display: none !important; }
.docs-all > :not(.layoutmanager) { grid-column: 1 / -1; }
.docs-all div[style*="background"] { display: block !important; height: auto !important; margin: 0 !important; background: #FFFFFF !important; border: 1px solid #C9D6DD !important; border-top: 4px solid var(--teal) !important; border-radius: 16px !important; box-shadow: 0 10px 28px rgba(12, 42, 58, 0.08); padding: 26px !important; }
.docs-all div[style*="background"] h4:first-child { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px !important; }
.docs-all div[style*="background"] p { margin: 0; }
/* MD photo: one round photo */
.md-side { flex: 0 1 260px !important; display: grid; gap: 6px; justify-items: center; text-align: center; }
.md-side b { color: var(--ink); font-size: 18px; margin-top: 10px; }
.md-side span { color: var(--muted); font-size: 15px; }
.md-page .md-photo.md-round, .md-round { width: 240px; max-width: 100%; aspect-ratio: 1; border-radius: 50% !important; overflow: hidden; border: 4px solid #FFFFFF; box-shadow: 0 12px 30px rgba(12, 42, 58, 0.15); background: var(--bg); flex: none; }
.md-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.md-photo:has(img) { border-style: solid; }
.docs-all > :not(.layoutmanager), .docs-all .layoutmanager > :not(.layout-container), .docs-all .layout-container > :not(.layout-row), .docs-all .layout-row > :not(.layout-column), .docs-all .layout-column > :not(.layout-column-editable) { display: none !important; }

/* v8: licences, registration, client list */
.lic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-bottom:40px}
.lic{background:#fff;border:1px solid #C9D6DD;border-left:4px solid var(--teal);border-radius:14px;padding:20px 22px;box-shadow:0 6px 18px rgba(12,42,58,.05)}
.lic small{display:block;font:700 12px/1 'Outfit',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.lic h3{font-size:18px;line-height:1.3;margin:0 0 8px;color:var(--navy)}
.lic p{margin:0;color:#4A5D68;font-size:14px}
.lic p b{color:var(--navy);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;font-weight:600}
.sub-h{font-size:20px;margin:0 0 16px;color:var(--navy)}
.sub-h2{font-size:clamp(22px,2.4vw,28px);margin:56px 0 22px;color:var(--navy)}
.reg-strip{display:flex;flex-wrap:wrap;gap:10px 30px;padding:18px 24px;background:var(--navy);color:#C9D9E1;border-radius:14px;font-size:14px}
.reg-strip b{color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;margin-left:4px}
.client-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px 16px}
.client-list li{background:#fff;border:1px solid #DCE5EA;border-radius:10px;padding:13px 16px;font-weight:600;color:var(--navy);font-size:15px}
.foot-reg{font-size:13px;line-height:1.6;opacity:.75;margin-top:12px}

/* v9: header stays at the top while scrolling */
.site-header.is-fixed{position:fixed;top:0;left:0;right:0;z-index:60;background:#fff !important;border-bottom:1px solid var(--line);box-shadow:0 6px 22px rgba(12,42,58,.10);animation:hdrIn .25s ease}
.site-header.is-fixed .wrap{min-height:68px}
.on-video .site-header.is-fixed .brand b,.on-video .site-header.is-fixed .nav a{color:var(--navy)}
.on-video .site-header.is-fixed .brand small{color:#5B6F7A}
.on-video .site-header.is-fixed .nav a:hover{background:var(--bg)}
.on-video .site-header.is-fixed .menu-btn{background:#fff;border-color:var(--line);color:var(--navy)}
@keyframes hdrIn{from{transform:translateY(-100%)}to{transform:none}}
@media (prefers-reduced-motion: reduce){.site-header.is-fixed{animation:none}}
/* v10: registration strip centred */
.reg-strip{justify-content:center;text-align:center}
/* v11: MD photo centred inside the message box */
.md-center{display:block !important;width:200px;max-width:60%;margin:8px auto 22px;flex:none !important;border:4px solid #fff !important;box-shadow:0 10px 28px rgba(12,42,58,.14)}
.md-prose p:has(> .md-center){text-align:center !important;margin:0}
/* v12: sister concern cards clearly boxed */
.concerns .concern{border-radius:16px !important;padding:24px !important;transition:transform .2s ease, box-shadow .2s ease}
.concerns .concern:not(.flag){background:#fff !important;border:1px solid #C9D6DD !important;border-top:4px solid var(--teal) !important;box-shadow:0 10px 26px rgba(12,42,58,.08)}
.concerns a.concern:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(12,42,58,.14)}
/* v13: service cards all the same colour, clearly boxed */
.svc-grid .svc{background:#fff !important;border:1px solid #C9D6DD !important;border-top:4px solid var(--teal) !important;border-radius:16px !important;box-shadow:0 10px 26px rgba(12,42,58,.08);transition:transform .2s ease, box-shadow .2s ease}
.svc-grid .svc:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(12,42,58,.14)}
/* v14: scrolling station ticker in the top bar */
.topbar .wrap{flex-wrap:nowrap;align-items:center}
.ticker{flex:1 1 auto;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker-track{display:flex;width:max-content;animation:rnTicker 45s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-group{display:flex;flex:none}
.ticker-group span{white-space:nowrap;padding:0 18px;position:relative}
.ticker-group span::after{content:"";position:absolute;right:-2px;top:50%;width:4px;height:4px;border-radius:50%;background:#5FC4C0;transform:translateY(-50%)}
.ticker-group span.all{color:#8FD6D3;font-weight:700}
.topbar .tb-right{flex:none}
@keyframes rnTicker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.ticker-track{animation:none}.ticker{overflow-x:auto}}
@media (max-width: 760px){.topbar .tb-right{display:none}}
/* v15: photo backgrounds on inner page headers */
.page-hero.has-photo{background-color:var(--navy);background-image:linear-gradient(90deg,rgba(12,42,58,.95) 0%,rgba(12,42,58,.84) 42%,rgba(12,42,58,.45) 100%),var(--hero-lg);background-size:cover;background-position:center}
@media (max-width: 900px){.page-hero.has-photo{background-image:linear-gradient(rgba(12,42,58,.86),rgba(12,42,58,.86)),var(--hero-sm)}}
/* v16: home banner slideshow (4 photos, crossfade) */
.hero-slides{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-slides .hero-media{z-index:auto;opacity:0;transition:opacity 1.4s ease}
.hero-slides .hero-media.is-active{opacity:1;animation:rnHeroZoom 7.5s ease-out both}
@keyframes rnHeroZoom{from{transform:scale(1.07)}to{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.hero-slides .hero-media{transition:none}.hero-slides .hero-media.is-active{animation:none}}
/* v17: sister concern logos */
.concern-logo{display:flex;align-items:center;justify-content:center;height:92px;border-radius:12px;background:#F5F7F8;border:1px solid #E3EAEE;padding:14px 16px;margin-bottom:8px}
.concern-logo img{max-height:60px;max-width:100%;width:auto;height:auto;object-fit:contain}
.concern-logo.dark{background:#0C2A3A;border-color:#0C2A3A}
.concern-logo.text b{font:800 18px/1.15 var(--display, 'Outfit', sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--navy);text-align:center}
.concern.flag .concern-logo{background:#fff;border-color:#fff}
.concern-logo img[alt="Sabah Noor logo"]{max-height:72px}.concern-logo{height:108px;padding:10px 14px}
.concern-logo img[alt="Sabah Noor logo"]{max-height:88px}.concern-logo img[alt="Mah Corporation logo"]{max-height:88px}