/* =========================================================
   OFFICE-LOCATIONS.CSS — Office Locations page only. The brief calls
   for a "Global Presence" page, not a map-heavy contact directory, so
   this owns a handful of components nothing else on the site has:
   a dark hero variant with decorative animated connection arcs (its
   own gradient mix — not a reskin of contact.css's hero-contact mesh),
   an abstract two-node "network card" (US ⇄ India) instead of a
   literal embedded map, an auto-wrapping "future expansion" chip row
   built to take new locations with zero markup changes, a quick-contact
   info column + medallion location card (Section 2), a virtual-meeting
   method grid (Section 3), a bento grid (Section 4), and a single
   centered CTA card. Built from the same tokens as everywhere else.
   ========================================================= */

/* ---------- Hero: distinct dark gradient + decorative connection arcs ---------- */
.hero.hero-global{ background-image:none; background-color: var(--ink); }
.hero.hero-global::before{
  background:
    radial-gradient(50% 55% at 12% 15%, rgba(10,154,144,.28), transparent 60%),
    radial-gradient(55% 60% at 92% 85%, rgba(13,48,90,.5), transparent 65%),
    radial-gradient(35% 40% at 50% 50%, rgba(10,154,144,.08), transparent 70%),
    linear-gradient(180deg, rgba(14,21,38,.97), rgba(14,21,38,.93) 55%, rgba(14,21,38,1));
}
.hero-global-inner{ position:relative; z-index:3; max-width:760px; margin:0 auto; text-align:center; }
.hero-global .hero-actions{ justify-content:center; }
.hero-arcs{ position:absolute; inset:0; z-index:2; opacity:.5; pointer-events:none; }
.hero-arcs path{ fill:none; stroke: url(#arcGrad); stroke-width:1; stroke-dasharray: 3 7; animation: arcFlow 5s linear infinite; }
.hero-arcs path:nth-child(2){ animation-duration:7s; animation-direction:reverse; }
.hero-arcs path:nth-child(3){ animation-duration:9s; }
@keyframes arcFlow{ to{ stroke-dashoffset:-100; } }
.hero-arcs circle{ fill: var(--teal); opacity:.8; animation: arcDotPulse 2.4s ease-in-out infinite; }
@keyframes arcDotPulse{ 0%,100%{ opacity:.4; r:2.2; } 50%{ opacity:1; r:3.2; } }

.hero-global .hero-tags{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hero-global .hero-tag{
  font-family: var(--f-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color: rgba(247,245,240,.75);
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:999px;
  padding:7px 18px; transition: background .3s, border-color .3s, transform .3s var(--ease), color .3s;
}
.hero-global .hero-tag:hover{ background: rgba(10,154,144,.18); border-color: var(--teal); color: var(--paper); transform: translateY(-2px); }

/* ---------- Section 1: network card (US ⇄ India) instead of a literal map ---------- */
.network-card{
  position:relative; overflow:hidden; margin-top:48px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--ink), var(--ink-soft) 130%); border:1px solid var(--ink-line);
  box-shadow: var(--shadow-lift); min-height:300px;
}
.network-card::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image: linear-gradient(var(--ink-line) 1px, transparent 1px), linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent 85%);
}
.net-svg{ position:absolute; inset:0; width:100%; height:100%; }
.net-svg .net-path{
  fill:none; stroke: var(--teal); stroke-width:1.4; stroke-dasharray: 2 6; opacity:.75;
  animation: netFlow 3.2s linear infinite;
}
@keyframes netFlow{ to{ stroke-dashoffset:-80; } }

.net-node{
  position:absolute; top:50%; transform: translate(-50%,-50%); text-align:center; z-index:2;
}
.net-node.n-left{ left:16%; }
.net-node.n-right{ left:84%; }
@media (max-width: 640px){ .net-node.n-left{ left:22%; } .net-node.n-right{ left:78%; } }

.net-marker{
  position:relative; width:64px; height:64px; border-radius:50%; margin:0 auto 14px;
  background: rgba(10,154,144,.16); border:1px solid rgba(10,154,144,.4);
  display:grid; place-items:center; font-size:1.7rem;
  transition: transform .4s var(--ease);
}
/* Country markers are Unicode flag emoji: OSes/browsers without flag-glyph
   support (headless Chromium, many Linux/Android builds) silently fall
   back to the raw regional-indicator letters (e.g. "US"), so style that
   fallback as an intentional ISO code badge rather than let it look broken. */
