/* Navis Maritime Solutions: site styles */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/manrope-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/manrope-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/manrope-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/manrope-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'Noto Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/noto-sans-arabic-arabic-400-normal.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/montserrat-latin-600-normal.woff2) format('woff2');}

/* =========================================================
   COASTAL MODERN — bright, contemporary, chamfered "plate" shapes
   Colors taken from the Navis compass logo: navy and gold
   ========================================================= */
:root {
  --bg: #ffffff; --surface: #f3f5f8; --ink: #0b2f5e; --text: #1b2738; --muted: #556274; --line: #e1e6ee;
  --gold: #c29a52; --gold-text: #8a6727; --gold-light: #e3c58c; --gold-soft: #f7f0e2;
  --f: 'Manrope', system-ui, sans-serif; --f-ar: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --shade: linear-gradient(to top right, rgba(5,22,46,.66) 0%, rgba(5,22,46,.3) 42%, rgba(5,22,46,0) 70%);
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--f); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.js .reveal:not(.in) { opacity: 0; transform: translateY(16px); }
.reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }

/* Shape language: chamfered corners like a steel nameplate or hatch cover */
.plate { --c: 14px; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--gold-text); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 26px; height: 4px; background: var(--gold); clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.btn { --c: 10px; display: inline-flex; align-items: center; gap: 14px; padding: 15px 20px 15px 22px; font-size: 15px; font-weight: 600; background: #fff; color: var(--ink); border: 0; cursor: pointer; font-family: var(--f); transition: background-color .2s ease; }
.btn .ar { padding-left: 14px; border-left: 1px solid rgba(11,47,94,.2); line-height: 1; transition: transform .2s ease; }
.btn:hover .ar { transform: translateX(3px); }
.btn.dark { background: var(--ink); color: #fff; }
.btn.dark:hover { background: #0e3a73; }
.btn.dark .ar { border-left-color: rgba(255,255,255,.25); color: var(--gold-light); }
.btn.gold { background: var(--gold); color: #fff; }
.btn.gold .ar { border-left-color: rgba(255,255,255,.35); }
.tlink { display: inline-flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 600; color: var(--ink); padding: 4px 0; border-bottom: 2px solid var(--gold); }
.tlink.light { color: #fff; border-bottom-color: var(--gold-light); }

/* ---------- Header: always white so the logo sits cleanly ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 30; background: #fff; color: var(--ink); box-shadow: 0 1px 0 rgba(11,47,94,.08); transition: box-shadow .35s ease; }
.hdr.solid { box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(11,47,94,.35); }
.hdr .row { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 92px; transition: height .35s ease; }
.hdr.solid .row { height: 80px; }
.hdr nav { display: flex; gap: 36px; }
.hdr nav a { position: relative; font-size: 15px; font-weight: 600; padding: 6px 0; transition: color .2s ease; }
.hdr nav a:hover { color: var(--gold-text); }
.hdr nav a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--gold); clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 100%, 3px 100%); }
.hdr .quote { --c: 10px; padding: 13px 20px; font-size: 14px; font-weight: 600; background: var(--ink); color: #fff; white-space: nowrap; }
.hdr .quote:hover { background: #0e3a73; }

/* ---------- Brand lockup: the compass logo as supplied, with the company
   name in the same font (Montserrat) and blue (#2F5597) as the name document ---------- */
.brand { display: flex; align-items: center; gap: 14px; color: #2f5597; }
.brand .mark { width: 58px; height: 58px; flex: none; }
.brand .names { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.brand .ar { font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; font-size: 15px; direction: rtl; text-align: left; unicode-bidi: isolate; }
.brand .en { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 19px; letter-spacing: 0; white-space: nowrap; }
.burger { display: none; width: 28px; height: 13px; border: 0; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; background: none; padding: 0; color: inherit; cursor: pointer; }
.mnav { position: fixed; inset: 0; z-index: 40; background: #fff; padding: 110px 24px 40px; display: flex; flex-direction: column; gap: 6px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.menu-open .mnav { opacity: 1; visibility: visible; }
.mnav a { font-size: 34px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); padding: 12px 0; border-bottom: 1px solid var(--line); }
.mnav a.on { color: var(--gold-text); }
.mnav-close { position: absolute; top: 22px; right: 20px; border: 0; background: none; font-size: 30px; color: var(--ink); cursor: pointer; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; min-height: 660px; overflow: hidden; --p: 0; }
.hero.page { height: 64vh; min-height: 480px; --shade: linear-gradient(to top, rgba(5,22,46,.66) 0%, rgba(5,22,46,.28) 48%, rgba(5,22,46,0) 78%), linear-gradient(to right, rgba(5,22,46,.32), rgba(5,22,46,0) 70%); }
.hero-photo { position: absolute; inset: 0; z-index: 0; opacity: calc(1 - var(--p) * 1.3); }
.js .hero-photo { position: fixed; }
/* the footage is mirrored so the ship sits on the right, clear of the headline */
.hero-photo .mf { position: absolute; inset: 0; transform: scaleX(-1); }
.hero-photo img, .hero-photo video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 55%); filter: saturate(.95); transform: scale(calc(1.05 + var(--p) * .08)); animation: settle 2.4s cubic-bezier(.2,.7,.2,1) both; }
.hero-photo::after { content: ''; position: absolute; inset: 0; background: var(--shade); }
@keyframes settle { from { transform: scale(1.14); } }
.hero-inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; opacity: calc(1 - var(--p) * 2.3); transform: translateY(calc(var(--p) * -60px)); }
.hero-inner .wrap { width: 100%; padding-bottom: 72px; }
.hero .grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; align-items: end; }
.rise > * { animation: rise 1s cubic-bezier(.2,.7,.2,1) both; }
.rise > :nth-child(2) { animation-delay: .12s; } .rise > :nth-child(3) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.tag { display: inline-flex; align-items: center; padding: 8px 32px 8px 14px; border-left: 3px solid var(--gold-light); background: rgba(255,255,255,.16); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%); }
.hero h1 { color: #fff; font-size: clamp(44px, 6.2vw, 88px); line-height: .98; letter-spacing: -.04em; margin-top: 22px; }
.hero h1 em { font-style: normal; color: var(--gold-light); }
.hero.page h1 { font-size: clamp(42px, 5.6vw, 76px); }
.hero.page .sub { color: rgba(255,255,255,.88); font-size: 18px; max-width: 560px; margin-top: 16px; }
.glass { --c: 24px; position: relative; padding: 30px 30px 28px; background: rgba(255,255,255,.15); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); color: #fff; }
.glass::before { content: ''; position: absolute; top: 0; left: 24px; width: 64px; height: 3px; background: var(--gold-light); }
.glass p { font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.94); }
.glass .btns { display: flex; gap: 22px; margin-top: 24px; flex-wrap: wrap; align-items: center; }
.body { position: relative; z-index: 3; background: var(--bg); }
.body::before { content: ''; position: absolute; left: 0; right: 0; top: -180px; height: 180px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--bg)); }


