/* Inner pages: derived from the homepage's navy/red editorial system. */
.inner-page { background: #f4f6f9; }
.inner-page .preloader { z-index: 9999; }
/* Inner pages reuse the homepage's floating pill nav (partials/navbar.blade.php) as-is; only the current-page indicator below is layered on top of it. */
.hero__nav-links a.is-current { background: var(--color-bg); }

.page-hero { min-height: 460px; height: min(54vh, 540px); position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 82% 30%, #24477c 0, #0d2446 33%, #06111f 72%); }
.page-hero::after { content:''; position:absolute; inset:0; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:80px 80px; mask-image:linear-gradient(to bottom,transparent,black 30%,black); }
.page-hero__orb { position:absolute; right:-8vw; top:8%; width:min(52vw,720px); aspect-ratio:1; border:1px solid rgba(255,255,255,.22); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018); }
.page-hero__orb::after { content:''; position:absolute; inset:22%; border-radius:50%; background:var(--color-hero-accent); opacity:.92; filter:blur(1px); box-shadow:0 0 90px rgba(226,35,26,.28); }
.page-hero__inner { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-top:clamp(104px,13vh,130px); padding-bottom:clamp(72px,10vh,112px); }
.page-hero__meta { display:flex; justify-content:space-between; padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid rgba(255,255,255,.35); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.page-hero__title { max-width:1150px; margin:0; color:#fff; font-family:'Oswald','Segoe UI',sans-serif; font-size:clamp(2.2rem,4.4vw,4rem); line-height:.94; letter-spacing:-.045em; font-weight:700; }
.page-hero__title em { color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.85); font-style:normal; }
.page-hero__bottom { display:flex; align-items:flex-start; justify-content:space-between; gap:40px; margin-top:22px; }
.page-hero__bottom p { max-width:620px; margin:0; color:rgba(255,255,255,.7); font-size:clamp(1rem,1.3vw,1.22rem); }
.page-hero__eyebrow { flex:0 0 auto; color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; writing-mode:vertical-rl; }
.page-kicker { display:inline-flex; align-items:center; gap:10px; color:var(--color-hero-accent); font-size:.72rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
.page-kicker::before { content:''; width:28px; height:2px; background:currentColor; }

.service-story { padding:130px 0; background:#fff; }
.service-story__grid { display:grid; grid-template-columns:330px minmax(0,1fr); gap:clamp(60px,10vw,150px); align-items:start; }
.service-index { position:sticky; top:110px; }
.service-index nav { margin-top:28px; border-top:1px solid var(--color-line); }
.service-index nav a { display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:center; padding:13px 4px; border-bottom:1px solid var(--color-line); color:#6b7890; font-size:.82rem; transition:.25s; }
.service-index nav a span { font-size:.68rem; color:#a0a9b7; }
.service-index nav a:hover,.service-index nav a.active { color:var(--color-primary); transform:translateX(5px); }
.service-index nav a.active { font-weight:800; }
.service-index nav a.active span { color:var(--color-hero-accent); }
.service-index__all { color:var(--color-hero-accent); font-weight:800; text-transform:uppercase; font-size:.72rem; letter-spacing:.08em; }
.service-index__all span { color:var(--color-hero-accent); }
.service-copy h2,.section-heading-row h2,.about-manifesto h2,.commitments__intro h2,.service-heading h2 { margin:20px 0 38px; color:var(--color-primary-dark); font-size:clamp(2.8rem,5vw,5.6rem); line-height:.98; letter-spacing:-.055em; }
.service-copy h2 em,.section-heading-row h2 em,.about-manifesto h2 em,.commitments__intro h2 em,.service-heading h2 em { color:var(--color-hero-accent); font-style:normal; }
.service-copy p { max-width:780px; font-size:1.08rem; line-height:1.9; }
.capabilities { padding:120px 0 140px; background:#eef1f5; }
.section-heading-row { display:grid; grid-template-columns:1fr 2fr; align-items:start; margin-bottom:55px; }
.section-heading-row h2 { margin:0; }
.capabilities__grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #cbd2dc; border-left:1px solid #cbd2dc; }
.capability-card { position:relative; min-height:235px; padding:28px; border-right:1px solid #cbd2dc; border-bottom:1px solid #cbd2dc; transition:color .35s,background .35s; overflow:hidden; }
.capability-card > * { position:relative; z-index:1; }
.capability-card span { color:#8a96a8; font-size:.7rem; }
.capability-card h3 { max-width:240px; margin-top:80px; font-size:1.3rem; }
.capability-card i { position:absolute; right:25px; top:22px; font-style:normal; color:var(--color-hero-accent); }
.capability-card::after { content:''; position:absolute; inset:auto 0 0; height:0; background:var(--color-primary); transition:height .35s var(--ease); }
.capability-card:hover { color:#fff; }.capability-card:hover::after { height:100%; }.capability-card:hover span { color:rgba(255,255,255,.6); }

.about-manifesto,.commitments { padding:130px 0; background:#fff; }
.about-manifesto__grid { display:grid; grid-template-columns:1fr 2fr; gap:70px; }
.about-manifesto__number { display:flex; align-items:flex-end; gap:15px; margin-top:80px; }
.about-manifesto__number strong { color:var(--color-primary); font-size:clamp(6rem,12vw,11rem); line-height:.7; letter-spacing:-.09em; }
.about-manifesto__number span { color:#78859a; font-size:.75rem; line-height:1.4; text-transform:uppercase; }
.about-manifesto__copy p { max-width:760px; font-size:1.07rem; line-height:1.9; }
.belief-cards,.commitment-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.belief-cards article,.commitment-grid article { min-height:280px; padding:34px; color:#fff; background:var(--color-primary); border-right:1px solid rgba(255,255,255,.16); }
.belief-cards article:nth-child(2) { background:var(--color-hero-accent); }
.belief-cards span,.commitment-grid span { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.belief-cards h3,.commitment-grid h3 { margin-top:95px; font-size:1.5rem; }
.belief-cards p,.commitment-grid p { color:rgba(255,255,255,.68); }
.mission-statement { padding:120px 0; background:#fff; }
.mission-statement--alt { background:var(--color-bg); }
.mission-statement__grid { display:flex; align-items:center; gap:clamp(40px,7vw,110px); }
.mission-statement--alt .mission-statement__grid { flex-direction:row-reverse; }
.mission-statement__title { flex:0 0 auto; margin:0; color:var(--color-primary-dark); font-size:clamp(3rem,6.6vw,6.4rem); line-height:.92; letter-spacing:-.03em; text-transform:uppercase; }
.mission-statement__title em { color:var(--color-hero-accent); font-style:normal; }
.mission-statement__text { flex:1; min-width:0; margin:0; font-size:clamp(1.25rem,2.1vw,1.85rem); font-weight:800; line-height:1.4; letter-spacing:-.005em; text-transform:uppercase; }
.mission-statement__text .word-fill { color:#d7dce4; }

.commitments__intro { display:grid; grid-template-columns:1fr 1.6fr; gap:50px; }
.commitments__intro > span { grid-column:1; }.commitments__intro h2 { grid-column:1; }.commitments__intro > div { grid-column:2; grid-row:1 / span 2; padding-top:25px; }.commitments__intro p { font-size:1.05rem; line-height:1.85; }
.commitment-grid { grid-template-columns:repeat(4,1fr); margin-top:90px; }
.commitment-grid article { background:#eef1f5; color:var(--color-primary-dark); border-color:#d7dce4; }
.commitment-grid article:nth-child(even) { background:var(--color-primary); color:#fff; }.commitment-grid article:nth-child(even) p { color:rgba(255,255,255,.65); }
.commitment-grid h3 { margin-top:80px; }.commitment-grid p { color:var(--color-muted); }


.page-arrow-link { display:flex; justify-content:space-between; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.5); font-weight:800; }.inner-footer { padding-top:85px; }
.about-manifesto .page-arrow-link { max-width:420px; color:var(--color-primary-dark); border-color:var(--color-line); transition:color .25s; }
.about-manifesto .page-arrow-link:hover { color:var(--color-hero-accent); }

/* ---------- Services index: core freight mode cards ---------- */
.modes { padding:120px 0 140px; background:#fff; }
.mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--color-line); margin-top:55px; border:1px solid var(--color-line); }
.mode-card { position:relative; padding:clamp(28px,3vw,44px); background:#fff; transition:background .4s var(--ease),color .4s var(--ease); }
.mode-card__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:52px; }
.mode-card__icon { display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:#eef1f5; color:var(--color-hero-accent); transition:background .4s,color .4s; flex:0 0 auto; }
.mode-card__icon svg { width:24px; height:24px; }
.mode-card__number { color:#a0a9b7; font-size:.72rem; font-weight:800; letter-spacing:.1em; transition:color .4s; }
.mode-card h3 { margin-bottom:12px; font-size:1.4rem; }
.mode-card > p { color:var(--color-muted); font-size:.95rem; line-height:1.75; margin-bottom:20px; transition:color .4s; }
.mode-card__benefits { margin:0 0 22px; padding:0; list-style:none; }
.mode-card__benefits li { position:relative; margin-bottom:8px; padding-left:20px; color:var(--color-muted); font-size:.85rem; transition:color .4s; }
.mode-card__benefits li::before { content:''; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--color-hero-accent); }
.mode-card__best { display:block; margin-bottom:22px; color:var(--color-primary-dark); font-size:.78rem; font-weight:700; transition:color .4s; }
.mode-card__best em { color:var(--color-hero-accent); font-style:normal; }
.mode-card__link { display:inline-flex; align-items:center; gap:8px; color:var(--color-primary-dark); font-weight:800; font-size:.85rem; transition:gap .25s,color .25s; }
.mode-card__link svg { width:18px; height:18px; }
.mode-card:hover { background:var(--color-primary-dark); color:#fff; }
.mode-card:hover .mode-card__number,.mode-card:hover > p,.mode-card:hover .mode-card__benefits li,.mode-card:hover .mode-card__best { color:rgba(255,255,255,.7); }
.mode-card:hover .mode-card__icon { background:var(--color-hero-accent); color:#fff; }
.mode-card:hover .mode-card__link,.mode-card:hover .mode-card__best em { color:#fff; }
.mode-card:hover .mode-card__link { gap:12px; }

/* ---------- Services index: specialist service tiles ---------- */
.service-tile-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #cbd2dc; border-left:1px solid #cbd2dc; margin-top:55px; }
.service-tile { position:relative; display:block; min-height:225px; padding:26px; border-right:1px solid #cbd2dc; border-bottom:1px solid #cbd2dc; color:inherit; transition:color .35s,background .35s; overflow:hidden; }
.service-tile > * { position:relative; z-index:1; }
.service-tile span { color:#8a96a8; font-size:.7rem; transition:color .35s; }
.service-tile h3 { margin-top:56px; font-size:1.1rem; }
.service-tile p { margin:10px 0 0; color:var(--color-muted); font-size:.84rem; line-height:1.6; transition:color .35s; }
.service-tile i { position:absolute; right:22px; top:20px; color:var(--color-hero-accent); font-style:normal; }
.service-tile::after { content:''; position:absolute; inset:auto 0 0; height:0; background:var(--color-primary); transition:height .35s var(--ease); }
.service-tile:hover { color:#fff; }
.service-tile:hover::after { height:100%; }
.service-tile:hover span,.service-tile:hover p { color:rgba(255,255,255,.68); }

/* ---------- Services index: enquiry process ---------- */
.process-strip { padding:120px 0; background:#eef1f5; }
.process-strip__list { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0 30px; margin-top:55px; }
.process-strip__list::before { content:''; position:absolute; top:26px; left:0; right:0; height:1px; background:#cbd2dc; }
.process-step { position:relative; }
.process-step__num { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:22px; border-radius:50%; background:var(--color-primary-dark); color:#fff; font-weight:800; font-size:.9rem; }
.process-step h3 { margin-bottom:8px; font-size:1.05rem; }
.process-step p { margin:0; color:var(--color-muted); font-size:.86rem; line-height:1.65; }

/* ---------- Services index: trust strip ---------- */
.trust-strip { padding:64px 0; background:var(--color-primary-dark); color:#fff; }
.trust-strip__row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; }
.trust-strip__item { display:flex; flex-direction:column; }
.trust-strip__item strong { font-size:1.6rem; font-weight:800; font-variant-numeric:tabular-nums; }
.trust-strip__item strong span { font-size:inherit; }
.trust-strip__item span { margin-top:4px; color:rgba(255,255,255,.55); font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }

/* ---------- Photo banner (About / Services section break) ---------- */
.photo-banner { position:relative; min-height:56vh; display:flex; align-items:center; overflow:hidden; color:#fff; }
.photo-banner__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-banner__overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,17,31,.55) 0%, rgba(6,17,31,.5) 50%, rgba(6,17,31,.65) 100%); }
.photo-banner__inner { position:relative; z-index:1; padding:70px 0; }
.photo-banner .page-kicker { color:#fff; }
.photo-banner .page-kicker::before { background:var(--color-hero-accent); }
.photo-banner h2 { margin:16px 0 0; max-width:820px; font-size:clamp(2.2rem,4vw,3.6rem); line-height:1.08; letter-spacing:-.03em; }
.photo-banner h2 em { color:var(--color-hero-accent); font-style:normal; }
.photo-banner p { max-width:560px; margin:20px 0 0; color:rgba(255,255,255,.72); font-size:1.02rem; line-height:1.7; }

/* ---------- About page: why us (intro statement) ---------- */
.why-us { padding:120px 0; background:var(--color-primary-dark); color:#fff; }
.why-us__top { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:34px; margin-bottom:60px; border-bottom:1px solid rgba(255,255,255,.15); }
.why-us__badge { display:flex; align-items:baseline; gap:8px; color:rgba(255,255,255,.7); font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.why-us__badge strong { color:#fff; font-size:1.8rem; font-weight:800; letter-spacing:-.03em; }
.why-us__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,8vw,110px); }
.why-us__grid h2 { margin:0; font-size:clamp(2.2rem,4vw,3.4rem); line-height:1.08; letter-spacing:-.03em; }
.why-us__grid h2 em { color:var(--color-hero-accent); font-style:normal; }
.why-us__copy p { max-width:520px; color:rgba(255,255,255,.68); font-size:1.02rem; line-height:1.85; }
.why-us__cta { display:inline-flex; align-items:center; gap:10px; margin-top:8px; padding:1em 1.9em; background:#fff; color:var(--color-primary-dark); font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; border-radius:999px; transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.why-us__cta:hover { transform:translateY(-3px); background:var(--color-hero-accent); color:#fff; }

/* ---------- About page: main goals ---------- */
.goals { padding:130px 0; background:#fff; }
.goals__heading { max-width:640px; margin-bottom:55px; }
.goals__heading h2 { margin:20px 0 22px; color:var(--color-primary-dark); font-size:clamp(2.8rem,5vw,4.2rem); line-height:1.02; letter-spacing:-.03em; }
.goals__heading h2 em { color:var(--color-hero-accent); font-style:normal; }
.goals__intro { margin:0; font-size:1.05rem; line-height:1.85; }
.goals__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.goal-card { position:relative; padding:clamp(32px,3.5vw,44px); background:var(--color-bg); border:1px solid var(--color-line); border-radius:20px; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease); }
.goal-card::before { content:attr(data-num); position:absolute; top:-.18em; right:22px; z-index:0; font-size:6.4rem; font-weight:800; line-height:1; letter-spacing:-.04em; color:var(--color-primary-dark); opacity:.05; pointer-events:none; }
.goal-card__icon { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:52px; border-radius:50%; background:#fff; color:var(--color-hero-accent); box-shadow:var(--shadow-sm); transition:background .35s var(--ease), color .35s var(--ease); }
.goal-card__icon svg { width:24px; height:24px; }
.goal-card h3 { position:relative; z-index:1; margin:0 0 12px; font-size:1.6rem; color:var(--color-primary-dark); }
.goal-card p { position:relative; z-index:1; margin:0; color:var(--color-muted); font-size:.95rem; line-height:1.75; }
.goal-card:hover { transform:translateY(-6px); background:#fff; box-shadow:var(--shadow-md); }
.goal-card:hover .goal-card__icon { background:var(--color-hero-accent); color:#fff; }
.goal-card:nth-child(2) .goal-card__icon { color:var(--color-primary); }
.goal-card:nth-child(2):hover .goal-card__icon { background:var(--color-primary); color:#fff; }

/* ---------- About page: core strengths ---------- */
.strengths { padding:130px 0; background:#fff; }
.strengths__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,8vw,100px); align-items:start; }
.strengths__heading { position:sticky; top:110px; }
.strengths__heading h2 { margin:20px 0 22px; font-size:clamp(2.2rem,4vw,3.6rem); line-height:1.05; letter-spacing:-.03em; color:var(--color-primary-dark); }
.strengths__heading h2 em { color:var(--color-hero-accent); font-style:normal; }
.strengths__heading p { max-width:400px; font-size:1rem; line-height:1.8; color:var(--color-muted); }

.strengths__list { display:flex; flex-direction:column; gap:20px; }
.strength-card {
  position:relative;
  padding:clamp(28px,3vw,40px);
  background:#fff;
  border:1px solid var(--color-line);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.strength-card__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.strength-card__icon {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--color-bg); color:var(--color-hero-accent);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.strength-card__icon svg { width:22px; height:22px; }
.strength-card__num { font-size:.78rem; font-weight:800; letter-spacing:.1em; color:#a0a9b7; }
.strength-card h3 { margin:0 0 10px; font-size:1.3rem; color:var(--color-primary-dark); }
.strength-card p { margin:0 0 28px; max-width:400px; font-size:.96rem; line-height:1.7; color:var(--color-muted); }
.strength-card__arrow {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; min-width:44px; min-height:44px;
  border-radius:50%; border:1px solid var(--color-line); color:var(--color-primary-dark);
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.strength-card__arrow svg { width:18px; height:18px; transition:transform .3s var(--ease); }

.strength-card:hover,
.strength-card:focus-within { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.strength-card:hover .strength-card__arrow,
.strength-card:focus-within .strength-card__arrow { background:var(--color-primary-dark); border-color:var(--color-primary-dark); color:#fff; }
.strength-card:hover .strength-card__arrow svg,
.strength-card:focus-within .strength-card__arrow svg { transform:translate(3px,-3px); }
.strength-card__arrow:focus-visible { outline:2px solid var(--color-hero-accent); outline-offset:3px; }

.strength-card.is-active { border-color:var(--color-primary); background:#eef1f8; }
.strength-card.is-active .strength-card__icon { background:var(--color-primary); color:#fff; }

@media (prefers-reduced-motion: reduce) {
  .strength-card, .strength-card__arrow, .strength-card__arrow svg { transition:none; }
}

@media (max-width: 980px) {
  .service-story__grid,.about-manifesto__grid { grid-template-columns:1fr; }.service-index { position:static; }.service-index nav { display:grid; grid-template-columns:1fr 1fr; }.capabilities__grid,.belief-cards { grid-template-columns:1fr 1fr; }.commitment-grid { grid-template-columns:1fr 1fr; }.section-heading-row { grid-template-columns:1fr; gap:25px; }
  .mode-grid { grid-template-columns:1fr; }.service-tile-grid { grid-template-columns:1fr 1fr; }.process-strip__list { grid-template-columns:1fr 1fr; gap:35px 30px; }.process-strip__list::before { display:none; }
  .why-us__grid,.strengths__grid { grid-template-columns:1fr; }.strengths__heading { position:static; top:auto; }.goals__grid { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .page-hero { min-height:650px;height:88vh; }.page-hero__title { font-size:clamp(3.3rem,17vw,5.5rem); }.page-hero__bottom { align-items:flex-start; }.page-hero__eyebrow { display:none; }.page-hero__meta { font-size:.61rem; }.service-story,.about-manifesto,.commitments,.capabilities,.modes,.process-strip,.why-us,.goals,.strengths,.mission-statement { padding:85px 0; }.service-story__grid { gap:60px; }.service-index nav { grid-template-columns:1fr; }.service-copy h2,.section-heading-row h2,.about-manifesto h2,.commitments__intro h2 { font-size:2.8rem; }.capabilities__grid,.belief-cards,.commitment-grid { grid-template-columns:1fr; }.mission-statement__grid,.mission-statement--alt .mission-statement__grid { flex-direction:column; align-items:flex-start; gap:24px; }.commitments__intro { display:block; }.commitments__intro > div { padding-top:20px; }
  .service-tile-grid { grid-template-columns:1fr; }.process-strip__list { grid-template-columns:1fr; gap:35px; }.trust-strip__row { justify-content:flex-start; gap:32px 48px; }.photo-banner { min-height:48vh; }.why-us__top { flex-direction:column; align-items:flex-start; gap:12px; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Services page: full-screen cinematic hero ---------- */
.services-hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  background: var(--color-navy-950);
}
.services-hero__bg {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center;
  transform: scale(1.15);
  animation: services-hero-breathe 22s ease-in-out infinite;
  will-change: transform;
}
@keyframes services-hero-breathe {
  0%, 100% { transform: scale(1.15); }
  50% { transform: scale(1.24); }
}
/* About page banner photo is a small aircraft against open sky (source
   2400x1600) — plain `cover`/`center` leaves the plane tiny and lost in
   the dark overlay, so this zooms/repositions the crop toward where it
   actually sits. Tuned separately per breakpoint since the very narrow,
   tall mobile viewport crops far more aggressively off the sides than
   the wide desktop banner does. */
.services-hero__bg--about {
  background-size: 165% auto;
  background-position: 15% 60%;
}
@media (max-width: 640px) {
  .services-hero__bg--about {
    background-size: 320% auto;
    background-position: 32% 48%;
  }
}
.services-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,17,31,.35) 0%, rgba(8,20,38,.6) 48%, rgba(6,17,31,.95) 100%),
    linear-gradient(100deg, rgba(6,17,31,.72) 0%, rgba(11,31,58,.32) 55%, rgba(6,17,31,.5) 100%);
}
.services-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
/* Beats .container-wide's own `padding: 0 24px` shorthand (equal
   specificity, but declared later in the cascade — app.css imports
   pages.css at its very top), which was silently zeroing this out. */
.services-hero .services-hero__inner {
  padding-bottom: clamp(190px, 24vh, 260px);
}
.services-hero__meta {
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.3);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.services-hero__title {
  margin: 0;
  font-family: 'Oswald', 'Segoe UI', sans-serif;
  font-weight: 700;
  /* min(vw, vh) so a heading that wraps to 3 lines (About) shrinks on
     short viewports the same way a 1-2 line heading (Services, Contact)
     already did — sizing purely off width let the tallest case overflow
     above .services-hero's own top edge, where overflow:hidden clipped it. */
  font-size: clamp(3.2rem, min(11vw, 15vh), 10rem);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}
.services-hero__sub {
  max-width: 560px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.75);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.7;
}
.services-hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.6);
}
.services-hero__scroll-cue span {
  position: relative;
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.35);
  overflow: hidden;
}
.services-hero__scroll-cue span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-hero-accent);
  transform: translateY(-100%);
  animation: scroll-cue-fall 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-fall {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
.services-hero__scroll-cue em {
  font-style: normal;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .services-hero__bg { animation: none; }
  .services-hero__scroll-cue span::after { animation: none; opacity: .6; transform: translateY(0); }
}
@media (max-width: 640px) {
  .services-hero { min-height: 620px; }
  .services-hero__scroll-cue { display: none; }
}

/* Short-viewport safety net (mirrors the homepage hero's own
   max-height:640px rule in app.css): even with the vh-aware title sizing
   above, a very short window combined with a 3-line heading (About) can
   still run out of room — shrink the bottom padding and scroll cue out
   of the way so the heading never has to fight for space above the fold. */
@media (max-height: 700px) {
  .services-hero .services-hero__inner { padding-bottom: clamp(110px, 14vh, 170px); }
  .services-hero__meta { margin-bottom: 16px; }
  .services-hero__sub { margin-top: 14px; }
}
@media (max-height: 560px) {
  .services-hero__scroll-cue { display: none; }
}

/* ---------- Services page: horizontal service slide deck ---------- */
.slide-deck {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--color-primary-dark);
}
/* --slide-count (set inline from Blade, see services/index.blade.php) sizes
   the track and each slide off percentages of .slide-deck's own (scrollbar-
   excluded) width, instead of 100vw. 100vw includes the vertical scrollbar,
   which .slide-deck's actual box does not — that few-pixel-per-slide gap
   compounded across the filmstrip, invisible on slide 1 but a very visible
   drift by the last slide. */
.slide-deck__track {
  display: flex;
  height: 100vh;
  width: calc(var(--slide-count, 1) * 100%);
}
.slide-deck__slide {
  position: relative;
  flex: 0 0 calc(100% / var(--slide-count, 1));
  width: calc(100% / var(--slide-count, 1));
  height: 100vh;
  display: flex;
}
.slide-deck__media {
  position: relative;
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.slide-deck__media-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.16);
  transition: transform 1.3s var(--ease);
}
.slide-deck__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6,17,31,.92) 0%, rgba(6,17,31,.35) 48%, rgba(6,17,31,.15) 100%);
}
.slide-deck__media-content {
  position: relative;
  z-index: 2;
  padding: clamp(32px, 5vw, 72px);
  width: 100%;
}
.slide-deck__number {
  display: block;
  font-family: 'Oswald', 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1;
  color: var(--color-hero-accent);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.slide-deck__slide:nth-of-type(even) .slide-deck__number { color: #5f86c9; }
.slide-deck__title {
  margin: .2em 0 0;
  max-width: 560px;
  font-family: 'Oswald', 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 3.4rem);
  line-height: 1.04;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease) .06s, transform .7s var(--ease) .06s;
}

.slide-deck__panel {
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  background: #fff;
}
.slide-deck__panel-inner {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px);
}
.slide-deck__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--color-hero-accent);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease) .12s, transform .6s var(--ease) .12s;
}
.slide-deck__eyebrow::before { content: ''; width: 26px; height: 2px; background: currentColor; }
.slide-deck__desc {
  margin: 0 0 36px;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.8;
  color: var(--color-muted);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s var(--ease) .18s, transform .65s var(--ease) .18s;
}
.slide-deck__features-label {
  display: block;
  margin-bottom: 16px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #9aa5b8;
  opacity: 0;
  transition: opacity .5s var(--ease) .22s;
}
.slide-deck__features {
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}
/* Services with a long feature list (e.g. Air/Ocean freight) overflow the
   100vh pinned slide in a single column, pushing the CTA buttons off
   screen. Flowing into two columns halves the list height so everything
   fits within the viewport again. */
.slide-deck__features--grid {
  column-count: 2;
  column-gap: 32px;
}
.slide-deck__features--grid .slide-deck__feature { break-inside: avoid; }
.slide-deck__feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: .95rem;
  color: var(--color-ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: calc(.24s + var(--i) * .06s);
}
.slide-deck__feature span {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-hero-accent);
}
.slide-deck__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 1.05em 2em;
  background: var(--color-primary-dark);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease) .3s, transform .6s var(--ease) .3s, background .25s var(--ease), gap .25s var(--ease);
}
.slide-deck__cta svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.slide-deck__cta:hover { background: var(--color-hero-accent); gap: 16px; }
.slide-deck__cta:hover svg { transform: translateX(4px); }
.slide-deck__cta:focus-visible,
.slide-deck__nav:focus-visible { outline: 2px solid var(--color-hero-accent); outline-offset: 3px; }

.slide-deck__cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
/* .slide-deck__panel has a white background, unlike the dark hero
   sections btn--ghost is normally used on — so this ghost variant
   needs dark ink, not white, to stay visible here. */
.slide-deck__cta--ghost {
  background: transparent;
  color: var(--color-primary-dark);
  border: 1px solid var(--color-line);
}
.slide-deck__cta--ghost:hover { background: var(--color-bg); border-color: var(--color-primary-dark); color: var(--color-primary-dark); }

/* Reveal state, toggled by service-slides.js when a slide becomes the
   pinned deck's current one. Number/title reveal upward first and
   fastest; panel content follows with an incremental stagger (each
   transition-delay above), so the image half visibly settles before
   the copy finishes arriving. */
.slide-deck__slide.is-current .slide-deck__media-img { transform: scale(1); }
.slide-deck__slide.is-current .slide-deck__number,
.slide-deck__slide.is-current .slide-deck__title,
.slide-deck__slide.is-current .slide-deck__eyebrow,
.slide-deck__slide.is-current .slide-deck__desc,
.slide-deck__slide.is-current .slide-deck__features-label,
.slide-deck__slide.is-current .slide-deck__feature,
.slide-deck__slide.is-current .slide-deck__cta {
  opacity: 1;
  transform: translateY(0);
}

/* In the pinned/interactive deck, service-slides.js drives these same
   properties directly, in lockstep with the same per-frame scroll value
   that moves the slide horizontally — see applyReveal() there. Leaving
   the transition above active would make each inline style change it
   sets fade in over its own real-time clock instead of applying
   immediately, reintroducing a lag between the text and the motion. */
.slide-deck--interactive .slide-deck__number,
.slide-deck--interactive .slide-deck__title,
.slide-deck--interactive .slide-deck__eyebrow,
.slide-deck--interactive .slide-deck__desc,
.slide-deck--interactive .slide-deck__features-label,
.slide-deck--interactive .slide-deck__feature {
  transition: none;
}
/* .slide-deck__cta also has a hover transition (background, gap) that
   has nothing to do with the scroll-driven reveal — only opacity/transform
   need to be taken over by JS here, so they're the only ones dropped. */
.slide-deck--interactive .slide-deck__cta {
  transition: background .25s var(--ease), gap .25s var(--ease);
}

.slide-deck__controls {
  position: absolute;
  left: 0; right: 0; bottom: 36px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.slide-deck__nav {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(6,17,31,.4);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.slide-deck__nav svg { width: 20px; height: 20px; }
.slide-deck__nav:hover:not(:disabled) { background: var(--color-hero-accent); border-color: var(--color-hero-accent); transform: scale(1.06); }
.slide-deck__nav:disabled { opacity: .3; cursor: default; }

.slide-deck__progress { display: flex; align-items: center; gap: 16px; color: #fff; }
.slide-deck__progress-count { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.slide-deck__progress-current { color: var(--color-hero-accent); }
.slide-deck__progress-sep { color: rgba(255,255,255,.35); margin: 0 .15em; }
.slide-deck__progress-total { color: rgba(255,255,255,.45); }
.slide-deck__progress-bar { width: 160px; height: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.slide-deck__progress-fill { display: block; height: 100%; width: 0%; background: var(--color-hero-accent); transition: width .3s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .slide-deck__media-img,
  .slide-deck__number, .slide-deck__title, .slide-deck__eyebrow,
  .slide-deck__desc, .slide-deck__features-label, .slide-deck__feature,
  .slide-deck__cta { transition: none; }
}

/* Short-but-wide viewports (laptops with browser chrome eating vertical
   space) stay in the desktop pinned layout — the width-based breakpoint
   below doesn't kick in — but panel content sized for a tall viewport
   can still exceed 100vh and get clipped by .slide-deck's overflow:
   hidden, most visibly on services with a long features list. Tighten
   spacing so everything, including the CTA row, fits within the
   available height. */
@media (min-width: 861px) and (max-height: 820px) {
  .slide-deck__panel-inner { padding-top: 28px; padding-bottom: 28px; }
  .slide-deck__eyebrow { margin-bottom: 14px; }
  .slide-deck__desc { margin-bottom: 20px; font-size: 1rem; line-height: 1.5; }
  .slide-deck__features-label { margin-bottom: 10px; }
  .slide-deck__features { margin-bottom: 20px; }
  .slide-deck__feature { padding: 8px 0; font-size: .88rem; }
}

/* Tablet / mobile / reduced-motion: stacked flow, one slide per block,
   image on top and panel below (see requirement: stack vertically on
   mobile). Panel content is unconditionally visible here — the reveal
   classes above only ever apply to the desktop pinned/interactive mode
   — while service-slides.js still fades each slide block up on scroll
   entry for anyone without reduced-motion set. */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .slide-deck { height: auto; }
  .slide-deck__track { display: block; height: auto; }
  .slide-deck__slide { flex-direction: column; width: 100%; height: auto; opacity: 0; transform: translateY(30px); }
  .slide-deck__media { width: 100%; height: 56vh; }
  .slide-deck__panel { width: 100%; height: auto; }
  .slide-deck__panel-inner { max-width: none; padding: 48px 24px; }
  .slide-deck__features--grid { column-count: 1; }
  .slide-deck__controls { display: none; }
  .slide-deck__media-img,
  .slide-deck__number, .slide-deck__title, .slide-deck__eyebrow,
  .slide-deck__desc, .slide-deck__features-label, .slide-deck__feature,
  .slide-deck__cta {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .slide-deck__slide { opacity: 1; transform: none; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

/* ---------- Main 2-column section ---------- */
.contact-main { padding: 130px 0; background: var(--color-bg); }
.contact-main__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.contact-form-panel {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 52px);
}
.contact-form-panel__heading {
  margin: 0 0 14px;
  font-family: 'Oswald', 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.contact-form-panel__heading em { color: var(--color-hero-accent); font-style: normal; }
.contact-form-panel__intro {
  max-width: 520px;
  margin: 0 0 40px;
  color: var(--color-muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* ---------- Floating-label fields ---------- */
.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 20px;
  margin-bottom: 8px;
}
.contact-form__grid .field--full { grid-column: 1 / -1; }

.field { position: relative; margin-bottom: 20px; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 56px;
  padding: 26px 18px 10px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: #fff;
  color: var(--color-ink);
  font: inherit;
  font-size: .98rem;
  appearance: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 132px; padding-top: 28px; resize: vertical; }
.field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 44px;
}
.field select:required:invalid { color: #8b96a8; }
.field select option[value=""] { display: none; }
.field option { color: var(--color-ink); }

.field label {
  position: absolute;
  left: 19px;
  top: 18px;
  color: #8b96a8;
  font-size: .98rem;
  line-height: 1;
  pointer-events: none;
  transform-origin: left top;
  transition: top .18s var(--ease), font-size .18s var(--ease), color .18s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  top: 9px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-hero-accent);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-hero-accent);
  box-shadow: 0 0 0 4px rgba(226, 35, 26, .1);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--color-hero-accent); outline-offset: 1px; }

/* Selects always show a placeholder option (never truly "empty" the way a
   text input is), so the same absolute-overlay label used for inputs would
   just sit on top of — not replace — the select's own native text instead
   of overlapping it cleanly. Simpler and more robust: a normal static label
   above the select, never floating, never overlapping. */
.field--select > label {
  position: static;
  display: block;
  margin-bottom: 8px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8b96a8;
  transition: color .18s var(--ease);
}
.field--select select { padding: 15px 44px 15px 18px; }
.field--select:focus-within > label,
.field--select.has-error > label { color: var(--color-hero-accent); }
.field--select.has-error > label { color: #c31d15; }

.field__error {
  display: block;
  margin-top: 7px;
  color: #c31d15;
  font-size: .8rem;
  font-weight: 600;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #c31d15; }
.field.has-error label { color: #c31d15; }

/* ---------- File upload ---------- */
.field--file { margin-bottom: 28px; }
.field__file-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
/* .field label (the floating-label overlay used for text inputs) matches
   ANY <label> inside ANY .field-classed element by tag, which also caught
   this unrelated file-upload label — position:absolute pulled it out of
   flow entirely, collapsing .field--file to 0 height. Needs to win on
   specificity, not just source order, since .field label is 0-1-1. */
.field--file .field__file-label {
  position: static;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px dashed #c7cede;
  border-radius: 12px;
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field__file-label:hover { border-color: var(--color-hero-accent); background: #fdf0ef; }
.field__file-input:focus-visible + .field__file-label { outline: 2px solid var(--color-hero-accent); outline-offset: 2px; }
.field__file-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--color-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-hero-accent);
}
.field__file-icon svg { width: 20px; height: 20px; }
.field__file-copy strong { display: block; font-size: .92rem; color: var(--color-primary-dark); }
.field__file-copy span { display: block; margin-top: 2px; font-size: .78rem; color: var(--color-muted); }
.field__file-list {
  margin-top: 12px;
  padding: 0;
  list-style: none;
  font-size: .82rem;
  color: var(--color-muted);
}
.field__file-list li { padding: 4px 0; }
.field__file-list li strong { color: var(--color-primary-dark); font-weight: 600; }

/* ---------- Submit ---------- */
.contact-form__submit-wrap { margin-top: 4px; }
.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 1.1em 2em;
  background: var(--color-primary-dark);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s var(--ease), gap .25s var(--ease), transform .25s var(--ease);
}
.contact-form__submit svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.contact-form__submit:hover { background: var(--color-hero-accent); gap: 16px; }
.contact-form__submit:hover svg { transform: translateX(4px); }
.contact-form__submit:focus-visible { outline: 2px solid var(--color-hero-accent); outline-offset: 3px; }

.contact-form__success {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 30px;
  padding: 18px 20px;
  background: #eef8f1;
  border: 1px solid #bfe6cc;
  border-radius: 12px;
  color: #1a6b39;
}
.contact-form__success svg { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }
.contact-form__success strong { display: block; font-size: .92rem; }
.contact-form__success span { display: block; margin-top: 2px; font-size: .85rem; opacity: .85; }

/* ---------- Right column ---------- */
.contact-info-panel { display: flex; flex-direction: column; gap: 20px; }
.contact-info-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 32px);
}
.contact-info-card__label {
  display: block;
  margin-bottom: 18px;
  color: var(--color-hero-accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.contact-info-card__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--color-line);
}
.contact-info-card__row:first-of-type { border-top: 0; padding-top: 0; }
.contact-info-card__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
}
.contact-info-card__icon svg { width: 19px; height: 19px; }
.contact-info-card__row > div > span { display: block; color: #8b96a8; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.contact-info-card__row a,
.contact-info-card__row p { margin: 3px 0 0; color: var(--color-primary-dark); font-size: .98rem; font-weight: 600; line-height: 1.5; }
.contact-info-card__row p { color: var(--color-muted); font-weight: 400; }

.map-panel {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--color-line);
}
.map-panel__frame { position: relative; aspect-ratio: 4 / 3; }
.map-panel__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(1.05); }
.map-panel__caption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--color-line);
  font-size: .85rem;
  color: var(--color-muted);
}
.map-panel__caption a { margin-left: auto; color: var(--color-hero-accent); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }

.contact-urgent {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--color-primary-dark);
  color: #fff;
  border-radius: 16px;
  padding: clamp(22px, 3vw, 28px);
}
.contact-urgent__icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-hero-accent);
  display: flex; align-items: center; justify-content: center;
}
.contact-urgent__icon svg { width: 20px; height: 20px; color: #fff; }
.contact-urgent strong { display: block; margin-bottom: 4px; font-size: 1rem; }
.contact-urgent p { margin: 0 0 10px; color: rgba(255,255,255,.68); font-size: .88rem; line-height: 1.6; }
.contact-urgent a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; font-size: .95rem; }
.contact-urgent a:hover { color: var(--color-hero-accent); }

.contact-trust {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: #fff;
}
.contact-trust__icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-hero-accent);
  display: flex; align-items: center; justify-content: center;
}
.contact-trust__icon svg { width: 18px; height: 18px; }
.contact-trust p { margin: 0; font-size: .88rem; font-weight: 600; color: var(--color-primary-dark); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .field label,
  .contact-form__submit,
  .contact-form__submit svg,
  .field__file-label { transition: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .contact-main__grid { grid-template-columns: 1fr; }
  .contact-form__grid { grid-template-columns: 1fr; }
  .contact-form__grid .field--full { grid-column: auto; }
}

/* ==========================================================================
   Clients page
   ========================================================================== */

/* ---------- Client logos ---------- */
.client-logos { padding: 120px 0; background: #fff; }
.client-logos__heading { max-width: 640px; margin-bottom: 55px; }
.client-logos__heading h2 { margin: 20px 0 0; color: var(--color-primary-dark); font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1.02; letter-spacing: -.03em; }
.client-logos__heading h2 em { color: var(--color-hero-accent); font-style: normal; }

.client-logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
.client-logo { display: flex; align-items: center; justify-content: center; min-height: 140px; padding: 28px; background: #fff; }
.client-logo__mark { max-width: 100%; height: auto; filter: grayscale(1) opacity(.5); transition: filter .35s var(--ease), transform .35s var(--ease); }
.client-logo:hover .client-logo__mark,
.client-logo:focus-within .client-logo__mark { filter: grayscale(0) opacity(1); transform: scale(1.05); }

@media (max-width: 900px) { .client-logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .client-logos { padding: 85px 0; }
  .client-logo-grid { grid-template-columns: repeat(2, 1fr); }
  .client-logo { min-height: 110px; padding: 20px; }
}


/* ---------- Industries served ---------- */
.industries { padding: 120px 0 140px; background: #fff; }
.industries__heading { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 55px; }
.industries__heading h2 { margin: 20px 0 0; color: var(--color-primary-dark); font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1.02; letter-spacing: -.03em; }
.industries__heading h2 em { color: var(--color-hero-accent); font-style: normal; }
.industries__heading p { margin: 0 0 6px; max-width: 420px; font-size: 1rem; line-height: 1.75; color: var(--color-muted); }

.industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.industry-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 240px; padding: 30px;
  border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
  color: inherit; text-decoration: none; overflow: hidden;
  transition: color .4s var(--ease);
}
.industry-card > * { position: relative; z-index: 1; }
.industry-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.industry-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-bg); color: var(--color-hero-accent);
  transition: background .4s var(--ease), color .4s var(--ease);
}
.industry-card__icon svg { width: 22px; height: 22px; }
.industry-card__num { font-size: .72rem; font-weight: 800; letter-spacing: .1em; color: #a0a9b7; transition: color .4s var(--ease); }
.industry-card h3 { margin: 0 0 10px; font-size: 1.2rem; color: var(--color-primary-dark); transition: color .4s var(--ease); }
.industry-card p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--color-muted); transition: color .4s var(--ease); }
.industry-card--static:hover .industry-card__icon { background: var(--color-hero-accent); color: #fff; }

@media (max-width: 900px) { .industries__grid { grid-template-columns: 1fr 1fr; } .industries__heading { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .industries { padding: 85px 0 90px; } .industries__grid { grid-template-columns: 1fr; } }

/* ---------- Trust metrics ---------- */
.trust-strip__title { margin: 14px 0 44px; max-width: 620px; color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.14; letter-spacing: -.02em; }
.trust-strip__title em { color: var(--color-hero-accent); font-style: normal; }

/* ---------- Testimonials: progress indicator ---------- */
.testimonials__dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 32px; }
.testimonials__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--color-line); cursor: pointer; transition: background .25s var(--ease), transform .25s var(--ease); }
.testimonials__dot:hover { background: #c7cede; }
.testimonials__dot.is-active { background: var(--color-hero-accent); transform: scale(1.35); }
.testimonials__dot:focus-visible { outline: 2px solid var(--color-hero-accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .client-logo__mark,
  .industry-card,
  .industry-card__icon,
  .industry-card h3,
  .industry-card p,
  .testimonials__dot { transition: none; }
}

@media (max-width: 640px) {
  .contact-main { padding: 80px 0; }
  .contact-form-panel { padding: 24px; border-radius: 14px; }

  /* Sticky only within the form's own scroll region (position:sticky, not
     fixed) — it naturally stops sticking once the form ends, so it never
     overlaps the info panel or footer below. */
  .contact-form__submit-wrap {
    position: sticky;
    bottom: 14px;
    z-index: 5;
    padding-top: 18px;
    margin-top: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 45%);
  }
}

/* ==========================================================================
   Service detail page — "The Cargo Journey"
   All animation start-states below are applied by service-detail.js at
   runtime (gsap.set), never baked into this CSS — so with JS/GSAP absent
   every element here renders in its final, fully visible position.
   ========================================================================== */

/* ---------- Shared: masked upward-reveal wrapper ---------- */
.reveal-mask { display: block; overflow: hidden; }
.reveal-mask__inner { display: block; }

/* ---------- 1. Hero ---------- */
.service-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 85% 18%, #24477c 0%, #0d2446 38%, #06111f 78%);
}
.service-hero__backdrop {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, transparent, black 30%, black);
}
.service-hero__inner { position: relative; z-index: 2; padding: clamp(110px, 15vh, 150px) 0 clamp(60px, 8vh, 90px); }
.service-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  margin-bottom: clamp(32px, 5vw, 56px);
  border-bottom: 1px solid rgba(255,255,255,.28);
}
.service-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.75);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.service-hero__back span { font-size: 1rem; }
.service-hero__back:hover { color: #fff; gap: 14px; }
.service-hero__label-mask { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85); }

.service-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.service-hero__title {
  margin: 0;
  color: #fff;
  font-family: 'Oswald', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: .96;
  letter-spacing: -.03em;
}
.service-hero__desc-mask { margin-top: clamp(18px, 2.4vw, 26px); }
.service-hero__desc { max-width: 560px; margin: 0; color: rgba(255,255,255,.72); font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.75; }
.service-hero__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: clamp(28px, 3.6vw, 40px); }
.service-hero__eyebrow { color: rgba(255,255,255,.6); font-size: .82rem; font-style: italic; }

.service-hero__route { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 420px; margin-top: clamp(40px, 5vw, 64px); }
.service-hero__route-node { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); }
.service-hero__route-node--end { background: var(--color-hero-accent); box-shadow: 0 0 12px 3px rgba(226,35,26,.5); }
.service-hero__route-line { position: relative; flex: 1; height: 2px; border-radius: 999px; }
.service-hero__route-track { position: absolute; inset: 0; background: rgba(255,255,255,.16); border-radius: inherit; transform: scaleX(0); transform-origin: left center; }
.service-hero__route-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, rgba(226,35,26,0), var(--color-hero-accent)); border-radius: inherit; }
.service-hero__route-marker { position: absolute; top: 50%; left: 0%; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2), 0 0 14px 2px rgba(226,35,26,.7); transform: translate(-50%, -50%); }

.service-hero__media { position: relative; }
.service-hero__media-clip {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.service-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 2. Service overview ---------- */
.service-overview { padding: clamp(80px, 12vh, 130px) 0; background: #fff; }
.service-overview__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); align-items: start; }
.service-overview__highlight {
  position: sticky;
  top: 110px;
  padding: clamp(30px, 3.4vw, 44px);
  background: var(--color-primary-dark);
  color: #fff;
  border-radius: 20px;
}
.service-overview__quote { display: block; margin-bottom: 6px; font-family: 'Oswald', 'Segoe UI', sans-serif; font-size: 3.4rem; line-height: 1; color: var(--color-hero-accent); }
.service-overview__highlight-text { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 700; line-height: 1.5; letter-spacing: -.005em; }
.service-overview__highlight-line { display: block; width: 100%; height: 1px; margin: 26px 0; background: rgba(255,255,255,.16); overflow: hidden; }
.service-overview__highlight-line span { display: block; height: 100%; width: 100%; background: var(--color-hero-accent); transform: scaleX(0); transform-origin: left; }
.service-overview__cta { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; transition: gap .25s var(--ease), color .25s var(--ease); }
.service-overview__cta svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.service-overview__cta:hover { color: var(--color-hero-accent); gap: 14px; }
.service-overview__cta:hover svg { transform: translateX(4px); }

/* ---------- 3. Capabilities: numbered editorial rows ---------- */
.service-capabilities { padding: clamp(80px, 12vh, 130px) 0 clamp(90px, 12vh, 140px); background: #eef1f5; }
.capability-rows { border-top: 1px solid #cbd2dc; }
.capability-row {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 44px;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(22px, 3vw, 34px) 0;
  border-bottom: 1px solid #cbd2dc;
  color: inherit;
  transition: padding-left .35s var(--ease), background .35s var(--ease);
}
.capability-row__num { font-family: 'Oswald', 'Segoe UI', sans-serif; font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 600; color: #a0a9b7; transition: color .35s var(--ease); }
.capability-row__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.capability-row__title { font-family: 'Oswald', 'Segoe UI', sans-serif; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 600; color: var(--color-primary-dark); letter-spacing: -.01em; }
.capability-row__desc { color: var(--color-muted); font-size: .95rem; line-height: 1.6; max-width: 640px; }
.capability-row__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid #cbd2dc;
  color: var(--color-hero-accent);
  font-size: 1.1rem;
  font-style: normal;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.capability-row:hover { padding-left: 14px; background: rgba(255,255,255,.5); }
.capability-row:hover .capability-row__num { color: var(--color-hero-accent); }
.capability-row:hover .capability-row__arrow { transform: translate(3px, -3px); background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.capability-row:focus-visible { outline: 2px solid var(--color-hero-accent); outline-offset: -2px; }

/* ---------- 6. FAQ accordion ---------- */
.service-faq { padding: clamp(80px, 12vh, 130px) 0; background: #fff; }
.service-faq__inner { max-width: 880px; }
.service-faq__list { margin-top: 20px; border-top: 1px solid var(--color-line); }
.service-faq__item { border-bottom: 1px solid var(--color-line); }
.service-faq__question { margin: 0; }
.service-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 24px 4px;
  background: none;
  border: 0;
  color: var(--color-primary-dark);
  font: inherit;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.service-faq__trigger:focus-visible { outline: 2px solid var(--color-hero-accent); outline-offset: 2px; border-radius: 4px; }
.service-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px; height: 22px;
}
.service-faq__icon::before,
.service-faq__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--color-hero-accent);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.service-faq__icon::before { width: 14px; height: 2px; }
.service-faq__icon::after { width: 2px; height: 14px; }
.service-faq__trigger[aria-expanded="true"] .service-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.service-faq__panel { overflow: hidden; height: auto; }
.service-faq__panel-inner { padding: 0 4px 26px; max-width: 720px; }
.service-faq__panel-inner p { margin: 0; color: var(--color-muted); font-size: 1rem; line-height: 1.75; }

/* ---------- Left-aligned section heading (stacked, not split into
   columns like .section-heading-row) — used by Capabilities and FAQ
   on the service-detail page. ---------- */
.service-heading { margin-bottom: 55px; }
.service-heading h2 { margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
  .capability-row, .capability-row__num, .capability-row__arrow,
  .service-overview__cta, .service-overview__cta svg,
  .service-hero__back, .service-faq__icon::before, .service-faq__icon::after { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .service-hero__grid { grid-template-columns: 1fr; }
  .service-hero__media { order: -1; max-width: 520px; }
  .service-hero__media-clip { aspect-ratio: 16 / 10; }
  .service-overview__grid { grid-template-columns: 1fr; }
  .service-overview__highlight { position: static; top: auto; }
}
@media (max-width: 760px) {
  .capability-row { grid-template-columns: 40px minmax(0, 1fr); }
  .capability-row__arrow { display: none; }
}
@media (max-width: 640px) {
  .service-hero__inner { padding: clamp(90px, 14vh, 120px) 0 60px; }
  .service-hero__title { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .service-hero__top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .service-overview, .service-capabilities, .service-faq { padding: 70px 0 80px; }
  .service-overview__highlight { border-radius: 16px; }
  .service-faq__trigger { padding: 20px 2px; }
}