/* =================================================================
   Sallaum Lines — page-specific styles
   (Consolidated from the per-page <style> blocks of the static site.)
   ================================================================= */

/* ---- Dark header on inner (light-hero) pages -------------------- */
body.page-about .site-header,
body.page-services .site-header,
body.page-fleet .site-header,
body.page-routes .site-header,
body.page-esg .site-header,
body.page-news .site-header,
body.page-contact .site-header,
body.page-quote .site-header {
	background: var(--sl-ink);
	border-bottom: 1px solid rgba(255,255,255,.10);
}

/* ---- Shared simple page hero ------------------------------------ */
.page-hero-simple { background: var(--sl-canvas-soft); padding: 220px 0 110px; }
.page-hero-simple__label { display: flex; align-items: center; gap: 22px; color: var(--sl-fg-muted);
	font-weight: 700; font-size: 26px; letter-spacing: -.2px; }
.page-hero-simple__line { display: block; width: 64px; height: 1.5px; background: var(--sl-ink);
	margin-left: calc(-64px - 22px); flex: none; }
.page-hero-simple__title { color: var(--sl-red); font-weight: 800; font-size: 110px; line-height: 1;
	letter-spacing: -3px; margin: 26px 0 0; }
@media (max-width: 760px) {
	.page-hero-simple { padding: 150px 0 70px; }
	.page-hero-simple__title { font-size: 64px; letter-spacing: -2px; }
	.page-hero-simple__label { font-size: 20px; }
	.page-hero-simple__line { width: 32px; margin-left: 0; }
}
/* Article / generic page hero: smaller title so long headlines read well. */
.page-hero-simple--article .page-hero-simple__title,
.page-hero-simple--page .page-hero-simple__title {
	color: var(--sl-ink); font-size: clamp(34px, 5vw, 60px); letter-spacing: -1.5px; max-width: 20ch;
}
.page-hero-simple--article .page-hero-simple__title { color: var(--sl-ink); }
@media (max-width: 760px) {
	.page-hero-simple--article .page-hero-simple__title,
	.page-hero-simple--page .page-hero-simple__title { font-size: 34px; }
}

/* ================================================================ *
 * ABOUT
 * ================================================================ */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.value-box { background: var(--sl-red); border-radius: var(--sl-r-md); padding: 44px 40px 48px;
	display: flex; flex-direction: column; transition: transform .22s ease, background .18s ease; }
.value-box:hover { transform: translateY(-5px); background: var(--sl-red-deep); }
.value-box__mark { width: 56px; height: 56px; object-fit: contain; margin-bottom: 34px; }
.value-box__title { color: #fff; font-weight: 800; font-size: 30px; line-height: 1.06;
	letter-spacing: -.5px; margin: 0 0 22px; }
.value-box__text { color: rgba(255,255,255,.92); font-size: var(--sl-body-md-size);
	line-height: var(--sl-body-md-lh); margin: 0; }
@media (max-width: 960px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .values-grid { grid-template-columns: 1fr; } }

.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 56px;
	border-top: 1px solid var(--sl-canvas-line); }
.mv-col { padding: 52px 56px 52px 0; }
.mv-col + .mv-col { padding-left: 56px; border-left: 1px solid var(--sl-canvas-line); }
.mv-col__title { color: var(--sl-ink); font-weight: 800; font-size: 38px; line-height: 1.05;
	letter-spacing: -1px; margin: 18px 0 22px; }
.mv-col__text { color: var(--sl-fg-muted); font-size: var(--sl-body-lg-size);
	line-height: var(--sl-body-lg-lh); margin: 0; }
@media (max-width: 760px) {
	.mv-grid { grid-template-columns: 1fr; }
	.mv-col { padding: 44px 0; }
	.mv-col + .mv-col { padding-left: 0; border-left: none; border-top: 1px solid var(--sl-canvas-line); }
}

/* ================================================================ *
 * SERVICES
 * ================================================================ */
