/* SENTRA — landing-page sections (AXION-structure adaptation)
   Loaded only by index.html, on top of site.css. */

/* ---------- centered nav menu (matches reference layout) ---------- */
.nav-menu{justify-content:center}

/* ============================================================
   HERO — full-bleed photo. The drop slot fills the whole band;
   a navy scrim keeps the overlaid copy readable. No grid.
   ============================================================ */
.axhero{position:relative;overflow:hidden;background:var(--surface-dark);color:#fff;min-height:664px;display:flex}
.axhero-bgslot{position:absolute;inset:0;z-index:0}
.axhero-bgslot image-slot{width:100%;height:100%;display:block}
.axhero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(8,20,35,.94) 0%,rgba(8,20,35,.80) 36%,rgba(8,20,35,.46) 68%,rgba(8,20,35,.20) 100%),
    linear-gradient(0deg,rgba(8,20,35,.55) 0%,rgba(8,20,35,0) 44%)}
.axhero.scrim-subtle .axhero-scrim{background:
    linear-gradient(96deg,rgba(8,20,35,.82) 0%,rgba(8,20,35,.54) 40%,rgba(8,20,35,.18) 75%,rgba(8,20,35,.04) 100%),
    linear-gradient(0deg,rgba(8,20,35,.34) 0%,rgba(8,20,35,0) 40%)}
.axhero.scrim-strong .axhero-scrim{background:
    linear-gradient(96deg,rgba(8,20,35,.97) 0%,rgba(8,20,35,.90) 42%,rgba(8,20,35,.66) 78%,rgba(8,20,35,.42) 100%),
    linear-gradient(0deg,rgba(8,20,35,.66) 0%,rgba(8,20,35,0) 52%)}
.axhero-in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;width:100%;padding:76px 40px;pointer-events:none}
.axhero .kicker{color:var(--on-dark-soft)}
.axhero h1{font-family:var(--font-display);font-weight:700;font-size:62px;line-height:1.04;color:#fff;margin:16px 0 0;max-width:16ch}
.axhero .sub{font-weight:300;font-size:19px;line-height:1.6;color:var(--on-dark-soft);max-width:44ch;margin:22px 0 32px}
.axhero-actions{display:flex;gap:14px;flex-wrap:wrap;pointer-events:auto}
.hero-caps{display:flex;flex-wrap:wrap;align-items:center;margin-top:50px}
.hero-caps span{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;line-height:1;padding:4px 22px;border-left:1px solid rgba(255,255,255,.24)}
.hero-caps span:first-child{padding-left:0;border-left:0}

/* navy-styled image-slot empty state (hero + bento + customs) */
.axhero-bgslot image-slot::part(frame),
.bento-card image-slot::part(frame),
.cust-media image-slot::part(frame){background:linear-gradient(135deg,#0d2c4c,#16436f)}
.axhero-bgslot image-slot::part(empty),
.bento-card image-slot::part(empty),
.cust-media image-slot::part(empty){color:rgba(255,255,255,.55)}
.axhero-bgslot image-slot::part(ring),
.bento-card image-slot::part(ring),
.cust-media image-slot::part(ring){border-color:rgba(255,255,255,.28)}

/* ============================================================
   LOGISTICS SOLUTIONS — bento grid of photo cards w/ overlay
   ============================================================ */
.sol-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:40px}
.sol-head h2{font-family:var(--font-display);font-weight:700;font-size:44px;line-height:1.08;color:var(--ink);margin:14px 0 0}
.sol-head .kicker{color:var(--primary)}
.sol-head .btn{flex:none}

.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:300px 248px;gap:20px}
.bento-card{position:relative;overflow:hidden;background:var(--surface-dark);cursor:pointer}
.bento-card image-slot{position:absolute;inset:0;width:100%;height:100%;display:block}
.bento-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(7,18,32,.86) 0%,rgba(7,18,32,.32) 42%,rgba(7,18,32,.05) 70%)}
.bento-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 26px 24px;pointer-events:none;z-index:2}
.bento-cap .b-kicker{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel-1)}
.bento-cap h3{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1.12;color:#fff;margin:9px 0 0}
.bento-cap p{font-weight:300;font-size:14px;line-height:1.5;color:var(--on-dark-soft);margin:8px 0 0;max-width:46ch}
.bento-card .b-arrow{position:absolute;top:22px;right:22px;width:40px;height:40px;border-radius:9999px;
  border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;color:#fff;
  z-index:2;opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,background .18s ease}
.bento-card .b-arrow .icon{width:18px;height:18px}
.bento-card:hover .b-arrow{opacity:1;transform:none;background:var(--primary);border-color:var(--primary)}
.bento-card:hover .bento-scrim{background:linear-gradient(0deg,rgba(7,18,32,.9) 0%,rgba(7,18,32,.4) 48%,rgba(7,18,32,.1) 75%)}
/* small cards: tighter type */
.bento-card.sm .bento-cap h3{font-size:20px}
.bento-card.sm .bento-cap p{font-size:13px}

/* uniform-grid variant (tweak) */
.bento.uniform{grid-template-columns:repeat(3,1fr);grid-template-rows:280px 280px}
.bento.uniform .bento-card{grid-area:auto !important}

/* ============================================================
   CUSTOMS & DOCUMENTATION — image + 2x2 feature cells
   ============================================================ */
.customs{background:var(--surface-soft)}
.cust-head{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin-bottom:48px}
.cust-head .kicker{color:var(--primary)}
.cust-head h2{font-family:var(--font-display);font-weight:700;font-size:42px;line-height:1.08;color:var(--ink);margin:14px 0 0;max-width:16ch}
.cust-lede{font-weight:300;font-size:17px;line-height:1.6;color:var(--body);margin:0;padding-bottom:8px}
.cust-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:stretch}
.cust-media{position:relative}
.cust-media image-slot{width:100%;height:100%;min-height:420px;display:block}
.cust-cells{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.cust-cell{padding:26px 0;border-top:1px solid var(--hairline-strong)}
.cust-cell:nth-child(1),.cust-cell:nth-child(2){padding-top:0;border-top:0}
.cust-cell .cnum{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:1.5px;color:var(--muted)}
.cust-cell h4{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink);margin:12px 0 0}
.cust-cell p{font-weight:300;font-size:14px;line-height:1.55;color:var(--body);margin:9px 0 16px}

