/* ============ Face map widget (settings-driven) ============ */
  .jvfm{
    --jvfm-accent:#00A9BA;                                  /* brand teal */
    --jvfm-ink:#231F20;                                     /* brand black */
    --jvfm-head:"colfax-web","Colfax","Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    position:relative; width:100%; max-width:1160px; margin:0 auto; background:transparent;
    font-family:var(--jvfm-head); -webkit-tap-highlight-color:transparent;
    container-type:inline-size;                             /* phone sizes scale with the widget, not the window */
  }
  .jvfm *{box-sizing:border-box; margin:0; padding:0}

  /* ---------- hint: always visible, centered above the head ----------
     Sits in the gap between the section's intro text and the photo. The lift pulls it up into
     that section padding (100px desktop / 64px tablet in Services-Final) so it lands about midway;
     the photo does not move. Tune --jvfm-hint-lift if that spacing changes. */
  .jvfm-hint{
    --jvfm-hint-lift:52px;
    position:relative; display:block; text-align:center;
    margin:calc(-1 * var(--jvfm-hint-lift)) 0 calc(var(--jvfm-hint-lift) - 16px);
    font-family:var(--jvfm-head); font-weight:400;
    font-size:12px; line-height:16px; letter-spacing:.18em; text-transform:uppercase; color:var(--jvfm-ink);
    opacity:.6; pointer-events:none;
  }
  .jvfm-hint:empty{display:none}
  @media (max-width:1024px){ .jvfm-hint{--jvfm-hint-lift:36px} }

  /* ---------- desktop canvas ---------- */
  .jvfm-canvas{position:relative; width:100%; container-type:inline-size}
  .jvfm .jvfm-img{
    position:absolute; left:50%; top:0;
    height:100% !important; width:auto !important; max-width:none !important; max-height:none !important;
    transform:translateX(-50%); border-radius:0 !important; box-shadow:none !important;
    user-select:none; -webkit-user-select:none; pointer-events:none;
  }

  /* glow: one soft dot that fades to transparent. Size and --jvfm-dot-op (opacity) come from the
     settings, separately for desktop (set on the canvas) and phones (set on the photo crop). */
  .jvfm-gdot{
    position:absolute; aspect-ratio:1/1; border-radius:50%; pointer-events:none;
    background:radial-gradient(closest-side, var(--jvfm-accent) 0%, var(--jvfm-accent) 24%, transparent 100%);
    opacity:0; transform:translate(-50%,-50%) scale(.55);
    transition:opacity .25s ease, transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .jvfm-gdot.jvfm-on{opacity:var(--jvfm-dot-op,.9); transform:translate(-50%,-50%) scale(1); animation:jvfmDotPulse 2.4s ease-in-out .4s infinite}
  @keyframes jvfmDotPulse{0%,100%{opacity:var(--jvfm-dot-op,.9)}50%{opacity:calc(var(--jvfm-dot-op,.9) * .67)}}

  /* hover target on the face around each dot */
  .jvfm-hit{position:absolute; aspect-ratio:1/1; border-radius:50%; transform:translate(-50%,-50%); cursor:pointer}

  /* connector lines (always horizontal; geometry set by JS) */
  .jvfm-lines{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
  .jvfm-lines line{stroke:var(--jvfm-ink); stroke-width:1.5; opacity:.7; transition:opacity .3s, stroke .3s}
  .jvfm[data-active] .jvfm-lines line:not(.jvfm-on){opacity:.15}
  .jvfm .jvfm-lines line.jvfm-on{opacity:1; stroke:var(--jvfm-accent)}

  /* labels */
  .jvfm-hs{position:absolute; display:flex; align-items:center; gap:.6em; cursor:pointer; transition:opacity .3s}
  .jvfm-left{transform:translate(-100%,-50%)}
  .jvfm-right{transform:translate(0,-50%)}
  .jvfm[data-active] .jvfm-hs:not(.jvfm-on){opacity:.35}
  .jvfm-label{
    font-family:var(--jvfm-head); font-weight:400; text-transform:uppercase;
    letter-spacing:.02em; color:var(--jvfm-ink);
    font-size:clamp(11px,1.45cqw,24px); line-height:1.2; text-align:center; white-space:nowrap;
  }
  .jvfm .jvfm-dot, .jvfm .jvfm-dot:hover, .jvfm .jvfm-dot:focus{
    flex:0 0 auto; width:clamp(24px,3.2cqw,52px); height:clamp(24px,3.2cqw,52px); border-radius:50%; border:0;
    background:var(--jvfm-ink); color:#fff; cursor:pointer; position:relative; padding:0; box-shadow:none;
    transition:background .3s, transform .3s;
  }
  .jvfm-dot span::before, .jvfm-dot span::after{
    content:""; position:absolute; background:#fff; left:50%; top:50%; border-radius:2px; transition:transform .3s;
  }
  .jvfm-dot span::before{width:42%; height:1.5px; transform:translate(-50%,-50%)}
  .jvfm-dot span::after{width:1.5px; height:42%; transform:translate(-50%,-50%)}
  .jvfm .jvfm-hs:hover .jvfm-dot,
  .jvfm .jvfm-hs.jvfm-on .jvfm-dot{background:var(--jvfm-accent); transform:scale(1.1)}
  .jvfm-hs.jvfm-on .jvfm-dot span::after{transform:translate(-50%,-50%) rotate(90deg)}
  .jvfm .jvfm-dot:focus-visible{outline:2px solid var(--jvfm-accent); outline-offset:3px}

  /* popup: colour from the settings (default blush #FFF1ED); JS picks brand black or white text.
     It sits behind the active label (the label stays on top), so the label is its heading. */
  .jvfm-tip{
    position:absolute; z-index:5; width:330px; pointer-events:none;
    background:var(--jvfm-tip-bg,#FFF1ED); color:var(--jvfm-tip-ink,#231F20);
    border-radius:18px; padding:18px 24px 20px;
    box-shadow:0 18px 46px rgba(35,31,32,var(--jvfm-tip-sh,.22)), 0 2px 6px rgba(35,31,32,calc(var(--jvfm-tip-sh,.22) * .36));
    opacity:0; transition:opacity .15s ease;
  }
  .jvfm-tip.jvfm-show{opacity:1}
  .jvfm-tip-text{font-family:var(--jvfm-head); font-weight:400; font-size:14px; line-height:1.6; color:inherit}
  .jvfm-canvas .jvfm-hs.jvfm-on{z-index:6}
  /* above the popup: the glow dots and the active line (a copy of it on its own layer) */
  .jvfm-canvas .jvfm-gdot{z-index:7}
  .jvfm-lines-top{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:7}
  .jvfm-lines-top line{stroke:var(--jvfm-accent); stroke-width:1.5; opacity:0; transition:opacity .15s ease}
  .jvfm-lines-top line.jvfm-on{opacity:1}
  .jvfm-canvas .jvfm-hs.jvfm-on .jvfm-label{color:var(--jvfm-tip-ink,var(--jvfm-ink))}

  /* intro: labels fade in once, then state changes are instant */
  .jvfm-hs, .jvfm-lines line{opacity:0}
  .jvfm.jvfm-in .jvfm-hs{opacity:1; transition:opacity .6s ease calc(var(--i)*90ms)}
  .jvfm.jvfm-in .jvfm-lines line{opacity:.7; transition:opacity .6s ease .5s, stroke .3s}
  .jvfm.jvfm-in[data-active] .jvfm-hs:not(.jvfm-on){opacity:.35; transition:opacity .3s}
  .jvfm.jvfm-in[data-active] .jvfm-lines line:not(.jvfm-on){opacity:.15; transition:opacity .3s, stroke .3s}
  .jvfm.jvfm-in .jvfm-lines line.jvfm-on{opacity:1}
  .jvfm.jvfm-ready .jvfm-hs{transition:opacity .15s ease 0s !important}
  .jvfm.jvfm-ready .jvfm-lines line{transition:opacity .15s ease 0s, stroke .15s ease 0s !important}

  /* ---------- phone / small tablet (JS adds .is-m at <=800px) ---------- */
  .jvfm:not(.is-m) .jvfm-m{display:none}
  .jvfm.is-m .jvfm-hint, .jvfm.is-m .jvfm-canvas{display:none !important}
  .jvfm-m{position:relative; display:block}

  /* prompt: always-visible small line above the list, centered like the desktop hint. Right
     padding mirrors the section's 25px left padding so it centers under the intro. */
  .jvfm-m-hint{
    padding:clamp(14px,4cqw,22px) 25px clamp(18px,5cqw,26px) 0; text-align:center;
    font-family:var(--jvfm-head); font-weight:400;
    font-size:12px; line-height:16px; letter-spacing:.18em; text-transform:uppercase; color:var(--jvfm-ink);
    opacity:.6;
  }

  /* accordion list + photo: photo pinned bottom-right (no gap below it). The stage is as tall as
     the prompt + list plus a fixed stretch of photo below the last item (--jvfm-mb), so opening an
     answer grows the widget and the photo moves down with the rows below it. */
  .jvfm-m-stage{
    position:relative; display:flex; flex-direction:column; justify-content:flex-start;
    min-height:var(--jvfm-mh,auto); padding-bottom:var(--jvfm-mb,0px);
  }
  .jvfm-m-body{position:relative; z-index:2}
  .jvfm-m-list{
    --jvfm-m-dot:clamp(28px,5.9cqw,38px); --jvfm-m-gap:clamp(9px,2.8cqw,14px);
    position:relative; z-index:2; display:flex; flex-direction:column; align-items:stretch;
    gap:clamp(2px,.5cqw,6px); padding:2px 0 0 0;
    max-width:calc(100% - clamp(200px,55cqw,360px) * var(--jvfm-m-clear,.6));   /* keeps text off the photo's subject (mobileClear) */
  }
  .jvfm-m-row{display:flex; flex-direction:column; align-items:flex-start}
  .jvfm .jvfm-m-item, .jvfm .jvfm-m-item:hover, .jvfm .jvfm-m-item:focus{
    display:flex; align-items:center; gap:var(--jvfm-m-gap);
    width:auto; max-width:100%; background:none; border:0; box-shadow:none; color:inherit;
    padding:clamp(2px,.65cqw,5px) 0; cursor:pointer; text-align:left; font:inherit;
    -webkit-tap-highlight-color:transparent;
  }
  .jvfm .jvfm-m-item:focus-visible{outline:2px solid var(--jvfm-accent); outline-offset:2px; border-radius:4px}
  .jvfm-m-dot{
    flex:0 0 auto; position:relative; border-radius:50%;
    width:var(--jvfm-m-dot); height:var(--jvfm-m-dot);
    background:var(--jvfm-ink); transition:background .2s ease;
  }

  /* the answer opens under its treatment, lined up with the label text */
  .jvfm-m-panel{display:grid; grid-template-rows:0fr; width:100%; transition:grid-template-rows .22s ease}
  .jvfm-m-open .jvfm-m-panel{grid-template-rows:1fr}
  .jvfm-m-panel-in{min-height:0; overflow:hidden; visibility:hidden; transition:visibility 0s linear .22s}
  .jvfm-m-open .jvfm-m-panel-in{visibility:visible; transition-delay:0s}
  .jvfm-m-desc{
    padding:clamp(2px,.6cqw,4px) 0 clamp(10px,3cqw,16px) calc(var(--jvfm-m-dot) + var(--jvfm-m-gap));
    font-family:var(--jvfm-head); font-weight:400; font-size:clamp(14px,3.8cqw,16px);
    line-height:1.55; color:var(--jvfm-ink);
    opacity:0; transition:opacity .18s ease;
  }
  .jvfm-m-open .jvfm-m-desc{opacity:1; transition-delay:.05s}
  .jvfm-m-dot span::before, .jvfm-m-dot span::after{
    content:""; position:absolute; left:50%; top:50%; background:#fff; border-radius:2px; transition:transform .2s ease;
  }
  .jvfm-m-dot span::before{width:40%; height:1.5px; transform:translate(-50%,-50%)}
  .jvfm-m-dot span::after{width:1.5px; height:40%; transform:translate(-50%,-50%)}
  .jvfm-m-item.jvfm-m-on .jvfm-m-dot{background:var(--jvfm-accent)}
  .jvfm-m-item.jvfm-m-on .jvfm-m-dot span::after{transform:translate(-50%,-50%) rotate(90deg)}
  .jvfm-m-lbl{
    font-family:var(--jvfm-head); font-weight:400; text-transform:uppercase;
    letter-spacing:.02em; line-height:1.15; color:var(--jvfm-ink);
    font-size:clamp(13px,2.8cqw,15px); transition:color .2s ease;
  }
  .jvfm-m-item.jvfm-m-on .jvfm-m-lbl{color:var(--jvfm-accent)}

  /* photo: fixed width -> fixed height, so it never resizes when the copy changes */
  .jvfm-m-figure{position:absolute; right:0; bottom:0; width:clamp(200px,55cqw,360px); z-index:1; pointer-events:none}
  /* mobileShowLeft: the photo keeps its size and spot, but whatever lies left of the slice still shows
     (behind the list) instead of being cut off; top, right and bottom stay clipped */
  .jvfm-m--showleft .jvfm-m-crop{overflow:visible; clip-path:inset(0 0 0 -100vw)}
  .jvfm-m-crop{position:relative; width:100%; overflow:hidden}
  .jvfm .jvfm-m-img{
    position:absolute; top:0; left:var(--jvfm-crop-x,0) !important; height:100% !important; max-width:none !important;
    object-fit:fill; display:block; border-radius:0 !important; background:transparent !important; box-shadow:none !important;
  }

  /* ---------- builder edit mode (not used on the website) ---------- */
  .jvfm--edit .jvfm-gdot{opacity:calc(var(--jvfm-dot-op,.9) * .55); transform:translate(-50%,-50%) scale(1); animation:none; transition:none}
  .jvfm--edit .jvfm-gdot.jvfm-on{opacity:var(--jvfm-dot-op,.9)}
  .jvfm--edit .jvfm-hs{cursor:move; touch-action:none; user-select:none; -webkit-user-select:none}
  .jvfm--edit .jvfm-hs *{pointer-events:none}
  .jvfm--edit .jvfm-hs.jvfm-sel .jvfm-label{color:var(--jvfm-accent)}
  .jvfm--edit .jvfm-hs.jvfm-sel .jvfm-dot{background:var(--jvfm-accent)}
  .jvfm--edit .jvfm-lines line.jvfm-on{opacity:1; stroke:var(--jvfm-accent)}
  .jvfm--edit .jvfm-canvas .jvfm-hs.jvfm-on .jvfm-label{color:var(--jvfm-tip-ink,var(--jvfm-ink))}   /* popup preview */
  .jvfm-handle{
    position:absolute; z-index:8; width:16px; height:16px; border-radius:50%; transform:translate(-50%,-50%);
    border:2px solid #fff; background:rgba(35,31,32,.3);
    box-shadow:0 0 0 1px rgba(35,31,32,.55), 0 2px 6px rgba(0,0,0,.25);
    cursor:grab; touch-action:none; pointer-events:auto;
  }
  .jvfm-handle.jvfm-sel{width:20px; height:20px; background:var(--jvfm-accent)}
  .jvfm-handle.jvfm-ball{border-radius:4px; transform:translate(-50%,-50%) rotate(45deg)}   /* angled-line ball: a diamond, so it reads apart from the elbow */
  .jvfm-handle.jvfm-drag{cursor:grabbing}
  .jvfm--edit .jvfm-m-body{pointer-events:none}          /* dots under the list stay grabbable */
  .jvfm--edit .jvfm-m-item{pointer-events:auto}
  .jvfm--edit .jvfm-m-panel, .jvfm--edit .jvfm-m-panel-in, .jvfm--edit .jvfm-m-desc{transition:none}

  @media (prefers-reduced-motion:reduce){
    .jvfm *{animation:none !important; transition-duration:.01s !important}
  }