.svc { display: grid; grid-template-columns: 1fr 1.08fr; gap: 64px; align-items: center; }
.svc--flip .svc__media { order: 2; }
.svc__media { position: relative; height: 440px; border-radius: var(--sl-r-sm); overflow: hidden; }
.svc__media .photo { position: absolute; inset: 0; border-radius: 0; }
.svc__index { position: absolute; left: 26px; top: 22px; z-index: 3; font-size: 15px; font-weight: 800;
	letter-spacing: 2px; color: #fff; }
.svc__badge { position: absolute; right: 24px; bottom: 24px; z-index: 3; width: 64px; height: 64px; border-radius: 50%;
	background: var(--sl-red); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.svc__badge i { width: 28px; height: 28px; stroke-width: 1.75; }
.svc__eyebrow { margin-bottom: 16px; }
.svc__title { color: var(--sl-ink); margin: 0; }
.svc__text { color: var(--sl-fg-muted); font-size: var(--sl-body-lg-size); line-height: 1.62; margin: 20px 0 0; max-width: 48ch; }
.svc__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.svc-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--sl-ink);
	border: 1.5px solid var(--sl-canvas-line); border-radius: var(--sl-r-pill); padding: 9px 16px; line-height: 1;
	background: #fff; transition: border-color .16s ease, transform .16s ease; }
.svc-chip i { width: 14px; height: 14px; color: var(--sl-red); }
.svc-chip:hover { border-color: var(--sl-red); transform: translateY(-2px); }
@media (max-width: 860px) {
	.svc { grid-template-columns: 1fr; gap: 32px; }
	.svc--flip .svc__media { order: 0; }
	.svc__media { height: 320px; }
}

/* ================================================================ *
 * ROUTES — European expansion band
 * ================================================================ */
.eu { position: relative; background: var(--sl-red); color: #fff; padding: 116px 0 124px; overflow: hidden; }
.eu__mark { position: absolute; right: -120px; top: 50%; transform: translateY(-50%); width: 620px; height: 620px;
	background: url("../assets/sallaum-mark-white.png") center / contain no-repeat; opacity: .05; pointer-events: none; }
.eu__grain { position: absolute; inset: 0; opacity: .5; pointer-events: none;
	background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px); background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(120% 90% at 30% 40%, #000 30%, transparent 78%);
	        mask-image: radial-gradient(120% 90% at 30% 40%, #000 30%, transparent 78%); }
.eu__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.04fr 1fr; gap: 76px; align-items: center; }
.eu-map { position: relative; aspect-ratio: 1.18 / 1; }
.eu-map__dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.eu-map__dots circle { fill: rgba(255,255,255,.34); opacity: 0; transform-box: fill-box; transform-origin: center;
	transform: scale(.2); transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.4,.5,1); }
.eu.is-in .eu-map__dots circle { opacity: 1; transform: scale(1); }
.eu-map__arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eu-map__arcs path { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2; stroke-linecap: round;
	stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.eu.is-in .eu-map__arcs path { animation: euDraw 1.5s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes euDraw { to { stroke-dashoffset: 0; } }
.eu-node { position: absolute; transform: translate(-50%, -50%); z-index: 3; }
.eu-node__dot { width: 13px; height: 13px; border-radius: 50%; background: #fff; position: relative;
	box-shadow: 0 0 0 4px rgba(255,255,255,.22), 0 4px 14px rgba(0,0,0,.25); }
.eu-node__dot::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.6);
	animation: euPulse 2.6s ease-out infinite; }
@keyframes euPulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }
.eu-node__label { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); white-space: nowrap;
	font-size: 12.5px; font-weight: 700; letter-spacing: .2px; color: #fff;
	background: rgba(28,34,38,.32); padding: 4px 11px; border-radius: var(--sl-r-pill); backdrop-filter: blur(2px); }
.eu-node.is-left .eu-node__label { left: auto; right: 20px; }
.eu-node, .eu-node__label { opacity: 0; }
.eu.is-in .eu-node { animation: euFade .6s ease forwards; }
.eu.is-in .eu-node__label { animation: euFade .6s ease .15s forwards; }
@keyframes euFade { to { opacity: 1; } }
.eu__eyebrow { display: inline-flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 800;
	letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.eu__eyebrow::before { content: ""; width: 26px; height: 2px; background: #fff; }
.eu__eyebrow .new { background: #fff; color: var(--sl-red); font-size: 11px; padding: 2px 9px; border-radius: var(--sl-r-pill);
	letter-spacing: 1px; }
.eu__title { color: #fff; font-size: clamp(34px, 3.4vw, 50px); font-weight: 300; line-height: 1.1; letter-spacing: -1px;
	margin: 22px 0 0; max-width: 15ch; }
.eu__title b { font-weight: 800; }
.eu__lead { color: rgba(255,255,255,.92); font-size: 17px; line-height: 1.62; margin: 26px 0 0; max-width: 46ch; }
.eu__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; }
.eu-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fff;
	border: 1.5px solid rgba(255,255,255,.5); border-radius: var(--sl-r-pill); padding: 9px 17px; line-height: 1;
	transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; cursor: default; }