/* ============================================================
   NETWORK / CORRIDORS — lane list (left) + dark photo panel (right)
   ============================================================ */
.net-head{max-width:760px}
.net-head .kicker{color:var(--primary)}
.net-head p{font-weight:300;font-size:18px;line-height:1.55;color:var(--body);margin:16px 0 0;max-width:62ch}
.net-grid{display:grid;grid-template-columns:1.02fr 1.18fr;gap:56px;align-items:stretch}

/* lane list */
.net-lanes{display:flex;flex-direction:column}
.lanes-list{border-top:1px solid var(--hairline-strong)}
.net-lane{display:flex;align-items:center;gap:18px;padding:17px 0;border-bottom:1px solid var(--hairline)}
.net-lane-ic{flex:none;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-soft);color:var(--primary)}
.net-lane-ic .icon{width:21px;height:21px}
.net-lane-body{min-width:0}
.net-lane .route{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.15;color:var(--ink)}
.net-lane .mode{font-weight:300;font-size:14px;line-height:1.35;color:var(--muted);margin-top:3px}
.net-coverage{font-weight:300;font-size:15px;line-height:1.6;color:var(--body);margin:26px 0 0;
  padding-left:18px;border-left:3px solid var(--primary)}

/* dark photo panel */
.net-panel{position:relative;overflow:hidden;background:var(--surface-dark);min-height:520px}
.net-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.net-panel-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(7,18,32,.9) 0%,rgba(7,18,32,.35) 38%,rgba(7,18,32,.05) 66%)}
.net-panel-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 34px 32px;color:#fff;z-index:2}
.net-panel-cap .k{font-family:var(--font-display);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel-1);font-weight:700}
.net-panel-cap .t{font-family:var(--font-display);font-weight:700;font-size:27px;line-height:1.14;margin-top:10px;max-width:18ch}
.net-actions{margin-top:40px}

@media(max-width:1040px){
  .net-grid{grid-template-columns:1fr;gap:32px}
  .net-panel{min-height:380px}
}
@media(max-width:620px){
  .net-panel{min-height:300px}
  .net-panel-cap .t{font-size:22px}
}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .axhero{min-height:560px}
  .axhero h1{font-size:44px;max-width:18ch}
  .axhero-in{padding:60px 40px}
  .cust-head,.cust-grid{grid-template-columns:1fr;gap:32px}
  .cust-media image-slot{min-height:300px}
  .bento{grid-template-columns:repeat(2,1fr);grid-template-rows:auto;gap:16px}
  .bento-card{grid-area:auto !important;min-height:240px}
}
@media(max-width:620px){
  .sol-head{flex-direction:column;align-items:flex-start}
  .bento{grid-template-columns:1fr}
  .cust-cells{grid-template-columns:1fr}
  .cust-cell:nth-child(2){padding-top:26px;border-top:1px solid var(--hairline-strong)}
  .axhero h1{font-size:34px}
  .hero-caps{margin-top:32px}
  .hero-caps span{padding:4px 12px;font-size:11px;letter-spacing:1px}
}