/* ==========================================================================
   USAIndiaCFO — colourful landmarks (Amit Sir's choices, 21 Oct 2026)
   site/landmarks.py · assets/js/landmarks.js
   Compare: svc-hero option d (/usacfo/ Empire State, /familyoffice/ globe),
            india option d (/indiacfo/ India Gate hero + the growing city in colour).

   .lmx  every component's root: the illustration palette (bronze by default,
         re-tuned under html[data-theme="blue"]); the theme tokens of clay.css
         carry the ink, lines and the Grow tier colour.
   .lmk  the hubs' first screen: copy left, the structure right with its services
         as labelled links around it (>= 1100px); below that the drawing, then
         the services as three short lists.
   .lmc  the India growing city: phases left, the drawing right (sticky); the
         phase follows the reader (landmarks.js); without JS, or < 1000px, the
         finished drawing and all three phases.
   Motion: transform / opacity only, once; none under prefers-reduced-motion.
   ========================================================================== */

/* ── palette ─────────────────────────────────────────────────────────── */
.lmx {
  --lm-sk1: #fdf8ee; --lm-sk2: #f3e3c4; --lm-pn1: #fcefd6; --lm-pn2: #f0cf9b;
  --lm-sun: #f1c373; --lm-sun-rgb: 241, 195, 115;
  --lm-far: rgba(var(--bronze-deep-rgb), .13);
  --lm-st1: #f4ecdc; --lm-st2: #d9c9a8; --lm-st3: #b59e74;
  --lm-cr1: #eedcb6; --lm-cr2: #c99a52;
  --lm-gls: rgba(49, 64, 74, .4); --lm-gls-s: rgba(35, 47, 55, .5);
  --lm-lt: #f2bf5e; --lm-gl: #3b4953; --lm-gl2: #4f3b31;
  --lm-sd1: #e9c49b; --lm-sd2: #cf9a6e; --lm-sd3: #b77c56; --lm-sd4: #95603f; --lm-sd5: #e1b78c;
  --lm-hy1: #e3c58f; --lm-hy2: #c7a36a; --lm-hy3: #a8854c;
  --lm-ir1: #9c6c45; --lm-ir2: #774d30;
  --lm-sl1: #e2e5e8; --lm-sl2: #a3acb5;
  --lm-cn1: #e6dfd2; --lm-cn2: #bcb2a1;
  --lm-vd1: #7fb5a7; --lm-vd2: #579180;
  --lm-wh1: #fdfcf8; --lm-wh2: #e2dccd;
  --lm-lf1: #93b06c; --lm-lf2: #6f8f4e; --lm-tk: #7a6248;
  --lm-wa1: #9cc6c6;
  --lm-gr1: #b9ca8f; --lm-gr2: #a5ba7b; --lm-path: #ecdcb8;
  --lm-te1: #4f8f87; --lm-te2: #3a716a;
  --lm-co1: #d98a6a; --lm-co2: #bb6c4d;
  --lm-nv1: #4a5d6e; --lm-nv2: #364652;
  --lm-pv1: #d0a25c; --lm-pv2: #aa7b36;
  --lm-sf1: #e8b250; --lm-sf2: #c98f33;
  --lm-oc1: #b3d4d6; --lm-oc2: #5d93a0; --lm-land: #e6d19e;
  --lm-in1: #f2cd92; --lm-in2: var(--bronze-deep);
  --lm-plot: rgba(var(--shade), .15); --lm-isle: #eadbb6;
  --lm-pill: rgba(255, 255, 255, .88);
  --lm-t1: #c4694a; --lm-t2: #3f7f78; --lm-t3: var(--bronze-deep);
  --lm-p-ca: #c0473f; --lm-p-us: #3d5a80; --lm-p-eu: #7b5ea7; --lm-p-ae: #c98f33; --lm-p-in: #e0812c; --lm-p-sg: #cf5b52;
}
html[data-theme="blue"] .lmx {
  --lm-sk1: #f4f8fd; --lm-sk2: #d2e2f4; --lm-pn1: #e6f0fc; --lm-pn2: #adcaee;
  --lm-sun: #f6cd85; --lm-sun-rgb: 246, 205, 133;
  --lm-st1: #eff3f8; --lm-st2: #c3d0e0; --lm-st3: #8ea3be;
  --lm-cr1: #e1e9f4; --lm-cr2: #9cb4d2;
  --lm-gls: rgba(31, 61, 107, .36); --lm-gls-s: rgba(20, 40, 75, .46);
  --lm-lt: #f5c661; --lm-gl: #263f63; --lm-gl2: #3e3a45;
  --lm-sl1: #dde5ee; --lm-sl2: #93a5ba;
  --lm-sd1: #edc8a0; --lm-sd2: #d3a074; --lm-sd3: #b9805a; --lm-sd4: #976146; --lm-sd5: #e5bc91;
  --lm-lf1: #7db68a; --lm-lf2: #58946a; --lm-tk: #6c5a4c;
  --lm-wa1: #a9cdf0;
  --lm-gr1: #abd2a9; --lm-gr2: #94c296; --lm-path: #e9dfcb;
  --lm-te1: #2f9a8f; --lm-te2: #237a71;
  --lm-co1: #e8866b; --lm-co2: #c9664e;
  --lm-nv1: #31548a; --lm-nv2: #223e69;
  --lm-pv1: #82a8dc; --lm-pv2: #5f87c1;
  --lm-sf1: #f1b54e; --lm-sf2: #d49631;
  --lm-oc1: #a5cbf1; --lm-oc2: #3d70b2; --lm-land: #bfdeb3;
  --lm-in1: #fde6c2; --lm-in2: var(--bronze-deep);
  --lm-isle: #e4ecd8;
  --lm-pill: rgba(255, 255, 255, .9);
  --lm-t1: #e07a5f; --lm-t2: #2a8f88; --lm-t3: var(--bronze-deep);
  --lm-p-ca: #d0483f; --lm-p-us: #2f5793; --lm-p-eu: #7a63b8; --lm-p-ae: #c98f2e; --lm-p-in: #ea8a2c; --lm-p-sg: #d65a52;
}

