/* Pure Freight Management: site-wide extras on top of rig.css + brand.css.
   Tokens only (no raw hex). */

/* the hero frame slides in from the right (rig frame-in) while bleeding to the viewport edge:
   clip that transient overflow so mobile browsers never widen the layout viewport */
.hero,.phero{overflow-x:clip}

/* ---- header ---------------------------------------------------------------- */
.hdr-in{gap:20px}
.hdr-tel{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 4px;flex:none;white-space:nowrap;color:var(--ink);text-decoration:none;font-size:1rem}
.hdr-tel .i{color:var(--brand)}
.hdr-tel:hover{color:var(--brand-ink)}
@media (max-width:1023px){ .hdr-tel{display:none} }
/* the logo is the PFM wordmark; a touch smaller than the family default so the nav breathes */
.hdr .logo img{height:32px}

/* text-only dropdown panels (no logos) */
.menu>ul.mt{min-width:208px;left:-6px;right:auto}
.menu>ul.mt a{min-height:44px;padding:0 14px;font-weight:550;color:var(--ink-2)}
.menu>ul.mt a:hover{color:var(--ink)}
.menu>ul.mt a[aria-current="page"]{color:var(--brand-ink);background:var(--brand-tint)}
/* current page lives inside a dropdown: mark its trigger like a current nav link */
.menu:has(a[aria-current="page"])>summary{color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand);border-radius:0}

/* drawer: show where you are (rig.css styles aria-current only in the desktop nav) */
.drawer li a[aria-current="page"]{color:var(--brand-ink);box-shadow:inset 3px 0 0 var(--brand);padding-left:14px}

/* ---- footer ------------------------------------------------------------------ */
.fb{align-items:center}
.fb .btn-p{color:var(--on-brand)}

/* plate figures: rig.js splits them into per-character spans, which adds break points; keep words like "14 days" whole */
.plate b{white-space:nowrap}

/* ---- section head with an action on the right -------------------------------- */
.sec-hd{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(32px,4vw,56px)}
.sec-hd>div,.sec-hd>h2{max-width:780px}
.sec-hd .lead{margin-top:16px}
.sec-hd .tag{margin-bottom:12px}

/* ---- inner page hero: crumbs carry the old eyebrow ---------------------------- */
.crumbs .i{width:14px;height:14px}
.crumbs [aria-current]{color:var(--ink-2);font-weight:600}
.phero .hero-copy{padding-block:0}
.phero .plate{margin-top:clamp(36px,4.5vw,64px)}
.phero-media .hero-frame img{object-position:center}

/* ---- asset family: four-column directory -------------------------------------- */
.fam4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-strong)}
.fam4>*{display:grid;gap:8px;align-content:start;padding:28px 24px 12px;color:var(--ink);text-decoration:none}
.fam4>*+*{border-left:1px solid var(--rule)}
.fam4>:first-child{padding-left:0}
.fam4 .fl{height:60px;display:flex;align-items:center;margin-bottom:8px}
.fam4 .fl img{max-height:46px;max-width:150px;width:auto;height:auto}
.fam4 .fl .i{width:36px;height:36px;color:var(--brand)}
.fam4 b{font-weight:650;font-size:1.1rem}
.fam4 small{color:var(--ink-2);font-size:.96rem;line-height:1.5}
.fam4 .more{margin-top:6px}
a.fam4-i:hover b{color:var(--brand-ink)}
@media (max-width:899px){
  .fam4{grid-template-columns:1fr 1fr}
  .fam4>:nth-child(3){border-left:0;padding-left:0}
  .fam4>:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:559px){
  .fam4{grid-template-columns:1fr}
  .fam4>*{border-left:0!important;padding-left:0!important;padding-right:0}
  .fam4>*+*{border-top:1px solid var(--rule)}
}

