/* Constructions, Logistics, Agriculture pages */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0 2rem; }
.tile { margin: 0; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.tile-media { overflow: hidden; height: 20rem; background: var(--pine); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); }
.tile figcaption { padding: 1rem 1.15rem 1.3rem; }
.tile h3 { margin: 0 0 .3rem; }
.tile p { margin: 0; color: var(--ink-soft); }
.tiles .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tiles .tile:last-child:nth-child(odd) .tile-media { height: 24rem; }

.strip { background: var(--pine); margin: 0 0 2.5rem; overflow: hidden; }
.strip-svg { display: block; width: 100%; height: 8rem; }
.strip-svg * { fill: none; stroke: #9cc7ff; stroke-width: 2; }
.strip-svg .ground, .strip-svg .lane { stroke: rgba(156,199,255,.55); stroke-dasharray: 10 10; }
.strip-svg .tarmac { fill: rgba(255,255,255,.07); stroke: none; }
.strip-svg .wall rect, .strip-svg .crane rect, .strip-svg .load, .strip-svg .veh rect, .strip-svg .veh path, .strip-svg .roadroller rect { fill: rgba(24,119,242,.35); }
.strip-svg .veh circle, .strip-svg .roadroller circle { fill: #f4f8ff; stroke: none; }
.strip-svg .sun2 { fill: #e6f0ff; stroke: none; }
.strip-svg .stalk circle { fill: #e6f0ff; stroke: none; }
.strip-svg .water { stroke: #5aa2ff; stroke-width: 3; }

.credits { margin: 0 0 4rem; color: var(--ink-soft); font-size: .85rem; }
.credits summary { cursor: pointer; }
.credits ul { padding-left: 1.1rem; }

@media (prefers-reduced-motion: no-preference) {
  /* Photos drift continuously, each in its own direction */
  .tile img { animation: pan-a 20s ease-in-out infinite alternate; }
  .t1 img { animation-name: pan-b; animation-duration: 24s; }
  .t2 img { animation-name: pan-c; animation-duration: 22s; }
  .t3 img { animation-name: pan-d; animation-duration: 26s; }
  @keyframes pan-a { from { transform: scale(1.08) translate(-2%, 0); } to { transform: scale(1.2) translate(2%, -2%); } }
  @keyframes pan-b { from { transform: scale(1.2) translate(2%, 2%); } to { transform: scale(1.08) translate(-2%, 0); } }
  @keyframes pan-c { from { transform: scale(1.1) translate(0, -2%); } to { transform: scale(1.22) translate(-2%, 2%); } }
  @keyframes pan-d { from { transform: scale(1.22) translate(-2%, 1%); } to { transform: scale(1.1) translate(2%, -1%); } }
  .tile { transition: transform .35s ease, box-shadow .35s ease; }
  .tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(13,27,46,.14); }

  /* Construction: crane jib swings, load lifts, rollers move */
  .crane .jib { transform-box: fill-box; transform-origin: 60% 50%; animation: jib 9s ease-in-out infinite alternate; }
  .crane .load, .crane .cable { animation: lift 4.5s ease-in-out infinite alternate; }
  .strip-svg .cable { transform-origin: top; }
  .roadroller { animation: roll 12s ease-in-out infinite alternate; }
  .wall rect { animation: lay 6s ease-in-out infinite alternate; animation-delay: calc(var(--k, 0) * .2s); }
  @keyframes jib { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
  @keyframes lift { from { transform: translateY(0); } to { transform: translateY(-22px); } }
  @keyframes roll { from { transform: translateX(-180px); } to { transform: translateX(80px); } }
  @keyframes lay { from { opacity: .3; } to { opacity: 1; } }

  /* Logistics: vehicles drive along the road, lane dashes scroll */
  .strip-svg .lane { animation: lane 2.4s linear infinite; }
  .veh { animation: drive 11s linear infinite; }
  .v2 { animation-duration: 8s; animation-delay: -3s; }
  .v3 { animation-duration: 14s; animation-delay: -6s; }
  @keyframes drive { from { transform: translateX(-120px); } to { transform: translateX(900px); } }
  @keyframes lane { to { stroke-dashoffset: -20; } }

  /* Agriculture: stalks sway, sun pulses, water ripples */
  .stalk { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.25s); }
  .sun2 { animation: sunpulse 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .water { animation: ripple 5s linear infinite; }
  @keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
  @keyframes sunpulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.2); opacity: 1; } }
  @keyframes ripple { to { transform: translateX(-100px); } }
}
@media (max-width: 860px) {
  .tiles { grid-template-columns: 1fr; }
  .tile-media, .tiles .tile:last-child:nth-child(odd) .tile-media { height: 15rem; }
}

.site-nav { gap: .9rem; }
.site-nav a { font-size: .9rem; }
.solution img { animation: none; }