/* 365 Fuels / Field Notes — editorial operations, not corporate theatre */
:root{
  --navy:#08295F;--asphalt:#101b2b;--asphalt2:#19283a;--asphalt3:#23364a;
  --orange:#FF6908;--orange-deep:#B73C10;--amber:#FFB442;
  --paper:#F5F2EC;--mist:#EAE7E0;--line:#D5D1C9;
  --ink:#17263A;--body:#4F5B69;--muted:#77818b;--wrap:1220px;
  --disp:"Saira Semi Condensed",sans-serif;--sans:"Inter",sans-serif;
}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{background:var(--paper);color:var(--ink);font-size:16px;line-height:1.65}
.wrap{max-width:var(--wrap);padding-inline:clamp(22px,5vw,72px)}
h1,h2,h3{letter-spacing:-.025em}
.route{min-height:60vh}
.route:not(.active){display:none}
.nav{--nav-h:88px;background:rgba(245,242,236,.96);border-bottom:1px solid rgba(8,41,95,.13);box-shadow:none;backdrop-filter:blur(14px)}
.nav.solid{background:rgba(245,242,236,.98);box-shadow:0 10px 30px rgba(8,41,95,.08)}
.nav__in{height:var(--nav-h);gap:30px}
.brand .mark{width:108px;height:70px;object-fit:contain}
.nav__links{gap:clamp(16px,2.5vw,34px);align-items:center}
.nav__links a{font-size:13px;letter-spacing:.015em;color:#425064}
.nav__links .nav__cta{margin-left:8px;padding:12px 18px}
.btn{border-radius:3px;padding:14px 22px;font-size:13px;letter-spacing:.015em;min-height:48px}
.btn--orange{background:var(--orange);box-shadow:inset 0 -2px 0 rgba(0,0,0,.13)}
.btn--orange:hover{background:var(--orange-deep)}
.btn--ghost{border-color:rgba(255,255,255,.45)}
#prog{height:3px;z-index:70;box-shadow:none}
.pad{padding:clamp(74px,9vw,132px) 0}
.lead{font-size:17px;line-height:1.8;max-width:62ch;color:var(--body)}
.eyebrow,.kicker{font-size:11px;letter-spacing:.17em;font-weight:700;text-transform:uppercase;color:var(--orange)}

/* The terminal is the proof point: real infrastructure, real scale. */
.hero{padding:0;min-height:min(790px,calc(100svh - 88px));display:flex;align-items:center;overflow:hidden;
  background:#101b2b url("assets/fuel-terminal-dawn.jpg") center 55%/cover no-repeat;color:#fff}
.hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,23,43,.96) 0%,rgba(8,23,43,.88) 35%,rgba(8,23,43,.49) 69%,rgba(8,23,43,.12) 100%),
  linear-gradient(0deg,rgba(8,23,43,.5),transparent 48%)}
