/* components part 10 of 11 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */

.mp-label{fill:var(--faint);font-family:var(--sans);font-size:11px;font-weight:700;
          letter-spacing:.13em;text-transform:uppercase}
.mp-bg path{fill:var(--hair);stroke:var(--white);stroke-width:1;vector-effect:non-scaling-stroke}
/* No markers. A dot sized to carry a count was wider than Estonia, Latvia and
   Austria put together, so the country fill is the whole display and the whole
   control; an invisible circle from make_map.py supplies a finger-sized hit area. */
/* The country FILL is the hit target, plus the invisible circle for the small ones.
   This used to be pointer-events:none, which left the circle as the only way to click
   anything: the USA renders 329x151px on a 1600px screen and its entire clickable area
   was a 25x25px disc — 0.6% of the country. Three probes inside the USA all missed it.
   Estonia is 15x7px, so the circle still earns its place; it just should not be the
   ONLY target. */
.mp-live path{fill:var(--accent);stroke:var(--white);stroke-width:.7;
              transition:fill .18s;vector-effect:non-scaling-stroke;pointer-events:auto}
.mp-pin{cursor:pointer}
.mp-hit{fill:transparent}
/* Hover and selected must not look the same. Both were var(--ink), so hovering a country
   was indistinguishable from having chosen it. Hover is now a mid tone between the resting
   accent and the selected ink; .mp-pin.on keeps the full ink below. */
.mp-pin:hover path,.mp-pin:focus-visible path{fill:#8a6b41}
.mp-pin.on path{fill:var(--ink)}
/* :focus, NOT :focus-visible — this one word is the whole fix for the ring on click.
   The ring was never ours. Clicking a `<g role="button" tabindex="0">` gives :focus but
   NOT :focus-visible, so the old `.mp-pin:focus-visible{outline:none}` never fired on a
   mouse click and the browser drew its own `-webkit-focus-ring-color auto 5px` — the OS
   accent, blue on a default Mac. Worse, an outline on a <g> is drawn round the group's
   bounding box, so clicking the USA boxed everything from Alaska to Maine. hello-elementor's
   reset already handles this for real buttons (`button:focus:not(:focus-visible)`), but a
   <g> is not a button. :focus is a superset, so this kills the UA ring on click AND on Tab,
   while the accent stroke below still marks keyboard focus. */
.mp-pin:focus{outline:none}
.mp-pin:focus-visible path{fill:var(--ink);stroke:var(--accent);stroke-width:3}
.mp-pin.dead{cursor:default;pointer-events:none}
.mp-pin.dead path{fill:var(--hair);pointer-events:none}

/* ---------------------------------------------------- browse by service (strip)
   The cards used to carry a photograph each, on a page that is already 233
   photographs. Icons say "this is a category" instead of competing with the work,
   and a card without an image is short enough that six fit in one scrolling row.

   pfs-*, NOT svc-*. This component is private to the portfolio, and it used to reuse
   .svc-strip / .svc-card / .svc-more / .svc-head / .svc-ico -- names that already belong
   to the shared design system in interior-ref.html, where .svc-strip is a six-card GRID
   of photographs rather than a horizontal flex scroller. That was invisible until
   build_interior.py started splicing this stylesheet into /services/interior-rendering/,
   which appends it AFTER that page's own <style>: at equal specificity the scroller won,
   and the top half of the service page collapsed. RULE 0 -- the shared component keeps
   the name, the private one gets its own. */
.pfs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.pfs-head > div{min-width:0}
.strip-arrows{display:flex;gap:8px;flex:0 0 auto;padding-bottom:4px}
.strip-arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--hair);
             background:var(--white);color:var(--ink);cursor:pointer;
             display:inline-flex;align-items:center;justify-content:center;
             transition:border-color .16s,color .16s,opacity .16s}
.strip-arrow svg{width:15px;height:15px}
.strip-arrow:hover,.strip-arrow:focus{background:rgba(20,19,16,.05)}
.strip-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.strip-arrow:disabled{opacity:.32;cursor:default;color:var(--ink);
                      border-color:var(--hair);background:var(--white)}

/* Full bleed, but the first card lines up with the H2 above it — that alignment is
   what stops a bleeding strip from looking like it slid out of the layout. */
.pfs-strip{display:flex;gap:14px;margin-top:clamp(24px,3vw,38px);
           overflow-x:auto;overscroll-behavior-x:contain;
           scroll-snap-type:x proximity;scrollbar-width:none;
           padding:4px var(--edge-vp) 8px;scroll-padding-inline:var(--edge-vp)}
.pfs-strip::-webkit-scrollbar{display:none}
.pfs-strip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media(prefers-reduced-motion:no-preference){ .pfs-strip{scroll-behavior:smooth}}

.pfs-card{flex:0 0 clamp(238px,74vw,296px);scroll-snap-align:start;
          display:flex;flex-direction:column;gap:9px;min-width:0;
          padding:22px 22px 20px;background:var(--white);
          border:1px solid var(--hair);border-radius:12px;
          text-decoration:none;color:var(--body);
          transition:border-color .18s,transform .18s}