.eu-chip i { width: 14px; height: 14px; opacity: .85; }
.eu-chip:hover { background: #fff; color: var(--sl-red); border-color: #fff; transform: translateY(-2px); }
.eu-chip:hover i { opacity: 1; }
.eu-chip.is-more { background: rgba(28,34,38,.28); border-color: transparent; }
.eu-chip.is-more:hover { background: var(--sl-ink); color: #fff; }
.eu-journey { position: relative; z-index: 2; margin-top: 84px; padding-top: 52px; border-top: 1px solid rgba(255,255,255,.22); }
.eu-journey__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 44px; }
.eu-journey__title { color: #fff; font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.6px; margin: 0; max-width: 18ch; }
.eu-journey__sub { color: rgba(255,255,255,.86); font-size: 16px; line-height: 1.6; margin: 0; max-width: 42ch; }
.eu-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.eu-flow__line { position: absolute; left: 9%; right: 9%; top: 34px; height: 2px; z-index: 0;
	background-image: linear-gradient(90deg, rgba(255,255,255,.55) 0 8px, transparent 8px 18px); background-size: 18px 2px; }
.eu-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 10px; }
.eu-step__ic { width: 68px; height: 68px; border-radius: 50%; background: var(--sl-red); border: 2px solid rgba(255,255,255,.85);
	display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 18px;
	transition: background .2s ease, transform .2s ease; }
.eu-step__ic i { width: 28px; height: 28px; stroke-width: 1.75; }
.eu-step:hover .eu-step__ic { background: #fff; color: var(--sl-red); transform: translateY(-4px); }
.eu-step__n { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: rgba(255,255,255,.7); margin-bottom: 5px; }
.eu-step__t { font-size: 16px; font-weight: 700; color: #fff; }
.eu-step__d { font-size: 13px; color: rgba(255,255,255,.78); margin-top: 5px; line-height: 1.45; }
@media (max-width: 980px) {
	.eu__grid { grid-template-columns: 1fr; gap: 48px; }
	.eu-map { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 760px) {
	.eu { padding: 84px 0 92px; }
	.eu-flow { grid-template-columns: 1fr 1fr; gap: 36px 0; }
	.eu-flow__line { display: none; }
	.eu-journey__head { margin-bottom: 36px; }
}
@media (max-width: 440px) { .eu-flow { grid-template-columns: 1fr; } }

/* ================================================================ *
 * ESG
 * ================================================================ */
.esg-fullshot { width: 100vw; margin-left: calc(50% - 50vw); height: 100vh; background: var(--sl-ink); }
.esg-fullshot__slot { display: block; width: 100%; height: 100%; }
.esg-intro__head { color: var(--sl-red); font-weight: 800; font-size: 30px; line-height: 1.1;
	letter-spacing: -.5px; margin: 0 0 18px; }
.esg-intro__text { color: var(--sl-fg-muted); font-size: var(--sl-body-lg-size);
	line-height: var(--sl-body-lg-lh); max-width: 1180px; margin: 0; }
.esg-intro__media { margin-top: 64px; margin-left: auto; width: 74%; }
.esg-intro__slot { display: block; width: 100%; aspect-ratio: 16 / 9; }
.esg-vision__head { color: var(--sl-ink); font-weight: 800; font-size: 44px; line-height: 1.05;
	letter-spacing: -1px; margin: 0 0 40px; }
.esg-vision__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; }
.esg-vision__cols p { color: var(--sl-fg-muted); font-size: var(--sl-body-lg-size);
	line-height: var(--sl-body-lg-lh); margin: 0; }
@media (max-width: 760px) {
	.esg-vision__head { font-size: 32px; }
	.esg-vision__cols { grid-template-columns: 1fr; row-gap: 18px; }
}
.esg-kn__head { color: var(--sl-red); font-weight: 800; font-size: 30px; line-height: 1.1;
	letter-spacing: -.5px; margin: 0 0 36px; }
.esg-kn__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.esg-kn__card { border-radius: var(--sl-r-sm); padding: 34px 32px 30px; display: flex;
	flex-direction: column; min-height: 280px; }
.esg-kn__card--red { background: var(--sl-red); }
.esg-kn__card--white { background: #fff; }
.esg-kn__card--gray { background: #9b9fa3; }
.esg-kn__mark { width: 50px; height: 50px; object-fit: contain; margin-bottom: auto; }
.esg-kn__num { font-weight: 800; font-size: 60px; line-height: 1; letter-spacing: -2px; margin: 34px 0 16px; }
.esg-kn__cap { font-size: var(--sl-body-md-size); line-height: 1.35; font-weight: 500; margin: 0; }
.esg-kn__card--red .esg-kn__num, .esg-kn__card--red .esg-kn__cap { color: #fff; }
.esg-kn__card--white .esg-kn__num, .esg-kn__card--white .esg-kn__cap { color: var(--sl-red); }
.esg-kn__card--gray .esg-kn__num { color: #fff; }
.esg-kn__card--gray .esg-kn__cap { color: var(--sl-ink); }
@media (max-width: 960px) { .esg-kn__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .esg-kn__grid { grid-template-columns: 1fr; } }
.esg-gov__head { color: var(--sl-ink); font-weight: 800; font-size: 44px; line-height: 1.05;
	letter-spacing: -1px; margin: 0 0 36px; }
.esg-gov__body { max-width: 1180px; }
.esg-gov__body p { color: var(--sl-fg-muted); font-size: var(--sl-body-lg-size);
	line-height: var(--sl-body-lg-lh); margin: 0 0 22px; }
.esg-gov__body ul { margin: 0 0 22px; padding-left: 22px; }
.esg-gov__body li { color: var(--sl-fg-muted); font-size: var(--sl-body-lg-size);
	line-height: var(--sl-body-lg-lh); margin-bottom: 8px; }
.esg-gov__body a { color: var(--sl-fg-muted); text-decoration: underline; text-underline-offset: 3px; }
.esg-gov__body a:hover { color: var(--sl-red); }
@media (max-width: 760px) {
	.esg-gov__head { font-size: 32px; }
	.esg-intro__head { font-size: 24px; }
	.esg-intro__media { width: 100%; margin-top: 40px; }
}

/* ================================================================ *
 * NEWS empty state
 * ================================================================ */
.news-empty { text-align: center; padding: 64px 24px 72px; border: 1.5px solid var(--sl-canvas-line); border-radius: var(--sl-r-md); background: var(--sl-canvas-soft); }
.news-empty__icon { width: 72px; height: 72px; margin: 0 auto 28px; border-radius: var(--sl-r-full); display: flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid var(--sl-canvas-line); }
.news-empty__icon i { width: 30px; height: 30px; color: var(--sl-fg-muted); }

/* ================================================================ *
 * CONTACT / QUOTE split layouts
 * ================================================================ */
.contact2, .quote2 { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 100vh; }
.contact2__left, .quote2__left { position: relative; background: #ececeb; padding: 152px 9% 96px 11%; overflow: hidden; }
.contact2__left::after, .quote2__left::after { content: ""; position: absolute; left: 38%; bottom: -8%; width: 30%; height: 78%; background: #e3e3e1; transform: skewX(-22deg); pointer-events: none; }
.contact2__left > *, .quote2__left > * { position: relative; z-index: 1; }
.c2-brand, .q2-brand { display: flex; align-items: center; gap: 20px; color: #44494d; font-weight: 700; }
.c2-brand { font-size: 26px; letter-spacing: -.4px; }
.q2-brand { font-size: 17px; letter-spacing: .4px; }
.c2-brand::before, .q2-brand::before { content: ""; width: 56px; height: 1px; background: #44494d; margin-left: calc(-11% - 56px); flex-shrink: 0; }
.c2-title, .q2-title { color: var(--sl-red); font-family: var(--sl-font); font-weight: 800; font-size: clamp(56px, 6.8vw, 104px); line-height: 1; letter-spacing: -2px; }
.c2-title { margin: 30px 0 64px; }
.q2-title { margin: 30px 0 48px; }
.c2-details { display: grid; grid-template-columns: 165px 1fr; column-gap: 24px; row-gap: 20px; align-items: baseline; max-width: 640px; }
.c2-details dt { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: #6b7074; font-weight: 400; }
.c2-details dd { margin: 0; font-size: 21px; line-height: 1.35; color: #3a3f43; font-weight: 400; }
.c2-details dd a { color: #3a3f43; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.c2-details dd a:hover { color: var(--sl-red); }
.c2-offices { display: inline-flex; align-items: center; justify-content: center; margin-top: 56px; background: var(--sl-red); color: #fff; font-family: var(--sl-font); font-size: 20px; font-weight: 700; border: none; border-radius: var(--sl-r-pill); padding: 20px 46px; cursor: pointer; transition: background .18s ease, transform .06s ease; text-decoration: none; }
.c2-offices:hover { background: var(--sl-red-deep); }
.c2-offices:active { transform: translateY(1px); }
.contact2__right { background: #fff; padding: 56px 11% 88px 9%; }
.quote2__right { background: #fff; padding: 152px 11% 88px 9%; }
.c2-required, .q2-required { font-size: 15px; color: #44494d; }
.c2-required { margin: 0 0 64px; }
.q2-required { margin: 0 0 56px; }
.c2-required .req, .q2-required .req { color: var(--sl-red); }
.c2-inquiry { color: var(--sl-red); font-family: var(--sl-font); font-weight: 800; font-size: clamp(32px, 3vw, 44px); letter-spacing: -.5px; line-height: 1.05; margin: 0 0 36px; }
.c2-intro { font-size: 20px; line-height: 1.55; color: #3a3f43; font-weight: 400; max-width: 640px; margin: 0 0 72px; }
.c2-intro a { color: #3a3f43; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.c2-intro a:hover { color: var(--sl-red); }
.c2-field, .q2-field { margin-bottom: 44px; }
.q2-field { margin-bottom: 40px; }
.c2-field label, .q2-field label { display: block; font-size: 21px; color: #3a3f43; margin-bottom: 12px; }
.c2-field label .req, .q2-field label .req { color: var(--sl-red); }
.c2-control, .q2-control { width: 100%; border: none; border-bottom: 1px solid #c4c6c7; background: transparent; font-family: var(--sl-font); font-size: 18px; color: var(--sl-ink); padding: 8px 2px; outline: none; transition: border-color .15s ease; }
.c2-control:focus, .q2-control:focus { border-bottom-color: var(--sl-ink); }
select.q2-control { cursor: pointer; }
textarea.c2-control, textarea.q2-control { min-height: 120px; resize: vertical; line-height: 1.5; }
textarea.q2-control { min-height: 96px; }
.q2-lead { font-size: 21px; line-height: 1.5; color: #3a3f43; font-weight: 400; max-width: 460px; margin: 0 0 56px; }
.q2-points { display: grid; gap: 22px; max-width: 440px; }
.q2-point { display: flex; align-items: flex-start; gap: 16px; }
.q2-point i { color: var(--sl-red); flex-shrink: 0; margin-top: 2px; }
.q2-point span { font-size: 18px; line-height: 1.45; color: #3a3f43; }
.q2-radio-label { font-size: 17px; color: #6b7074; margin-bottom: 14px; display: block; }
.q2-radios { display: flex; gap: 40px; }
.q2-radio { display: flex; align-items: center; gap: 10px; font-size: 18px; color: #3a3f43; cursor: pointer; }
.q2-radio input { width: 18px; height: 18px; accent-color: var(--sl-red); cursor: pointer; }
.c2-submit, .q2-submit { display: flex; justify-content: flex-end; }
.q2-submit { margin-top: 8px; }
.c2-send, .q2-send { background: var(--sl-red); color: #fff; font-family: var(--sl-font); font-size: 20px; font-weight: 700; border: none; border-radius: var(--sl-r-pill); padding: 20px 50px; cursor: pointer; transition: background .18s ease, transform .06s ease; }
.c2-send:hover, .q2-send:hover { background: var(--sl-red-deep); }
.c2-send:active, .q2-send:active { transform: translateY(1px); }
.c2-done, .q2-done { display: none; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--sl-success); font-weight: 600; justify-content: flex-end; }
.q2-row { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
@media (max-width: 1024px) {
	.contact2, .quote2 { grid-template-columns: 1fr; }
	.contact2__left, .quote2__left { padding: 132px 8% 72px 8%; }
	.c2-brand::before, .q2-brand::before { margin-left: calc(-8% - 56px); }
	.contact2__right { padding: 56px 8% 80px; }
	.quote2__right { padding: 64px 8% 80px; }
	.contact2__left::after, .quote2__left::after { display: none; }
}
@media (max-width: 560px) {
	.c2-details { grid-template-columns: 1fr; row-gap: 6px; }
	.c2-details dt { margin-top: 14px; }
	.q2-row { grid-template-columns: 1fr !important; }
}