.hero::after{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--orange)}
.hero__glow{display:none}
.hero__in{position:relative;z-index:1;padding-top:88px;padding-bottom:52px}
.hero h1{font-size:clamp(54px,8.4vw,112px);line-height:.91;font-weight:700;max-width:850px;letter-spacing:-.04em}
.hero h1 em{display:block;color:#F08A48;font-style:normal}
.hero .lead{margin-top:30px;color:#D2DAE2;font-size:17px;max-width:54ch}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero__meta{margin-top:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:850px;border-top:1px solid rgba(255,255,255,.28)}
.hero__meta>div{padding:18px 22px 4px 0}
.hero__meta>div+div{padding-left:22px;border-left:1px solid rgba(255,255,255,.2)}
.hero__meta b{display:block;color:#fff;font-size:12px;font-weight:600}
.hero__meta span{display:block;margin-top:5px;color:#B8C3CF;font-size:11px;line-height:1.55}
.statement{background:#F5F2EC}
.statement .big{font-size:clamp(38px,6.4vw,82px);line-height:.99;max-width:16ch;letter-spacing:-.035em}
.statement .big em{font-style:normal;color:var(--orange)}
.head{max-width:760px;margin-bottom:50px}
.head h2,.page-hero h1{font-size:clamp(38px,5.5vw,68px);line-height:.98;max-width:17ch}
.head .lead{margin-top:19px}

/* Clear stages, set like an operating sequence */
.flow{margin-top:12px;border-top:1px solid #C9C5BE}
.step{padding:30px 32px 24px 0}
.step:not(:last-child){border-right:1px solid #C9C5BE;padding-right:34px}
.step:not(:first-child){padding-left:34px}
.step__n{font-family:var(--sans);font-size:10px;letter-spacing:.16em;color:var(--orange);margin-bottom:24px}
.step__n .flame{width:15px;height:15px}
.step h3{font-size:27px;line-height:1.03;color:var(--ink);margin-bottom:13px}
.step p{font-size:14px;line-height:1.75;color:#596371}

/* Fulfillment / a quiet, ordered handoff */
.journey{
  overflow:hidden;
  padding:clamp(76px,9vw,124px) 0 clamp(70px,8vw,104px);
  background:#EAE7E0;
  color:var(--ink);
  border-top:1px solid #D5D1C9;
}
.journey__inner{position:relative}
.journey__intro{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr);
  gap:clamp(36px,7vw,104px);
  align-items:end;
  padding-bottom:clamp(42px,5vw,66px);
}
.journey__eyebrow{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:20px;
  color:var(--orange-deep);
  font-size:11px;
  line-height:1.3;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.journey__eyebrow span{width:22px;height:2px;background:var(--orange);display:block}
.journey__heading h2{
  max-width:18ch;
  color:var(--navy);
  font-size:clamp(42px,5.8vw,76px);
  line-height:.98;
  font-weight:700;
  letter-spacing:-.035em;
}
.journey__lead{
  max-width:43ch;
  border-left:2px solid var(--orange);
  padding:3px 0 3px clamp(20px,2.4vw,32px);
  color:#4F5B69;
  font-size:15px;
  line-height:1.8;
}
.journey__route{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid #C9C5BE;
  border-bottom:1px solid #C9C5BE;
}
.journey__stop{
  min-width:0;
  padding:25px clamp(18px,3vw,38px) 30px 0;
}
.journey__stop+.journey__stop{
  padding-left:clamp(18px,3vw,38px);
  border-left:1px solid #C9C5BE;
}
.journey__number{
  display:block;
  margin-bottom:23px;
  color:var(--orange-deep);
  font-family:var(--disp);
  font-size:34px;
  font-weight:600;
  line-height:1;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.journey__stop h3{
  margin:0 0 8px;
  color:var(--navy);
  font-size:clamp(21px,2vw,27px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
}
.journey__stop p{
  color:#596371;
  font-size:13px;
  line-height:1.65;
}
.reveal{transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}

/* The service list reads like a set of commitments, not a card catalog. */
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc__item{padding:30px 32px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent}
.svc__item:hover{background:#F0EDE7;transform:translateY(-2px)}
.svc__item h3{font-size:27px;line-height:1.05;margin-bottom:12px}
.svc__item p{font-size:14px;line-height:1.75;color:#596371;max-width:54ch}
.svc6{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc6 .svc__item{min-height:174px}

/* Product fields: dense, editorial panels and legible grade lists. */
#products{background:#EAE7E0!important}
.prod{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.panel{position:relative;display:flex;flex-direction:column;justify-content:flex-start;min-height:400px;padding:clamp(26px,4vw,48px);border:1px solid rgba(8,41,95,.14);border-radius:0;box-shadow:none}
.panel--gas{--gas-orange:#B73C10;background:#F6F3ED;color:var(--ink);border-color:rgba(183,60,16,.24)}
.panel--gas::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--gas-orange)}
.panel--diesel{--diesel-green:#57B69A;background:#122238;color:#fff}
.panel--diesel::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--diesel-green)}
.panel .flame{width:22px;height:22px;position:absolute;right:32px;top:32px}
.panel--gas .flame{width:48px;height:56px;object-fit:contain;transform:scale(1.3)}
.panel--diesel .flame{width:48px;height:56px;color:var(--diesel-green);object-fit:contain}
.panel .kicker{margin-top:8px}
.panel--gas .kicker{display:flex;align-items:center;gap:10px;color:var(--gas-orange)}
.panel--gas .kicker::before{content:"";display:block;width:24px;height:2px;background:var(--gas-orange)}
.panel--diesel .kicker{display:flex;align-items:center;gap:10px;color:var(--diesel-green)}
.panel--diesel .kicker::before{content:"";display:block;width:24px;height:2px;background:var(--diesel-green)}
.panel h3{width:max-content;max-width:100%;font-size:clamp(40px,5vw,62px);margin:12px 0;color:inherit}
.panel--gas h3{position:relative}
.panel--gas h3::after{content:"";position:absolute;left:0;bottom:-8px;width:100%;height:3px;background:var(--gas-orange)}
.panel--diesel h3{position:relative}
.panel--diesel h3::after{content:"";position:absolute;left:0;bottom:-8px;width:100%;height:3px;background:var(--diesel-green)}
.panel p{font-size:14px;line-height:1.75;max-width:48ch;color:#586371}
.panel--diesel p{color:#B8C3D0}
.grades{margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.grades li{padding:7px 10px;border:1px solid rgba(8,41,95,.2);font-size:11px;color:#3E4E60}
.panel--gas .grades li{border-color:rgba(183,60,16,.62);color:#543D32}
.panel--diesel .grades li{border-color:rgba(87,182,154,.75);color:#D3DCE5}
.panel .note{margin-top:20px;color:#F0A34E}
.prod2{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:18px}
.minicard{padding:23px 26px;border:1px solid var(--line);border-radius:0;background:#F4F1EA}
.minicard h4{font-family:var(--disp);font-size:22px;color:var(--ink);margin:0 0 5px}
.minicard p{font-size:13px;color:#596371}
.prod-ask{margin-top:25px;color:var(--body);font-size:14px}
.prod-ask a{color:var(--orange-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.why__item{padding:28px 30px 0 0}
.why__item+.why__item{padding-left:28px;border-left:1px solid var(--line)}
.why__item h3{font-size:25px;line-height:1.06;margin-bottom:12px}
.why__item p{font-size:14px;line-height:1.75;color:#596371}
.page-hero{padding:clamp(84px,11vw,150px) 0 clamp(72px,8vw,104px);background:#122238;color:#fff;overflow:hidden}
.page-hero::after{content:"";position:absolute;width:42vw;height:42vw;min-width:420px;min-height:420px;right:-5vw;top:-18vw;border:1px solid rgba(255,255,255,.11);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.02);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{max-width:16ch}
.page-hero .lead{color:#C2CCD7;margin-top:22px;max-width:63ch}
.about-block,.about-mw{padding:40px 0;border-top:1px solid var(--line);max-width:900px}
.about-block h2,.about-mw h2{font-size:clamp(30px,4vw,48px);max-width:18ch;line-height:1.02}
.about-block p,.about-mw p{font-size:16px;color:#596371;max-width:68ch;margin-top:15px}
.about-mw{margin-left:auto;padding-left:clamp(0px,9vw,120px);background:transparent;border-radius:0}
.about-mw h2{color:var(--ink)}
.final{background:#122238;color:#fff;overflow:hidden}
.final::before{content:"";position:absolute;right:8%;top:20%;width:260px;height:260px;border:1px solid rgba(255,255,255,.11);border-radius:50%;box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 68px rgba(255,255,255,.018)}
.final .wrap{position:relative;z-index:1}
.final h2{font-size:clamp(42px,6vw,74px);line-height:.96;max-width:15ch}
.final .lead{color:#C2CCD7;margin-top:20px}
.final__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}
.foot{background:#0B1727;color:#D5DDE6;padding:65px 0 20px}
.foot .brand .mark{filter:none}
.foot__top{display:grid;grid-template-columns:1.5fr .7fr 1fr;gap:clamp(30px,6vw,90px);padding-bottom:44px}
.foot .desc{max-width:44ch;margin-top:16px;color:#A7B2C0;font-size:13px}
.foot .tagline{margin-top:12px;color:#F0A34E;font-family:var(--disp);font-size:19px}
.foot h4{font:700 11px var(--sans);text-transform:uppercase;letter-spacing:.13em;color:#F0A34E;margin:7px 0 16px}
.foot ul{padding:0;margin:0;list-style:none}
.foot li{font-size:12px;line-height:1.8;color:#A7B2C0;margin:4px 0}
.foot a:hover{color:#F0A34E}
.foot__bar{border-top:1px solid rgba(255,255,255,.14);padding-top:16px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#8794A4;font-size:12px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(230px,.65fr);gap:clamp(28px,6vw,82px);align-items:start}
.form{padding:clamp(22px,4vw,42px);background:#F7F4EE;border:1px solid #D7D2C9;box-shadow:0 18px 45px rgba(25,39,56,.06)}
.frow{gap:18px;margin-bottom:18px}
.f label{font-size:13px;color:#425064;font-weight:600;margin-bottom:7px}
.f label span{font-weight:400;color:#657181}
.f input,.f select,.f textarea{background:#F7F4EE;border:1px solid #CFCBC3;border-radius:2px;min-height:47px;padding:12px 13px;color:var(--ink);font:16px var(--sans);transition:border-color .2s,box-shadow .2s}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--navy);outline:0;box-shadow:0 0 0 3px rgba(8,41,95,.1)}
.f textarea{min-height:125px}
.form__submit{min-width:220px}
.form__note{font-size:12px;color:#596371}
.form__error{margin:14px 0;color:#9A2E20;font-weight:600}
.form__submit:disabled{opacity:.65;cursor:wait}
.contact-grid>div:nth-child(2){position:sticky;top:120px;padding-top:8px}
.contact-grid>div:nth-child(2)::before{content:"A useful first conversation";font:700 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.success{padding:34px;background:#fff;border:1px solid var(--line);color:var(--ink)}

:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.skip-link{position:fixed;top:8px;left:16px;z-index:100;background:var(--paper);color:var(--navy);padding:12px 18px;transform:translateY(-160%);font-weight:600}
.skip-link:focus{transform:none}
.burger{min-width:44px;min-height:44px}
.btn--orange,.nav__links .btn--orange{color:#101b2b}
.btn--orange:hover,.nav__links .btn--orange:hover{color:#fff}
.hero__meta span{font-size:12px}
.svc,.svc6{background:transparent;gap:0;border-radius:0}
.svc6 .svc__item{background:var(--paper)}
.svc__item p,.step p,.why__item p,.panel p{font-size:15px}
.why__item{border-top:0}
.panel--gas .grades li{background:transparent}
.grades li{font-size:12px}
.step__n,.statement .big em,.panel--gas .kicker{color:var(--orange-deep)}
.route[data-route="products"] .head{display:none}
.foot .brand{width:132px;padding:8px;background:var(--paper);border-radius:3px}
.foot .brand .mark{width:116px;height:100px}
.foot ul a{color:#B7C2CF}
.foot p.desc{color:#B7C2CF;font-size:13px}
.foot__bar,.foot__bar a{color:#A3AFBE}
.foot p[style]{color:#A7B2C0!important}
.cside{background:transparent;border:0;border-top:2px solid var(--navy);border-radius:0;padding:28px 0;position:sticky;top:120px}
.cside .k{color:#596371}
@media(max-width:900px){
  .nav{--nav-h:76px}.nav__in{height:var(--nav-h)}.brand .mark{width:98px;height:62px}
  .burger{font-size:24px}.nav__links{background:var(--paper);box-shadow:0 18px 32px rgba(8,41,95,.14);padding:10px 24px 22px}
  .hero{min-height:760px;min-height:calc(92svh - 76px);background-position:61% center}
  .hero::before{background:linear-gradient(90deg,rgba(8,23,43,.94),rgba(8,23,43,.68) 72%,rgba(8,23,43,.3))}
  .hero__in{padding-top:70px}.hero__meta{margin-top:48px}
  .journey__intro{grid-template-columns:minmax(0,1.1fr) minmax(230px,.9fr);gap:34px}
  .journey__heading h2{font-size:clamp(40px,6vw,58px)}
  .contact-grid{grid-template-columns:1fr}.contact-grid>div:nth-child(2){position:static}
}
@media(max-width:700px){
  .pad{padding:76px 0}.hero{min-height:810px;min-height:calc(100svh - 76px);background-position:60% center}
  .hero h1{font-size:clamp(49px,13vw,76px)}.hero .lead{font-size:15px;max-width:46ch}
  .hero__meta{grid-template-columns:1fr;margin-top:42px}.hero__meta>div,.hero__meta>div+div{padding:11px 0;border-left:0}
  .hero__meta>div+div{border-top:1px solid rgba(255,255,255,.18)}
  .flow{grid-template-columns:1fr}
  .step,.step:not(:last-child),.step:not(:first-child){padding:25px 0;border-right:0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
  .svc,.svc6{grid-template-columns:1fr}
  .svc__item{padding:24px}
  .prod,.prod2{grid-template-columns:1fr}
  .panel{min-height:0;padding:30px 26px}
  .grades{margin-top:20px}
  .why{grid-template-columns:1fr}
  .why__item,.why__item+.why__item{padding:23px 0;border-left:0;border-bottom:1px solid var(--line)}
  .about-mw{padding-left:0}
  .page-hero{padding:86px 0 76px}
  .journey__intro{grid-template-columns:1fr;gap:23px;padding-bottom:35px}
  .journey__heading h2{font-size:clamp(38px,9.8vw,54px);max-width:19ch}
  .journey__lead{max-width:54ch;font-size:14px}
  .journey__route{grid-template-columns:1fr}
  .journey__stop,.journey__stop+.journey__stop{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    column-gap:15px;
    padding:20px 0;
    border-left:0;
  }
  .journey__stop+.journey__stop{border-top:1px solid #C9C5BE}
  .journey__number{grid-row:span 2;margin:1px 0 0;font-size:25px}
  .journey__stop h3{font-size:22px;margin:0 0 4px}
  .journey__stop p{grid-column:2}
  .foot__top{grid-template-columns:1fr 1fr;gap:32px}
  .foot__top>div:first-child{grid-column:1/-1}
  .final::before{right:-80px;top:auto;bottom:-70px;width:220px;height:220px}
  .frow{grid-template-columns:1fr!important;gap:14px}
  .form{padding:22px}
}
@media(max-width:420px){
  .wrap{padding-inline:20px}
  .hero__cta .btn{width:100%}
  .foot__top{grid-template-columns:1fr}
  .foot__top>div:first-child{grid-column:auto}
  .foot__bar{display:block}.foot__bar span{display:block;margin-bottom:8px}
}
@media(min-width:901px){
  .grades{gap:5px}
  .grades li{font-size:11px;padding-inline:6px}
  .panel>p:not(.note){min-height:5.25em}
}
@media(min-width:701px) and (max-width:900px){
  .panel>p:not(.note){min-height:7em}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.back-to-top{
  position:fixed;
  z-index:65;
  right:clamp(16px,3vw,36px);
  bottom:max(18px,env(safe-area-inset-bottom));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:44px;
  min-height:48px;
  padding:11px 16px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:3px;
  background:var(--navy);
  color:#fff;
  box-shadow:0 8px 24px rgba(8,23,43,.22);
  font:600 13px var(--sans);
  cursor:pointer;
}
.back-to-top:hover{background:#0D397F}
.back-to-top span{font-size:20px;line-height:1}
.back-to-top[hidden]{display:none}
@media(max-width:420px){
  .back-to-top{width:48px;height:48px;padding:0}
  .back-to-top__label{display:none}
}

/* A clear overview of the supply relationship, followed by its fulfillment handoff. */
.supply-process{
  padding:clamp(78px,9vw,132px) 0 clamp(82px,9vw,128px);
  background:
    radial-gradient(ellipse at 92% 6%,rgba(255,180,66,.09),transparent 31%),
    var(--paper);
}
.supply-process .head{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.75fr);
  gap:clamp(38px,8vw,124px);
  align-items:end;
  max-width:none;
  margin-bottom:0;
  padding-bottom:clamp(46px,6vw,76px);
}
.supply-process .head h2{
  max-width:12ch;
  color:var(--navy);
  font-size:clamp(46px,6.4vw,78px);
  line-height:.94;
  letter-spacing:-.035em;
}
.supply-process .head .lead{
  max-width:49ch;
  margin:0 0 4px;
  padding:2px 0 2px clamp(20px,2.5vw,34px);
  border-left:2px solid var(--orange);
  color:var(--body);
  font-size:15px;
  line-height:1.9;
}
.supply-process .flow{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:0;
  border-top:1px solid rgba(8,41,95,.18);
  border-bottom:1px solid rgba(8,41,95,.18);
}
.supply-process .step{
  min-width:0;
  padding:27px clamp(22px,3.4vw,46px) 31px 0;
}
.supply-process .step:not(:last-child){
  padding-right:clamp(22px,3.4vw,46px);
  border-right:0;
}
.supply-process .step+.step{
  padding-left:clamp(22px,3.4vw,46px);
  border-left:1px solid rgba(8,41,95,.18);
}
.supply-process .step__n{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:clamp(28px,3.4vw,44px);
  color:var(--orange-deep);
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
}
.supply-process .step__n .flame{
  display:block;
  width:14px;
  height:14px;
}
.supply-process .step h3{
  max-width:13ch;
  margin-bottom:12px;
  color:var(--ink);
  font-size:clamp(24px,2.5vw,31px);
  line-height:1.02;
  letter-spacing:-.02em;
}
.supply-process .step p{
  max-width:39ch;
  color:#4F5B69;
  font-size:14px;
  line-height:1.8;
}

.journey{
  padding:clamp(76px,8.5vw,118px) 0 clamp(78px,8vw,108px);
  border-top:0;
  background:var(--navy);
  color:var(--paper);
}
.journey::before{
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:1px;
  background:rgba(245,242,236,.16);
  content:"";
}
.journey__intro{
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.65fr);
  gap:clamp(44px,8vw,120px);
  padding-bottom:clamp(52px,6vw,78px);
}
.journey__eyebrow{
  color:var(--amber);
  font-size:10px;
  letter-spacing:.18em;
}
.journey__eyebrow span{
  width:25px;
  background:var(--orange);
}
.journey__heading h2{
  max-width:14ch;
  color:var(--paper);
  font-size:clamp(45px,6.2vw,76px);
  line-height:.96;
  letter-spacing:-.035em;
}
.journey__lead{
  max-width:42ch;
  margin-bottom:4px;
  padding:3px 0 3px clamp(20px,2.5vw,34px);
  border-left-color:var(--orange);
  color:rgba(245,242,236,.76);
  font-size:14px;
  line-height:1.9;
}
.journey__route{
  position:relative;
  border-top-color:rgba(245,242,236,.22);
  border-bottom-color:rgba(245,242,236,.22);
}
.journey__route::before{
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:1px;
  background:var(--orange);
  content:"";
}
.journey__stop{
  padding:25px clamp(20px,3.5vw,48px) 29px 0;
}
.journey__stop+.journey__stop{
  padding-left:clamp(20px,3.5vw,48px);
  border-left-color:rgba(245,242,236,.22);
}
.journey__number{
  margin-bottom:23px;
  color:var(--amber);
  font-size:35px;
}
.journey__stop h3{
  margin-bottom:8px;
  color:var(--paper);
  font-size:clamp(22px,2.3vw,28px);
  line-height:1.08;
}
.journey__stop p{
  color:rgba(245,242,236,.75);
  font-size:13px;
  line-height:1.7;
}

@media(max-width:760px){
  .supply-process{
    padding:70px 0 72px;
  }
  .supply-process .head{
    grid-template-columns:1fr;
    gap:25px;
    padding-bottom:39px;
  }
  .supply-process .head h2{
    max-width:14ch;
    font-size:clamp(44px,10vw,64px);
  }
  .supply-process .flow{
    grid-template-columns:1fr;
  }
  .supply-process .step,
  .supply-process .step:not(:last-child),
  .supply-process .step+.step{
    padding:25px 0 26px;
    border-right:0;
    border-left:0;
  }
  .supply-process .step+.step{
    border-top:1px solid rgba(8,41,95,.18);
  }
  .supply-process .step__n{
    margin-bottom:19px;
  }
  .supply-process .step h3{
    max-width:none;
    font-size:27px;
  }
  .supply-process .step p{
    max-width:55ch;
  }
  .journey__intro{
    grid-template-columns:1fr;
    gap:25px;
    padding-bottom:39px;
  }
  .journey__heading h2{
    max-width:15ch;
    font-size:clamp(44px,10vw,64px);
  }
  .journey__route{
    grid-template-columns:1fr;
  }
  .journey__route::before{
    top:0;
    bottom:0;
    left:0;
    width:1px;
    height:auto;
  }
  .journey__stop,
  .journey__stop+.journey__stop{
    display:grid;
    grid-template-columns:45px minmax(0,1fr);
    column-gap:17px;
    padding:21px 0;
    border-left:0;
  }
  .journey__stop+.journey__stop{
    border-top:1px solid rgba(245,242,236,.22);
  }
  .journey__number{
    grid-row:span 2;
    margin:0;
    font-size:28px;
  }
  .journey__stop h3{
    margin:0 0 4px;
    font-size:23px;
  }
  .journey__stop p{
    grid-column:2;
  }
}
@media(max-width:420px){
  .supply-process .head .lead,
  .journey__lead{
    font-size:14px;
  }
  .supply-process .step p,
  .journey__stop p{
    font-size:14px;
  }
  .supply-process{
    padding-top:70px;
    padding-bottom:72px;
  }
  .journey{
    padding-top:70px;
    padding-bottom:72px;
  }
}