.pfs-card:hover{border-color:var(--faint);transform:translateY(-2px)}
.pfs-ico{width:38px;height:38px;border-radius:9px;background:var(--grey);
         color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
         margin-bottom:2px;transition:background .18s,color .18s}
.pfs-ico svg{width:20px;height:20px}
.pfs-card:hover .pfs-ico{background:var(--wash-lt)}
.pfs-card h3{margin:0;font-family:var(--disp);font-size:17.5px;font-weight:700;
             letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.pfs-card p{margin:0;flex:1 1 auto;font-size:14px;line-height:1.55;color:var(--muted)}
.pfs-more{display:inline-flex;align-items:center;gap:7px;margin-top:4px;
          font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--accent);
          transition:gap .18s}
.pfs-more svg{width:14px;height:14px}
.pfs-card:hover .pfs-more{gap:11px;color:var(--accent)}@media(max-width:860px){
  .pfs-head{flex-direction:column;align-items:flex-start;gap:16px}
  .strip-arrows{display:none}   /* a thumb already scrolls it */
}

/* VIRTUAL STAGING: the before/after pair as one card.
   The AFTER frame is the card's own <img>; the BEFORE sits on top of it in a box clipped
   to the left half. Its <img> is sized to 100% of the CARD, not of the clip box, or the
   two halves would not line up and the join would show a jump. The divider and the two
   labels make the split read as deliberate rather than as a rendering fault. */
.c.stage-pair{position:relative}
.st-b{position:absolute;inset:0;width:50%;overflow:hidden;z-index:1;pointer-events:none}
.st-b img{position:absolute;left:0;top:0;height:100%;width:auto;max-width:none;
          object-fit:cover}
.st-div{position:absolute;left:50%;top:0;bottom:0;width:2px;z-index:2;
        background:rgba(255,255,255,.85);box-shadow:0 0 8px rgba(16,15,13,.35);
        pointer-events:none}
.st-l{position:absolute;bottom:10px;z-index:3;pointer-events:none;
      padding:3px 8px;border-radius:999px;background:rgba(20,19,16,.55);
      -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;
      font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
      line-height:1.4}
.st-l1{left:10px} .st-l2{right:10px}@media(max-width:700px){.st-l{font-size:8.5px;padding:2px 6px}}

/* The lightbox comparison. Same two images, but the split follows the pointer. */
.lb-cmp{position:relative;max-width:min(1500px,94vw);max-height:84vh;
        touch-action:none;cursor:ew-resize;line-height:0;user-select:none}
.lb-cmp[hidden]{display:none}
.lb-cmp>img{display:block;width:100%;height:auto;max-height:84vh;object-fit:contain}
.lb-cmp .cmp-b{position:absolute;inset:0;overflow:hidden;width:50%}
.lb-cmp .cmp-b img{position:absolute;left:0;top:0;height:100%;width:auto;max-width:none}
.lb-cmp .cmp-h{position:absolute;top:0;bottom:0;left:50%;width:2px;
               background:#fff;box-shadow:0 0 10px rgba(0,0,0,.45);z-index:3}
.lb-cmp .cmp-h::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.lb-cmp .cmp-l{position:absolute;bottom:14px;z-index:4;padding:5px 11px;border-radius:999px;
  background:rgba(20,19,16,.6);color:#fff;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase}
.lb-cmp .cmp-l1{left:14px} .lb-cmp .cmp-l2{right:14px}

/* ------------------------------------------------------------- panorama viewer */
/* Width capped at 1100 and the aspect stated once. It used to take width from vw
   and height from vh independently, so the canvas shape — and with it the field of
   view — drifted with the window. 1100 is where a 2560px source lands at a 1.7x
   upscale instead of 2.6x; wider looks bigger and reads softer. */
/* The stage exists so the controls can sit ON the panorama rather than beside it.
   Width went 1100 -> 1500: the old cap was chosen when the source was 2560px and
   anything wider was visible upscale. The sources are now 6144px, so the constraint
   moved and the viewer no longer has to apologise for its size on a large display. */
.pano-stage{position:relative;width:min(1500px,94vw);max-height:84vh;aspect-ratio:16/9;
            display:block;line-height:0}
.pano-stage[hidden]{display:none}
#pfPano{width:100%;height:100%;display:block;touch-action:none;cursor:grab;
        background:var(--ink);border-radius:2px}
#pfPano:active{cursor:grabbing}
#pfPano[hidden]{display:none}
/* THE AFFORDANCE PROBLEM. A panorama that is not moving and has no controls is
   indistinguishable from a photograph of a bent room — you have to already know to
   drag it. Auto-rotation was the only cue, and it is switched off entirely for anyone
   with prefers-reduced-motion, which is a lot of people. So the cue is now explicit
   and always present: two arrows and a transport control that say "this thing turns"
   without moving a pixel. */
.pano-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
          display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
          background:rgba(20,19,16,.46);color:#fff;
          -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
          transition:background .18s,transform .18s;padding:0}
.pano-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
              stroke-linecap:round;stroke-linejoin:round}