@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500;700&family=IBM+Plex+Sans:wght@400;600;700&display=swap');

/* Drayage  -  concrete industrial */
.ms-drayage {
  --ms-bg: #c8ccd0;
  --ms-text: #0f2438;
  --ms-muted: #4a6278;
  --ms-accent: #ff7a18;
  --ms-accent-text: #fff;
  --ms-surface: #e2e5e9;
  --ms-border: #9aa3ad;
  --ms-nav-bg: rgba(200, 204, 208, 0.96);
  --ms-display: "Teko", sans-serif;
  --ms-body: "IBM Plex Sans", sans-serif;
  --ms-hotspot-ring: rgba(255, 122, 24, 0.55);
  --ms-hotspot-radius: 0.15rem;
  --ms-concrete: #b0b5ba;
  --ms-btn-radius: 0.15rem;
  background-color: var(--ms-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

.dy-hero {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 2.5rem;
  background:
    linear-gradient(135deg, rgba(15, 36, 56, 0.06) 0%, transparent 55%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(15, 36, 56, 0.03) 8px,
      rgba(15, 36, 56, 0.03) 9px
    );
  border-bottom: 4px solid var(--ms-accent);
}

.dy-hero::after {
  content: 'PORT / GATE / YARD';
  position: absolute;
  bottom: -0.65rem;
  right: 1.25rem;
  font-family: var(--ms-display);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--ms-accent);
  background: var(--ms-bg);
  padding: 0 0.5rem;
}

.dy-hero h1 {
  font-family: var(--ms-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0 0 0.85rem;
  letter-spacing: 0.02em;
  animation: dy-crane 6s ease-in-out infinite;
}

@keyframes dy-crane {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.dy-hero p {
  color: var(--ms-muted);
  font-size: 1.05rem;
  max-width: 34rem;
  line-height: 1.6;
}

.dy-dual {
  display: grid;
  gap: 3px;
  max-width: 1140px;
  margin: 0 auto;
  background: var(--ms-text);
  box-shadow: 0 16px 48px rgba(15, 36, 56, 0.2);
}

@media (min-width: 768px) {
  .dy-dual { grid-template-columns: 1fr 1fr; }
}

.dy-gate,
.dy-yard {
  padding: 2.25rem 1.75rem;
  background: var(--ms-surface);
  position: relative;
}

.dy-gate {
  background: linear-gradient(180deg, #e8eaed 0%, var(--ms-surface) 100%);
}

.dy-gate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--ms-accent) 0 20px,
    #0f2438 20px 40px
  );
}

.dy-yard {
  background: linear-gradient(180deg, #d5d9de 0%, #c8ccd0 100%);
}

.dy-gate h2,
.dy-yard h2 {
  font-family: var(--ms-display);
  font-size: 2rem;
  color: var(--ms-accent);
  margin: 0 0 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dy-gate p,
.dy-yard > p {
  font-size: 0.92rem;
  color: var(--ms-muted);
  line-height: 1.55;
  margin: 0 0 1rem;
}

.dy-gate .ms-hotspot-wrap {
  border: 3px solid var(--ms-text);
  border-radius: 0.15rem;
  margin-top: 0.5rem;
}

.dy-yard .ms-ui-shot {
  border: 3px solid var(--ms-text);
  border-radius: 0.15rem;
  margin-bottom: 1rem;
}

.dy-facts {
  display: grid;
  gap: 1rem;
  max-width: 1140px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}

@media (min-width: 640px) {
  .dy-facts { grid-template-columns: repeat(2, 1fr); }
}

.dy-facts article {
  padding: 1.25rem;
  background: var(--ms-surface);
  border-left: 5px solid var(--ms-accent);
  box-shadow: 4px 4px 0 rgba(15, 36, 56, 0.15);
}

.dy-facts h3 {
  font-family: var(--ms-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
}

.dy-facts p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ms-muted);
}

.dy-walk {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.25rem 2.5rem;
}

.dy-walk h2 {
  font-family: var(--ms-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--ms-text);
  margin: 0 0 1.25rem;
}

.dy-walk ol {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: dy-step;
}

@media (min-width: 640px) {
  .dy-walk ol { grid-template-columns: repeat(3, 1fr); }
}

.dy-walk li {
  counter-increment: dy-step;
  padding: 1.15rem;
  background: var(--ms-surface);
  border: 2px solid var(--ms-text);
  position: relative;
}

.dy-walk li::before {
  content: counter(dy-step, decimal-leading-zero);
  position: absolute;
  top: -0.5rem;
  left: 0.75rem;
  background: var(--ms-accent);
  color: #fff;
  font-family: var(--ms-display);
  font-size: 0.9rem;
  padding: 0.1rem 0.45rem;
}

.ms-drayage .ms-www {
  max-width: 1140px;
  padding: 0 1.25rem 2rem;
}

.ms-drayage .ms-www > div {
  padding: 1rem;
  background: var(--ms-surface);
  border: 2px solid var(--ms-text);
}

.ms-drayage .ms-pullquote {
  max-width: 720px;
  margin: 2rem auto;
  border: 2px solid var(--ms-text);
  border-left: 6px solid var(--ms-accent);
  border-radius: 0;
  background: var(--ms-surface);
}

.ms-drayage .ms-face-block img {
  border-radius: 0.15rem;
  border: 2px solid var(--ms-text);
}

.ms-drayage .ms-signup {
  border-radius: 0.15rem;
  border: 2px solid var(--ms-text);
  background: var(--ms-surface);
}