/* ===== Where we are: map + office cards ===== */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.network { position: relative; overflow: hidden; }
.network::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 380px at 82% 30%, rgba(34,78,158,.10), transparent 70%),
    radial-gradient(520px 420px at 12% 80%, rgba(34,78,158,.06), transparent 70%);
}
.network .container { position: relative; }

.office-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 32px; align-items: stretch;
}

/* ---- Map ---- */
.map-panel {
  position: relative; border-radius: 20px; padding: 20px;
  background: linear-gradient(160deg, #ffffff, #eaf1fb);
  border: 1px solid rgba(10,42,102,.07);
  display: flex; align-items: center; justify-content: center; min-height: 420px;
}
.map-panel svg { width: 100%; height: 100%; max-height: 640px; overflow: visible; }
.map-panel .dot { fill: #3b4a68; }
.route-base { fill: none; stroke: rgba(34,78,158,.22); stroke-width: 1.5; }
.route-flow {
  fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 3 9; animation: flow 1.4s linear infinite; opacity: .75;
  transition: stroke-width .3s, opacity .3s, filter .3s;
}
@keyframes flow { to { stroke-dashoffset: -24; } }
.route-dot { fill: #224e9e; filter: drop-shadow(0 0 6px var(--orange)); }
.map-panel.is-linked .route-flow { stroke-width: 3.4; opacity: 1; filter: drop-shadow(0 0 6px rgba(34,78,158,.9)); }

.pin { cursor: pointer; outline: none; }
.pin .core { fill: var(--orange); transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.pin .halo { fill: none; stroke: var(--orange); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite; }
.pin .halo.h2 { animation-delay: 1.2s; }
.pin .glow { fill: rgba(34,78,158,.18); transform-box: fill-box; transform-origin: center; transform: scale(.4); opacity: 0; transition: .35s; }
.pin text { fill: #cbd5e1; font: 600 13px 'Space Grotesk', sans-serif; transition: fill .3s; }
.pin text.sub { fill: var(--text-dim); font: 500 10px 'Inter', sans-serif; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.pin.is-active .core { transform: scale(1.9); }
.pin.is-active .glow { transform: scale(1); opacity: 1; }
.pin.is-active text { fill: #0a2a66; }
.pin:focus-visible .core { stroke: #0a2a66; stroke-width: 2; }

.map-chip {
  position: absolute; left: 20px; bottom: 20px; display: flex; gap: 10px; align-items: center;
  padding: 8px 14px; border-radius: 999px; font-size: .78rem; color: var(--text-muted);
  background: rgba(10,42,102,.05); border: 1px solid rgba(10,42,102,.08); backdrop-filter: blur(8px);
}
.map-chip i { color: var(--orange); }
.map-chip b { color: var(--text); font-weight: 600; }

/* ---- Office cards ---- */
.office-stack { display: grid; gap: 20px; }
.office {
  --mx: 50%; --my: 50%;
  position: relative; border-radius: 20px; padding: 26px 26px 22px; isolation: isolate;
  background: linear-gradient(145deg, rgba(10,42,102,.07), rgba(10,42,102,.02));
  border: 1px solid rgba(10,42,102,.08);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s;
}
/* spotlight following the pointer */
.office::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(34,78,158,.14), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
/* orange light sweeping around the border */
.office::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 62%, rgba(34,78,158,.15) 72%, var(--orange) 92%, #ffd2ad 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s; animation: spin 2.8s linear infinite;
}
@keyframes spin { to { --ang: 360deg; } }
.office:hover, .office.is-active, .office:focus-within {
  transform: translateY(-6px);
  border-color: rgba(34,78,158,.25);
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.7), 0 0 40px -12px rgba(34,78,158,.35);
}
.office:hover::before, .office.is-active::before, .office:focus-within::before,
.office:hover::after, .office.is-active::after { opacity: 1; }

.office-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.office-kind { display: block; font-size: .72rem; letter-spacing: .14em; color: var(--orange); margin-bottom: 4px; }
.office h3 { font-size: 1.5rem; letter-spacing: -.01em; }

.status {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  color: #15803d; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: live 1.8s infinite; }
.status.closed { color: #b45309; background: rgba(180,83,9,.1); border-color: rgba(180,83,9,.25); }
.status.closed::before { animation: none; }
@keyframes live { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

.office-time { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 4px; flex-wrap: wrap; }
.office-time .clock { font: 600 1.7rem 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.office-time .zone { font-size: .8rem; color: var(--text-dim); }
.office-note { font-size: .82rem; color: var(--text-muted); margin-bottom: 18px; }

.addr { display: flex; gap: 12px; color: var(--text-muted); font-size: .92rem; margin-bottom: 14px; }
.addr i { color: var(--orange); margin-top: 5px; }
.addr .u {
  background: linear-gradient(var(--orange), var(--orange)) 0 100% / 0 2px no-repeat;
  padding-bottom: 3px; transition: background-size .5s cubic-bezier(.2,.8,.2,1), color .3s;
}
.office:hover .addr .u, .office.is-active .addr .u { background-size: 100% 2px; color: var(--text); }

.line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 9px 12px; margin: 0 0 6px -12px; width: calc(100% + 12px);
  border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: .92rem;
  text-align: left; cursor: pointer; transition: background .25s;
}
.line:hover, .line:focus-visible { background: rgba(10,42,102,.06); outline: none; }
.line .lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.line .lead i { color: var(--orange); width: 16px; text-align: center; }
.line .lead span { overflow-wrap: anywhere; }
.line .cp { font-size: .75rem; color: var(--text-dim); display: inline-flex; gap: 6px; align-items: center; transition: color .25s; white-space: nowrap; }
.line:hover .cp { color: var(--text-muted); }
.line.done .cp { color: #15803d; }

.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.act {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px;
  border-radius: 12px; border: 1px solid rgba(10,42,102,.08); background: rgba(10,42,102,.03);
  color: var(--text); font: 500 .78rem 'Inter', sans-serif; cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s, color .25s;
}
.act i { font-size: 1.05rem; color: var(--orange); transition: transform .3s, color .25s; }
.act:hover, .act:focus-visible {
  background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-2px); outline: none;
}
.act:hover i, .act:focus-visible i { color: #fff; animation: hop .5s ease; }
.act.done { background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.4); color: #15803d; }
.act.done i { color: #15803d; }
@keyframes hop { 30% { transform: translateY(-5px) scale(1.15); } 60% { transform: translateY(1px); } }
.office:hover .addr i { animation: hop .6s ease; }

.info-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.info-bar .chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px;
  font-size: .85rem; color: var(--text-muted);
  background: rgba(10,42,102,.04); border: 1px solid rgba(10,42,102,.08);
  transition: border-color .3s, transform .3s;
}
.info-bar .chip:hover { border-color: rgba(34,78,158,.5); transform: translateY(-2px); }
.info-bar .chip i { color: var(--orange); }
.info-bar .chip b { color: var(--text); font-weight: 600; }

@media (max-width: 992px) {
  .office-layout { grid-template-columns: 1fr; }
  .map-panel { min-height: 0; padding: 14px; order: -1; }
  .map-panel svg { max-height: 360px; }
}
@media (max-width: 600px) {
  .office { padding: 22px 18px 18px; }
  .actions { grid-template-columns: repeat(2, 1fr); }
  .act { flex-direction: row; justify-content: center; padding: 15px 10px; font-size: .9rem; min-height: 52px; }
  .line { padding: 14px 12px; }
  .info-bar .chip { width: 100%; }
}
@media (hover: none) { .office:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .route-flow, .pin .halo, .office::before, .status::before { animation: none; }
  .office, .act, .addr .u { transition: none; }
  .route-dot { display: none; }
}
@media (max-width: 600px) {
  .pin text { font-size: 20px; }
  .pin .core { r: 8px; }
}

/* Other ports: quiet markers, only Dhaka and Chattogram are highlighted */
.port { pointer-events: none; }
.port circle { fill: #ffffff; stroke: #64748b; stroke-width: 1.5; }
.port text { fill: #64748b; font: 500 10.5px 'Inter', sans-serif; }
@media (max-width: 600px) { .port text { font-size: 15px; } .port circle { r: 4px; } }

/* ===== Live air + sea traffic ===== */
.map-panel { flex-direction: column; gap: 10px; overflow: hidden; padding: 14px; }
.map-panel svg { height: auto; max-height: 700px; }
.map-chip { position: static; align-self: center; }
#sea, #airways, #ships, #planes { pointer-events: none; }

.wave { fill: none; stroke: rgba(34,78,158,.3); stroke-width: 1.3; stroke-linecap: round; animation: wave 3.6s ease-in-out infinite; }
@keyframes wave { 0%, 100% { opacity: .15; transform: translateX(0); } 50% { opacity: .85; transform: translateX(6px); } }
.sea-label { fill: rgba(34,78,158,.55); font: italic 600 10px 'Inter', sans-serif; letter-spacing: .32em; }
.anchorage { fill: rgba(34,78,158,.05); stroke: rgba(34,78,158,.3); stroke-width: 1.2; stroke-dasharray: 4 5; animation: flow 6s linear infinite; }
.anchorage-label { fill: rgba(34,78,158,.6); font: 600 8.5px 'Inter', sans-serif; letter-spacing: .14em; text-anchor: middle; }

.air-arc { fill: none; stroke: rgba(34,78,158,.22); stroke-width: 1.2; stroke-dasharray: 2 6; stroke-linecap: round; transition: stroke .5s, stroke-width .5s; }
.air-arc.live { stroke: rgba(235,38,52,.6); stroke-width: 1.6; }
.air-dot { fill: #fff; stroke: #224e9e; stroke-width: 1.6; }
.air-label { fill: #224e9e; font: 600 10.5px 'Inter', sans-serif; }

.plane path { fill: #eb2634; stroke: #fff; stroke-width: .6; }
.plane-trail { fill: none; stroke: rgba(235,38,52,.55); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ship-trail { fill: none; stroke: rgba(34,78,158,.28); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hull-body { fill: #224e9e; }
.hull-box.a { fill: #eb2634; } .hull-box.b { fill: #6b9bf0; } .hull-box.c { fill: #eb2634; }
.hull-bridge { fill: #0a2a66; }
.ship-ripple { fill: none; stroke: rgba(34,78,158,.55); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: ripple 1.8s ease-out infinite; }
@keyframes ripple { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.anchor-ico { fill: none; stroke: #0a2a66; stroke-width: 1.5; stroke-linecap: round; animation: drop .6s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes drop { from { transform: translateY(-7px); opacity: 0; } }
.land-ring { fill: none; stroke: #eb2634; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: land 1s ease-out forwards; }
.berth-ring { fill: none; stroke: #224e9e; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: land 1s ease-out forwards; }
@keyframes land { from { transform: scale(.3); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }

@media (max-width: 992px) { .map-panel svg { max-height: 480px; } }
@media (max-width: 600px) { .air-label { font-size: 15px; } .sea-label { font-size: 14px; } .anchorage-label { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .wave, .anchorage, .ship-ripple, .anchor-ico { animation: none; } }

/* map labels readable on the light panel */
.pin text { fill: #224e9e; }
.pin.is-active text { fill: #0a2a66; }

/* ======================================================================
   Office cards v2 + info tiles
   ====================================================================== */
.office-stack { gap: 22px; }
.oc {
  --tx: 0deg; --ty: 0deg;
  padding: 28px 26px 24px; border-radius: 26px; background: #fff; border: 1px solid #dbe5f4;
  box-shadow: 0 22px 50px -30px rgba(10,42,102,.45);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transform: perspective(1100px) rotateX(var(--tx)) rotateY(var(--ty));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s;
}
.oc:hover, .oc.is-active, .oc:focus-within {
  transform: perspective(1100px) translateY(-6px) rotateX(var(--tx)) rotateY(var(--ty));
  border-color: rgba(34,78,158,.35);
  box-shadow: 0 34px 70px -28px rgba(10,42,102,.5), 0 0 0 4px rgba(59,130,246,.08);
}
.oc-bar { position: absolute; left: 0; top: 0; height: 4px; width: 34%; border-radius: 26px 26px 0 0; background: linear-gradient(90deg, #0a2a66, #3b82f6); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.oc:hover .oc-bar, .oc.is-active .oc-bar { width: 100%; }
.oc-deco { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: -1; }
.oc-code {
  position: absolute; right: 14px; top: 62px; font: 700 6.6rem/1 'Space Grotesk', sans-serif; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(34,78,158,.11); transition: transform .7s cubic-bezier(.2,.8,.2,1), -webkit-text-stroke-color .4s;
}
.oc:hover .oc-code, .oc.is-active .oc-code { transform: translateX(-12px); -webkit-text-stroke-color: rgba(34,78,158,.26); }
.oc-dots { position: absolute; right: -10px; bottom: -10px; width: 170px; height: 130px; opacity: .8;
  background-image: radial-gradient(rgba(34,78,158,.2) 1.3px, transparent 1.5px); background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(135deg, transparent 35%, #000); mask-image: linear-gradient(135deg, transparent 35%, #000); }

.oc-head { align-items: flex-start; }
.oc-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #eaf1fb; color: #224e9e; font: 600 .7rem 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.oc-tag i { font-size: .72rem; }
.oc h3 { margin-top: 12px; font: 700 2rem 'Space Grotesk', sans-serif; letter-spacing: -.02em; color: #0a2a66; }

.oc-clock { display: flex; align-items: center; gap: 16px; margin: 22px 0 14px; padding: 14px 18px; border-radius: 20px; background: linear-gradient(135deg, #f3f7fd, #e8f0fc); border: 1px solid #dbe5f4; }
.aclock { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 6px 10px rgba(34,78,158,.25)); }
.aclock .face { fill: #fff; stroke: #224e9e; stroke-width: 2; }
.aclock line { stroke-linecap: round; }
.aclock .hh, .aclock .mh { stroke: #0a2a66; stroke-width: 2.4; }
.aclock .sh { stroke: #eb2634; stroke-width: 1.2; }
.aclock .pivot { fill: #eb2634; }
.oc-time .clock { display: block; font: 700 1.75rem 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; color: #0a2a66; line-height: 1.1; }
.oc-time .zone { display: block; margin-top: 3px; font-size: .75rem; color: var(--text-dim); }
.oc-clock .office-note { margin: 0 0 0 auto; text-align: right; font-size: .8rem; color: var(--text-muted); max-width: 120px; line-height: 1.35; }

.oc-ico { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: .95rem; color: #fff;
  background: linear-gradient(135deg, #224e9e, #3b82f6); box-shadow: 0 10px 20px -10px rgba(34,78,158,.8); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.oc-addr, .line {
  display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 10px; padding: 11px 14px; border-radius: 18px; text-align: left;
  border: 1px solid #e3ecf8; background: #fff; color: var(--text); font: inherit; cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.oc-addr:hover, .line:hover, .oc-addr:focus-visible, .line:focus-visible { background: #f3f7fd; border-color: rgba(34,78,158,.35); transform: translateX(4px); box-shadow: 0 10px 24px -16px rgba(10,42,102,.5); outline: none; }
.oc-addr:hover .oc-ico, .line:hover .oc-ico { transform: rotate(-8deg) scale(1.08); }
.oc-at, .line .lt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.oc-at small, .line .lt small { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 2px; }
.oc-at .u { font-size: .9rem; line-height: 1.4; color: var(--text); }
.line .lt b { font: 600 .98rem 'Inter', sans-serif; overflow-wrap: anywhere; }
.line .lead { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.line .lead i { width: auto; }
.oc-go { color: #8aa0c4; font-size: .8rem; transition: transform .3s, color .3s; }
.oc-addr:hover .oc-go { color: #224e9e; transform: translate(3px, -3px); }
.line .cp { padding: 6px 11px; border-radius: 999px; background: #eaf1fb; color: #224e9e; font-weight: 600; font-size: .74rem; transition: background .25s, color .25s; }
.line:hover .cp { background: #224e9e; color: #fff; }
.line.done .cp { background: rgba(34,197,94,.16); color: #15803d; }
.oc .addr .u { background: none; }

.oc .actions { gap: 10px; margin-top: 16px; }
.oc .act { padding: 13px 6px; border-radius: 16px; background: #f3f7fd; border: 1px solid #dbe5f4; color: #0a2a66; font-weight: 600; }
.oc .act i { color: #224e9e; }
.oc .act.primary { background: linear-gradient(135deg, #224e9e, #3b82f6); border-color: transparent; color: #fff; box-shadow: 0 14px 26px -14px rgba(34,78,158,.9); }
.oc .act.primary i { color: #fff; }
.oc .act:hover, .oc .act:focus-visible { background: #0a2a66; border-color: #0a2a66; color: #fff; transform: translateY(-3px); }
.oc .act:hover i { color: #fff; }
.oc .act.done { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.4); color: #15803d; }
.oc .act.done i { color: #15803d; }

/* entrance */
.rv-on .oc .rv { opacity: 0; transform: translateY(14px); }
.rv-on .oc.in .rv { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 80ms + .1s); }
.rv-on .oc.in .line.rv:hover, .rv-on .oc.in .oc-addr.rv:hover { transition-delay: 0s; transition: background .25s, border-color .25s, transform .25s, box-shadow .25s; transform: translateX(4px); opacity: 1; }

/* ---- info tiles ---- */
.info-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
.ib {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ico main side" "bar bar bar";
  align-items: center; gap: 4px 20px; padding: 24px 26px 22px; border-radius: 26px; background: #fff; border: 1px solid #dbe5f4;
  box-shadow: 0 22px 50px -32px rgba(10,42,102,.45); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s;
}
.ib::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(59,130,246,.14) 50%, transparent 60%); transform: translateX(-110%); pointer-events: none; }
.ib:hover { transform: translateY(-5px); border-color: rgba(34,78,158,.35); box-shadow: 0 32px 64px -30px rgba(10,42,102,.5), 0 0 0 4px rgba(59,130,246,.07); }
.ib:hover::before { transform: translateX(110%); transition: transform 1s ease; }
.ib-ico { grid-area: ico; position: relative; width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; font-size: 1.4rem; color: #fff;
  background: linear-gradient(135deg, #224e9e, #3b82f6); box-shadow: 0 14px 26px -12px rgba(34,78,158,.85); transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.ib:hover .ib-ico { transform: rotate(-8deg) scale(1.08); }
.ib-ico.pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #3b82f6; animation: ibp 2s ease-out infinite; }
@keyframes ibp { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.ib-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.ib-main small { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.ib-main strong { font: 700 1.55rem 'Space Grotesk', sans-serif; color: #0a2a66; line-height: 1.2; margin-top: 2px; }
.ib-main .ib-days { font-size: .85rem; color: var(--text-muted); margin-top: 2px; }
.ib-247 { font-size: 2.1rem; background: linear-gradient(90deg, #224e9e, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ib-side { grid-area: side; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ib-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #15803d; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.28); white-space: nowrap; }
.ib-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: live 1.8s infinite; }
.ib-pill.closed { color: #b45309; background: rgba(180,83,9,.1); border-color: rgba(180,83,9,.25); }
.ib-pill.closed::before { animation: none; }
.ib-count { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.ib-track { grid-area: bar; position: relative; height: 8px; margin: 22px 0 22px; border-radius: 8px; background: #e6eefb; }
.ib-track i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: 8px; background: linear-gradient(90deg, #224e9e, #3b82f6); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.ib-track b { position: absolute; top: 50%; left: var(--p, 0%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; border: 4px solid #224e9e; box-shadow: 0 0 0 5px rgba(59,130,246,.2); transition: left 1.4s cubic-bezier(.2,.8,.2,1); }
.ib-track span { position: absolute; top: 18px; font-size: .72rem; color: var(--text-dim); font-weight: 600; }
.ib-track .t1 { left: 0; } .ib-track .t2 { right: 0; }
.ib-track.off b { opacity: .35; } .ib-track.off i { opacity: .4; }
.rv-on .ib:not(.in) .ib-track { --p: 0% !important; }

.ib-call { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; background: linear-gradient(135deg, #224e9e, #3b82f6); color: #fff; font-weight: 600; font-size: .9rem;
  box-shadow: 0 14px 26px -14px rgba(34,78,158,.9); transition: transform .25s, box-shadow .25s; }
.ib-call:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(34,78,158,.95); }
.ib-call i { animation: ring 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-16deg); } 80% { transform: rotate(14deg); } 85% { transform: rotate(-10deg); } 90% { transform: rotate(8deg); } }
.ib-copy { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid #dbe5f4; background: #f3f7fd; color: #224e9e; font: 600 .76rem 'Inter', sans-serif; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.ib-copy:hover { background: #224e9e; color: #fff; border-color: #224e9e; }
.ib-copy.done { background: rgba(34,197,94,.14); color: #15803d; border-color: rgba(34,197,94,.4); }
.ib-eq { grid-area: bar; display: flex; align-items: center; gap: 4px; height: 36px; margin: 18px 0 2px; }
.ib-eq i { flex: 1; min-width: 2px; border-radius: 3px; background: linear-gradient(#3b82f6, #224e9e); height: 20%; animation: eq 1.3s ease-in-out infinite; opacity: .85; }
.ib-eq i:nth-child(3n) { animation-duration: 1.7s; } .ib-eq i:nth-child(4n) { animation-duration: 1.1s; } .ib-eq i:nth-child(5n+1) { animation-duration: 1.9s; }
@keyframes eq { 0%, 100% { height: 14%; } 50% { height: 100%; } }
.ib-eq i:nth-child(odd) { animation-delay: -.4s; } .ib-eq i:nth-child(3n) { animation-delay: -.9s; } .ib-eq i:nth-child(7n) { animation-delay: -1.3s; }
.rv-on .ib { opacity: 0; transform: translateY(16px); }
.rv-on .ib.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s; }
.rv-on .ib.in:hover { transform: translateY(-5px); }

@media (max-width: 992px) { .info-bar { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .oc { padding: 24px 18px 20px; }
  .oc h3 { font-size: 1.7rem; }
  .oc-code { font-size: 5rem; }
  .oc-clock { flex-wrap: wrap; }
  .oc-clock .office-note { max-width: none; width: 100%; text-align: left; margin: 0; }
  .oc .actions { grid-template-columns: repeat(2, 1fr); }
  .ib { grid-template-columns: auto 1fr; grid-template-areas: "ico main" "side side" "bar bar"; padding: 22px 18px 20px; }
  .ib-side { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 12px; }
}
@media (hover: none) { .oc:hover, .ib:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .oc, .ib { transform: none !important; }
  .rv-on .oc .rv, .rv-on .ib { opacity: 1; transform: none; }
  .ib-eq i, .ib-ico.pulse::after, .ib-call i { animation: none; }
  .ib-eq i { height: 45%; }
}
.oc-head { display: flex; justify-content: space-between; gap: 12px; }

/* ======================================================================
   Compact map + office cards
   ====================================================================== */
.office-layout { gap: 24px; align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
.map-panel { min-height: 0; padding: 10px; gap: 6px; border-radius: 22px; }
.map-panel svg { max-height: 620px; }
.map-chip { padding: 6px 13px; font-size: .72rem; }
.air-label { font-size: 9.5px; } .port text { font-size: 9.5px; } .pin text { font-size: 11.5px; }

.office-stack { gap: 16px; }
.oc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; align-content: start; padding: 18px 18px 16px; border-radius: 22px; }
.oc > .oc-head, .oc > .oc-clock, .oc > .oc-addr, .oc > .actions { grid-column: 1 / -1; }
.oc-bar { border-radius: 22px 22px 0 0; height: 3px; }
.oc-head { align-items: center; }
.oc-head > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oc-tag { padding: 4px 10px; font-size: .62rem; }
.oc h3 { margin: 0; font-size: 1.45rem; }
.oc .status { padding: 5px 11px; font-size: .72rem; }
.oc-code { font-size: 4.2rem; top: 46px; right: 10px; }
.oc-dots { width: 120px; height: 90px; }

.oc-clock { margin: 12px 0 8px; padding: 9px 14px; gap: 12px; border-radius: 16px; }
.aclock { width: 38px; height: 38px; }
.oc-time .clock { font-size: 1.3rem; }
.oc-time .zone { font-size: .68rem; margin-top: 1px; }
.oc-clock .office-note { font-size: .72rem; max-width: 130px; }

.oc-ico { width: 34px; height: 34px; border-radius: 11px; font-size: .8rem; }
.oc-addr, .line { margin: 0 0 8px; padding: 8px 11px; gap: 11px; border-radius: 14px; }
.oc-addr { margin-bottom: 8px; }
.oc-at small, .line .lt small { font-size: .6rem; margin-bottom: 1px; }
.oc-at .u { font-size: .8rem; line-height: 1.3; }
.line .lt b { font-size: .84rem; }
.line .lead { gap: 10px; }
.line .cp { padding: 6px 8px; font-size: .68rem; }
.line .cp-label { display: none; }
.line.done .cp-label { display: inline; }
.oc .actions { gap: 8px; margin-top: 6px; }
.oc .act { flex-direction: row; justify-content: center; gap: 7px; padding: 9px 4px; border-radius: 13px; font-size: .74rem; }
.oc .act i { font-size: .8rem; }
.oc .act:hover, .oc .act:focus-visible { transform: translateY(-2px); }

@media (max-width: 1180px) { .oc .act i { display: none; } }
@media (max-width: 992px) { .map-panel svg { max-height: 460px; } }
@media (max-width: 600px) {
  .oc { grid-template-columns: 1fr; padding: 18px 14px 14px; }
  .oc h3 { font-size: 1.3rem; }
  .oc-clock { flex-wrap: nowrap; }
  .oc-clock .office-note { max-width: 96px; width: auto; text-align: right; margin-left: auto; }
  .oc .actions { grid-template-columns: repeat(2, 1fr); }
  .oc .act i { display: inline-block; }
  .line .cp-label { display: inline; }
}
@media (max-width: 992px) { .office-layout { grid-template-columns: minmax(0, 1fr); } }