/* pause / play control for the background video */
.vid-toggle { position: absolute; right: 24px; bottom: 26px; z-index: 4; width: 40px; height: 40px; display: grid; place-items: center; border: 0; cursor: pointer; background: rgba(255,255,255,.82); color: #0b2f5e; opacity: calc(1 - var(--p) * 3); transition: background-color .2s ease; }
.vid-toggle:hover { background: #fff; }
.vid-toggle:focus-visible { outline: 2px solid #c29a52; outline-offset: 2px; }
.vid-toggle .i-play { display: none; }
.vid-toggle[data-state="paused"] .i-play { display: block; }
.vid-toggle[data-state="paused"] .i-pause { display: none; }

/* ---------- Sections ---------- */
.sec { padding-top: 112px; padding-bottom: 112px; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.sec-head h2, h2.lg { font-size: clamp(32px, 3.8vw, 50px); margin-top: 16px; }
.sec-head p { color: var(--muted); max-width: 520px; }
.muted { color: var(--muted); }
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; }
.split h2 { font-size: clamp(30px, 3.4vw, 46px); margin: 16px 0 20px; }
.split p { color: var(--muted); font-size: 16.5px; line-height: 1.75; }
.split p + p { margin-top: 14px; }
.ph-wrap { position: relative; }
.ph-wrap::after { content: ''; position: absolute; right: -14px; bottom: -14px; width: 42%; height: 46%; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); z-index: -1; }
.ph { --c: 56px; aspect-ratio: 5 / 4; overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.95); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.facts span { position: relative; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.facts span::before { content: ''; position: absolute; top: -2px; left: 0; width: 22px; height: 3px; background: var(--gold); }

/* service cards with folded corner, like a cargo tag */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { position: relative; display: block; background: var(--surface); padding: 30px 28px 86px; clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%); transition: background-color .25s ease; }
.card::after { content: ''; position: absolute; top: 0; right: 0; width: 34px; height: 34px; background: var(--fold, #d5dce6); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.card:hover { background: #e9edf3; }
.card.big { grid-row: span 2; background: var(--ink); color: #fff; --fold: var(--gold); padding-top: 38px; }
.card.big:hover { background: #0e3a73; }
.card.big h3 { color: #fff; font-size: 32px; }
.card.big p { color: rgba(255,255,255,.78); font-size: 16px; }
.card.gold { background: var(--gold-soft); --fold: var(--gold-light); }
.card.gold:hover { background: #f1e6cf; }
.card .num { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--gold-text); }
.card.big .num { color: var(--gold-light); }
.card h3 { font-size: 21px; margin: 12px 0 10px; line-height: 1.22; }
.card p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.card .go { position: absolute; left: 28px; bottom: 28px; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.card .go::after { content: '→'; display: grid; place-items: center; width: 34px; height: 34px; background: #fff; transition: transform .2s ease; }
.card:hover .go::after { transform: translateX(4px); }
.card.big .go { color: #fff; }
.card.big .go::after { background: var(--gold); color: #fff; }
.card.wide { grid-column: span 2; }

/* commitment plates */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pillar { --c: 18px; position: relative; background: #fff; padding: 34px 26px 30px; }
.pillar::before { content: ''; position: absolute; top: 0; left: 26px; width: 48px; height: 4px; background: var(--gold); }
.pillar .n { font-size: 13px; font-weight: 700; color: var(--gold-text); letter-spacing: .1em; }
.pillar h3 { font-size: 19px; margin: 12px 0 10px; line-height: 1.25; }
.pillar p { color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.navyband { background: var(--surface); }

/* partners */
.logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.logo-tile { --c: 12px; background: #fff; height: 104px; display: grid; place-items: center; padding: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.logo-tile img { max-height: 62px; width: auto; object-fit: contain; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pcard { --c: 18px; background: var(--surface); padding: 26px; }
.pcard .lg { --c: 10px; background: #fff; height: 110px; display: grid; place-items: center; padding: 18px; margin-bottom: 20px; }
.pcard .lg img { max-height: 72px; width: auto; }
.pcard h3 { font-size: 19px; line-height: 1.3; }
.pcard .role { color: var(--gold-text); font-size: 14px; font-weight: 600; margin-top: 6px; }

/* CTA */
.ctabox { --c: 40px; position: relative; background: var(--gold-soft); padding: 64px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.ctabox::before { content: ''; position: absolute; left: 64px; top: 0; width: 80px; height: 4px; background: var(--gold); }
.ctabox h2 { font-size: clamp(30px, 3.6vw, 46px); max-width: 18ch; }

/* about */
.statement, .split .statement { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.22; font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vm > div { position: relative; padding: 48px 44px 46px; background: var(--surface); clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); }
.vm > div::after { content: ''; position: absolute; top: 0; right: 0; width: 40px; height: 40px; background: var(--fold, #d5dce6); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.vm h3 { font-size: 30px; margin: 14px 0 14px; }
.vm p { color: var(--muted); font-size: 16.5px; line-height: 1.75; }
.vm .navy { background: var(--ink); --fold: var(--gold); }
.vm .navy h3 { color: #fff; } .vm .navy p { color: rgba(255,255,255,.8); } .vm .navy .eyebrow { color: var(--gold-light); }
.pillars2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pillars2 .pillar { background: #fff; padding: 36px 34px; }
.pillars2 .pillar h3 { font-size: 22px; }
.pillars2 .pillar p { font-size: 15.5px; }

/* services page */
.svc-layout { display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: start; }
.side { position: sticky; top: 100px; }
.side .lbl { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.side a { display: grid; grid-template-columns: 34px 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; transition: color .2s ease; }
.side a span { color: var(--gold-text); font-size: 12px; padding-top: 2px; }
.side a:hover { color: var(--gold-text); }
.svc-block { padding-bottom: 88px; margin-bottom: 88px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.svc-block:last-child { border-bottom: 0; margin-bottom: 0; }
.svc-media { --c: 40px; position: relative; aspect-ratio: 16 / 7; overflow: hidden; background: var(--ink); }
.svc-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-media .pen { position: absolute; left: 0; bottom: 26px; padding: 9px 34px 9px 18px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .08em; clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%); border-left: 4px solid var(--gold); }
.svc-media.graphic { display: grid; place-items: center; background:
  linear-gradient(135deg, transparent 0 46%, rgba(194,154,82,.45) 46% 46.35%, transparent 46.35%),
  linear-gradient(135deg, transparent 0 56%, rgba(194,154,82,.3) 56% 56.3%, transparent 56.3%),
  var(--gold-soft); }
.svc-media.graphic .big { position: absolute; right: 34px; bottom: 6px; font-size: 150px; font-weight: 700; letter-spacing: -.06em; color: rgba(11,47,94,.07); line-height: 1; }
.svc-media.graphic .mk img { width: 128px; }
.svc-block h2 { font-size: clamp(28px, 3vw, 40px); margin: 30px 0 8px; }
.svc-block .subt { color: var(--gold-text); font-weight: 600; font-size: 17px; margin-bottom: 6px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 24px; }
.cols h4 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; display: flex; gap: 10px; align-items: center; }
.cols h4::before { content: ''; width: 18px; height: 3px; background: var(--gold); }
.cols p { color: var(--muted); font-size: 15.5px; line-height: 1.75; }
.cols p + p { margin-top: 12px; }
.ticklist li { position: relative; padding-left: 22px; color: var(--muted); font-size: 15.5px; margin-bottom: 10px; line-height: 1.6; }
.ticklist li::before { content: ''; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.portfolio { margin-top: 18px; display: grid; gap: 10px; }
.portfolio li { --c: 10px; background: var(--surface); padding: 14px 16px; font-size: 14.5px; }
.portfolio b { display: block; color: var(--ink); }
.portfolio span { color: var(--muted); }
.points li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; line-height: 1.65; }
.points b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 2px; }

/* contact */
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ccard { --c: 16px; position: relative; background: var(--surface); padding: 28px 24px; }
.ccard::before { content: ''; position: absolute; top: 0; left: 24px; width: 40px; height: 4px; background: var(--gold); }
.ccard .k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.ccard .v { margin-top: 10px; color: var(--ink); font-weight: 600; font-size: 16px; line-height: 1.5; word-break: break-word; }
.contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; margin-top: 24px; align-items: stretch; }
.formbox { --c: 32px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 48px; }
.formbox h2 { font-size: 34px; margin: 14px 0 8px; }
.formbox > p { color: var(--muted); margin-bottom: 26px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea { width: 100%; min-width: 0; font: inherit; font-size: 15.5px; color: var(--text); background: var(--surface); border: 0; border-bottom: 2px solid transparent; padding: 13px 14px; outline: none; border-radius: 0; transition: border-color .2s ease, background-color .2s ease; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--gold); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.formbox .btn { margin-top: 24px; }
.form-note { margin-top: 14px; color: var(--gold-text); font-weight: 600; font-size: 14.5px; }
.infobox { --c: 32px; background: var(--ink); color: #fff; padding: 48px 40px; display: flex; flex-direction: column; }
.infobox .eyebrow { color: var(--gold-light); }
.infobox h3 { color: #fff; font-size: 26px; margin: 14px 0 12px; }
.infobox p { color: rgba(255,255,255,.78); font-size: 15px; }
.infobox .ar { font-family: var(--f-ar); direction: rtl; text-align: right; margin-top: 18px; color: rgba(255,255,255,.85); }
.mapph { --c: 16px; margin-top: auto; height: 190px; background: repeating-linear-gradient(0deg, transparent 0 29px, rgba(255,255,255,.08) 29px 30px), repeating-linear-gradient(90deg, transparent 0 29px, rgba(255,255,255,.08) 29px 30px), #123a6e; display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-top: 28px; }

/* footer */
footer { padding: 72px 0 40px; color: var(--muted); font-size: 14.5px; border-top: 1px solid var(--line); }
footer .row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
footer .brand { margin-bottom: 18px; }
footer b { display: block; color: var(--ink); font-weight: 700; margin-bottom: 12px; }
footer li + li { margin-top: 7px; }
footer .base { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; }
footer .ar { font-family: var(--f-ar); direction: rtl; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .hdr nav, .hdr .quote { display: none; }
  .burger { display: block; }
}
@media (max-width: 1000px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .hdr .row, .hdr.solid .row { height: 74px; }
  .brand .mark { width: 44px; height: 44px; } .brand { gap: 10px; } .brand .en { font-size: 14px; } .brand .ar { font-size: 11.5px; }
  .hdr nav, .hdr .quote { display: none; }
  .burger { display: block; }
  .hero { height: 100svh; min-height: 620px; }
  .hero.page { height: 56svh; min-height: 420px; }
  .hero .grid { grid-template-columns: 1fr; gap: 22px; }
  .hero-inner .wrap { padding-bottom: 56px; }
  .glass { padding: 22px; }
  .sec { padding-top: 80px; padding-bottom: 80px; }
  .split, .vm, .pillars2, .svc-layout, .cols, .contact { grid-template-columns: 1fr; gap: 32px; }
  .bento, .pgrid { grid-template-columns: 1fr 1fr; }
  .card.wide { grid-column: auto; }
  .pillars, .cards4 { grid-template-columns: 1fr 1fr; }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .side { position: static; display: none; }
  .ctabox { padding: 40px 26px; }
  .ctabox::before { left: 26px; }
  .formbox { padding: 32px 22px; }
  .infobox { padding: 36px 26px; }
  footer .row { grid-template-columns: 1fr 1fr; }
  .svc-media { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .bento, .pgrid, .pillars, .cards4, .fields, .facts { grid-template-columns: 1fr; }
  .card.big { grid-row: auto; }
  .logos { grid-template-columns: 1fr 1fr; }
  .logos .logo-tile:last-child { grid-column: 1 / -1; }
  .vm > div { padding: 38px 26px; }
  footer .row { grid-template-columns: 1fr; }
  .svc-media .pen { bottom: 14px; }
  .svc-media.graphic .big { font-size: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo img, .hero-inner, .rise > * { animation: none !important; transform: none !important; }
  .reveal { transition: none; }
}

/* =========================================================
   Hero with the tug-assist video (mirrored so the ship sits on the
   right): headline and panel in the open sky on the left
   ========================================================= */
.hero { background: #f6e3ba; --shade: linear-gradient(to right, rgba(251,244,228,.66) 0%, rgba(251,244,228,.3) 40%, rgba(251,244,228,0) 60%); }
.hero.page { --shade: linear-gradient(to right, rgba(251,244,228,.66) 0%, rgba(251,244,228,.3) 40%, rgba(251,244,228,0) 60%); }
.hero-photo img, .hero-photo video { object-position: var(--pos, 100% 50%); }
.hero-inner { align-items: flex-start; }
.hero-inner .wrap { padding-bottom: 0; padding-top: calc(92px + clamp(22px, 5vh, 70px)); }
.hero .grid { grid-template-columns: minmax(0, 600px); gap: 24px; align-items: start; }
.tag { color: var(--ink); background: rgba(255,255,255,.6); border-left-color: var(--gold); }
.hero h1 { color: var(--ink); font-size: clamp(40px, 4.6vw, 70px); }
.hero h1 em { color: var(--gold-text); }
.hero.page h1 { font-size: clamp(40px, 4.8vw, 70px); }
.hero.page .sub { color: #2c3a4e; }
.glass { background: rgba(255,255,255,.62); color: var(--text); }
.glass::before { background: var(--gold); }
.glass p { color: #2c3a4e; }
.glass .btn { background: var(--ink); color: #fff; }
.glass .btn .ar { border-left-color: rgba(255,255,255,.25); color: var(--gold-light); }
.tlink.light { color: var(--ink); border-bottom-color: var(--gold); }
@media (max-width: 1000px) {
  .hero-inner .wrap { padding-top: calc(74px + 20px); }
  .hero .grid { gap: 16px; }
  .hero h1 { font-size: clamp(34px, 9vw, 46px); margin-top: 14px; }
  .glass { padding: 18px; }
  .glass p { font-size: 15px; }
  .glass .btns { margin-top: 14px; }
  .hero:not(.page) .hero-photo { top: auto; height: 46%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }
  .hero-photo img, .hero-photo video { object-position: 30% 50% !important; }
  .hero, .hero.page { --shade: none; }
}

/* keep the video crisp: no extra zoom or colour filter on it */
.hero-photo video { filter: none; animation: none; transform: scale(calc(1 + var(--p) * .04)); }

/* =========================================================
   Change 1: links on the right, roomier home services,
   vision & mission and partners on the home page
   ========================================================= */
.hdr nav { margin-left: auto; margin-right: 10px; }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-intro { display: flex; flex-direction: column; justify-content: center; padding: 10px 18px 10px 0; }
.svc-intro h2 { font-size: clamp(30px, 3.2vw, 44px); margin: 16px 0 16px; }
.svc-intro p { color: var(--muted); }
.svc-card { --c: 22px; display: flex; flex-direction: column; background: #fff; color: inherit; transition: background-color .25s ease; }
.svc-card:hover { background: #fbfcfd; }
.svc-card .pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); }
.svc-card .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.svc-card:hover .pic img { transform: scale(1.05); }
.svc-card .pic.graphic { display: grid; place-items: center; background:
  linear-gradient(135deg, transparent 0 46%, rgba(194,154,82,.45) 46% 46.5%, transparent 46.5%),
  linear-gradient(135deg, transparent 0 58%, rgba(194,154,82,.3) 58% 58.4%, transparent 58.4%),
  var(--gold-soft); }
.svc-card .pic.graphic .mk img { width: 92px; height: auto; transform: none; }
.svc-card .pen { position: absolute; left: 0; bottom: 16px; padding: 7px 28px 7px 14px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .08em; border-left: 4px solid var(--gold); clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%); }
.svc-card .tx { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.svc-card h3 { font-size: 21px; line-height: 1.25; margin-bottom: 10px; transition: color .2s ease; }
.svc-card:hover h3 { color: var(--gold-text); }
.svc-card p { color: var(--muted); font-size: 15px; line-height: 1.65; flex: 1; }
.svc-card .more { margin-top: 20px; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.svc-card .more::after { content: '→'; display: grid; place-items: center; width: 32px; height: 32px; background: var(--surface); transition: transform .2s ease, background-color .2s ease; }
.svc-card:hover .more::after { transform: translateX(4px); background: var(--gold); color: #fff; }
.svc-cta { --c: 22px; position: relative; background: var(--ink); color: #fff; padding: 44px 34px; display: flex; flex-direction: column; justify-content: center; }
.svc-cta::before { content: ''; position: absolute; top: 0; left: 34px; width: 56px; height: 4px; background: var(--gold); }
.svc-cta .eyebrow { color: var(--gold-light); }
.svc-cta h3 { color: #fff; font-size: 24px; line-height: 1.3; margin: 16px 0 24px; }
.svc-cta .btn { align-self: flex-start; }

.pgrid.five { display: flex; flex-wrap: wrap; gap: 14px; }
.pgrid.five .pcard { flex: 0 1 calc(20% - 11.2px); background: #fff; padding: 20px; }
.pgrid.five .pcard .lg { height: 96px; padding: 14px; background: var(--surface); }
.pgrid.five .pcard .lg img { max-height: 62px; max-width: 100%; }
.pgrid.five .pcard h3 { font-size: 16.5px; }
.pgrid.five .pcard .role { font-size: 13.5px; }

@media (max-width: 1100px) { .pgrid.five .pcard { flex-basis: calc(33.333% - 9.4px); } }
@media (max-width: 1000px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc-intro, .svc-cta { grid-column: 1 / -1; }
  .svc-intro { padding-right: 0; }
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr; }
  .pgrid.five .pcard { flex-basis: calc(50% - 7px); padding: 14px; }
}

.navyband + .sec { padding-top: 90px !important; }
.sec:not(.navyband) .pillar { background: var(--surface); }

/* ---------- Partners page ---------- */
.plist { display: grid; gap: 14px; }
.prow { --c: 22px; display: grid; grid-template-columns: 280px 1fr 80px; gap: 40px; align-items: center; background: #fff; padding: 22px 34px 22px 22px; }
.plogo { --c: 14px; background: var(--surface); height: 150px; display: grid; place-items: center; padding: 22px; }
.plogo img { max-height: 84px; max-width: 100%; width: auto; }
.ptag { display: inline-block; padding: 6px 26px 6px 12px; background: var(--gold-soft); color: var(--gold-text); font-size: 12px; font-weight: 700; letter-spacing: .06em; border-left: 3px solid var(--gold); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); }
.prow h3 { font-size: 25px; margin: 12px 0 6px; }
.prole { color: var(--ink); font-weight: 600; font-size: 15px; }
.prole span { color: var(--muted); font-weight: 500; }
.prow p { color: var(--muted); font-size: 15.5px; margin-top: 8px; max-width: 640px; }
.prow .n { font-size: 48px; font-weight: 700; letter-spacing: -.04em; color: rgba(11,47,94,.1); text-align: right; }
@media (max-width: 800px) {
  .prow { grid-template-columns: 1fr; gap: 18px; padding: 18px 18px 26px; }
  .prow .n { display: none; }
  .plogo { height: 120px; }
  .prow h3 { font-size: 22px; }
}

.hero.page h1 { max-width: 13ch; }
.hero.page .sub { max-width: 440px; }

/* =========================================================
   Change 2: inner pages use a clean header band instead of the ship
   ========================================================= */
.hero.page { height: auto; min-height: 0; background: var(--surface); overflow: hidden; --shade: none; }
.hero.page::before { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(135deg, transparent 0 62%, rgba(194,154,82,.35) 62% 62.15%, transparent 62.15%),
  linear-gradient(135deg, transparent 0 70%, rgba(194,154,82,.22) 70% 70.12%, transparent 70.12%); }
.hero.page::after { content: ''; position: absolute; right: max(4vw, calc((100vw - 1240px) / 2)); top: 50%; width: 280px; height: 280px; transform: translateY(-36%); background: url("/images/logo-mark.png") center / contain no-repeat; opacity: .09; pointer-events: none; }
.hero.page .hero-inner { height: auto; opacity: 1; transform: none; }
.hero.page .hero-inner .wrap { padding-top: calc(92px + clamp(56px, 8vh, 96px)); padding-bottom: clamp(60px, 8vh, 92px); }
.hero.page h1 { max-width: 16ch; }
.hero.page .sub { max-width: 560px; color: var(--muted); font-size: 17.5px; line-height: 1.6; }
.hero.page + .body::before { display: none; }
@media (max-width: 1000px) {
  .hero.page .hero-inner .wrap { padding-top: calc(74px + 46px); padding-bottom: 50px; }
  .hero.page::after { width: 180px; height: 180px; right: -30px; }
  .hero.page .sub { font-size: 16px; }
}

/* wide graphics (Business Development, AI & Security) are shown whole,
   on a soft blurred fill of the same image instead of being cropped */
.fitbox { display: block; position: relative; overflow: hidden; height: 100%; }
.fitbox .bgfill { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover !important; filter: blur(22px) brightness(.8) saturate(1.1) !important; transform: scale(1.25) !important; }
.fitbox .fitimg { position: relative; z-index: 1; object-fit: contain !important; }

/* ---------- Service pages ---------- */
.svc-detail .hero.page h1 { font-size: clamp(34px, 4.2vw, 58px); max-width: 20ch; }
.crumbs { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding-top: 34px; font-size: 14px; font-weight: 600; color: var(--muted); }
.crumbs a { color: var(--ink); border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
.crumbs b { color: var(--gold-text); font-weight: 600; }
.svc-detail .svc-block { border-bottom: 0; margin-bottom: 0; padding-bottom: 90px; }
.svc-detail .svc-media { aspect-ratio: 16 / 7; }
.pn { padding-top: 48px !important; padding-bottom: 48px !important; }
.pn-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.pn-link { --c: 16px; display: flex; flex-direction: column; justify-content: center; gap: 6px; background: #fff; padding: 22px 26px; transition: background-color .2s ease; }
.pn-link:hover { background: var(--gold-soft); }
.pn-link.r { text-align: right; align-items: flex-end; }
.pn-link .k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.pn-link .t { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.pn-all { align-self: center; }
@media (max-width: 760px) {
  .pn-row { grid-template-columns: 1fr; }
  .pn-link.r { text-align: left; align-items: flex-start; }
  .pn-all { justify-self: start; order: 3; }
}

/* =========================================================
   Team feedback round: brighter palette, bolder company name,
   new welcome banner, larger shiny-gold labels, justified text,
   dark navy footer
   ========================================================= */
:root { --name-blue: #1746a2; --gold-a: #9c6810; --gold-b: #d9a634; --gold-c: #f6d57c; }

/* 1. Company name: deeper, brighter blue; Arabic and English drawn to the same width */
.brand { color: var(--name-blue); }
.brand .names { align-items: flex-start; }
.brand .ar, .brand .en { width: max-content; }
.brand .en { font-weight: 600; }
.brand .ar { font-weight: 400; line-height: 1.25; }

/* 3. Section labels: larger, bright shiny gold */
.gold-shine, .eyebrow, .kicker, .ptag, .ccard .k {
  font-size: 16px !important; letter-spacing: .17em; font-weight: 700;
  background-image: linear-gradient(100deg, var(--gold-a) 0%, var(--gold-b) 28%, var(--gold-c) 42%, var(--gold-b) 56%, var(--gold-a) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-a);
  animation: sheen 7s ease-in-out infinite;
}
@keyframes sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }

/* 4. Justified text */
.body p, .body .ticklist li, .body .points li, .hero .lead, .hero .sub, .glass p { text-align: justify; text-justify: inter-word; }
footer li, footer ul, .crumbs, .pn-link, .svc-card .more, .tlink { text-align: left !important; }
.center p, .center .prose p, .hero.page .sub, .hero .lead, .sec-head p { text-align-last: center; }

/* 5. Footer: dark navy, larger text, contrasting copyright bar */
footer { background: linear-gradient(180deg, #0b2f5e 0%, #08254b 100%); color: rgba(255,255,255,.82); border-top: 0; font-size: 16px; padding-bottom: 0 !important; }
footer a { color: #fff; }
footer a:hover { color: var(--gold-b); }
footer .brand { color: #ffffff; }
footer .brand .mark { background: #fbf8f2; border-radius: 50%; padding: 5px; box-shadow: 0 0 0 2px rgba(232,189,82,.6); }
footer .legalbar { margin-top: 48px; background: linear-gradient(90deg, #b8862e 0%, #e8c46a 50%, #b8862e 100%); color: #0b2f5e; font-size: 14px; font-weight: 700; letter-spacing: .03em; }
footer .legalbar .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
footer .legalbar p { text-align: left !important; text-align-last: auto !important; }
@media (prefers-reduced-motion: reduce) { .eyebrow, .kicker, .ptag, .ccard .k, .gold-shine { animation: none; } }

/* brighter Coastal palette */
:root { --surface: #f1f5fb; --muted: #45526a; --gold: #cf9f3f; --gold-text: #946a1c; --gold-light: #ecc879; --gold-soft: #fbf3e2; }
.eyebrow { gap: 14px; }
.eyebrow::before { -webkit-text-fill-color: initial; background: var(--gold-b) !important; }

/* 2. Welcome banner on the home video */
.welcome { display: inline-flex !important; align-items: center; gap: 12px; padding: 8px 34px 8px 8px !important; background: linear-gradient(135deg, #082a57 0%, #11448a 100%) !important; border-left: 0 !important; color: #fff !important; clip-path: polygon(10px 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 0 10px) !important; backdrop-filter: none !important; }
.welcome .wm { width: 32px; height: 32px; display: grid; place-items: center; background: #fbf8f2; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); flex: none; }
.welcome .wm img { width: 24px; height: 24px; }
.welcome .wt { font-size: 14px; font-weight: 700; letter-spacing: .06em; background-image: linear-gradient(100deg, #e8bd52 0%, #fff1c2 45%, #e8bd52 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sheen 7s ease-in-out infinite; }

/* footer (Coastal has columns) */
footer { padding-top: 76px !important; font-size: 16px; }
footer b { color: var(--gold-b) !important; font-size: 17px; letter-spacing: .02em; }
footer li { font-size: 15.5px; }
footer .row p { color: rgba(255,255,255,.8); font-size: 15.5px; margin-top: 4px; }
footer .brand .en { font-size: 21px; } footer .brand .mark { width: 60px; height: 60px; }
footer .base { display: none; }
@media (max-width: 1000px) { .welcome .wt { font-size: 12.5px; } footer .brand .en { font-size: 16px; } footer .brand .mark { width: 50px; height: 50px; } }

@media (max-width: 600px) {
  /* short hero lines read better unjustified on phones */
  .hero .lead { text-align: center; }
  .glass p, .hero .sub { text-align: left; }
  .welcome .wt { font-size: 11px !important; letter-spacing: .1em !important; }
  .welcome { padding-right: 28px !important; }
}

/* =========================================================
   Fixes round 2
   ========================================================= */
/* 1. Company name: darker royal navy */
:root { --name-blue: #0f2d6b; }

/* 3. Justified text only where columns are wide enough, with careful
   hyphenation so there are no big gaps; narrow cards stay left-aligned */
.body p, .body .ticklist li, .body .points li, .hero .lead, .hero .sub, .glass p { text-align: inherit; text-align-last: auto; }
.prose p, .split p, .vm p, .service p, .svc-block .cols p, .prow p, .svc-detail .cols p {
  text-align: justify; text-justify: inter-word;
  -webkit-hyphens: none; hyphens: none; hyphenate-limit-chars: 8 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4;
  word-spacing: -0.02em;
}
.center .prose p { text-align-last: center; }
@media (max-width: 900px) {
  .prose p, .split p, .vm p, .service p, .svc-block .cols p, .prow p, .svc-detail .cols p { text-align: inherit; hyphens: manual; -webkit-hyphens: manual; word-spacing: normal; }
}

/* 4. One rich, metallic gold for every gold text (no yellow) */
:root {
  --metal: linear-gradient(100deg, #7a4d0c 0%, #a5711a 20%, #cf9c3c 36%, #a5711a 52%, #835610 68%, #b5832a 84%, #7a4d0c 100%);
  --metal-dark: linear-gradient(100deg, #c48f2c 0%, #e6bf6c 22%, #fbe3a6 38%, #d9a748 54%, #b88228 72%, #e8c06a 88%, #c48f2c 100%);
}
.eyebrow, .kicker, .ptag, .ccard .k, h2.big em, .svc-intro h2 em, .hero h1 em, .svc .n, .svc-card .no, .pillars-full .n,
.index .n, .card .num, .pillar .n, .pcard .role, .pn-link .k, .crumbs b, .service .sub, .svc-block .subt, .details dt,
.side a span, .plate-graphic .lbl, .prole, .w1 {
  background-image: var(--metal) !important; background-size: 300% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: #9a6a18 !important;
  animation: sheen 9s ease-in-out infinite;
}
.svc-cta .eyebrow, .vm .navy .eyebrow, .infobox .eyebrow, footer b, .card.big .num, .welcome .w1 {
  background-image: var(--metal-dark) !important;
}
.prole span { -webkit-text-fill-color: var(--muted) !important; }
@media (prefers-reduced-motion: reduce) { .w1, h2.big em, .svc-intro h2 em, .hero h1 em { animation: none; } }

/* 2. Welcome banner: two-tone navy flag, no logo */
.welcome { padding: 0 34px 0 0 !important; gap: 0 !important; background: linear-gradient(135deg, #082a57 0%, #11448a 100%) !important; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%) !important; border-left: 4px solid #c9963a !important; }
.welcome .wm { display: none !important; }
.welcome .w1, .welcome .w2 { padding: 10px 0 10px 16px; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.welcome .w2 { color: #fff; padding-left: 7px; }
@media (max-width: 600px) { .welcome .w1, .welcome .w2 { font-size: 12.5px; } .welcome { padding-right: 26px !important; } }

/* =========================================================
   Fixes round 3: no word gaps, clean footer
   ========================================================= */
/* Text alignment: browsers can only justify by stretching the spaces between
   words, which is what caused the gaps. Paragraphs are now left-aligned with
   balanced line breaks, so the right edge stays tidy without any gaps. */
.body p, .body li, .prose p, .split p, .vm p, .service p, .svc-block .cols p, .prow p, .svc-detail .cols p,
.statement, .hero .lead, .hero .sub, .glass p {
  text-align: left !important; text-align-last: auto !important; word-spacing: normal !important;
  -webkit-hyphens: manual !important; hyphens: manual !important; text-wrap: pretty;
}
.center p, .center .prose p, .center .statement, .hero.page .sub { text-align: center !important; }
.hero .lead { text-align: center !important; }

/* Coastal footer: clean columns, plain gold headings, even spacing */
footer { padding-top: 80px !important; }
footer .row { grid-template-columns: 1.6fr 0.9fr 1.3fr 1.2fr !important; gap: 56px !important; align-items: start; }
footer b {
  background: none !important; -webkit-text-fill-color: #e0b04a !important; color: #e0b04a !important; animation: none !important;
  font-size: 13px !important; letter-spacing: .18em !important; text-transform: uppercase; font-weight: 700;
  padding-bottom: 14px; margin-bottom: 18px !important; border-bottom: 1px solid rgba(224,176,74,.35);
}
footer ul li { font-size: 15.5px; line-height: 1.45; }
footer ul li + li { margin-top: 12px !important; }
footer ul a { color: rgba(255,255,255,.86); }
footer ul a:hover { color: #e0b04a; }
footer .row > div:first-child p { margin-top: 18px; font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.75); max-width: 360px; }
footer .row > div:last-child li { color: rgba(255,255,255,.86); }
@media (max-width: 1000px) { footer .row { grid-template-columns: 1fr 1fr !important; gap: 40px !important; } footer .row > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { footer .row { grid-template-columns: 1fr !important; } }

/* Coastal is left-aligned: page-header subtitles line up under the title */
.hero.page .sub, .hero.page .hero-inner .wrap > * { text-align: left !important; margin-left: 0 !important; }
.hero.page .sub { margin-top: 14px; }
/* Tighter, even vertical rhythm between sections */
.sec { padding-top: 96px; padding-bottom: 96px; }
.vm > div { padding-bottom: 40px; }

/* Justified paragraphs, done carefully: only paragraphs that are wide and long
   enough get justified (decided by a small script), with English hyphenation
   so long words split cleanly instead of leaving gaps. */
.body p.jt, .glass p.jt, .hero .sub.jt {
  text-align: left !important;
  -webkit-hyphens: none !important; hyphens: none !important;
  text-wrap: wrap;
}

/* give the text column next to big statements a little more room */
.split { grid-template-columns: 1fr 1.12fr; gap: 64px; }
.svc-intro p { font-size: 15.5px; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* =========================================================
   Round 4: no split words, darker text, coloured page headers
   ========================================================= */
/* 1. Never split a word across two lines */
p, li, .statement, h1, h2, h3 { -webkit-hyphens: none !important; hyphens: none !important; overflow-wrap: normal; word-break: normal; }

/* 2. Darker, high-contrast text */
:root { --text: #111a2b; --muted: #1f2a3d; }
body { color: var(--text); }
.body p, .body li, .glass p, .hero .sub, .facts span, .card p, .svc-card p, .pillar p, .pcard .role + p { color: #1f2a3d; }
.vm .navy p, .svc-cta p, .infobox p, .card.big p { color: rgba(255,255,255,.94) !important; }
.prole span, .crumbs { color: #3a4559 !important; -webkit-text-fill-color: #3a4559 !important; }

/* 3. Page headers: brand navy with the compass logo, a different accent per page */
.hero.page { background: linear-gradient(120deg, #071f44 0%, #0b2f5e 55%, #12407c 100%); color: #fff; }
.hero.page::before { background:
  linear-gradient(135deg, transparent 0 62%, rgba(217,166,52,.55) 62% 62.15%, transparent 62.15%),
  linear-gradient(135deg, transparent 0 70%, rgba(217,166,52,.35) 70% 70.12%, transparent 70.12%) !important; }
.hero.page::after {
  width: 184px !important; height: 184px !important; border-radius: 50%; opacity: 1 !important; top: calc(50% + 46px) !important;
  background: url("/images/logo-mark.png") center / 72% no-repeat, radial-gradient(circle, rgba(251,248,242,.97) 0 60%, rgba(251,248,242,.0) 61%) !important;
  box-shadow: 0 0 0 10px rgba(255,255,255,.06), 0 0 0 22px rgba(255,255,255,.035), 0 20px 50px -18px rgba(0,0,0,.6);
  transform: translateY(-50%) !important;
}
.hero.page h1 { color: #ffffff !important; }
.hero.page h1 em { -webkit-text-fill-color: transparent !important; background-image: var(--metal-dark) !important; }
.hero.page .sub { color: rgba(255,255,255,.9) !important; }
.hero.page .tag { background: rgba(255,255,255,.1) !important; color: #fff !important; border-left-color: #d9a634 !important; }
.hero.page .tag, .hero.page .tag * { -webkit-text-fill-color: #fff !important; }
/* per-page accents */
.ph-about    { background: linear-gradient(120deg, #071f44 0%, #0b2f5e 50%, #1b4f94 100%) !important; }
.ph-services { background: radial-gradient(ellipse 60% 120% at 85% 50%, rgba(217,166,52,.22), transparent 60%), linear-gradient(120deg, #061a3a 0%, #0b2f5e 100%) !important; }
.ph-partners { background: radial-gradient(ellipse 70% 130% at 90% 40%, rgba(46,128,160,.45), transparent 60%), linear-gradient(120deg, #071f44 0%, #0d3566 100%) !important; }
.ph-contact  { background: linear-gradient(120deg, #0b2f5e 0%, #0e3a73 55%, #8a6727 140%) !important; }
.ph-service  { background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 80px), linear-gradient(120deg, #061a3a 0%, #0b2f5e 60%, #164a8c 100%) !important; }
@media (max-width: 1000px) {
  .hero.page::after { width: 150px !important; height: 150px !important; right: -24px !important; opacity: .55 !important; }
}

.ccard .v { font-size: 15px; overflow-wrap: anywhere; }

p.jt .jl { display: block; white-space: nowrap; }

/* =========================================================
   Service pages: compact photo in the header, content + sidebar
   ========================================================= */

.sd-hero .hero-inner .wrap { padding-bottom: clamp(48px, 6vh, 72px) !important; }
.sd-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.sd-hero h1 { font-size: clamp(32px, 3.6vw, 50px) !important; max-width: 18ch; }
.sd-cta { margin-top: 26px; }
.sd-photo { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 440px; }
.sd-frame { --c: 26px; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0b2f5e; box-shadow: 0 24px 50px -24px rgba(0,0,0,.6); }
.sd-frame > img, .sd-frame .fitbox { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sd-frame .fitbox .fitimg { width: 100%; height: 100%; }
.sd-photo::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 2px solid #d9a634; z-index: 0; clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px); }
.sd-frame { z-index: 1; }
.sd-num { position: absolute; z-index: 2; left: -22px; bottom: -18px; font-size: 64px; font-weight: 700; letter-spacing: -.05em; line-height: 1; color: #fff; text-shadow: 0 6px 20px rgba(0,0,0,.35); }
.sd-logo { position: absolute; inset: 0; display: grid; place-items: center; background: #fbf8f2; }
.sd-logo img { width: 46%; }

.sd-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; padding: 36px 0 90px; }
.sd-lead { font-size: 20px !important; line-height: 1.5; color: #0b2f5e !important; font-weight: 600; margin-bottom: 28px; padding-left: 18px; border-left: 4px solid #d9a634; }
.sd-block { padding: 28px 0 8px; border-top: 1px solid var(--line); }
.sd-block + .sd-block { margin-top: 26px; }
.sd-block h4 { display: flex; align-items: center; gap: 14px; font-size: 22px; letter-spacing: -.02em; text-transform: none; margin-bottom: 14px; }
.sd-block h4::before { display: none; }
.sd-block h4 span { display: grid; place-items: center; width: 40px; height: 40px; background: #0b2f5e; color: #e0b04a; font-size: 13px; letter-spacing: .04em; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.sd-block p { font-size: 16.5px; line-height: 1.8; }
.sd-block p + p { margin-top: 14px; }

.sd-side { position: sticky; top: 104px; display: grid; gap: 16px; }
.sd-ask { --c: 20px; position: relative; background: #0b2f5e; color: #fff; padding: 30px 26px; }
.sd-ask::before { content: ''; position: absolute; top: 0; left: 26px; width: 48px; height: 4px; background: #d9a634; }
.sd-ask h3 { color: #fff; font-size: 22px; line-height: 1.25; margin: 12px 0 10px; }
.sd-ask p { color: rgba(255,255,255,.9) !important; font-size: 15px; margin-bottom: 20px; }
.sd-ask .btn { background: #fff; color: #0b2f5e; }
.sd-list { background: var(--surface); padding: 20px 22px; }
.sd-list .lbl { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1f2a3d; margin-bottom: 8px; }
.sd-list a { display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: #0b2f5e; line-height: 1.35; transition: color .2s ease; }
.sd-list a span { color: #a5711a; font-size: 12px; padding-top: 2px; }
.sd-list a:hover { color: #a5711a; }
.sd-list a.on { color: #a5711a; }
.sd-list a.on span { color: #0b2f5e; }

@media (max-width: 1000px) {
  .sd-grid { grid-template-columns: 1fr; gap: 34px; }
  .sd-photo { justify-self: start; max-width: 520px; margin-right: 14px; }
  .sd-body { grid-template-columns: 1fr; gap: 28px; padding-bottom: 60px; }
  .sd-side { position: static; }
  .sd-num { font-size: 48px; left: -8px; }
}

/* ---------- Service header: text + logo badge (same as other pages) ---------- */
.sd-grid { display: block; }
.sd-grid > .rise { max-width: 640px; }

/* ---------- Porthole photo: the service photo seen through a ship's window ---------- */
.porthole { margin: 0 0 6px; display: grid; justify-items: center; }
.ph-ring { position: relative; width: 280px; height: 280px; border-radius: 50%;
  background: conic-gradient(from 210deg, #8a6420, #e8c46a, #b8862e, #f3d996, #9a6a18, #d9a634, #8a6420);
  padding: 16px; box-shadow: 0 22px 44px -22px rgba(11,47,94,.55), inset 0 0 0 2px rgba(255,255,255,.35); }
.ph-ring::after { content: ''; position: absolute; inset: 14px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(80,55,10,.45); pointer-events: none; z-index: 3; }
.ph-ring i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff4cf, #a87418 70%); box-shadow: 0 1px 2px rgba(0,0,0,.4);
  transform: rotate(var(--r)) translateY(-132px); z-index: 4; }
.ph-glass { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #0b2f5e;
  box-shadow: inset 0 6px 18px rgba(0,0,0,.45); }
.ph-glass > img, .ph-glass .fitbox { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-glass::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 38%), radial-gradient(circle at 50% 50%, transparent 62%, rgba(0,0,0,.28) 100%); }
.porthole.fit .fitimg { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain !important; transform: scale(1.04); }
.porthole figcaption { margin-top: 16px; display: flex; gap: 10px; align-items: baseline; font-weight: 700; color: #0b2f5e; font-size: 15px; text-align: center; }
.porthole figcaption span { color: #a5711a; font-size: 13px; letter-spacing: .08em; }
@media (max-width: 1000px) { .porthole { justify-self: start; } .ph-ring { width: 240px; height: 240px; } .ph-ring i { transform: rotate(var(--r)) translateY(-112px); } }

/* ---------- Welcome banner: Option A (ivory) ---------- */
.welcome { background: #fbf6ea !important; border-left: 4px solid #c9963a !important; box-shadow: 0 10px 26px -14px rgba(11,47,94,.45) !important; }
.welcome .w1, .welcome .w2 { animation: none !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; }
.welcome .w1 { color: #9a6a18 !important; -webkit-text-fill-color: #9a6a18 !important; }
.welcome .w2 { color: #0b2f5e !important; -webkit-text-fill-color: #0b2f5e !important; }

/* =========================================================
   Service pages, simplified: compact photo + text, one centred
   'talk to us', previous/next only
   ========================================================= */
.sd-wrap { padding-bottom: 80px; }
.sd-lead { font-size: 20px !important; line-height: 1.5; color: #0b2f5e !important; font-weight: 600; margin: 28px 0 0; padding-left: 18px; border-left: 4px solid #d9a634; max-width: 760px; }
.sd-top { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 34px; }
.sd-pic { --c: 22px; position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #0b2f5e; box-shadow: 0 18px 40px -24px rgba(11,47,94,.55); }
.sd-pic > img, .sd-pic .fitbox { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sd-pic .fitbox .fitimg { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
.sd-pic::after { content: ''; position: absolute; left: 0; bottom: 0; width: 72px; height: 4px; background: #d9a634; z-index: 2; }
.sd-block.first { border-top: 0; padding-top: 0; margin-top: 0; }
.sd-block { padding-top: 30px; margin-top: 34px; border-top: 1px solid var(--line); }
.sd-talk { --c: 26px; position: relative; max-width: 720px; margin: 64px auto 0; text-align: center; background: #0b2f5e; color: #fff; padding: 44px 40px; }
.sd-talk::before { content: ''; position: absolute; top: 0; left: 50%; width: 64px; height: 4px; margin-left: -32px; background: #d9a634; }
.sd-talk .eyebrow { justify-content: center; }
.sd-talk .eyebrow::before { display: none; }
.sd-talk h3 { color: #fff; font-size: clamp(22px, 2.4vw, 30px); margin: 12px 0 10px; }
.sd-talk p { color: rgba(255,255,255,.9) !important; text-align: center !important; max-width: 480px; margin: 0 auto 24px; }
.sd-talk .btn { background: #fff; color: #0b2f5e; }
.sd-pn { display: flex; justify-content: space-between; gap: 24px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); }
.sd-pn a { display: flex; flex-direction: column; gap: 6px; max-width: 46%; }
.sd-pn a.r { text-align: right; align-items: flex-end; margin-left: auto; }
.sd-pn .k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a5711a; }
.sd-pn .t { font-size: 18px; font-weight: 600; color: #0b2f5e; line-height: 1.3; transition: color .2s ease; }
.sd-pn a:hover .t { color: #a5711a; }
@media (max-width: 1000px) {
  .sd-top { grid-template-columns: 1fr; gap: 28px; }
  .sd-pic { max-width: 520px; }
  .sd-talk { padding: 36px 22px; }
  .sd-pn a { max-width: 48%; }
  .sd-pn .t { font-size: 15.5px; }
}

.sd-pn { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; }
.sd-pn a { max-width: none; }
.sd-pn a.r { margin-left: 0; justify-self: end; }
.sd-pn .sd-all { display: inline-flex; flex-direction: row; justify-self: center; color: #fff; }
@media (max-width: 700px) {
  .sd-pn { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .sd-pn .sd-all { grid-column: 1 / -1; grid-row: 2; }
}

/* ================= Oct 29: new hero video, services slider, grey legal bar ================= */
/* hero: bright ship video with navy shade on the text side */
.hero:not(.page) { background: #0b2f5e; --shade: linear-gradient(to right, rgba(5,22,46,.80) 0%, rgba(5,22,46,.48) 36%, rgba(5,22,46,.06) 64%, rgba(5,22,46,0) 100%); }
.hero:not(.page) h1 { color: #fff !important; }
.hero:not(.page) h1 em { -webkit-text-fill-color: transparent !important; background-image: var(--metal-dark) !important; }
.hero:not(.page) .glass { background: rgba(5,22,46,.45) !important; }
.hero:not(.page) .glass p, .hero:not(.page) .glass p .jl { color: #fff !important; }
.hero:not(.page) .glass .btn { background: #fff !important; color: #0b2f5e !important; }
.hero:not(.page) .glass .btn .ar { color: #a5711a !important; border-left-color: rgba(11,47,94,.2) !important; }
.hero:not(.page) .mf { transform: scaleX(-1) translateX(-4%) scale(1.08) !important; }
.hero:not(.page) video { object-position: 50% 50% !important; }
@media (max-width: 1000px) {
  .hero:not(.page) { --shade: none; }
  .hero:not(.page) .hero-photo { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%) !important; mask-image: linear-gradient(to bottom, transparent 0, #000 26%) !important; }
  .hero:not(.page) .mf { transform: none !important; }
  .hero:not(.page) video { object-position: 50% 45% !important; }
}

/* services slider (home page) */
.svc-slider .sl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }
.svc-slider .sl-intro { max-width: 640px; }
.svc-slider .sl-intro h2 { font-size: clamp(30px, 3.2vw, 44px); margin: 16px 0 14px; }
.svc-slider .sl-intro p { color: #1f2a3d; font-size: 15.5px; text-align: left !important; }
.svc-slider .sl-ctrl { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.sl-btn { --c: 10px; width: 52px; height: 52px; display: grid; place-items: center; border: 0; cursor: pointer; background: #fff; color: var(--ink); font-size: 20px; transition: background-color .2s ease, color .2s ease; }
.sl-btn:hover { background: var(--ink); color: #fff; }
.sl-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sl-btn[disabled] { opacity: .35; cursor: default; background: #fff; color: var(--ink); }
.svc-slider .sl-ctrl .btn { margin-left: 10px; }
.sl-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 2px 2px 6px; margin: -2px -2px 0; }
.sl-track::-webkit-scrollbar { display: none; }
.sl-track:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.sl-track > * { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; }
.sl-track .svc-cta { padding: 44px 34px; }
.sl-foot { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.sl-bar { flex: 1; height: 3px; background: rgba(11,47,94,.14); position: relative; overflow: hidden; }
.sl-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: var(--ink); transition: left .35s ease, width .35s ease; }
.sl-count { font-size: 14px; font-weight: 600; color: #4a5568; letter-spacing: .06em; min-width: 64px; text-align: right; }
.sl-count b { color: var(--ink); }
@media (max-width: 1000px) {
  .sl-track > * { flex-basis: calc((100% - 22px) / 2); }
  .svc-slider .sl-head { flex-direction: column; align-items: flex-start; gap: 22px; }
}
@media (max-width: 640px) {
  .sl-track > * { flex-basis: 86%; }
  .sl-btn { width: 46px; height: 46px; }
}

/* bottom legal bar: light grey instead of gold */
footer .legalbar { background: #e7ebf0 !important; color: #0b2f5e !important; border-top: 1px solid #d3d9e2; }
footer .legalbar p { color: #0b2f5e !important; font-weight: 600; }

/* ================= Oct 29 (2): vision/mission band, service showcase, brochure, compact page headers ================= */
/* vision & mission: one photo band, two identical cards */
.vm-band { position: relative; background: #0b2f5e none center 62% / cover no-repeat; isolation: isolate; }
.vm-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(6,24,52,.90) 0%, rgba(11,47,94,.80) 55%, rgba(11,47,94,.62) 100%); }
.vm2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.vm-card { --c: 26px; padding: 46px 44px 44px; background: rgba(255,255,255,.08); border-top: 3px solid #d9a634; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vm-card .eyebrow { color: #e8c46a !important; -webkit-text-fill-color: #e8c46a !important; }
.vm-card .eyebrow::before { background: #e8c46a !important; }
.vm-card h3 { color: #fff; font-size: 30px; margin: 14px 0 14px; }
.vm-card p, .vm-card p .jl { color: rgba(255,255,255,.93) !important; font-size: 16.5px; line-height: 1.75; }
@media (max-width: 860px) { .vm2 { grid-template-columns: 1fr; } .vm-card { padding: 36px 26px; } }
.pillars-sec .pillar { background: var(--surface); }
.partners-home .pcard { background: var(--surface); }

/* service showcase: changes by itself every few seconds, or by clicking */
.svc-show .sh-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 36px; }
.svc-show .sh-head h2 { font-size: clamp(30px, 3.2vw, 44px); margin-top: 16px; }
.sh-stage { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; }
.sh-media { --c: 28px; position: relative; min-height: 540px; overflow: hidden; background: #0b2f5e; touch-action: pan-y; }
.sh-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.sh-slide.on { opacity: 1; visibility: visible; transition: opacity .9s ease; z-index: 1; }
.sh-slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 7s linear; }
.sh-slide > img.fit { object-fit: contain; background: #0b2f5e; }
.sh-slide.on > img { transform: scale(1); }
.sh-mark { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 60% 40%, #164a8c, #071f44); }
.sh-mark img { width: 120px; opacity: .9; }
.sh-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,22,46,.92) 0%, rgba(5,22,46,.6) 38%, rgba(5,22,46,0) 70%); }
.sh-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 160px 40px 40px; color: #fff; }
.sh-cap > * { transform: translateY(14px); opacity: 0; transition: transform .7s ease .25s, opacity .7s ease .25s; }
.sh-slide.on .sh-cap > * { transform: none; opacity: 1; }
.sh-k { display: block; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #e8c46a; }
.sh-k i { font-style: normal; color: rgba(255,255,255,.6); }
.sh-cap h3 { color: #fff; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.2; margin: 10px 0 10px; max-width: 22ch; }
.sh-cap p, .sh-cap p .jl { color: rgba(255,255,255,.9) !important; font-size: 16px; line-height: 1.6; max-width: 52ch; text-align: left !important; }
.sh-cap .btn { margin-top: 20px; background: #fff !important; color: #0b2f5e !important; }
.sh-cap .btn .ar { color: #a5711a !important; }
.sh-ctrl { position: absolute; right: 28px; bottom: 40px; z-index: 3; display: flex; gap: 8px; }
.sh-b { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.4); background: rgba(5,22,46,.35); color: #fff; font-size: 17px; cursor: pointer; display: grid; place-items: center; transition: background-color .2s ease; }
.sh-b:hover { background: #fff; color: #0b2f5e; }
.sh-b:focus-visible, .sh-item:focus-visible { outline: 2px solid #d9a634; outline-offset: 2px; }
.sh-b.pause .i-pa { font-size: 11px; letter-spacing: -2px; } .sh-b.pause .i-pl { display: none; font-size: 12px; }
.svc-show.paused .sh-b.pause .i-pa { display: none; } .svc-show.paused .sh-b.pause .i-pl { display: inline; }
.sh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sh-list li { flex: 1; display: flex; }
.sh-item { position: relative; flex: 1; display: flex; align-items: center; gap: 16px; width: 100%; padding: 10px 18px; border: 0; background: #fff; color: var(--ink); text-align: left; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; cursor: pointer; overflow: hidden; transition: background-color .3s ease, color .3s ease; }
.sh-item .n { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: #a5711a; min-width: 22px; }
.sh-item:hover { background: #eef2f7; }
.sh-item.on { background: var(--ink); color: #fff; }
.sh-item.on .n { color: #e8c46a; }
.sh-item .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #d9a634; }
.sh-item.on .bar { width: calc(var(--prog, 0) * 100%); }
.sh-dots { display: none; }
@media (max-width: 1000px) {
  .sh-stage { grid-template-columns: 1fr; }
  .sh-list { display: none; }
  .sh-media { min-height: 520px; }
  .sh-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
  .sh-dots span { width: 8px; height: 8px; background: rgba(11,47,94,.25); transition: width .3s ease, background-color .3s ease; }
  .sh-dots span.on { width: 26px; background: var(--ink); }
}
@media (max-width: 640px) {
  .svc-show .sh-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .sh-media { min-height: 560px; }
  .sh-cap { padding: 0 22px 92px; }
  .sh-ctrl { left: 22px; right: auto; bottom: 26px; }
}

/* brochure */
.brochure { background: #fbf6ea; }
.br-grid { display: grid; grid-template-columns: 300px 1fr; gap: 70px; align-items: center; }
.br-cover { --c: 26px; position: relative; aspect-ratio: 3 / 4; padding: 34px 30px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
  background: linear-gradient(160deg, rgba(11,47,94,.55), rgba(5,22,46,.96) 70%), url("/images/hero-ship.jpg") 70% 50% / cover; box-shadow: 0 30px 60px -30px rgba(5,22,46,.55); transform: rotate(-3deg); }
.br-cover img { position: absolute; top: 30px; left: 30px; width: 64px; height: 64px; padding: 6px; border-radius: 50%; background: #fbf8f2; }
.br-cover .br-y { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #e8c46a; }
.br-cover .br-n { font-size: 26px; font-weight: 700; line-height: 1.15; margin: 10px 0 12px; }
.br-cover .br-t { font-size: 13px; color: rgba(255,255,255,.8); border-top: 1px solid rgba(255,255,255,.25); padding-top: 12px; }
.br-text h2 { font-size: clamp(30px, 3.2vw, 44px); margin: 16px 0 14px; }
.br-text p { max-width: 560px; text-align: left !important; }
.br-text .btns { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.br-note { margin-top: 14px; font-size: 14px; color: #8a5a00 !important; }
@media (max-width: 860px) { .br-grid { grid-template-columns: 1fr; gap: 40px; } .br-cover { max-width: 230px; margin: 0 auto; } }

/* compact page headers (About, Services, Partners, Contact, service pages) */
.hero.page .hero-inner .wrap { padding-top: calc(92px + 40px) !important; padding-bottom: 44px !important; }
.hero.page .tag { background: none !important; padding: 0 !important; clip-path: none !important; border: 0 !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .14em; text-transform: uppercase; }
.hero.page .tag, .hero.page .tag * { -webkit-text-fill-color: #e8c46a !important; color: #e8c46a !important; }
.hero.page h1, .sd-hero h1 { font-size: clamp(32px, 3.5vw, 48px) !important; line-height: 1.1 !important; margin-top: 10px !important; max-width: 24ch !important; }
.hero.page h1 br { display: none; }
.hero.page .sub { font-size: 16.5px !important; margin-top: 10px !important; max-width: 620px !important; }
.hero.page::after { width: 118px !important; height: 118px !important; box-shadow: 0 0 0 8px rgba(255,255,255,.06), 0 14px 34px -14px rgba(0,0,0,.6) !important; }
.sd-hero .hero-inner .wrap { padding-bottom: 44px !important; }
@media (max-width: 1000px) {
  .hero.page .hero-inner .wrap { padding-top: calc(74px + 30px) !important; padding-bottom: 32px !important; }
  .hero.page h1, .sd-hero h1 { font-size: 30px !important; max-width: 16ch !important; }
  .hero.page::after { width: 76px !important; height: 76px !important; right: 16px !important; top: calc(50% + 37px) !important; opacity: 1 !important; }
  .hero.page .sub { font-size: 15px !important; max-width: 78% !important; }
}
/* long statements under the page header: shorter, calmer */
.statement, .split .statement { font-size: clamp(21px, 1.9vw, 26px) !important; line-height: 1.4 !important; font-weight: 500 !important; letter-spacing: -.01em !important; }

/* fixes: brochure cover layout, small logo badge on phones */
.br-cover { justify-content: flex-start; }
.br-cover img { position: static; margin-bottom: auto; }
.br-cover .br-y { margin-top: 28px; }
@media (max-width: 1000px) {
  .hero.page::after { width: 54px !important; height: 54px !important; right: 18px !important; top: calc(74px + 22px) !important; transform: none !important; box-shadow: 0 0 0 5px rgba(255,255,255,.07) !important; }
  .hero.page .hero-inner .wrap { padding-right: 20px !important; }
  .hero.page .sub { max-width: 100% !important; }
}

/* ================= Oct 29 (3): calmer sizes ================= */
/* hero video: show the full width of the footage, no extra zoom, no white fade at the bottom */
.hero:not(.page) .mf { transform: scaleX(-1) !important; }
.hero:not(.page) .hero-photo video { transform: none !important; animation: none !important; }
.hero:not(.page) + .body::before { display: none !important; }
@media (max-width: 1000px) { .hero:not(.page) .mf { transform: none !important; } }

/* vision & mission: compact */
.vm-band.sec { padding-top: 64px !important; padding-bottom: 64px !important; }
.vm2 { gap: 18px; }
.vm-card { --c: 18px; padding: 28px 30px 28px; border-top-width: 2px; }
.vm-card h3 { font-size: 21px; margin: 0 0 10px; color: #fff; }
.vm-card h3::before { content: ''; display: inline-block; width: 22px; height: 2px; background: #e8c46a; vertical-align: middle; margin: -3px 12px 0 0; }
.vm-card p, .vm-card p .jl { font-size: 15px !important; line-height: 1.7 !important; }
@media (max-width: 860px) { .vm-band.sec { padding-top: 44px !important; padding-bottom: 44px !important; } .vm-card { padding: 24px 22px; } }

/* brochure: compact strip */
.brochure.sec { padding-top: 56px !important; padding-bottom: 56px !important; }
.br-grid { grid-template-columns: 150px 1fr; gap: 44px; }
.br-cover { padding: 16px 14px; transform: rotate(-3deg); }
.br-cover img { width: 34px; height: 34px; padding: 3px; }
.br-cover .br-y { font-size: 8px; margin-top: 14px; letter-spacing: .12em; }
.br-cover .br-n { font-size: 14px; margin: 5px 0 6px; }
.br-cover .br-t { font-size: 8px; padding-top: 6px; }
.br-text h2 { font-size: clamp(22px, 2vw, 28px); margin: 10px 0 8px; }
.br-text p { font-size: 15px; }
.br-text .btns { margin-top: 18px; }
@media (max-width: 860px) { .br-grid { grid-template-columns: 110px 1fr; gap: 24px; align-items: start; } .br-cover { max-width: 110px; margin: 0; } .br-cover .br-n { font-size: 11px; } .br-cover .br-t { display: none; } }
@media (max-width: 480px) { .br-grid { grid-template-columns: 1fr; } }

/* hero video on wide screens: a 4:3 window on the right that fades into navy behind the text, so the ship is not over-zoomed */
@media (min-width: 1001px) {
  .hero:not(.page) .hero-photo .mf { left: auto !important; right: 0; width: min(100%, calc((100vh - 0px) * 4 / 3)); -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%); mask-image: linear-gradient(to right, #000 62%, transparent 100%); }
  .hero:not(.page) { --shade: linear-gradient(to right, rgba(5,22,46,.55) 0%, rgba(5,22,46,.25) 40%, rgba(5,22,46,0) 60%); }
}

/* ================= Oct 29 (4): text about 15% smaller across the site ================= */
@media (min-width: 1001px) {
  .hero:not(.page) h1 { font-size: clamp(40px, 3.9vw, 56px) !important; }
  .body h2, .ctabox h2, .svc-intro h2, .svc-show .sh-head h2, .sec-head h2, .split h2 { font-size: clamp(28px, 2.75vw, 40px) !important; }
  .enquiry h2 { font-size: 30px !important; }
  .br-text h2 { font-size: 24px !important; }
  .hero.page h1, .sd-hero h1 { font-size: clamp(30px, 2.9vw, 40px) !important; }
  .sh-cap h3 { font-size: 27px !important; }
  .sd-talk h3, .vm .navy h3, .vm h3, [data-page="partners"] h3:not(.pcard h3) { font-size: 26px !important; }
  .infobox h3, .pinfo h3 { font-size: 22px !important; }
  .svc-cta h3 { font-size: 21px !important; }
  .pillar h3 { font-size: 18px !important; }
  .sd-block h4 { font-size: 19px !important; }
  .vm-card h3 { font-size: 19px !important; }
  .svc-card h3, .svc-card .tx h3 { font-size: 18.5px !important; }
  .statement, .split .statement { font-size: clamp(19px, 1.6vw, 22px) !important; }
  .body p, .body li, .glass p, .hero .glass p, .prose p, .split p, .service p, .sd-block p { font-size: 15.5px !important; }
  .svc-card p, .pillar p, .pcard p { font-size: 14.5px !important; }
  .sh-cap p { font-size: 15px !important; }
  .vm-card p { font-size: 14.5px !important; }
  .eyebrow { font-size: 13.5px !important; }
  .hero.page .sub { font-size: 15.5px !important; }
}
@media (max-width: 1000px) {
  .hero:not(.page) h1 { font-size: 32px !important; }
  .body h2, .ctabox h2, .svc-intro h2, .svc-show .sh-head h2, .sec-head h2, .split h2 { font-size: 27px !important; }
  .hero.page h1, .sd-hero h1 { font-size: 27px !important; }
  .sh-cap h3 { font-size: 23px !important; }
  .statement, .split .statement { font-size: 19px !important; }
  .body p, .body li, .glass p { font-size: 15px !important; }
  .eyebrow { font-size: 12.5px !important; }
}

/* ================= Oct 29 (5): headings with their text underneath, photos, darker cards ================= */
/* section headings: paragraph sits directly under the heading, left aligned */
.sec-head { display: block !important; margin-bottom: 36px; }
.sec-head > div { max-width: 820px; }
.sec-head p { max-width: 760px !important; margin-top: 14px !important; text-align: left !important; }
.sec-head p .jl { text-align: left; }
/* About & Partners intro: statement + text together on the left, photo on the right */
.intro-split { align-items: center !important; }
.intro-split .intro-body { margin-top: 20px; }
.intro-split .ph { aspect-ratio: 5 / 4; }
@media (max-width: 1000px) { .intro-split .ph-wrap { order: 2; } }
/* vision & mission (and partner cards): clearer photo, solid dark cards */
.vm-band::before { background: linear-gradient(100deg, rgba(4,18,40,.62) 0%, rgba(6,24,52,.42) 55%, rgba(6,24,52,.30) 100%) !important; }
.vm-card { background: rgba(5,22,46,.88) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 24px 50px -28px rgba(0,0,0,.7); }
.pw-band { background-image: none !important; background-position: center 60% !important; }
.pw-band .sec-head h2 { color: #fff !important; }
.pw-band .sec-head .eyebrow { color: #e8c46a !important; -webkit-text-fill-color: #e8c46a !important; }

/* ================= Oct 29 (6) ================= */
/* vision & mission: ship visible between the two cards on a dark sea */
.vm-ship { background: #06142b url("/images/vm-ship.jpg") center 52% / cover no-repeat !important; }
.vm-ship::before { background: linear-gradient(90deg, rgba(3,12,28,.78) 0%, rgba(3,12,28,.35) 38%, rgba(3,12,28,.10) 50%, rgba(3,12,28,.35) 62%, rgba(3,12,28,.78) 100%) !important; }
.vm-ship.sec { padding-top: 90px !important; padding-bottom: 90px !important; }
.vm-gap { grid-template-columns: 1fr minmax(160px, 20%) 1fr !important; }
.vm-gap > .vm-card:nth-child(2) { grid-column: 3; }
/* gold, shiny headings on the dark cards */
.vm-card h3 { background-image: var(--metal-dark); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; display: inline-block; font-size: 22px !important; }
.vm-card h3::before { display: none; }
.vm-card h3 + p { margin-top: 2px; }
.vm-card { border-top: 2px solid #d9a634 !important; }
@media (max-width: 860px) {
  .vm-gap { grid-template-columns: 1fr !important; }
  .vm-gap > .vm-card:nth-child(2) { grid-column: auto; margin-top: 150px; }
  .vm-ship { background-position: center 50% !important; }
  .vm-ship::before { background: rgba(3,12,28,.35) !important; }
}
/* partner-with band: plain dark navy, no photo */
.pw-band { background: radial-gradient(ellipse 70% 120% at 85% 20%, rgba(217,166,52,.16), transparent 60%), linear-gradient(120deg, #061a3a 0%, #0b2f5e 100%) !important; }
.pw-band::before { display: none !important; }
/* partners page: logo panel beside the intro */
.plogos { --c: 26px; background: var(--surface); padding: 30px 30px 32px; }
.plogos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.pl { --c: 12px; background: #fff; padding: 16px 14px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 108px; }
.pl img { max-width: 82%; max-height: 52px; object-fit: contain; }
.pl span { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #8a6d2f; text-transform: uppercase; text-align: center; }
.pl-more { background: var(--ink); color: #fff; }
.pl-more b { font-size: 34px; line-height: 1; background-image: var(--metal-dark); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pl-more span { color: rgba(255,255,255,.85); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; line-height: 1.4; }

/* ================= Oct 29 (7): stock photos ================= */
.pw-band { background: #061a3a none 50% 88% / cover no-repeat !important; }
.pw-band::before { display: block !important; background: linear-gradient(100deg, rgba(4,16,36,.92) 0%, rgba(6,24,52,.80) 42%, rgba(6,24,52,.38) 75%, rgba(6,24,52,.30) 100%) !important; }
@media (max-width: 860px) { .pw-band { background-position: 78% 50% !important; } }

/* ================= Oct 29 (8) ================= */
/* vision & mission: light sea with a container ship on the right, cards on the left */
.vm-ship { background: #5f8796 url("/images/vm-ship.jpg") 13% 80% / 125% auto no-repeat !important; }
@media (min-width: 1700px) { .vm-ship { background-size: 115% auto !important; background-position: 30% 75% !important; } }
.vm-ship::before { background: linear-gradient(90deg, rgba(4,18,40,.45) 0%, rgba(4,18,40,.22) 45%, rgba(4,18,40,0) 65%) !important; }
.vm-gap { grid-template-columns: 1fr 1fr minmax(260px, 34%) !important; }
.vm-gap > .vm-card:nth-child(2) { grid-column: 2 !important; }
.vm-ship.sec { padding-top: 80px !important; padding-bottom: 80px !important; }
/* white headings on the dark cards (vision, mission, partner cards) */
.vm-card h3 { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; }
@media (max-width: 1000px) {
  .vm-gap { grid-template-columns: 1fr 1fr !important; }
  .vm-ship.sec { padding-top: 380px !important; }
  .vm-ship { background-size: 170% auto !important; background-position: 90% 0 !important; }
}
@media (max-width: 860px) {
  .vm-gap { grid-template-columns: 1fr !important; }
  .vm-gap > .vm-card:nth-child(2) { grid-column: auto !important; margin-top: 0 !important; }
}
/* partner-with band: plain navy again (photo moved to the intro) */
.pw-band { background: radial-gradient(ellipse 70% 120% at 85% 20%, rgba(217,166,52,.16), transparent 60%), linear-gradient(120deg, #061a3a 0%, #0b2f5e 100%) !important; }
.pw-band::before { display: none !important; }
/* space before "Interested in partnering with Navis?" */
.pw-band + .sec { padding-top: 90px !important; }

/* ================= Oct 29 (9) ================= */
/* vision left, mission right, filling the width; photo softened behind */
.vm-ship { background: #0b2f5e url("/images/vm-ship.jpg") 60% 62% / cover no-repeat !important; }
.vm-ship::before { background: rgba(11,47,94,.55) !important; }
.vm-gap { grid-template-columns: 1fr 1fr !important; gap: 22px !important; }
.vm-gap > .vm-card:nth-child(2) { grid-column: 2 !important; }
.vm-ship.sec { padding-top: 80px !important; padding-bottom: 80px !important; }
.vm-card { background: rgba(5,22,46,.82) !important; }
@media (max-width: 1000px) { .vm-ship { background-size: cover !important; background-position: 62% 40% !important; } .vm-ship.sec { padding-top: 56px !important; padding-bottom: 56px !important; } }
@media (max-width: 860px) { .vm-gap { grid-template-columns: 1fr !important; } .vm-gap > .vm-card:nth-child(2) { grid-column: auto !important; } }

/* home services slideshow: shorter, cleaner */
.sh-media { min-height: 400px !important; }
.sh-list { gap: 4px; }
.sh-item { padding: 7px 16px !important; font-size: 14px !important; min-height: 0; }
.sh-item .n { font-size: 12px; }
.sh-cap { padding: 0 150px 28px 32px !important; }
.sh-cap h3 { font-size: 23px !important; margin: 6px 0 6px !important; }
.sh-cap p { font-size: 14.5px !important; line-height: 1.55 !important; }
.sh-cap .btn { margin-top: 14px !important; }
.sh-ctrl { bottom: 28px !important; right: 24px !important; }
.sh-b { width: 40px; height: 40px; }
@media (max-width: 1000px) { .sh-media { min-height: 380px !important; } }
@media (max-width: 640px) { .sh-media { min-height: 420px !important; } .sh-cap { padding: 0 20px 80px !important; } .sh-ctrl { bottom: 22px !important; left: 20px !important; } }

/* About & Partners intro photos: shorter, to match the services slideshow */
.intro-split .ph { aspect-ratio: 16 / 10 !important; }
@media (max-width: 1000px) { .intro-split .ph { aspect-ratio: 16 / 10 !important; } }
.intro-split img[src] { }
[data-page="about"] .intro-split .ph img { object-position: 50% 40% !important; }
[data-page="partners"] .intro-split .ph img { object-position: 50% 50% !important; }

/* About & Partners intro photos: smaller */
.intro-split { grid-template-columns: 1.25fr 1fr !important; }
.intro-split .ph-wrap { max-width: 470px; width: 100%; justify-self: end; }
.intro-split .ph { --c: 34px; }
@media (max-width: 1000px) { .intro-split { grid-template-columns: 1fr !important; } .intro-split .ph-wrap { max-width: 100%; justify-self: stretch; } }

/* home "who we are" photo: smaller, like About and Partners */
[data-page="home"] .split:not(.intro-split) { grid-template-columns: 1.25fr 1fr !important; }
[data-page="home"] .split:not(.intro-split) .ph-wrap { max-width: 470px; width: 100%; justify-self: end; }
[data-page="home"] .split:not(.intro-split) .ph { aspect-ratio: 16 / 10 !important; --c: 34px; }
@media (max-width: 1000px) { [data-page="home"] .split:not(.intro-split) { grid-template-columns: 1fr !important; } [data-page="home"] .split:not(.intro-split) .ph-wrap { max-width: 100%; justify-self: stretch; } }

/* ================= Oct 30: final changes ================= */
/* gold section labels: same size as the "Our vision" / "Our mission" headings */
.eyebrow, .hero.page .tag { font-size: 22px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 600 !important; line-height: 1.25 !important; }
.eyebrow::before { width: 28px !important; }
.hero.page .tag { display: inline-block; margin-bottom: 2px; }
@media (max-width: 1000px) { .eyebrow, .hero.page .tag { font-size: 19px !important; } }

/* logo on dark backgrounds: the logo itself, no white circle */
footer .brand .mark { background: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; }
.hero.page::after { background: url("/images/logo-mark-dark.png") center / contain no-repeat !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; }

/* contact details */
footer a[href^="mailto"], footer a[href^="tel"], .ccard .v a { color: inherit; }

/* brochure: a 3D brochure instead of the flat card */
.br-grid { grid-template-columns: 200px 1fr !important; gap: 56px !important; }
.book { perspective: 900px; display: flex; justify-content: center; padding: 6px 0 14px; }
.book-3d { position: relative; width: 168px; aspect-ratio: 3 / 4.1; transform: rotateY(-24deg) rotateX(4deg); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.brochure:hover .book-3d { transform: rotateY(-10deg) rotateX(2deg); }
.book-pages { position: absolute; top: 3px; bottom: 3px; right: -12px; width: 14px; transform: rotateY(90deg) translateZ(-7px); transform-origin: left center;
  background: repeating-linear-gradient(90deg, #f4efe4 0 1px, #ddd5c4 1px 2px); }
.book-3d::after { content: ''; position: absolute; left: 6%; right: -6%; bottom: -16px; height: 18px; background: radial-gradient(ellipse at center, rgba(5,22,46,.35), transparent 70%); transform: translateZ(-30px); filter: blur(4px); }
.book-cover { position: absolute; inset: 0; overflow: hidden; border-radius: 2px 6px 6px 2px; background: #0b2f5e; box-shadow: 14px 18px 34px -14px rgba(5,22,46,.55), inset 0 0 0 1px rgba(255,255,255,.06); display: flex; flex-direction: column; }
.bk-photo { height: 50%; background: url("/images/vm-ship.jpg") 62% 55% / cover no-repeat; position: relative; }
.bk-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11,47,94,0) 40%, #0b2f5e 100%); }
.bk-body { flex: 1; padding: 0 16px 16px 20px; display: flex; flex-direction: column; color: #fff; position: relative; margin-top: -22px; }
.bk-body img { width: 34px; height: auto; margin-bottom: 10px; }
.bk-y { font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #e8c46a; }
.bk-n { font-size: 15px; font-weight: 700; line-height: 1.15; margin: 4px 0 auto; }
.bk-t { font-size: 7.5px; letter-spacing: .04em; color: rgba(255,255,255,.75); border-top: 1px solid rgba(232,196,106,.6); padding-top: 6px; }
.bk-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.12) 55%, rgba(0,0,0,.15)); }
.bk-gloss { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 35%); pointer-events: none; }
@media (max-width: 860px) { .br-grid { grid-template-columns: 1fr !important; gap: 30px !important; } .book { justify-content: flex-start; padding-left: 10px; } .book-3d { width: 140px; } }

.ccard .k { font-size: 18px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 600 !important; }
.ib-list { list-style: none; margin: auto 0 0; padding: 26px 0 0; display: flex; flex-direction: column; gap: 14px; border-top: 1px solid rgba(255,255,255,.15); }
.ib-list li { display: flex; flex-direction: column; gap: 3px; color: #fff; font-size: 15px; }
.ib-list span { font-size: 13px; font-weight: 600; color: #e8c46a; }
.ib-list a { color: #fff; }
.infobox .ar { margin-bottom: 28px; }

/* ================= Oct 30 (2) ================= */
/* page-banner logo: the real logo colours, no circle */
.hero.page::after { background-image: url("/images/logo-mark-dark.png") !important; }
footer .brand .mark, .hero.page::after { filter: drop-shadow(0 0 1px rgba(255,255,255,.55)); }
/* contact icons */
.ic { flex: none; }
footer li.ci { display: flex; gap: 10px; align-items: flex-start; }
footer li.ci .ic { color: #e8c46a; margin-top: 2px; }
.cico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #0b2f5e; color: #e8c46a; margin-bottom: 14px; }
.cico .ic { width: 19px; height: 19px; }
/* navy box beside the form: only as tall as its text */
.contact { align-items: start !important; }
.infobox { padding: 40px 36px !important; }
.infobox .ar { margin-bottom: 0 !important; }

/* Services page: the "Not sure where to start?" box spans the full row */
[data-page="services"] .svc-grid > .svc-cta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding: 38px 40px; }
[data-page="services"] .svc-grid > .svc-cta h3 { margin: 10px 0 0 !important; max-width: 640px; }
[data-page="services"] .svc-grid > .svc-cta > div { flex: 1; min-width: 260px; }

/* contact form extras */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.form-note.err { color: #b42318 !important; }