/* ── the drawing vocabulary (fills are classes; colours above) ───────── */
.lmx svg text { pointer-events: none; }
.lmx .stop-sk1 { stop-color: var(--lm-sk1); } .lmx .stop-sk2 { stop-color: var(--lm-sk2); }
.lmk[data-scene="india"] { --lm-pn1: #e4eaea; --lm-pn2: #f5d7ab; }
html[data-theme="blue"] .lmk[data-scene="india"] { --lm-pn1: #e6f0fc; --lm-pn2: #b9d2ef; }
.lmx .stop-pn1 { stop-color: var(--lm-pn1); } .lmx .stop-pn2 { stop-color: var(--lm-pn2); }
.lmx .stop-sun1 { stop-color: rgba(var(--lm-sun-rgb), .55); } .lmx .stop-sun2 { stop-color: rgba(var(--lm-sun-rgb), .16); }
.lmx .stop-sun3 { stop-color: rgba(var(--lm-sun-rgb), 0); }
.lmx .stop-oc1 { stop-color: var(--lm-oc1); } .lmx .stop-oc2 { stop-color: var(--lm-oc2); }
.lmx .stop-sh0 { stop-color: rgba(var(--dark-rgb), 0); } .lmx .stop-sh1 { stop-color: rgba(var(--dark-rgb), .26); }
.lmx .stop-at0 { stop-color: rgba(var(--bronze-bright-rgb), 0); } .lmx .stop-at1 { stop-color: rgba(var(--bronze-bright-rgb), .22); }
.lmx .stop-at2 { stop-color: rgba(var(--bronze-bright-rgb), 0); }
.lmx .sun { fill: var(--lm-sun); } .lmx .sun--soft { fill: rgba(var(--lm-sun-rgb), .62); }
.lmx .ins-l { fill: none; stroke: var(--lm-sd3); stroke-width: .6; opacity: .45; }
.lmx .cloud { fill: rgba(255, 255, 255, .72); } .lmx .far { fill: var(--lm-far); } .lmx .mid { opacity: .9; }
.lmx .st1 { fill: var(--lm-st1); } .lmx .st2 { fill: var(--lm-st2); } .lmx .st3 { fill: var(--lm-st3); }
.lmx .cr1 { fill: var(--lm-cr1); } .lmx .cr2 { fill: var(--lm-cr2); }
.lmx .gls { fill: var(--lm-gls); } .lmx .gls--s { fill: var(--lm-gls-s); }
.lmx .lt { fill: var(--lm-lt); } .lmx .gl { fill: var(--lm-gl); } .lmx .gl2 { fill: var(--lm-gl2); }
.lmx .door { fill: var(--lm-gl); } .lmx .bay { fill: rgba(255, 255, 255, .2); } .lmx .flr { fill: rgba(255, 255, 255, .4); }
.lmx .fin { fill: none; stroke: rgba(var(--dark-rgb), .16); stroke-width: .9; }
.lmx .beacon { fill: var(--lm-lt); filter: drop-shadow(0 0 4px rgba(var(--lm-sun-rgb), .9)); }
.lmx .sd1 { fill: var(--lm-sd1); } .lmx .sd2 { fill: var(--lm-sd2); } .lmx .sd3 { fill: var(--lm-sd3); }
.lmx .sd4 { fill: var(--lm-sd4); } .lmx .sd5 { fill: var(--lm-sd5); }
.lmx .hy1 { fill: var(--lm-hy1); } .lmx .hy2 { fill: var(--lm-hy2); } .lmx .hy3 { fill: var(--lm-hy3); }
.lmx .ir1 { fill: var(--lm-ir1); } .lmx .ir2 { fill: var(--lm-ir2); }
.lmx .sl1 { fill: var(--lm-sl1); } .lmx .sl2 { fill: var(--lm-sl2); }
.lmx .cn1 { fill: var(--lm-cn1); } .lmx .cn2 { fill: var(--lm-cn2); }
.lmx .vd1 { fill: var(--lm-vd1); } .lmx .vd2 { fill: var(--lm-vd2); }
.lmx .wh1 { fill: var(--lm-wh1); } .lmx .wh2 { fill: var(--lm-wh2); }
.lmx .lf1 { fill: var(--lm-lf1); } .lmx .lf2 { fill: var(--lm-lf2); } .lmx .tk { fill: var(--lm-tk); }
.lmx .wa1 { fill: var(--lm-wa1); } .lmx .gr1 { fill: var(--lm-gr1); } .lmx .gr2 { fill: var(--lm-gr2); }
.lmx .path-s { fill: var(--lm-path); }
.lmx .te1 { fill: var(--lm-te1); } .lmx .te2 { fill: var(--lm-te2); }
.lmx .co1 { fill: var(--lm-co1); } .lmx .co2 { fill: var(--lm-co2); }
.lmx .nv1 { fill: var(--lm-nv1); } .lmx .nv2 { fill: var(--lm-nv2); }
.lmx .pv1 { fill: var(--lm-pv1); } .lmx .pv2 { fill: var(--lm-pv2); }
.lmx .sf1 { fill: var(--lm-sf1); } .lmx .sf2 { fill: var(--lm-sf2); }
.lmx .win { fill: rgba(255, 255, 255, .5); } .lmx .win--s { fill: rgba(255, 255, 255, .3); }
.lmx .lat { fill: none; stroke-width: .55; stroke-linecap: round; }
.lmx .lat--a { stroke: var(--lm-ir2); } .lmx .lat--b { stroke: var(--lm-ir1); }
.lmx .lat--g { stroke: rgba(var(--dark-rgb), .12); stroke-width: .45; } .lmx .lat--c { stroke: rgba(var(--dark-rgb), .1); stroke-width: .6; }
.lmx .lat--v { stroke: var(--lm-vd2); stroke-width: .5; } .lmx .lat--w { stroke: var(--lm-wh2); stroke-width: .7; }
.lmx .lat--h { stroke: var(--lm-hy3); stroke-width: .7; }
.lmx .ray { fill: none; stroke: var(--lm-vd1); stroke-width: 1.1; stroke-linecap: round; }
.lmx .arm { fill: none; stroke: var(--lm-vd1); stroke-width: 2.8; stroke-linecap: round; }
.lmx .jet { fill: none; stroke: var(--lm-wa1); stroke-width: 3.2; stroke-linecap: round; }
.lmx .jet--core { stroke: rgba(255, 255, 255, .8); stroke-width: 1; }
.lmx .lm-ins { font-family: Newsreader, Georgia, serif; font-weight: 500; letter-spacing: .32em; fill: var(--lm-sd4); }
.lmx .lm-ins--sm { letter-spacing: .14em; font-weight: 400; }
.lmx .lm-lab { font: 600 11.5px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; fill: var(--ink);
  paint-order: stroke; stroke: rgba(var(--ground-rgb), .9); stroke-width: 3px; stroke-linejoin: round; }
.lmx .lm-cap { font: 500 10px/1 Inter, sans-serif; letter-spacing: .06em; fill: var(--ink-muted);
  paint-order: stroke; stroke: rgba(var(--ground-rgb), .9); stroke-width: 3px; stroke-linejoin: round; }
.lmx .lm-map { font: 600 15px/1 Inter, sans-serif; letter-spacing: .5em; fill: var(--lm-in2); opacity: .55; }
.lmx [data-tier="1"] { --tc: var(--lm-t1); } .lmx [data-tier="2"] { --tc: var(--lm-t2); } .lmx [data-tier="3"] { --tc: var(--lm-t3); }
.lmx .brk { fill: none; stroke: var(--tc); stroke-width: 1.1; opacity: .75; }
.lmx .brk-dot { fill: var(--tc); }
/* globe */
.lmx .ocean { stroke: none; } .lmx .land { fill: var(--lm-land); } .lmx .lake { fill: var(--lm-oc2); opacity: .75; }
.lmx .grat { fill: none; stroke: rgba(255, 255, 255, .36); stroke-width: .6; }
.lmx .orbit { fill: none; stroke: rgba(var(--bronze-deep-rgb), .35); stroke-width: 1; stroke-dasharray: 3 5; }
.lmx .fl-dot { fill: var(--lm-p-in); stroke: #fff; stroke-width: 1.2; }
.lmx .flight { fill: none; stroke: var(--lm-p-in); stroke-width: 1.4; stroke-linecap: round; opacity: .85; }
.lmx .pin { stroke: #fff; stroke-width: 1.6; } .lmx .pin-in { fill: #fff; }
.lmx .badge { fill: var(--lm-pill); fill: color-mix(in srgb, var(--pc) 14%, #fff); filter: drop-shadow(0 3px 6px rgba(var(--dark-rgb), .14)); }
.lmx .badge-rim { fill: none; stroke: var(--pc); stroke-width: 2.4; }
.lmx .lead { fill: none; stroke: var(--pc); stroke-width: .9; stroke-dasharray: 2 3; }
.lmx [data-place="ca"], .lmx .pin--ca { --pc: var(--lm-p-ca); } .lmx [data-place="us"], .lmx .pin--us { --pc: var(--lm-p-us); }
.lmx [data-place="eu"], .lmx .pin--eu { --pc: var(--lm-p-eu); } .lmx [data-place="ae"], .lmx .pin--ae { --pc: var(--lm-p-ae); }
.lmx [data-place="in"], .lmx .pin--in { --pc: var(--lm-p-in); } .lmx [data-place="sg"], .lmx .pin--sg { --pc: var(--lm-p-sg); }
.lmx .pin { fill: var(--pc); }
/* city */
.lmx .wave { fill: none; stroke: rgba(var(--bronze-deep-rgb), .16); stroke-width: 1.1; stroke-linecap: round; }
.lmx .in-sh { fill: rgba(var(--dark-rgb), .07); } .lmx .in1 { fill: var(--lm-in1); }
.lmx .in2 { fill: none; stroke: var(--lm-in2); stroke-width: 1.3; stroke-linejoin: round; }
.lmx .in-dot { stroke: var(--lm-in2); stroke-width: .8; }
.lmx .plot { fill: var(--lm-plot); } .lmx .peg { fill: var(--lm-co2); }
.lmx .slab { fill: var(--lm-st2); } .lmx .slab-t { fill: var(--lm-st1); } .lmx .col { fill: var(--lm-st3); }
.lmx .crane { fill: none; stroke: var(--lm-sf2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lmx .crane--cable { stroke-width: .8; }
.lmx .gnd { fill: rgba(var(--dark-rgb), .1); } .lmx .isle { fill: var(--lm-isle); }

/* ── the first screen ────────────────────────────────────────────────── */
.lmk { position: relative; overflow: hidden; padding: calc(var(--head-h) + clamp(28px, 4vw, 56px)) 0 clamp(36px, 4.5vw, 64px); }
/* the room the fixed phone bar takes (site.css .mbar, <= 940px): the tablet first screens size their figure by it */
.lmk { --mb: 0px; }
@media (max-width: 940px) { .lmk { --mb: calc(60px + env(safe-area-inset-bottom, 0px)); } }
.lmk::after { content: ""; position: absolute; z-index: 0; width: 820px; height: 820px; right: -240px; top: -320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--bloom-rgb), .16) 0%, rgba(var(--bloom-rgb), .05) 46%, rgba(var(--bloom-rgb), 0) 70%); pointer-events: none; }
.lmk__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(24px, 3.4vw, 56px); align-items: center; min-height: calc(88svh - var(--head-h)); }
.lmk__copy { max-width: 540px; }
.lmk h1.display-lg { font-size: clamp(2.2rem, 4vw, 4.1rem); max-width: 16ch; }
.lmk .eyebrow { margin-bottom: 22px; }
.lmk__lede { margin-top: 24px; max-width: 46ch; }
.lmk__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; }
.lmk__ghost { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; font: 500 14px/1 Inter, sans-serif;
  color: var(--ink-muted); transition: color .3s var(--ease); }
.lmk__ghost:hover { color: var(--bronze-deep); }
.lmk__ghost:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 3px; border-radius: 6px; }
.lmk__proof { list-style: none; margin: clamp(26px, 3vw, 38px) 0 0; padding: 0; max-width: 460px; display: grid; gap: 8px;
  font: 400 14px/1.5 Inter, sans-serif; color: var(--ink-muted); }
.lmk__proof li { padding-left: 16px; position: relative; }
.lmk__proof li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--bronze); }
.lmk__scene { position: relative; min-width: 0; }
.lmk__stage { position: relative; }
.lmk__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* the service labels: links on a pill, coloured by phase */
.lmk__pill { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 6px 12px 6px 10px; border-radius: var(--r-pill);
  background: var(--lm-pill); border: 1px solid rgba(var(--dark-rgb), .08); box-shadow: 0 2px 6px rgba(var(--dark-rgb), .07);
  font: 500 12.5px/1.15 Inter, sans-serif; color: var(--ink); white-space: nowrap; text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), translate .25s var(--ease); }