/* ---- connection flow (company -> Amous -> PFM -> carriers) -------------------- */
.flow{display:grid;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr) 112px minmax(0,1fr) 112px minmax(0,1fr);align-items:stretch}
.fnode{display:grid;gap:6px;align-content:start;padding:24px 22px;border-radius:var(--r-surface);background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)}
.fnode .fm{height:48px;display:flex;align-items:center;margin-bottom:6px}
.fnode .fm img{height:30px;width:auto;max-width:140px}
.fnode .fm .i{width:34px;height:34px;color:var(--brand)}
.fnode b{font-weight:650;font-size:1.06rem;color:var(--ink)}
.fnode small{color:var(--ink-2);font-size:.93rem;line-height:1.45}
.fnode.dk{background:var(--tile-dark);box-shadow:none}
.fnode.dk b{color:var(--on-dark)} .fnode.dk small{color:var(--on-dark-2)}
.fconn{display:grid;align-content:center;justify-items:center;gap:8px;padding:0 10px;text-align:center}
.fconn span{font-size:.8rem;line-height:1.3;font-weight:600;color:var(--brand-ink)}
.fconn .ln{display:flex;align-items:center;width:100%;color:var(--brand)}
.fconn .ln::before{content:"";flex:1;height:0;border-top:2px dashed var(--rule-strong)}
.fconn .ln .i{width:18px;height:18px;margin-left:-2px}
@media (max-width:1023px){
  .flow{grid-template-columns:1fr}
  .fconn{grid-template-columns:auto 1fr;justify-items:start;align-items:center;text-align:left;padding:10px 0 10px 22px}
  .fconn .ln{width:auto;flex-direction:column}
  .fconn .ln::before{width:0;height:22px;border-top:0;border-left:2px dashed var(--rule-strong)}
  .fconn .ln .i{transform:rotate(90deg);margin:-2px 0 0}
}

/* ---- team ----------------------------------------------------------------------- */
.ppl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px 22px;border-radius:var(--r-surface);background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink);text-decoration:none;
  transition:box-shadow var(--duration-fast) var(--ease),transform var(--duration-fast) var(--ease)}
.on-surface .pp{background:var(--paper)}
a.pp:hover{box-shadow:inset 0 0 0 1px var(--rule-strong),var(--shadow-1);transform:translateY(-2px)}
.pp .av{width:56px;height:56px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--brand-tint);color:var(--brand-ink);
  font-family:var(--font-disp);font-variation-settings:"wdth" 74;font-weight:700;font-size:1.2rem;letter-spacing:.02em}
.pp b{display:block;font-weight:650}
.pp small{display:block;color:var(--muted)}
.pp .li{color:var(--brand);display:grid;place-items:center}
.pp .li .i{width:22px;height:22px}
@media (max-width:899px){ .ppl{grid-template-columns:1fr} }

/* ---- quote band (the closing call to action) ----------------------------------- */
.band{display:block;padding:clamp(32px,5vw,64px);padding-right:clamp(32px,36%,520px)}
.band h2{color:var(--on-dark)}
.band .lead{color:var(--on-dark-2);margin-top:14px}
.band .ctas{margin-top:28px}
.band .btn-s{background:transparent;color:var(--on-dark);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-dark) 45%,transparent)}
.band .btn-s:hover{box-shadow:inset 0 0 0 1px var(--on-dark)}
.band.tile-livery::after{right:-6%;width:34%}
@media (max-width:767px){
  .band{padding-right:clamp(24px,6vw,32px);padding-bottom:120px}
  .band.tile-livery::after{right:-30%;width:90%;height:90px;top:auto;bottom:-10px}
}

/* ---- contact directory + newsletter -------------------------------------------- */
.dir .adr{display:flex;gap:8px;color:var(--ink-2)}
.dir .adr .i{color:var(--brand);margin-top:4px}
.dir .data{font-size:1.02rem}
.nlf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;margin-top:10px}
.nlf .ok{grid-column:1/-1}
.nlf .btn{min-height:48px}

/* ---- forms ------------------------------------------------------------------------ */
.ok .i{flex:none;margin-top:2px}
.fgp select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* ---- checks list (compact rows without dividers) -------------------------------- */
.ticks{list-style:none;display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:12px;color:var(--ink-2)}
.ticks .i{width:20px;height:20px;color:var(--brand);margin-top:3px}
.tile-dark .ticks li{color:var(--on-dark-2)} .tile-dark .ticks .i{color:var(--on-dark)}

/* ---- photo figure (owner photo library) beside a list or directory ------------- */
.ph{margin:0;border-radius:var(--r-surface);overflow:hidden;background:var(--sunk)}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.with-ph{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:start}
.with-ph>.ph{position:sticky;top:calc(var(--hdr-h) + 32px)}
@media (max-width:899px){ .with-ph{grid-template-columns:1fr} .with-ph>.ph{position:static} }

