/* =========================================================
   OUR REACH — map-first layout (colour-coded pins, labelled
   locations, Andaman inset, legend). Pins are positioned by
   real latitude/longitude (percent of the map box), so they
   stay exactly on target at every screen size.
   ========================================================= */
.reach-map-page .standalone-content{padding-top:88px;background:#fff}
/* same solid blue header as the other inner pages (the shared rules leave it transparent for pages with a hero photo) */
html body.reach-map-page .site-header,html body.reach-map-page .site-header.is-scrolled{background:rgb(33,66,117)!important;box-shadow:0 2px 14px rgba(7,19,28,.22)!important}
.rm-wrap{max-width:var(--container,1200px);margin:0 auto;padding:0 28px}
.rm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- intro ---------- */
.rm-hero{padding-top:54px;padding-bottom:6px}
.rm-eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C8102E;margin:0 0 12px}
.rm-title{font-family:var(--display);font-weight:900;font-size:clamp(52px,7.4vw,92px);line-height:.9;letter-spacing:-.005em;text-transform:uppercase;color:var(--ink);margin:0}
.rm-title span{color:#C8102E}
.rm-lede{max-width:600px;margin:18px 0 0;font-size:17px;line-height:1.65;color:var(--text-soft)}
.rm-stats{display:flex;flex-wrap:wrap;gap:14px;list-style:none;margin:28px 0 0;padding:0}
.rm-stat{display:flex;align-items:center;gap:13px;padding:12px 20px 12px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 18px -12px rgba(10,31,46,.35)}
.rm-stat svg{width:34px;height:34px;padding:7px;border-radius:50%;background:rgba(200,16,46,.09);color:#C8102E;flex:none}
.rm-stat b{display:block;font-family:var(--display);font-weight:800;font-size:30px;line-height:1;color:var(--ink)}
.rm-stat span{display:block;margin-top:3px;font-size:12.5px;color:var(--text-soft)}

/* ---------- map ---------- */
.rm-section{padding-top:30px;padding-bottom:30px}
.rm-map{position:relative;max-width:800px;margin:0 auto}
.rm-canvas{position:relative;container-type:inline-size}
.rm-base{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 16px rgba(10,31,46,.16));user-select:none;-webkit-user-drag:none}

.rm-pins{position:absolute;inset:0}
.rm-pin{--pin:14px;--pin:clamp(11px,2.05cqw,17px);position:absolute;left:var(--x);top:var(--y);width:20px;height:20px;padding:0;margin:-10px 0 0 -10px;border:0;background:none;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rm-anchor{position:absolute;left:50%;top:50%;width:0;height:0;display:block}   /* dot, label and tooltip are all positioned from the pin centre */
.rm-pin:hover,.rm-pin:focus-visible,.rm-pin.is-open{z-index:6}
.rm-pin:focus{outline:0}
.rm-dot{position:absolute;left:0;top:0;width:var(--pin);height:var(--pin);margin:calc(var(--pin) / -2) 0 0 calc(var(--pin) / -2);border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,.35);transition:transform .18s ease}
.rm-dot::after{content:"";position:absolute;left:21%;top:14%;width:34%;height:28%;border-radius:50%;background:rgba(255,255,255,.75);filter:blur(.4px)}   /* gloss */
.rm-y .rm-dot,.rm-key-y{background:radial-gradient(circle at 42% 38%,#ffe66b 0,#f2c200 55%,#b98b00 100%);border:1px solid rgba(98,72,0,.55)}
.rm-g .rm-dot,.rm-key-g{background:radial-gradient(circle at 42% 38%,#b4e66e 0,#5fae2f 55%,#2f6f14 100%);border:1px solid rgba(28,70,10,.55)}
.rm-pin:hover .rm-dot,.rm-pin:focus-visible .rm-dot,.rm-pin.is-open .rm-dot,.rm-pin.is-hl .rm-dot{transform:scale(1.28)}
.rm-pin:focus-visible .rm-dot{outline:2px solid #0b3d91;outline-offset:2px}
.rm-pin.is-hl .rm-dot{animation:rmPulse 1.1s ease-out 2}
@keyframes rmPulse{0%{box-shadow:0 0 0 0 rgba(200,16,46,.55)}100%{box-shadow:0 0 0 14px rgba(200,16,46,0)}}

/* labels (like the reference: small bold caps beside each pin) */
.rm-label{--g:calc(var(--pin) / 2 + 3px);position:absolute;white-space:nowrap;font:700 10px/1.15 var(--body);font:700 clamp(8px,1.42cqw,11.5px)/1.15 var(--body);letter-spacing:.035em;text-transform:uppercase;color:#07131c;text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff;pointer-events:none}
.rm-l-r{left:var(--g);top:0;transform:translateY(-50%)}
.rm-l-l{right:var(--g);top:0;transform:translateY(-50%);text-align:right}
.rm-l-t{left:0;bottom:var(--g);transform:translateX(-50%)}
.rm-l-br{left:calc(var(--pin) / -4);top:calc(var(--pin) / 2 + 1px)}
.rm-l-bl{right:calc(var(--pin) / -4);top:calc(var(--pin) / 2 + 1px);text-align:right}

/* tooltip */
.rm-tip{position:absolute;left:0;bottom:calc(var(--pin) / 2 + 9px);transform:translate(-50%,5px);min-width:128px;padding:9px 13px 10px;border-radius:9px;background:var(--ink);color:#fff;text-align:left;white-space:nowrap;box-shadow:0 12px 28px -8px rgba(10,31,46,.55);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s}
.rm-tip::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:var(--ink);transform:translateX(-50%) rotate(45deg)}
.rm-tip strong{display:block;font:700 13.5px/1.2 var(--body)}
.rm-tip em{display:flex;align-items:center;gap:6px;margin-top:4px;font:500 11.5px/1.2 var(--body);font-style:normal;color:#c5d3dc}
.rm-tip em i{width:9px;height:9px;border-radius:50%;display:inline-block}
.rm-pin.is-open .rm-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (hover:hover){.rm-pin:hover .rm-tip,.rm-pin:focus-visible .rm-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}}

/* Andaman inset + legend (lower right, over the Bay of Bengal — like the reference) */
.rm-inset{position:absolute;left:62%;top:69.5%;width:min(26%,190px);min-width:150px}
.rm-inset h3,.rm-legend h3{margin:0;font:700 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#07131c}
.rm-inset-list{list-style:none;margin:9px 0 0;padding:0 0 0 2px;position:relative;display:grid;gap:9px}
.rm-inset-list::before{content:"";position:absolute;left:8px;top:-3px;bottom:-3px;width:1px;background:rgba(7,19,28,.38)}   /* pole, as in the reference */
.rm-row{position:relative;display:flex;align-items:center;gap:9px;margin:0;padding:0;border:0;background:none;font:700 10.5px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;color:#07131c;cursor:pointer;text-align:left}
.rm-row .rm-dot{position:relative;left:auto;top:auto;margin:0;flex:none;width:15px;height:15px}
.rm-row:hover .rm-dot,.rm-row:focus-visible .rm-dot,.rm-row.is-hl .rm-dot{transform:scale(1.25)}
.rm-row:focus-visible{outline:2px solid #0b3d91;outline-offset:3px;border-radius:4px}
.rm-legend{position:absolute;left:57%;top:83.5%;width:min(25%,210px);min-width:176px;padding:20px 16px 14px;background:#fffbd0;border:1px solid #cdc58c;box-shadow:0 8px 20px -14px rgba(10,31,46,.5)}
.rm-legend h3{position:absolute;left:12px;top:-9px;padding:2px 7px;background:#fffbd0;border:1px solid #cdc58c;font-size:10px;letter-spacing:.08em}
.rm-legend ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.rm-legend li{display:flex;align-items:center;gap:11px;font:700 10.5px/1.2 var(--body);letter-spacing:.04em;text-transform:uppercase;color:#07131c}
.rm-key{display:inline-block;width:15px;height:15px;border-radius:50%;box-shadow:0 2px 3px rgba(0,0,0,.3);flex:none}

/* ---------- location lists (text version of the map: accessible, tappable) ---------- */
.rm-lists{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:800px;margin:34px auto 0}
.rm-group{padding:20px 22px 22px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 26px -20px rgba(10,31,46,.45)}
.rm-group h3{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:800 20px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.rm-group h3 .rm-key{width:14px;height:14px}
.rm-group h3 small{margin-left:auto;font:600 12px var(--mono);letter-spacing:.06em;color:var(--text-soft)}
.rm-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.rm-chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#f6f8fb;font:500 13px/1.2 var(--body);color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.rm-chip:hover,.rm-chip:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff;outline:0}
.rm-hint{display:none;margin:12px 0 0;text-align:center;font-size:13px;color:var(--text-soft)}

/* ---------- project photo strip (existing content, restyled) ---------- */
.rm-strip-section{padding-top:20px;padding-bottom:84px}
.rm-strip-section h2{margin:0 0 18px;font:800 clamp(26px,3vw,34px)/1 var(--display);text-transform:uppercase;color:var(--ink)}
.rm-strip{position:relative;display:flex;align-items:center;gap:12px}
.rm-strip-track{display:flex;gap:14px;flex:1;min-width:0;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px 2px 10px}
.rm-strip-track::-webkit-scrollbar{display:none}
.rm-strip-track a{position:relative;flex:0 0 clamp(190px,24%,260px);aspect-ratio:4/3;border-radius:12px;overflow:hidden;scroll-snap-align:start;box-shadow:0 12px 26px -18px rgba(10,31,46,.6)}
.rm-strip-track img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.rm-strip-track a:hover img{transform:scale(1.05)}
.rm-strip-track span{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;background:linear-gradient(0deg,rgba(7,19,28,.82),transparent);color:#fff;font:700 15px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.rm-arrow{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 6px 16px -10px rgba(10,31,46,.5);transition:background .15s,color .15s}
.rm-arrow:hover,.rm-arrow:focus-visible{background:#C8102E;border-color:#C8102E;color:#fff;outline:0}

/* ---------- tablet / phone ---------- */
@media (max-width:760px){
  .rm-wrap{padding:0 18px}
  .rm-hero{padding-top:34px}
  .rm-lede{font-size:16px}
  .rm-stat{flex:1 1 100%}
  .rm-label{display:none}                       /* labels would be unreadable at this size — pins open a tooltip, lists below name everything */
  .rm-pin{--pin:15px;--pin:clamp(13px,3.6cqw,16px)}
  .rm-hint{display:block}
  .rm-inset,.rm-legend{position:static;left:auto;top:auto;width:auto;min-width:0;margin-top:14px}
  .rm-legend{position:relative}
  .rm-map{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
  .rm-canvas,.rm-hint{grid-column:1/-1}
  .rm-legend{padding:20px 14px 14px}
  .rm-lists{grid-template-columns:1fr;margin-top:26px}
  .rm-strip-section{padding-bottom:60px}
  .rm-arrow{display:none}
  .rm-strip-track a{flex-basis:70%}
}
@media (max-width:380px){.rm-inset-list{gap:8px}.rm-row{font-size:10px}}
@media (prefers-reduced-motion:reduce){.rm-pin.is-hl .rm-dot{animation:none}.rm-tip,.rm-dot,.rm-strip-track img{transition:none}}