/* 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:var(--font-heading); font-size:clamp(2.2rem,4.4vw,4rem); line-height:.94; letter-spacing:-.045em; font-weight:800; }
.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-family:var(--font-heading); 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 { font-family:var(--font-heading); 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: var(--font-heading);
  font-weight: 800;
  /* 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: modern 3-up service card grid ---------- */
.services-grid { padding: 100px 0 140px; background: #fff; }
.services-grid__heading { max-width: 640px; margin: 0 auto 60px; text-align: center; }
.services-grid__heading h2 { margin: 20px 0 0; color: var(--color-primary-dark); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.06; letter-spacing: -.03em; }
.services-grid__heading h2 em { color: var(--color-hero-accent); font-style: normal; }
.services-grid__heading p { margin: 16px 0 0; font-size: 1.05rem; line-height: 1.7; color: var(--color-muted); }

.services-grid__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  color: inherit;
  text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.service-card:focus-visible { outline: 2px solid var(--color-hero-accent); outline-offset: 3px; }

.service-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.service-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .6s var(--ease);
}
.service-card:hover .service-card__img { transform: scale(1.09); }
.service-card__media-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6,17,31,.55) 0%, rgba(6,17,31,.05) 42%, rgba(6,17,31,0) 62%);
}

.service-card__num {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(6,17,31,.45);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.service-card__arrow {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.service-card__arrow svg { width: 16px; height: 16px; }
.service-card:hover .service-card__arrow { background: var(--color-hero-accent); transform: translate(2px, -2px); }

.service-card__body { padding: 26px 26px 24px; display: flex; flex-direction: column; flex: 1; }
.service-card__eyebrow { display: block; margin-bottom: 10px; font-size: .8rem; font-weight: 600; font-style: italic; color: var(--color-hero-accent); }
.service-card__title { margin: 0 0 10px; font-size: 1.3rem; font-weight: 800; line-height: 1.22; letter-spacing: -.015em; color: var(--color-primary-dark); }
.service-card__desc { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--color-muted); flex: 1; }
.service-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--color-line);
  font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-primary-dark);
  transition: gap .25s var(--ease), color .25s var(--ease);
}
.service-card__link svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.service-card:hover .service-card__link { color: var(--color-hero-accent); gap: 12px; }
.service-card:hover .service-card__link svg { transform: translateX(3px); }

@media (max-width: 1100px) { .services-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .services-grid { padding: 70px 0 90px; }
  .services-grid__list { grid-template-columns: 1fr; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card__img,
  .service-card__arrow,
  .service-card__link,
  .service-card__link svg { transition: 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: var(--font-heading);
  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: editorial intro ---------- */
.industries-intro { padding: 130px 0 84px; background: #fff; }
.industries-intro__inner { max-width: 920px; }
.industries-intro__heading {
  margin: 20px 0 0;
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--color-primary-dark);
}
.industries-intro__heading em { color: var(--color-hero-accent); font-style: normal; }
.industries-intro__copy { max-width: 460px; margin: 20px 0 0; font-size: 1rem; line-height: 1.75; color: var(--color-muted); }

/* ---------- Industries served: hover/click switcher (no scroll-jack) ---------- */
.industries-story { position: relative; background: var(--color-primary-dark); }

.industries-story__stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
  color: #fff;
}

.industries-story__panels { position: absolute; inset: 0; }

/* Panels crossfade on opacity only — no clip-path wipe, so there is no
   mid-transition slice where an untinted zone of the (teal-leaning)
   photos can flash through. */
.industry-story-panel {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease);
}
.industry-story-panel.is-active { opacity: 1; pointer-events: auto; z-index: 2; }

.industry-story-panel__media { position: absolute; inset: 0; }

.industry-story-panel__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.industry-story-panel__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.58) 38%, rgba(0,0,0,.4) 65%, rgba(0,0,0,.55) 100%);
}

.industry-story-panel__body {
  position: relative; z-index: 3;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  max-width: 980px;
  padding: 0 clamp(24px, 5vw, 72px) clamp(96px, 13vh, 148px);
}
.industry-story-panel__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
  color: var(--color-hero-accent);
  font-size: .76rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
}
.industry-story-panel__kicker::before { content: ''; width: 28px; height: 2px; background: currentColor; }
.industry-story-panel__title {
  margin: 0 0 20px;
  font-size: clamp(2.8rem, 5vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.055em;
  color: #fff;
}
.industry-story-panel__desc { max-width: 560px; margin: 0 0 22px; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.7; color: rgba(255,255,255,.75); }
.industry-story-panel__tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.industry-story-panel__tags li {
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
}

.industries-story__hud {
  position: absolute; top: 0; right: 0; z-index: 4;
  display: flex; align-items: flex-start; gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 5vh, 56px) clamp(24px, 5vw, 72px) 0 0;
}
.industries-story__rail { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.industries-story__rail-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 4px;
  background: none; border: 0; cursor: pointer;
  color: rgba(255,255,255,.42);
  transition: color .3s var(--ease);
}
.industries-story__rail-num { font-size: .74rem; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.industries-story__rail-name {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  opacity: 0;
  transition: max-width .35s var(--ease), opacity .25s var(--ease);
}
.industries-story__rail-btn:hover,
.industries-story__rail-btn:focus-visible { color: rgba(255,255,255,.85); }
.industries-story__rail-btn:hover .industries-story__rail-name,
.industries-story__rail-btn:focus-visible .industries-story__rail-name,
.industries-story__rail-btn.is-active .industries-story__rail-name { max-width: 160px; opacity: 1; }
.industries-story__rail-btn.is-active { color: var(--color-hero-accent); }
.industries-story__rail-btn.is-active .industries-story__rail-num { color: var(--color-hero-accent); }
.industries-story__rail-btn:focus-visible { outline: 2px solid var(--color-hero-accent); outline-offset: 3px; }

.industries-story__counter { display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.industries-story__counter-current { font-family: var(--font-heading); font-size: clamp(2.4rem, 3.4vw, 3.4rem); font-weight: 700; color: var(--color-hero-accent); line-height: 1; }
.industries-story__counter-sep { margin: 0 4px; font-size: 1.1rem; color: rgba(255,255,255,.35); }
.industries-story__counter-total { font-size: 1.1rem; color: rgba(255,255,255,.45); }

/* ---------- Industries served: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .industry-story-panel,
  .industries-story__rail-btn,
  .industries-story__rail-name { transition: none; }
}

/* ---------- Industries served: mobile ---------- */
@media (max-width: 800px) {
  .industries-intro { padding: 90px 0 60px; }

  .industries-story__hud { gap: 20px; padding: 20px 20px 0 0; }
  .industry-story-panel__body { padding: 0 20px clamp(56px, 14vh, 88px); }
  .industry-story-panel__title { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .industry-story-panel__desc { font-size: .92rem; }
}

/* ---------- 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,
  .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: var(--font-heading);
  font-weight: 800;
  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: var(--font-heading); font-weight: 700; 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: var(--font-heading); 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: var(--font-heading); 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; }
}