a.lmk__pill:hover { background: #fff; color: var(--bronze-deep); box-shadow: 0 4px 12px rgba(var(--dark-rgb), .13); }
a.lmk__pill:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 2px; background: #fff; color: var(--bronze-deep); }
.lmk__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tc); }
.lmk__th { margin: 0; font: 600 11px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--tc); white-space: nowrap; }
.lmk__tn { color: var(--ink-faint); margin-right: 4px; }

@media (min-width: 1100px) {
  .lmk__tiers { position: absolute; inset: 0; pointer-events: none; }
  .lmk__tier, .lmk__tier .lmk__pills { display: contents; }
  .lmk__tier .lmk__pill { position: absolute; top: var(--y); transform: translateY(-50%); pointer-events: auto; }
  .lmk__tier .lmk__pill[data-side="l"] { right: 69%; }
  .lmk__tier .lmk__pill[data-side="r"] { left: 69%; }
  .lmk__th { position: absolute; top: var(--y); right: 69%; transform: translateY(-50%); padding: 6px 11px; border-radius: var(--r-pill);
    background: var(--lm-pill); box-shadow: 0 2px 6px rgba(var(--dark-rgb), .06); }
  a.lmk__pill[data-side="l"]:hover, a.lmk__pill[data-side="l"]:focus-visible { translate: -3px 0; }
  a.lmk__pill[data-side="r"]:hover, a.lmk__pill[data-side="r"]:focus-visible { translate: 3px 0; }
  /* a label in focus or under the pointer picks out its own tier */
  .lmk__stage .lm-t, .lmk__stage .lm-brk { transition: opacity .35s var(--ease); }
  .lmk__stage:has(a.lmk__pill[data-tier="1"]:is(:hover, :focus-visible)) :is(.lm-t, .lm-brk):not([data-tier="1"]),
  .lmk__stage:has(a.lmk__pill[data-tier="2"]:is(:hover, :focus-visible)) :is(.lm-t, .lm-brk):not([data-tier="2"]),
  .lmk__stage:has(a.lmk__pill[data-tier="3"]:is(:hover, :focus-visible)) :is(.lm-t, .lm-brk):not([data-tier="3"]) { opacity: .42; }
}
@media (max-width: 1099px) {
  .lmk__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 26px; }
  .lmk__copy { max-width: 640px; }
  .lmk__scene { width: 100%; max-width: 620px; margin: 0 auto; }
  .lmk__stage:not(.lmk__stage--globe) { overflow: hidden; }
  .lmk__stage:not(.lmk__stage--globe) .lmk__svg { width: 136%; max-width: none; margin-left: -18%; }
  .lmx .lm-brk { display: none; }
  .lmk__tiers { display: grid; gap: 18px; margin-top: 18px; }
  .lmk__th { margin-bottom: 9px; }
  .lmk__tier .lmk__pills { display: flex; flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 600px) {
  .lmk__acts .btn { width: 100%; }
  .lmk__ghost { min-height: 40px; }
  .lmk__pill { white-space: normal; font-size: 13px; min-height: 34px; }
  .lmx .lm-lab { font-size: 17px; }
}