.net-marker{ font-family: var(--f-mono); font-weight:700; letter-spacing:.03em; color: var(--teal-soft); }
.net-marker::before{
  content:""; position:absolute; inset:-10px; border-radius:50%; border:1px solid rgba(10,154,144,.3);
  animation: netPulseRing 2.6s var(--ease) infinite;
}
@keyframes netPulseRing{ 0%{ transform:scale(.85); opacity:1; } 100%{ transform:scale(1.35); opacity:0; } }
.net-node:hover .net-marker{ transform: scale(1.08); }
.net-node strong{ display:block; font-family: var(--f-display); font-size:1.05rem; color: var(--paper); }
.net-node span{ display:block; font-size:.78rem; color: rgba(247,245,240,.55); margin-top:3px; max-width:16ch; margin-left:auto; margin-right:auto; }

/* ---------- "Future expansion" chip row — auto-wrapping, so new
   locations are just another .expansion-chip, no layout changes ---------- */
.expansion-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:34px; }
.expansion-chip{
  display:flex; align-items:center; gap:10px; padding:10px 18px 10px 12px; border-radius:999px;
  background: var(--white); border:1px dashed var(--rule); font-size:.86rem; color: var(--slate);
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.expansion-chip:hover{ border-color: var(--teal); transform: translateY(-3px); box-shadow: var(--shadow-card); border-style:solid; }
.expansion-chip .ec-flag{
  font-family: var(--f-mono); font-weight:700; font-size:.78rem; letter-spacing:.02em; line-height:1; color: var(--teal-deep);
  width:26px; height:26px; border-radius:50%; background: rgba(10,154,144,.1); display:inline-grid; place-items:center; flex-shrink:0;
}
.expansion-chip strong{ color: var(--ink); font-weight:600; }
.expansion-chip .ec-tag{
  font-family: var(--f-mono); font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; color: var(--teal-deep);
  background: rgba(10,154,144,.1); border-radius:999px; padding:3px 9px; margin-left:2px;
}

/* ---------- Section 2: split layout ---------- */
.office-split{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; margin-top:44px; }
@media (max-width: 900px){ .office-split{ grid-template-columns:1fr; gap:38px; } }

.office-info-list{ display:flex; flex-direction:column; gap:0; }
.oi-row{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--rule); }
.oi-row:first-child{ padding-top:0; }
.oi-row .oi-icon{
  flex-shrink:0; width:40px; height:40px; border-radius:11px; background: var(--paper-dim); color: var(--teal-deep);
  display:grid; place-items:center; font-size:1rem;
}
.oi-row .oi-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--slate-soft); margin-bottom:3px; }
.oi-row .oi-value{ font-size:.95rem; color: var(--ink); font-weight:500; }
.oi-note{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding:10px 16px; border-radius:999px;
  background: rgba(10,154,144,.08); color: var(--teal-deep); font-size:.82rem; font-weight:500;
}