/* rig.css gives .lb display:grid, which overrides the UA rule that hides a closed <dialog>:
   the closed lightbox would sit over the viewport (z 90) and swallow clicks. Hide it until open. */
.lb:not([open]){display:none}

/* ---- brand plates: logo-led panels used where a photo would otherwise sit ------- */
.bp{position:relative;isolation:isolate;display:grid;align-content:center;justify-items:start;gap:clamp(16px,2.2vw,28px);width:100%;min-height:100%;padding:clamp(28px,5vw,60px);background:var(--brand-tint);overflow:hidden}
.hero-frame>.bp{position:absolute;inset:0;min-height:0}
.bp:not(.bp-flat)::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(104deg,transparent 0 66%,var(--stripe-a) 66% 75%,transparent 75% 77.5%,var(--stripe-b) 77.5% 80%,transparent 80% 82.5%,var(--stripe-a) 82.5% 84.5%,transparent 84.5%);opacity:.95}
.bp>img{width:min(100%,380px);height:auto}
.bp-t{font-family:var(--font-disp);font-variation-settings:"wdth" var(--disp-wdth);font-weight:var(--disp-wght);font-size:clamp(1.25rem,2.2vw,1.9rem);line-height:1.18;letter-spacing:-.012em;color:var(--ink);max-width:16ch}
.bp-k{list-style:none;display:flex;flex-wrap:wrap;gap:14px 28px;padding-top:clamp(14px,2vw,22px);border-top:1px solid color-mix(in srgb,var(--brand) 25%,transparent);max-width:min(100%,420px)}
.bp-k b{display:block;font-family:var(--font-disp);font-variation-settings:"wdth" var(--disp-wdth);font-weight:var(--disp-wght);font-size:1.5rem;line-height:1;color:var(--brand-ink)}
.bp-k span{display:block;margin-top:4px;font-size:.84rem;color:var(--ink-2);line-height:1.3}
.ph>.bp{aspect-ratio:var(--bp-r,4/3)}
.tile-img>.bp{min-height:360px}
@media (max-width:599px){.bp-t{max-width:none}}
/* hero plates: the livery overlay owns the left edge, and the frame bleeds off the right edge, so keep the content in the clear middle */
.hero-frame>.bp{padding:clamp(28px,4vw,56px) clamp(32px,5vw,72px) clamp(28px,4vw,56px) clamp(120px,32%,220px)}
.hero-frame>.bp>img{width:min(100%,300px)}
.hero-frame>.bp .bp-t{font-size:clamp(1.15rem,1.8vw,1.55rem)}
@media (max-width:899px){.hero-frame>.bp{padding-left:clamp(96px,28%,160px)}}
.hero-frame img[src$="d_side.webp"]{object-position:14% center}
.hero-frame>.bp>img{position:static;inset:auto;height:auto;object-fit:contain}
.tile-img>.bp>img,.ph>.bp>img{height:auto;object-fit:contain}

/* ---- compact heroes: text and picture fit one screen --------------------------- */
@media (min-width:900px){
  .hero{padding-top:clamp(12px,1.6vw,24px)}
  .phero{padding:clamp(20px,2.4vw,36px) 0 clamp(20px,2.4vw,32px)}
  .phero-g{align-items:center}
  .phero-media{aspect-ratio:16/10}
  .phero .plate{margin-top:clamp(24px,3vw,40px)}
}

