/* ---------- Page chrome ---------- */
.map-page{padding-top:18px;padding-bottom:36px}
.map-intro{display:flex;justify-content:space-between;gap:24px;align-items:end}
.map-back{font-size:13px;color:#888}.map-back:hover{color:#171717}
.map-intro h1{font-size:clamp(27px,3vw,34px);letter-spacing:-.055em;line-height:1.1;font-weight:650;margin:10px 0 5px}
.map-intro h1 span{color:#ed765f}.map-intro p{margin:0;color:#777;font-size:14px;line-height:1.5}
.map-intro-note{font-size:9px;letter-spacing:.11em;line-height:1.6;text-align:right;color:#999;white-space:nowrap}
.map-legend{border-top:1px solid #e9e9e9;margin-top:16px;padding:12px 0 14px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.map-legend p{font-size:13px;color:#777;line-height:1.5;margin:0}.map-legend>span{font-size:11px;color:#999;white-space:nowrap}
.map-scroll-hint{display:none}

/* ---------- Map frame ----------
   Near-square on every screen. On desktop the map is sized to the viewport
   height (never below 720px) so the whole compass fits on screen once scrolled to. */
.map-scroll{
  --map-h:max(720px,calc(100svh - 96px));
  width:min(100%,calc(var(--map-h) * 1.06));
  margin-inline:auto;overflow:hidden;
  border:1px solid #e4e4e1;border-radius:14px;background:#fff;
  container:map/inline-size;
}
.map-canvas{
  /* tier tokens — overridden by container queries below */
  --icon:40px;--icon-r:11px;--label:12px;--label-w:118px;--gap:5px;
  --axis-font:11px;--axis-track:.14em;--quad-font:13px;--edge:20px;
  position:relative;width:100%;aspect-ratio:1.06;overflow:hidden;
  background-color:#fff;
  background-image:radial-gradient(circle,#e9e9e6 1px,transparent 1.3px);
  background-size:24px 24px;background-position:center;
}

/* Axes — line ends are set by JS from the measured axis labels (with CSS fallbacks). */
.axis-line{position:absolute;background:#bdbdb8;pointer-events:none}
.axis-horizontal{height:1px;top:50%;left:var(--ax-l,64px);right:var(--ax-r,84px)}
.axis-vertical{width:1px;left:50%;top:var(--ax-t,46px);bottom:var(--ax-b,46px)}
.axis-line::before,.axis-line::after{content:"";position:absolute;width:7px;height:7px;border:solid #9d9d98;border-width:1.5px 1.5px 0 0}
.axis-horizontal::before{left:0;top:-3.5px;transform:rotate(-135deg)}
.axis-horizontal::after{right:0;top:-3.5px;transform:rotate(45deg)}
.axis-vertical::before{top:0;left:-3.5px;transform:rotate(-45deg)}
.axis-vertical::after{bottom:0;left:-3.5px;transform:rotate(135deg)}

.axis-label{position:absolute;z-index:1;color:#1f1f1f;font-size:var(--axis-font);font-weight:700;letter-spacing:var(--axis-track);line-height:1.2;white-space:nowrap;text-transform:uppercase}
.axis-label span{color:#a9a9a4}
.axis-left{text-transform:none;letter-spacing:.06em}
.axis-top{top:var(--edge);left:50%;transform:translateX(-50%)}
.axis-bottom{bottom:var(--edge);left:50%;transform:translateX(-50%)}
.axis-left{left:var(--edge);top:50%;transform:translateY(-50%)}
.axis-right{right:var(--edge);top:50%;transform:translateY(-50%)}

/* Quadrant names sit quietly in the corners, as on classic positioning maps. */
.quadrant{position:absolute;z-index:1;color:#a6a6a0;font-size:var(--quad-font);font-style:italic;letter-spacing:-.005em;pointer-events:none}
.quadrant-tl{top:var(--edge);left:var(--edge)}.quadrant-tr{top:var(--edge);right:var(--edge)}
.quadrant-bl{bottom:var(--edge);left:var(--edge)}.quadrant-br{bottom:var(--edge);right:var(--edge)}

/* ---------- Points ---------- */
.map-point{
  position:absolute;transform:translate(-50%,-50%);z-index:2;
  width:max-content;max-width:var(--label-w);
  display:flex;flex-direction:column;align-items:center;gap:var(--gap);
  text-align:center;color:#2b2b2b;border-radius:8px;
  transition:opacity .16s ease;
}
.map-point-icon{
  width:var(--icon);height:var(--icon);flex:none;display:grid;place-items:center;position:relative;
  border-radius:var(--icon-r);background:#f4f4f2;color:#777;
  font-size:calc(var(--icon) * .42);font-weight:650;
  transition:transform .18s ease,filter .18s ease;
}
.map-point-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:inherit}
.map-point-icon:has(img){background:none}
.map-point-icon:has(img)>span{visibility:hidden}
.map-point-name{
  display:block;font-size:var(--label);line-height:1.15;font-weight:500;letter-spacing:-.005em;
  overflow-wrap:break-word;
  /* white halo keeps labels legible over axis lines and the dot grid */
  text-shadow:0 0 2px #fff,0 0 3px #fff,0 0 5px #fff,0 0 8px #fff;
}
.map-point:hover,.map-point:focus-visible{z-index:5;color:#000}
.map-point:focus-visible{outline:2px solid #3a6fdb;outline-offset:4px}
.map-point:hover .map-point-icon,.map-point:focus-visible .map-point-icon{transform:scale(1.12);filter:drop-shadow(0 4px 8px #00000026)}
.map-point:hover .map-point-name{text-decoration:underline;text-underline-offset:3px}
@media(hover:hover){.map-canvas:has(#map-points>.map-point:hover) #map-points>.map-point:not(:hover){opacity:.38}}
@media(hover:none){.map-point:hover .map-point-icon{transform:none;filter:none}.map-point:active .map-point-icon{transform:scale(1.1)}}
.map-point.is-selected .map-point-icon{transform:scale(1.12);filter:drop-shadow(0 3px 6px #00000033)}
.map-point.is-selected .map-point-name{font-weight:650;color:#000}

/* Size tiers, driven by the map's own width rather than the viewport. */
@container map (max-width:900px){
  .map-canvas{--icon:34px;--icon-r:9px;--label:11px;--label-w:100px;--edge:16px;--axis-font:10px;--quad-font:12px}
}
@container map (max-width:700px){
  .map-canvas{--icon:28px;--icon-r:8px;--label:10px;--label-w:80px;--gap:3px;--edge:12px;--axis-font:9px;--axis-track:.1em;--quad-font:10.5px}
}
@container map (max-width:540px){
  .map-canvas{--icon:22px;--icon-r:6px;--label:8.5px;--label-w:60px;--gap:2px;--edge:9px;--axis-font:8px;--axis-track:.08em;aspect-ratio:.9;background-size:18px 18px}
  .map-canvas .quadrant{display:none}
  .map-point-name{line-height:1.08;font-weight:500;letter-spacing:0}
  .map-point:focus-visible{outline-offset:2px}
}
@container map (max-width:370px){
  .map-canvas{--icon:19px;--icon-r:5px;--label:7.5px;--label-w:52px;--edge:7px;--axis-font:7.5px}
}

/* ---------- Footnote / promo ---------- */
.map-footnote{display:flex;justify-content:space-between;gap:24px;padding:14px 0 22px;color:#999;font-size:12px;line-height:1.55}
.map-footnote p{max-width:460px;margin:0}
.map-noscript a{text-decoration:underline}
.map-promo{margin-top:45px;padding:30px 0;border-top:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;display:flex;justify-content:space-between;align-items:center;gap:20px}.map-promo>span:first-child{display:flex;flex-direction:column;gap:7px}.map-promo-kicker{font-size:10px;letter-spacing:.11em;font-weight:700;color:#999}.map-promo strong{font-size:21px;letter-spacing:-.04em;font-weight:620}.map-promo>span:first-child>span:last-child{font-size:13px;color:#888;line-height:1.5}.map-promo-arrow{font-size:25px;color:#888;transition:transform .18s ease,color .18s ease}.map-promo:hover .map-promo-arrow{transform:translate(4px,-4px);color:#171717}

.map-detail,.map-mobile-extra:empty{display:none}

/* ---------- Phones & tablets ---------- */
@media(max-width:1023px){
  .map-page{padding-top:20px;padding-bottom:32px}
  .map-intro h1{font-size:clamp(27px,7.5vw,36px);margin-top:14px}
  .map-intro-note{display:none}
  .map-legend{margin-top:18px;align-items:flex-start;flex-direction:column;gap:8px;padding-bottom:10px}
  .map-scroll-hint{display:block;color:#999;font-size:11px;margin:0 0 10px}
  .map-scroll{width:100%;border-radius:12px}
  .map-footnote{flex-direction:column;gap:18px;padding-top:16px;font-size:11px}
  .map-promo{margin-top:32px}.map-promo strong{font-size:19px}
  .map-detail:not([hidden]){display:block;position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:12px;right:12px;max-width:440px;margin-inline:auto;z-index:20;background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:20px;box-shadow:0 8px 40px #0002}
  .map-detail strong{display:block;padding-right:32px;font-size:16px;line-height:1.3}
  .map-detail p{font-size:14px;line-height:1.5;color:#777;margin:8px 20px 12px 0}
  .map-detail>a{display:inline-flex;min-height:44px;align-items:center;gap:24px;font-size:14px;text-decoration:underline;text-underline-offset:4px}
  .map-detail-close{position:absolute;right:4px;top:4px;border:0;background:transparent;width:44px;height:44px;font-size:25px;line-height:1;color:#777}
  .map-mobile-extra{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
  .map-mobile-extra .map-point{position:static;transform:none;min-height:44px;--icon:26px;--label:11px}
}
/* Phones: let the map use a little more of the screen width. */
@media(max-width:600px){
  .map-scroll{width:calc(100% + 16px);margin-inline:-8px}
}
@media(max-width:360px){.map-header .brand-mark{width:42px;height:36px}.map-header .brand{gap:5px}.map-header .brand-light{font-size:9px}.map-header .nav{gap:8px}.map-header .nav-links{gap:8px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.map-point,.map-point-icon,.map-promo-arrow{transition:none}}
/* Positions indicate broad product focus, not scores or measured values. */

/* ---------- Map embedded on the homepage ---------- */
.map-section{border-top:1px solid #e8e8e8;margin-top:96px;padding-top:48px}
.map-section .map-intro h2{font-size:29px;line-height:1.2;letter-spacing:-.045em;font-weight:620;margin:0 0 4px}
.map-section .map-intro h2 span{color:#ed765f}
.map-section .map-open{display:inline-flex;gap:6px;align-items:center;color:#888;padding:8px 0}
.map-section .map-open:hover{color:#171717}
.map-section+.about{margin-top:72px}
@media(max-width:1023px){
  .map-section{margin-top:72px;padding-top:36px}
  .map-section .map-intro{flex-direction:column;align-items:flex-start;gap:4px}
  .map-section .map-open{display:inline-flex;font-size:10px}
  .map-section .map-intro h2{font-size:26px}
}

/* About block without its section label: content aligns with the other section headings. */
.about{display:block}