.quick-contact-row{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.qc-btn{
  display:inline-flex; align-items:center; gap:.6em; padding:.85em 1.4em; border-radius:999px;
  border:1px solid var(--rule); color: var(--ink); font-size:.87rem; font-weight:600;
  transition: border-color .25s, color .25s, transform .3s var(--ease), background .25s;
}
.qc-btn:hover{ border-color: var(--teal-deep); color: var(--teal-deep); transform: translateY(-2px); background: rgba(10,154,144,.06); }
.qc-btn.qc-whatsapp:hover{ border-color:#25D366; color:#1a9c4c; }

/* Premium location card — medallion + gradient, not an embedded map */
.location-card{
  position:relative; overflow:hidden; border-radius: var(--radius-lg); padding:48px 34px; text-align:center;
  background: linear-gradient(160deg, var(--paper-dim), var(--white) 130%); border:1px solid var(--rule);
  box-shadow: var(--shadow-card);
}
.location-card::before{
  content:""; position:absolute; inset:0; opacity:.6;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: radial-gradient(65% 70% at 50% 40%, #000, transparent 85%);
}
.lc-medallion{
  position:relative; z-index:1; width:92px; height:92px; border-radius:50%; margin:0 auto 22px;
  background: linear-gradient(135deg, var(--navy-brand), var(--teal)); color:#fff; font-size:2.1rem;
  display:grid; place-items:center; box-shadow: 0 18px 36px -14px rgba(10,154,144,.5);
}
.location-card h3{ position:relative; z-index:1; margin-bottom:.25em; }
.location-card p{ position:relative; z-index:1; color: var(--slate-soft); font-size:.9rem; margin-bottom:22px; }
.lc-maps-btn{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:.5em; font-size:.85rem; font-weight:600;
  color: var(--teal-deep); padding:.7em 1.3em; border:1px solid rgba(10,154,144,.35); border-radius:999px;
  transition: background .25s, transform .3s var(--ease);
}
.lc-maps-btn:hover{ background: rgba(10,154,144,.08); transform: translateY(-2px); }

/* ---------- Section 3: virtual meeting methods ---------- */
.method-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; margin-top:44px; }
@media (max-width: 860px){ .method-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .method-grid{ grid-template-columns: 1fr; } }
.method-card{
  text-align:center; background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg);
  padding:32px 22px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.method-card:hover{ transform: translateY(-7px); box-shadow: var(--shadow-lift); border-color: transparent; }
.method-card .icon{
  width:54px; height:54px; margin:0 auto 18px; border-radius:15px; display:grid; place-items:center;
  background: var(--paper-dim); color: var(--teal-deep); font-size:1.3rem; transition: transform .4s var(--ease), background .3s, color .3s;
}
.method-card:hover .icon{ transform: scale(1.1) rotate(-6deg); background: var(--teal-deep); color:#fff; }
.method-card h3{ font-size:1rem; margin-bottom:.35em; }
.method-card p{ font-size:.85rem; color: var(--slate-soft); margin:0; }

/* ---------- Section 4: bento grid ---------- */
.bento-grid{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows:150px; gap:18px; margin-top:44px; }
.bento-tile{
  position:relative; overflow:hidden; border-radius: var(--radius-lg); padding:26px; display:flex; flex-direction:column; justify-content:flex-end;
  background: var(--white); border:1px solid var(--rule); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.bento-tile:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.bento-tile .icon{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background: var(--paper-dim); color: var(--teal-deep); font-size:1.1rem; margin-bottom:14px; transition: transform .4s var(--ease), background .3s, color .3s; }
.bento-tile:hover .icon{ transform: scale(1.1) rotate(-6deg); background: var(--teal-deep); color:#fff; }
.bento-tile h3{ font-size:.98rem; margin:0 0 .3em; }
.bento-tile p{ font-size:.82rem; color: var(--slate-soft); margin:0; }
/* One feature tile (2x2) + six 1x1 tiles + one 2x1 wide tile packs the
   4-column grid into an exact 4x3 rectangle with zero empty cells:
   feature(4 cells) + 4 singles fill rows 1-2; 2 singles + the wide
   tile fill row 3. */
.bento-tile.bento-feature{
  grid-column: span 2; grid-row: span 2;
  background: linear-gradient(150deg, var(--ink), var(--navy-brand) 130%); border-color: var(--ink-line);
}
.bento-tile.bento-feature::before{ content:""; position:absolute; inset:0; background: radial-gradient(60% 70% at 90% 0%, rgba(10,154,144,.3), transparent 65%); pointer-events:none; }
.bento-tile.bento-feature .icon{ position:relative; z-index:1; background: rgba(10,154,144,.18); color: var(--teal); }
.bento-tile.bento-feature h3{ position:relative; z-index:1; color: var(--paper); font-size:1.2rem; }
.bento-tile.bento-feature p{ position:relative; z-index:1; color: rgba(247,245,240,.65); font-size:.88rem; }
.bento-tile.bento-wide{ grid-column: span 2; flex-direction:row; align-items:center; gap:20px; }
.bento-tile.bento-wide .icon{ margin-bottom:0; }
@media (max-width: 960px){
  .bento-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows:170px; }
  .bento-tile.bento-feature, .bento-tile.bento-wide{ grid-column: span 2; grid-row: span 1; }
  .bento-tile.bento-wide{ flex-direction:column; align-items:stretch; }
}
@media (max-width: 560px){
  .bento-grid{ grid-template-columns: 1fr; grid-auto-rows:auto; }
  .bento-tile, .bento-tile.bento-feature, .bento-tile.bento-wide{ grid-column: span 1; grid-row: span 1; padding:24px; }
}

/* ---------- Final CTA: single centered card ---------- */
.cta-centered{
  max-width: 720px; margin: 0 auto; text-align:center; position:relative; overflow:hidden;
  background: linear-gradient(160deg, var(--ink), var(--navy-brand) 130%); color: var(--paper);
  border-radius: var(--radius-lg); padding: 64px 48px;
}
.cta-centered::before{ content:""; position:absolute; inset:0; background: radial-gradient(60% 90% at 50% 0%, rgba(10,154,144,.28), transparent 65%); pointer-events:none; }
.cta-centered h2{ position:relative; z-index:1; color: var(--paper); margin-bottom:.3em; }
.cta-centered p{ position:relative; z-index:1; color: rgba(247,245,240,.68); max-width:50ch; margin:0 auto 28px; }
.cta-centered .cta-actions{ position:relative; z-index:1; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }