/* Rev7 contact page: offices on a lightweight SVG map of Iran (refined from Cinematic Lab v1, experience D). */
.ct7 {
  --map-line: #1c2430;
  --map-land: #fbf9f5;
  --map-nb: rgb(20 23 29 / .045);
  --map-nb-line: rgb(20 23 29 / .13);
  --pin: #101a28;
  --pin-ring: #9a7637;
  --pin-ink: #6f5323;
  background: var(--paper); color: var(--on-paper);
  padding-block: clamp(104px, 7rem + 2vw, 152px) clamp(48px, 6vw, 88px);
}
.ct7-grid {
  display: grid; gap: clamp(20px, 2.4vw, 32px) clamp(32px, 5vw, 88px);
  grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr);
  grid-template-areas: "head map" "panel map";
  align-items: start;
}
.ct7-head { grid-area: head; display: grid; gap: 14px; align-self: end; }
.ct7-head .crumb, .ct7-head .crumb a { color: var(--on-paper-3); }
@media (hover: hover) { .ct7-head .crumb a:hover { color: var(--on-paper); } }
.ct7-head .h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); }
.ct7-head .lead { color: var(--on-paper-2); max-inline-size: 44ch; font-size: clamp(1rem, .96rem + .25vw, 1.15rem); }
.ct7-panel { grid-area: panel; }
.cm-map { grid-area: map; position: relative; margin: 0; align-self: center; }