/* the Family Office globe: the two groups of services under it */
.lmk__stage--globe { max-width: 600px; margin: 0 auto; }
.lmk__groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 26px; margin-top: 14px; }
.lmk__grp .lmk__pills { display: flex; flex-wrap: wrap; gap: 7px; }
.lmk__gh { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 11px/1.3 Inter, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); }
.lmk__gk { width: 18px; height: 2px; border-radius: 2px; background: var(--tc); }
.lmk[data-scene="family"] [data-tier="1"] { --tc: var(--lm-p-in); }
.lmk[data-scene="family"] [data-tier="2"] { --tc: var(--lm-p-us); }
@media (max-width: 600px) { .lmk__groups { grid-template-columns: minmax(0, 1fr); } }

/* first-paint motion: the structure rises tier by tier, then its labels */
@keyframes lm-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lm-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.lmk .lm-t { transform-box: view-box; animation: lm-rise .9s var(--ease) backwards; }
.lmk .lm-t[data-tier="2"] { animation-delay: .32s; } .lmk .lm-t[data-tier="3"] { animation-delay: .64s; }
.lmk .lm-brk { animation: lm-fade .6s ease backwards; animation-delay: 1.1s; }
.lmk .lmk__pill, .lmk .lmk__th { animation: lm-in .55s var(--ease) backwards; animation-delay: .9s; }
.lmk [data-tier="2"] .lmk__pill, .lmk [data-tier="2"] .lmk__th { animation-delay: 1.05s; }
.lmk [data-tier="3"] .lmk__pill, .lmk [data-tier="3"] .lmk__th { animation-delay: 1.2s; }
.lmk .lm-badge { animation: lm-in .6s var(--ease) backwards; animation-delay: calc(.9s + var(--i) * .1s); }
.lmk .flight { stroke-dasharray: 1; animation: lm-draw 1.1s var(--ease) backwards; animation-delay: .7s; }
@keyframes lm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ── the growing city ────────────────────────────────────────────────── */
.lmc__head-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-top: 22px; }
.lmc__sub { max-width: 42ch; justify-self: end; }
.lmc__grid { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(28px, 4vw, 52px); align-items: start; }
.lmc__panel { padding: 22px 0 22px 22px; border-left: 2px solid var(--line); transition: opacity .45s var(--ease), border-color .45s var(--ease); }
.lmc__panel + .lmc__panel { margin-top: 18px; }
.lmc__no { margin: 0 0 8px; font: 600 11px/1 Inter, sans-serif; letter-spacing: .2em; color: var(--tc); }
.lmc__title { margin: 0; font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.15; }
.lmc__ph { font: 600 .62em/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--tc); vertical-align: .18em; }
.lmc__dash { color: var(--ink-faint); }
.lmc__body { margin: 12px 0 0; color: var(--ink-muted); max-width: 48ch; }
.lmc__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 20px; }
.lmc__list li { position: relative; padding-left: 15px; font: 400 15px/1.4 Inter, sans-serif; }
.lmc__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--tc); }
.lmc__list a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(var(--bronze-deep-rgb), .35); text-underline-offset: 3px; }
.lmc__list a:hover { color: var(--bronze-deep); text-decoration-color: currentColor; }
.lmc__list a:focus-visible, .lmc__link:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 2px; border-radius: 3px; }
.lmc__link { display: inline-flex; margin-top: 18px; }
.lmc__stage { position: relative; }
.lmc__svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 34px rgba(var(--shade), .14)); }
.lmc__legend { display: none; list-style: none; margin: 14px 0 0; padding: 0; flex-wrap: wrap; gap: 8px 16px;
  font: 600 11px/1.2 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.lmc__legend li { display: inline-flex; align-items: center; gap: 7px; }
.lmc__lk { width: 9px; height: 9px; border-radius: 50%; background: var(--pc); }
.lmc__caps { margin-top: 14px; min-height: 2.8em; }
.lmc__cap { margin: 0; font: 400 14px/1.5 Inter, sans-serif; color: var(--ink-muted); text-align: center; }
.lmc__cap:not([data-phase="3"]) { display: none; }
/* phases: the markup is the finished drawing (phase 3); landmarks.js sets data-phase 1 → 3 */
.lmc .lmc-p, .lmc .lmc-ov { transition: opacity .7s var(--ease), translate .8s var(--ease); }
.lmc[data-phase="1"] .lmc-p:is([data-ph="2"], [data-ph="3"]),
.lmc[data-phase="2"] .lmc-p[data-ph="3"] { opacity: 0; translate: 0 14px; }
.lmc[data-phase="3"] .lmc-p[data-until="2"] { opacity: 0; }
.lmc .lmc-p--fl .flight { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) .35s; }
.lmc:not([data-phase="3"]) .lmc-p--fl .flight { stroke-dashoffset: 1; transition-delay: 0s; }
.lmc .lmc-ov { transition-delay: calc(.45s + var(--i) * .12s); }
.lmc:not([data-phase="3"]) .lmc-ov { opacity: 0; translate: 0 10px; transition-delay: 0s; }
.lmc--js[data-phase="1"] .lmc__cap[data-phase="1"], .lmc--js[data-phase="2"] .lmc__cap[data-phase="2"] { display: block; }
.lmc--js:not([data-phase="3"]) .lmc__cap[data-phase="3"] { display: none; }
.lmc--js .lmc__panel { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; opacity: .7; }
.lmc--js .lmc__panel.is-on { opacity: 1; border-color: var(--tc); }
@media (min-width: 1000px) {
  .lmc__aside { position: relative; height: 100%; }
  .lmc__stage { position: sticky; top: calc(var(--head-h) + 24px); }
}
@media (max-width: 999px) {
  .lmc__head-row { grid-template-columns: minmax(0, 1fr); }
  .lmc__sub { justify-self: start; }
  .lmc__grid { grid-template-columns: minmax(0, 1fr); }
  .lmc__aside { order: -1; }
  .lmc__legend { display: flex; }
  .lmx .lmc__svg .lm-lab, .lmx .lmc__svg .lm-cap { display: none; }
}
@media (max-width: 600px) {
  .lmc__list { grid-template-columns: minmax(0, 1fr); }
  .lmc__panel { padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lmk .lm-t, .lmk .lm-brk, .lmk .lmk__pill, .lmk .lmk__th, .lmk .lm-badge, .lmk .flight { animation: none; }
  .lmx *, .lmc .lmc-p, .lmc .lmc-ov, .lmc .flight { transition: none !important; }
}

/* ── /usacfo/ "One-stop solution" image, Compare usa-onestop (owner 22 Oct 2026) ───── */
html:not([data-v-usa-onestop="b"]) .uos-b, html[data-v-usa-onestop="b"] .uos-a { display: none; }
.uos-tile { border-radius: var(--r-lg, 28px); overflow: hidden; box-shadow: var(--clay-md, 0 18px 40px rgba(0,0,0,.08));
  background: linear-gradient(180deg, var(--lm-pn1), var(--lm-pn2)); }
.uos-svg { display: block; width: 100%; height: auto; aspect-ratio: 320 / 250; }