/* One focused polish layer — approved artwork and all 3D motion are unchanged */
:root{
  --polish-motion:180ms;
  --polish-ease:cubic-bezier(.2,.7,.3,1);
  --polish-surface:#fffdf6;
  --polish-contact-line:#50717a;
  --content-gutter:32px;
}

/* A quiet display stand lets the miniature carry the brick identity */
.hero-art{
  display:block;
  aspect-ratio:auto;
  overflow:hidden;
  border-color:#d1dbc9;
  box-shadow:0 4px 0 #cad8c4,0 22px 44px #173e4912;
}
.hero-art::before,.hero-art::after{display:none}
.site-header .brand{--brand-width:288px;flex:0 0 var(--brand-width);max-width:288px;min-height:44px;gap:0}
/* Reference artwork stays vector-sharp, with no CSS resampling or effects */
.site-header .brand img.brand-logo{filter:none;transform:none;opacity:1}
.wordmark-flat{color:#f5bf2f}
.wordmark-world{color:#153e49}
.wordmark-logistics{color:#6f7f80}
.hero h1{margin-top:0}
.hero-preview{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border-radius:inherit;
  overflow:hidden;
}
.hero-preview:focus-visible{outline-offset:-6px}
.hero-art figcaption{
  position:static;
  transform:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 16px;
  padding:12px 20px;
  border-top:1px solid #d1dbc9;
  
  
  white-space:normal;
}
.hero-art figcaption a{color:var(--ink);min-height:28px;display:inline-flex;align-items:center}
.hero-preview:focus-visible~figcaption a{text-decoration:underline;text-underline-offset:5px}
.hero{gap:32px 48px;padding-left:var(--content-gutter);padding-right:var(--content-gutter)}
.section-shell,.services.section-shell{padding-left:var(--content-gutter);padding-right:var(--content-gutter)}
.site-footer{padding-left:max(var(--content-gutter),calc((100vw - var(--max))/2 + var(--content-gutter)));padding-right:max(var(--content-gutter),calc((100vw - var(--max))/2 + var(--content-gutter)))}
.hero-intro{max-width:38ch}
.hero-art .intro-story{
  position:relative;
  width:100%;
  max-width:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin:0;
  padding:26px 30px 24px 42px;
  border:0;
  border-radius:0;
  background:var(--ink);
  box-shadow:none;
  color:#fffdf6;
}
.hero-art .intro-story::before{
  content:'';
  position:absolute;
  left:24px;
  top:27px;
  bottom:25px;
  width:6px;
  border-radius:2px;
  background:var(--gold);
  box-shadow:0 3px 0 #a97e13;
}
.intro-story h2{max-width:24ch;margin:0;color:#fffdf6}
.intro-story p{max-width:38ch;margin:0;color:#cad8d4;text-wrap:balance}
.hero h1 span{position:relative;display:inline-block;isolation:isolate}
.hero h1 span::after{
  content:'';
  position:absolute;
  display:block;
  z-index:-1;
  left:-.035em;
  right:-.06em;
  bottom:.06em;
  height:.13em;
  border-radius:2px;
  background:var(--gold);
  opacity:.9;
}

@media(min-width:1101px){
  .hero{grid-template-columns:minmax(0,.84fr) minmax(560px,1.16fr)}
  .hero-copy{max-width:560px}
}

/* Temporarily hidden content must stay hidden under every legacy breakpoint */
.site-header .site-nav[hidden],.site-header .menu-toggle[hidden],.hero-art figcaption[hidden]{display:none!important}

.hero .hero-intro{max-width:38ch;text-wrap:balance}

/* Related labels belong to one cluster, never opposite edges of the section */
.section-top-connected{justify-content:flex-start;flex-wrap:wrap;gap:8px 14px}
.section-top-connected .eyebrow,.section-top-connected .section-meta{}
.section-top-connected .section-meta{display:inline-block;padding-left:14px;border-left:2px solid var(--gold);color:var(--blue);}
.carriers{
  margin-top:64px;
  padding:32px 32px 28px;
  border:1px solid transparent;
  border-radius:20px;
  background:#edf2e7;
  box-shadow:none;
}
.carriers .carrier-heading{margin-bottom:18px;padding-left:16px;border-left:5px solid var(--gold);}
.carrier-heading span{color:var(--blue)}
.carrier-names{gap:8px 22px}

/* One compact heading, then the two operations rather than repeated promises */
.services-heading{margin-top:24px}
.services-heading h2{}
.service-pair{margin-top:28px}
.service-item h3{}
.benefit-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  min-height:64px;
  padding-top:16px;
}
.benefit-link>span:first-child{display:grid;gap:2px;}
.benefit-link strong{}
.benefit-link .benefit-action{text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
.service-play{align-items:center;justify-content:center;gap:9px;min-height:44px;}
.service-scene[data-ready="true"] .service-play{display:inline-flex}
.city-play{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.service-play::before,.city-play::before{
  content:'';
  width:0;
  height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:8px solid currentColor;
  flex-shrink:0;
}
.service-play[aria-pressed="true"]::before,.city-play[aria-pressed="true"]::before{
  width:9px;
  height:11px;
  border:0;
  background:linear-gradient(to right,currentColor 0 3px,transparent 3px 6px,currentColor 6px);
}
.reuse-world{
  /* Enlarge the real render surface, never a low-resolution CSS bitmap. */
  width:min(108%,calc(100vw - 24px));
  margin-left:calc((100% - min(108%,100vw - 24px))/2);
  border-color:#d6dfcf;
  box-shadow:0 12px 28px #173e4908;
}
/* Supporting information sits on the page; primary service cards keep relief. */
.about .coverage{padding:22px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.city-playback{
  margin-top:16px;
  padding:14px 16px;
  border:1px solid #cad7c8;
  border-radius:14px;
  background:#fffdf6;
  box-shadow:0 4px 0 #ced9ca;
}
.city-playback button{flex-shrink:0}
.city-contact{padding-left:16px}

.hero-truck{
  transition:transform 420ms var(--polish-ease),filter 420ms var(--polish-ease);
  transform:scale(1.001);
}
@media(hover:hover){
  .hero-preview:hover .hero-truck{transform:scale(1.018);filter:saturate(1.04) contrast(1.015)}
}

/* The same restrained affordance for every inquiry link — no decorative arrows */
.hero-secondary,.text-link,.city-contact,.call-link,.hero-art figcaption a,.benefit-link{
  transition:color var(--polish-motion) var(--polish-ease),text-decoration-color var(--polish-motion) var(--polish-ease);
  text-decoration-thickness:1px;
  text-underline-offset:5px;
}
.hero-secondary:focus-visible,.text-link:focus-visible,.city-contact:focus-visible,
.hero-art figcaption a:focus-visible,.benefit-link:focus-visible{
  color:#125779;
  text-decoration:underline;
}
.call-link:focus-visible{color:var(--gold)}
@media(hover:hover){
  .hero-secondary:hover,.text-link:hover,.city-contact:hover,.hero-art figcaption a:hover,.benefit-link:hover{color:#125779;text-decoration:underline}
  .call-link:hover{color:var(--gold);text-decoration:underline}
}

/* Static preparation labels, not filters or a form */
.shipment-prep{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin:32px 0 0;
  padding:20px 0;
  border-top:1px solid var(--polish-contact-line);
  border-bottom:1px solid var(--polish-contact-line);
}
.shipment-prep li{
  position:relative;
  padding:0 24px;
  
  
  color:#d5e2dc;
  
  border-left:1px solid var(--polish-contact-line);
}
.shipment-prep li:first-child{padding-left:0;border-left:0}
.contact-people{margin-top:28px}
.contact-heading>p{max-width:30ch}

@media(max-width:900px){
  :root{--content-gutter:24px}
  .site-header .brand{--brand-width:264px;flex-basis:var(--brand-width);max-width:264px}
  .hero{gap:26px}
  .hero-art{max-width:760px}
  .services-heading h2{}
  .shipment-prep li{padding:0 16px;}
  .carriers{margin-top:48px;padding:28px 24px 24px}
}
@media(max-width:640px){
  :root{--content-gutter:20px}
  .site-header .brand{--brand-width:204px;flex-basis:var(--brand-width);max-width:204px}
  .hero{padding-top:28px;padding-bottom:22px;gap:24px}
  .hero .hero-intro{}
  .hero-art figcaption{padding:10px 14px;gap:6px 12px;}
  .hero-art .intro-story{padding:22px 20px 20px 34px}
  .hero-art .intro-story::before{left:19px;top:22px;bottom:22px;width:5px}
  .intro-story p{max-width:none;margin:0}
  .section-top-connected{gap:6px 10px}
  .section-top-connected .eyebrow,.section-top-connected .section-meta{}
  .section-top-connected .section-meta{padding-left:10px}
  .carriers .carrier-heading{padding-left:12px;border-left-width:4px;margin-bottom:12px}
  .carriers{margin-top:38px;padding:24px 16px 20px;border-radius:16px}
  .carrier-names{gap:8px 10px}
  .services.section-shell{padding-top:36px}
  .services-heading{margin-top:18px}
  .services-heading h2{}
  .service-pair{margin-top:22px;gap:24px}
  .service-item h3{}
  .service-item{padding:22px}
  .benefit-link{gap:12px}
  .benefit-link strong{}
  .benefit-link .benefit-action{}
  .shipment-prep{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;padding:18px 0;margin-top:24px}
  .shipment-prep li{padding:0 0 0 16px;}
  .shipment-prep li:nth-child(odd){padding-left:0;border-left:0}
  .contact-people{margin-top:24px}
  .city-playback{padding:12px;gap:10px}
  .city-contact{width:100%;margin-left:0;padding:8px 2px 2px}
}
@media(max-width:360px){
  .site-header .brand{--brand-width:186px;flex-basis:var(--brand-width);max-width:186px}
}
@media(prefers-reduced-motion:reduce){
  .hero-secondary,.text-link,.city-contact,.call-link,.hero-art figcaption a,.benefit-link{transition:none}
  .hero-truck{transition:none;transform:none!important;filter:none!important}
}

/* Feedback belongs to a real action, while artwork and live scenes stay still. */
.header-contact,.button{
  --control-edge:#c49a26;
  --control-shadow:#153e4914;
  transition:background var(--polish-motion) var(--polish-ease),
    box-shadow var(--polish-motion) var(--polish-ease),
    transform 120ms var(--polish-ease);
  box-shadow:0 3px 0 var(--control-edge),0 5px 12px var(--control-shadow),
    inset 0 1px 0 #ffffff50;
}
.button-dark{--control-edge:#092a34;--control-shadow:#153e4920}
@media(hover:hover) and (pointer:fine){
  .header-contact:hover,.button:not(:disabled):hover{
    transform:translateY(-1px);
    box-shadow:0 4px 0 var(--control-edge),0 8px 16px var(--control-shadow),
      inset 0 1px 0 #ffffff60;
  }
}
.header-contact:active,.button:not(:disabled):active{
  transform:translateY(2px);
  box-shadow:0 1px 0 var(--control-edge),0 2px 5px var(--control-shadow);
}
.button:disabled,.button:disabled:hover,.button:disabled:active{
  transform:none;
  box-shadow:none;
  cursor:default;
}
.header-contact:focus-visible,.button:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:5px;
}
.contact .button:focus-visible{outline-color:#fffdf6}
.benefit-link:focus-visible{outline-offset:-3px;border-radius:4px}
.benefit-link .benefit-action{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:8px;
  text-decoration:none;
  transition:background var(--polish-motion) var(--polish-ease),
    border-color var(--polish-motion) var(--polish-ease);
}
.benefit-link:hover .benefit-action,.benefit-link:focus-visible .benefit-action{
  background:#fffdf680;
  border-color:#153e4924;
  text-decoration:underline;
}
.benefit-link:active .benefit-action{background:#fffdf6}
.service-item{
  box-shadow:0 4px 0 #bacfd0,0 14px 28px #153e4908;
}
.export-item{box-shadow:0 4px 0 #d9cdab,0 14px 28px #153e4908}
.service-item,.carrier-brick{transform:none;will-change:auto}
.reuse-heading{margin-top:24px}
@media(prefers-reduced-motion:reduce){
  .header-contact,.button,.benefit-link .benefit-action{transition:none}
  .header-contact:hover,.header-contact:active,.button:hover,.button:active{transform:none}
}