/* ---------- map ---------- */
.cm-canvas { position: relative; aspect-ratio: var(--ar); inline-size: min(100%, calc(min(78svh, 780px) * 1048 / 949)); margin-inline: auto; }
.cm-svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: hidden; }
.cm-nb { fill: var(--map-nb); stroke: var(--map-nb-line); stroke-width: .9; vector-effect: non-scaling-stroke; stroke-linejoin: round; opacity: 0; transition: opacity 900ms var(--ease); }
.cm-fill { fill: var(--map-land); opacity: 0; transition: opacity 900ms var(--ease); }
#cm-dots circle { fill: rgb(138 106 51 / .30); }
.cm-dotfield { opacity: 0; transition: opacity 1100ms var(--ease); }
.cm-spot { opacity: 0; transition: opacity 420ms var(--ease); }
.cm-map[data-sel="kish"] .cm-spot-kish, .cm-map[data-sel="tehran"] .cm-spot-tehran { opacity: 1; }
.cm-line { fill: none; stroke: var(--map-line); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cm-isl { fill: var(--map-land); stroke: var(--map-line); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 600ms var(--ease); }
.cm-arc { fill: none; stroke: var(--pin-ring); stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .75; }
.cm-water text { font-size: 19px; fill: #8a8478; letter-spacing: .04em; opacity: 0; transition: opacity 900ms var(--ease); text-anchor: middle; }
:root[dir="ltr"] .cm-water text { font-style: italic; }

.cm-map[data-state="drawing"] .cm-line { transition: stroke-dashoffset 2000ms var(--ease-io); stroke-dashoffset: 0; }
.cm-map[data-state="done"] .cm-line { stroke-dashoffset: 0; }
.cm-map.is-filled .cm-fill, .cm-map.is-filled .cm-isl, .cm-map.is-filled .cm-water text, .cm-map.is-filled .cm-nb { opacity: 1; }
.cm-map.is-filled .cm-dotfield { opacity: 1; }
.cm-map.is-arc .cm-arc { stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms var(--ease-io); }

/* pins are real buttons over the map (48px hit area) */
.cm-pin { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; inline-size: 48px; block-size: 48px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; opacity: 0; transform: translateY(-14px) scale(.6); transition: opacity 380ms var(--ease), transform 640ms var(--ease); -webkit-tap-highlight-color: transparent; }
.cm-pin.is-in { opacity: 1; transform: none; }
.cm-dot { position: absolute; inset: 50% auto auto 50%; inline-size: 14px; block-size: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--pin); box-shadow: 0 0 0 4px rgb(251 249 245 / .96), 0 0 0 5px rgb(154 118 55 / .5), 0 6px 14px rgb(16 26 40 / .25); transition: transform 180ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms linear; }
@media (hover: hover) { .cm-pin:hover .cm-dot { transform: scale(1.15); } }
.cm-pin[aria-pressed="true"] .cm-dot { transform: scale(1.25); box-shadow: 0 0 0 4px rgb(251 249 245 / .96), 0 0 0 6.5px var(--pin-ring), 0 8px 18px rgb(16 26 40 / .3); }
.cm-ripple { position: absolute; inset: 50% auto auto 50%; inline-size: 120px; block-size: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 1.5px solid var(--pin-ring); opacity: 0; transform: scale(.1); pointer-events: none; }
.cm-pin.is-hit .cm-ripple { animation: cm-ripple 1400ms var(--ease) 1 both; }
.cm-pin.is-hit .cm-ripple.r2 { animation-delay: 260ms; }
@keyframes cm-ripple { 0% { opacity: .9; transform: scale(.1); } 100% { opacity: 0; transform: scale(1); } }
.cm-pinlabel { position: absolute; top: 50%; translate: 0 -50%; padding: 3px 11px; border-radius: 999px; background: rgb(251 249 245 / .94); color: var(--pin-ink); font-weight: 650; font-size: .95rem; white-space: nowrap; line-height: 1.6; box-shadow: 0 0 0 1px rgb(154 118 55 / .28); transition: background-color 300ms linear, color 300ms linear, box-shadow 300ms linear; }
:root[dir="rtl"] .cm-pinlabel { right: calc(50% + 17px); }
:root[dir="ltr"] .cm-pinlabel { left: calc(50% + 17px); }
.cm-pin[aria-pressed="true"] .cm-pinlabel { background: var(--pin); color: #f7f4ef; box-shadow: none; }
/* Kish sits on the coast: label below the dot so it never covers the mainland */
.cm-pin-kish .cm-pinlabel { top: calc(50% + 32px); left: 50% !important; right: auto !important; translate: -50% -50%; }
.cm-pin:focus-visible { outline: 2px solid var(--gold-paper); outline-offset: 2px; border-radius: 50%; }

.cm-skip { position: absolute; inset-block-end: 36px; inset-inline-end: 0; min-block-size: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgb(251 249 245 / .92); color: var(--on-paper); box-shadow: inset 0 0 0 1px var(--line-paper-2); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }

/* ---------- panel ---------- */
.cm-switch { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper-2); }
.cm-switch button { min-block-size: 44px; padding: 6px 22px; border: 0; border-radius: 999px; background: none; color: var(--on-paper-2); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 180ms var(--ease), color 150ms linear, scale 120ms var(--ease); }
@media (hover: hover) { .cm-switch button:not([aria-pressed="true"]):hover { color: var(--on-paper); background: rgb(255 255 255 / .55); } }
.cm-switch button:focus-visible { border-radius: 999px; outline-offset: 1px; }
.cm-switch button[aria-pressed="true"] { background: var(--pin); color: #f7f4ef; }
.cm-cards { display: grid; gap: 12px; margin-block-start: 18px; }
.cm-card { position: relative; padding: 18px 22px 12px; border-radius: var(--radius); border: 1px solid var(--line-paper); background: rgb(255 255 255 / .4); transition: background-color 220ms var(--ease), border-color 180ms var(--ease), box-shadow 260ms var(--ease); }
.cm-card::before { content: ""; position: absolute; inset-block: 18px; inset-inline-start: -1px; inline-size: 3px; border-radius: 3px; background: var(--pin-ring); transform: scaleY(0); transition: transform 260ms var(--ease); }
.cm-card.is-on { background: #fff; border-color: rgb(154 118 55 / .45); box-shadow: 0 16px 40px -22px rgb(60 45 20 / .4); }
.cm-card.is-on::before { transform: none; }
.cm-card h2 { margin: 0 0 6px; font-family: var(--font-head); font-size: 1.08rem; font-weight: 700; }
.cm-addr { margin: 0; font-style: normal; color: var(--on-paper-2); font-size: .98rem; line-height: 1.85; }
:root[lang="en"] .cm-addr, :root[lang="zh-CN"] .cm-addr { line-height: 1.65; }
.cm-orig { display: grid; gap: 2px; margin: 10px 0 0; font-size: .85rem; color: var(--on-paper-3); }
/* Final pass: the "Persian address" label measured 5.05:1 (Chromium) but was reported below 4.5:1 in earlier axe runs
   on en/zh-cn while the card was still settling; it now uses the address text colour (7.98:1) for a safe margin. */
.cm-orig small { font-size: .78rem; color: var(--on-paper-2); }
.cm-orig span { font-family: "Vazirmatn", system-ui, sans-serif; color: var(--on-paper-2); line-height: 1.8; }
.cm-copy { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; margin-block-start: 4px; margin-inline-start: -10px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--gold-paper); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
@media (hover: hover) { .cm-copy:hover { background: rgb(154 118 55 / .09); } }
.cm-copy .ic, .cm-replay .ic { inline-size: 18px; block-size: 18px; flex: none; }
.cm-reach { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-block-start: 12px; }
.cm-reach-item { display: grid; gap: 2px; min-block-size: 44px; padding: 13px 18px; border-radius: var(--radius); background: var(--paper-2); transition: background-color var(--t-fast); }
@media (hover: hover) { .cm-reach-item:hover { background: #e3ddd1; } }
.cm-reach-item .k { font-size: .82rem; color: var(--on-paper-2); }
.cm-reach-item .v { font-weight: 650; font-size: 1.05rem; overflow-wrap: anywhere; }
:root[dir="rtl"] .cm-reach-item .v { text-align: right; }
.cm-replay { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; margin-block-start: 8px; margin-inline-start: -8px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--on-paper-2); font: inherit; font-size: .88rem; cursor: pointer; }
@media (hover: hover) { .cm-replay:hover { color: var(--on-paper); } }

/* ---------- partnership band ---------- */
.ct7-coop { background: var(--paper); color: var(--on-paper); padding-block: 0 clamp(64px, 8vw, 112px); }
.ct7-coop-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 48px; padding-block-start: clamp(32px, 4vw, 48px); border-block-start: 1px solid var(--line-paper); }
.ct7-coop .h3 { margin: 0 0 8px; font-family: var(--font-head); }
.ct7-coop p { margin: 0; max-inline-size: 62ch; color: var(--on-paper-2); line-height: 1.85; }

/* ---------- tablet and phone ---------- */
@media (max-width: 1080px) {
  .ct7-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "map" "panel"; }
  .ct7-head { align-self: start; }
  .cm-canvas { inline-size: min(100%, calc(56svh * 1048 / 949), 640px); }
  .cm-switch { display: grid; inline-size: min(100%, 420px); }
  .cm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ct7-coop-in { grid-template-columns: minmax(0, 1fr); }
  .ct7-coop .btn { justify-content: center; }
  .cm-canvas { inline-size: min(100%, calc(48svh * 1048 / 949)); }
  .cm-water { display: none; }
  .cm-cards { grid-template-columns: minmax(0, 1fr); }
  .cm-switch { inline-size: 100%; }
  .cm-pinlabel { font-size: .88rem; }
  .cm-skip { inset-block-end: 30px; }
}
@media (max-width: 360px) { .cm-switch button { padding-inline: 10px; font-size: .92rem; } }
/* phones in landscape and short laptops: map beside the panel */
@media (max-height: 520px) and (orientation: landscape) {
  .ct7-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head map" "panel map"; }
  .cm-canvas { inline-size: min(100%, calc(80svh * 1048 / 949)); }
  .cm-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1800px) { .cm-canvas { inline-size: min(100%, calc(min(76svh, 860px) * 1048 / 949)); } }
@media (prefers-reduced-motion: reduce) {
  .cm-pin, .cm-dot, .cm-card, .cm-card::before, .cm-spot, .cm-fill, .cm-nb, .cm-dotfield, .cm-isl, .cm-water text { transition: none; }
  .cm-pin.is-hit .cm-ripple { animation: none; }
}

/* Rev8 polish: pin labels follow the dot in; selected pin gets a gold core; one dot travels the arc once */
.cm-pinlabel { opacity: 0; transform: translateY(4px); }
.cm-pin.is-in .cm-pinlabel { opacity: 1; transform: none; transition: opacity 420ms var(--ease) 220ms, transform 520ms var(--ease) 220ms, background-color 300ms linear, color 300ms linear, box-shadow 300ms linear; }
.cm-pin[aria-pressed="true"] .cm-dot { background: radial-gradient(circle at 50% 50%, #c9a467 0 34%, var(--pin) 36%); }
.cm-pin::after { content: ""; position: absolute; inset: 50% auto auto 50%; inline-size: 34px; block-size: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(closest-side, rgb(179 145 93 / .28), transparent); opacity: 0; transform: scale(.6); transition: opacity 500ms var(--ease), transform 600ms var(--ease); pointer-events: none; }
.cm-pin[aria-pressed="true"]::after { opacity: 1; transform: scale(1.35); }
.cm-trav { fill: #c9a467; stroke: #fbf9f5; stroke-width: 2.5; opacity: 0; transition: opacity 400ms var(--ease); }
.cm-map.is-trav .cm-trav { opacity: 1; }
.cm-map.is-trav-end .cm-trav { opacity: 0; transition-duration: 700ms; }
.cm-card h2 { letter-spacing: 0; }
.cm-cards { gap: 14px; }
@media (prefers-reduced-motion: reduce) { .cm-pinlabel, .cm-pin::after, .cm-trav { transition: none !important; } .cm-trav { display: none; } }

/* ---------- Final pass: feedback for every control ----------
   Pressed states, focus rings that follow each control's shape, a copy button that confirms
   itself, a card/marker hover link on precise pointers, quicker selection (150-260 ms). */
.cm-pin:active .cm-dot { transform: scale(.9); transition-duration: 90ms; }
.cm-pin[aria-pressed="true"]:active .cm-dot { transform: scale(1.1); }
@media (hover: hover) {
  .cm-pin:hover .cm-pinlabel, .cm-map[data-hint="kish"] .cm-pin-kish .cm-pinlabel, .cm-map[data-hint="tehran"] .cm-pin-tehran .cm-pinlabel { box-shadow: 0 0 0 1px rgb(154 118 55 / .6); }
  .cm-map[data-hint="kish"] .cm-pin-kish .cm-dot, .cm-map[data-hint="tehran"] .cm-pin-tehran .cm-dot { transform: scale(1.15); }
  .cm-map[data-hint="kish"] .cm-pin-kish[aria-pressed="true"] .cm-dot, .cm-map[data-hint="tehran"] .cm-pin-tehran[aria-pressed="true"] .cm-dot { transform: scale(1.25); }
  .cm-card.is-hint:not(.is-on) { border-color: rgb(154 118 55 / .32); }
}
.cm-switch button:active { scale: .97; }
.cm-copy { transition: background-color 150ms linear, color 150ms linear, scale 120ms var(--ease); }
.cm-copy:active, .cm-replay:active { scale: .97; }
.cm-copy:focus-visible, .cm-replay:focus-visible { border-radius: 10px; outline-offset: 0; }
.cm-reach-item { transition: background-color 150ms linear, scale 120ms var(--ease); }
.cm-reach-item:active { scale: .985; background: #ddd6c8; }
.cm-reach-item:focus-visible { border-radius: var(--radius); }
.cm-replay { transition: color 150ms linear, scale 120ms var(--ease); }
/* copy button: icon and label swap in place (both stacked in one cell, so the width never jumps) */
.cm-ic, .cm-cl { display: inline-grid; }
.cm-ic > *, .cm-cl > * { grid-area: 1 / 1; transition: opacity 160ms linear, transform 200ms var(--ease); }
.cm-cl { justify-items: start; }
.cm-copy .ic-done, .cm-copy .l1 { opacity: 0; transform: translateY(4px); }
.cm-copy.is-done { color: #2f6b45; }
.cm-copy.is-done .ic-copy, .cm-copy.is-done .l0 { opacity: 0; transform: translateY(-4px); }
.cm-copy.is-done .ic-done, .cm-copy.is-done .l1 { opacity: 1; transform: none; }
/* the pins' group wrapper is unpositioned, so the markers stay positioned on the map itself */
.cm-pins { position: static; }
/* sea names: shown only while the map is wide enough for them to render at 12 px or more */
.cm-canvas { container: cm / inline-size; }
@container cm (max-width: 670px) { .cm-water { display: none; } }
/* phones in landscape: the map stays in view beside the addresses while they scroll */
@media (max-height: 520px) and (orientation: landscape) {
  .cm-map { align-self: start; position: sticky; inset-block-start: 96px; }
  .cm-canvas { inline-size: min(100%, calc((100svh - 104px) * 1048 / 949)); }
}
:root[data-motion="reduce"] :is(.cm-pin, .cm-dot, .cm-card, .cm-spot, .cm-fill, .cm-nb, .cm-dotfield, .cm-isl, .cm-water text, .cm-pinlabel, .cm-trav, .cm-ic > *, .cm-cl > *),
:root[data-motion="reduce"] .cm-card::before, :root[data-motion="reduce"] .cm-pin::after { transition: none !important; }
:root[data-motion="reduce"] .cm-pin.is-hit .cm-ripple { animation: none; }
@media (prefers-reduced-motion: reduce) { .cm-ic > *, .cm-cl > * { transition: none; } }