/* ---- technology hero: Amous panel in Amous colors, image shown whole (never cropped or enlarged) ---- */
.am-hero{--stripe-a:#C6F448;--stripe-b:#F2F2F2;--stripe-c:#C6F448}
.am-frame{background:#1F1F1F}
.am-p{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(10px,1.6vw,20px);padding:clamp(20px,3vw,36px) clamp(16px,2.6vw,32px) clamp(16px,2.4vw,28px) clamp(96px,21%,160px)}
.hero-frame .am-p>img{position:static;inset:auto;object-fit:contain}
.hero-frame .am-p>.am-logo{width:clamp(120px,16vw,170px);height:auto;object-fit:contain;object-position:left center}
.hero-frame .am-p>.am-shot{width:100%;height:100%;min-height:0;object-position:center bottom}
@media (max-width:899px){.am-p{padding-left:clamp(80px,22%,140px)}}

/* ---- data-flow line: dashes march toward the next node, a packet rides each connector ---- */
.fconn .ln{position:relative}
.fconn .ln::before{border:0;height:2px;background:repeating-linear-gradient(90deg,var(--brand) 0 6px,transparent 6px 12px);background-size:12px 2px;opacity:.55}
.fconn .ln::after{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent),0 0 14px 2px color-mix(in srgb,var(--brand) 55%,transparent);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .fconn .ln::before{animation:flow-dash 700ms linear infinite}
  .fconn .ln::after{animation:flow-dot 2.4s cubic-bezier(.45,0,.2,1) infinite}
  .flow .fconn:nth-of-type(2) .ln::after{animation-delay:0s}
  .flow .fconn:nth-of-type(4) .ln::after{animation-delay:.8s}
  .flow .fconn:nth-of-type(6) .ln::after{animation-delay:1.6s}
  .fnode.dk{animation:node-pulse 2.4s ease-in-out infinite}
}
@keyframes flow-dash{to{background-position:12px 0}}
@keyframes flow-dot{0%{left:0;opacity:0}12%{opacity:1}78%{opacity:1}100%{left:calc(100% - 26px);opacity:0}}
@keyframes node-pulse{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 18%,transparent)}}
@media (max-width:899px){
  .fconn .ln::before{width:2px;height:22px;background:repeating-linear-gradient(180deg,var(--brand) 0 6px,transparent 6px 12px);background-size:2px 12px}
  .fconn .ln::after{left:-4px;top:0;margin-top:0}
  @keyframes flow-dash{to{background-position:0 12px}}
  @keyframes flow-dot{0%{top:0;opacity:0}12%{opacity:1}78%{opacity:1}100%{top:calc(100% - 22px);opacity:0}}
}
.hero-frame .am-p>.am-logo{margin-left:clamp(28px,7%,64px)}
/* technology hero, round 2: keep the logo clear of the stripes at any width, and never enlarge the screenshot past a crisp size */
.am-p{padding-left:calc(var(--cx) + var(--lw)*2.3 + clamp(20px,2.4vw,40px));padding-right:clamp(16px,2.6vw,36px)}
.hero-frame .am-p>.am-logo{margin-left:0;width:clamp(120px,14vw,170px)}
.hero-frame .am-p>.am-shot{width:auto;height:auto;max-width:min(100%,640px);max-height:100%;justify-self:center;align-self:center}
@media (max-width:899px){.am-p{padding-left:calc(var(--cx) + var(--lw)*2.3 + 16px)}}

/* technology hero, round 3: the Amous dashboard rebuilt as live markup, so it is razor sharp at any size and fills the panel */
.am-p{container-type:size;grid-template-rows:auto minmax(0,1fr);padding-top:clamp(18px,4cqh,40px);padding-bottom:clamp(16px,4cqh,36px)}
.am-stage{--u:clamp(6.5px,min(1.9cqw,1.7cqh),12px);position:relative;min-height:0;font-size:calc(var(--u)*1.25);line-height:1.25;color:#1F1F1F;font-family:var(--font-body,inherit)}
.am-c1,.am-c2{position:absolute;border-radius:50%}
.am-c1{right:-9%;top:2%;width:52%;aspect-ratio:1;background:#667933}
.am-c2{right:-1%;top:10%;width:36%;aspect-ratio:1;background:#C6F448}
.am-card{position:absolute;background:#fff;border-radius:1em;box-shadow:0 1.2em 2.4em rgba(0,0,0,.38)}
.am-table{left:8%;top:4%;width:80%;padding:1.1em 1.3em .6em}
.am-th{display:flex;justify-content:space-between;align-items:center;gap:1em;padding-bottom:.9em}
.am-th b{font-size:1.2em;font-weight:700}
.am-tabs{display:flex;gap:.4em;font-size:.84em}
.am-tabs i{font-style:normal;padding:.25em .7em;border-radius:99px;background:#F0F1F3;color:#555}
.am-tabs i.on{background:#1F1F1F;color:#fff}
.am-tr{display:grid;grid-template-columns:.9fr 1.7fr 1fr;align-items:center;gap:.8em;padding:.7em 0;border-top:1px solid #ECEDEF}
.am-tr.am-h{border-top:0;padding:.2em 0 .5em;font-size:.76em;letter-spacing:.06em;text-transform:uppercase;color:#7A7D83;font-weight:600}
.am-id{color:#1C6FD8;font-weight:650}
.am-tr b{display:block;font-weight:650}
.am-tr small{display:block;color:#7A7D83;font-size:.84em}
.am-chip{font-style:normal;font-size:.84em;font-weight:650;padding:.2em .7em;border-radius:99px}
.am-chip.ok{background:#DDF6E4;color:#177A3C}.am-chip.done{background:#ECEDEF;color:#4A4D52}.am-chip.wait{background:#FFF1C9;color:#8A6200}
.am-status{left:0;top:46%;width:36%;padding:1em 1.2em}
.am-status small,.am-earn small{display:block;font-size:.9em;color:#555;font-weight:600}
.am-status b{display:block;margin:.35em 0 .5em;font-size:1.35em;letter-spacing:.02em;color:#1C6FD8;font-weight:700}
.am-status span{display:block;font-size:.88em;color:#444}
.am-earn{left:12%;bottom:0;width:40%;padding:1em 1.2em}
.am-earn b{display:block;font-size:1.1em;margin:.15em 0 .6em;font-weight:700}
.am-earn dl{display:grid;grid-template-columns:1fr auto;gap:.35em 1em;font-size:.92em}
.am-earn dt{color:#555}.am-earn dd{font-weight:700;text-align:right}.am-earn dd.g{color:#177A3C}
@media (prefers-reduced-motion:no-preference){
  .am-status{animation:am-float 5.5s ease-in-out infinite}
  .am-earn{animation:am-float 5.5s ease-in-out 1.4s infinite}
}
@keyframes am-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5em)}}

/* round 3b: flow layout so cards never collide */
.am-stage{display:grid;align-content:center;justify-items:end}
.am-table{position:relative;left:auto;top:auto;width:86%}
.am-row{position:relative;display:grid;grid-template-columns:1fr 1.15fr;gap:1em;width:92%;margin-top:-.5em;justify-self:start;margin-left:0}
.am-status,.am-earn{position:relative;left:auto;top:auto;bottom:auto;width:auto}
.am-earn{margin-top:1.6em}
.am-c1{top:6%}.am-c2{top:14%}
@container (max-width:300px){
  .am-earn{display:none}
  .am-row{grid-template-columns:1fr}
  .am-tr:nth-of-type(n+5){display:none}
  .am-status{width:70%}
  .am-tabs i:nth-child(3){display:none}
}
@container (max-height:300px){ .am-tr:nth-of-type(n+6){display:none} }
@container (max-height:230px){ .am-tr:nth-of-type(n+5){display:none} }


/* return flow: everything comes back to the customer's TMS */
.fback{display:flex;align-items:center;gap:18px;margin-top:20px;padding:20px 24px;border-radius:var(--r-surface);background:var(--brand-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 18%,transparent)}
.fb-t{display:flex;align-items:center;gap:10px;margin:0;font-weight:650;color:var(--brand-ink);max-width:15ch;line-height:1.25}
.fb-t .i{width:22px;height:22px;flex:none;transform:scaleX(-1)}
.fb-ln{position:relative;flex:1;min-width:24px;height:2px;background:repeating-linear-gradient(270deg,var(--brand) 0 6px,transparent 6px 12px);background-size:12px 2px;opacity:.6}
.fb-c{display:flex;gap:12px;margin:0;padding:0;list-style:none}
.fb-c li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:12px 16px;border-radius:var(--r-ctl);background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)}
.fb-c .i{grid-row:1/3;width:24px;height:24px;color:var(--brand)}
.fb-c b{font-size:.95rem;font-weight:650;color:var(--ink);line-height:1.2}
.fb-c small{font-size:.8rem;color:var(--ink-2);line-height:1.3}
@media (prefers-reduced-motion:no-preference){.fb-ln{animation:fb-dash 700ms linear infinite}}
@keyframes fb-dash{to{background-position:-12px 0}}
@media (max-width:1023px){.fback{flex-direction:column;align-items:stretch;gap:14px}.fb-t{max-width:none}.fb-ln{display:none}.fb-c{flex-direction:column}}