/* The orbit band: copy on the left, one ring of six scenes round the yacht
   on the right, cycling calmly through three sets. Used by the homepage and
   /protect; orbit.js drives it. Every class is .orb-* so nothing here can
   reach the shell's own rules.

   ≥1100px  split: copy + set list | orbit
   900–1099 stacked: copy, then the orbit (ISPS/SOLAS/MLC back on the lines)
   <900     stacked: copy, hub, then a grid of six tiles */

.orb-sec{background:#f7f6f3;padding:72px 0 76px;border-top:1px solid #e9e7e2;border-bottom:1px solid #e9e7e2}
.orb-split{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:clamp(24px,4vw,56px);align-items:center}

/* ── copy column ── */
.orb-head .orb-h2{margin:0 0 14px;font-size:clamp(30px,3.4vw,46px);line-height:1.06;font-weight:800;letter-spacing:-.03em;color:#0f172a;text-wrap:balance}
.orb-head .orb-h2 .q{color:#e85a3c}
.orb-head .orb-lede{margin:0 0 22px;max-width:30em;font-size:clamp(17px,1.3vw,18.5px);line-height:1.55;font-weight:500;color:#3f4856}
.orb-head .fcta{margin-top:0}

.orb-sets{margin-top:34px;padding-top:22px;border-top:1px solid #e2ded5}
/* the set names: one list, so they can be renamed in one place */
.orb-setnames{list-style:none;margin:0;padding:0;position:relative;min-height:20px}
.orb-setnames li{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#a8431f}
.orb-regs{display:inline-flex;gap:6px}
.orb-regs b{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:#5a6573;border:1px solid #d9d4c9;border-radius:4px;padding:3px 6px;line-height:1}
.orb-lists{position:relative;margin-top:14px;min-height:6.4em}
.orb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 22px;position:absolute;inset:0 0 auto 0}
.orb-list a{font-size:15.5px;font-weight:650;color:#0f172a;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.orb-list a::before{content:"";width:6px;height:6px;border-radius:2px;background:#e85a3c;flex:0 0 auto}
.orb-list a:hover{color:#a8431f}
.orb-list a:focus-visible{outline:2px solid #e85a3c;outline-offset:3px;border-radius:3px}
.orb-setnames li,.orb-list{opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity .7s ease,transform .8s cubic-bezier(.25,.6,.25,1)}
.orb-setnames li{transform:none;transition-property:opacity}
.orb-sec[data-set="0"] [data-s="0"],
.orb-sec[data-set="1"] [data-s="1"],
.orb-sec[data-set="2"] [data-s="2"]{opacity:1;pointer-events:auto;transform:none;filter:none}
.orb-foot{margin-top:26px}

/* ── the orbit ── */
.orb-panel{position:relative;container-type:inline-size}
.orb-stage{position:relative;aspect-ratio:1200/900}
.orb-track{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.orb-track path{fill:none;stroke:rgba(15,23,42,.10);stroke-width:1.2;vector-effect:non-scaling-stroke}
.orb-track .orb-dash{stroke:rgba(15,23,42,.18);stroke-dasharray:2 9;stroke-linecap:round}

.orb-ln{position:absolute;left:0;top:0;width:1px;height:1.6px;margin-top:-.8px;transform-origin:0 50%;
  background:rgba(15,23,42,.16);will-change:transform;transition:background-color .35s ease;pointer-events:none}
.orb-ln.orb-hot{background:rgba(15,23,42,.5)}
.orb-rg{position:absolute;left:0;top:0;z-index:2;pointer-events:none;
  font-size:clamp(10px,.95cqw,12px);font-weight:700;letter-spacing:.16em;color:#5a6573;
  background:#f7f6f3;padding:.4em .75em;line-height:1;border-radius:4px;white-space:nowrap;transition:opacity .6s ease}
.orb-sec:not([data-set="0"]) .orb-rg{opacity:0;transition-duration:.45s}

.orb-nd{position:absolute;left:0;top:0;width:20%;aspect-ratio:1;z-index:3}
.orb-face{position:absolute;inset:0;display:block;color:inherit;text-decoration:none;outline:none;border-radius:50%;
  opacity:0;transform:scale(.96);filter:blur(6px);pointer-events:none;
  transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.25,.6,.25,1),filter 1.1s ease;transition-delay:var(--orb-dl,0s)}
.orb-lift{position:absolute;inset:0;display:block;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.orb-ph{display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#f1ede3;
  box-shadow:0 0 0 .6cqw #fff,0 0 0 calc(.6cqw + 1px) rgba(15,23,42,.10),0 1.6cqw 3.4cqw rgba(15,23,42,.13);transition:box-shadow .35s ease}
.orb-ph img{display:block;width:100%;height:100%;object-fit:cover}
.orb-pill{position:absolute;left:50%;top:100%;transform:translate(-50%,-88%);
  background:#fff;color:#0f172a;white-space:nowrap;
  font-size:clamp(12.5px,1.6cqw,15px);font-weight:750;letter-spacing:-.01em;line-height:1.2;
  padding:.62em 1.15em;border-radius:999px;box-shadow:0 0 0 1px rgba(15,23,42,.08),0 .5cqw 1.5cqw rgba(15,23,42,.14)}
.orb-face:hover .orb-lift,.orb-face:focus-visible .orb-lift{transform:translateY(-.6cqw) scale(1.03)}
.orb-face:focus-visible .orb-ph{box-shadow:0 0 0 .6cqw #fff,0 0 0 1cqw #e85a3c,0 1.6cqw 3.4cqw rgba(15,23,42,.13)}
.orb-face:hover .orb-pill,.orb-face:focus-visible .orb-pill{color:#a8431f}
.orb-sec.orb-now .orb-face,.orb-sec.orb-now .orb-rg,.orb-sec.orb-now .orb-list,.orb-sec.orb-now .orb-setnames li{transition:none!important}

.orb-hub{position:absolute;left:50%;top:50%;width:21.67%;transform:translate(-50%,-50%);z-index:2}
.orb-hub .orb-ph{box-shadow:0 0 0 .6cqw #fff,0 0 0 calc(.6cqw + 1px) rgba(15,23,42,.10),0 2cqw 4cqw rgba(15,23,42,.16)}
.orb-hub::before{content:"";position:absolute;inset:-1.9cqw;border-radius:50%;border:1.5px solid rgba(232,90,60,.85);pointer-events:none}
.orb-mk{position:absolute;left:50%;top:100%;transform:translate(-50%,-58%);width:24%;aspect-ratio:1;border-radius:22%;
  overflow:hidden;box-shadow:0 0 0 .35cqw #fff,0 .6cqw 1.6cqw rgba(15,23,42,.3)}
.orb-mk img{display:block;width:100%;height:100%}

/* without JS: Set A in its resting layout (orbit.js adds .orb-on and takes over) */
.orb-panel:not(.orb-on) .orb-nd{transform:translate(-50%,-50%)}
.orb-panel:not(.orb-on) .orb-nd[data-u="0"]{left:29.88%;top:20%}
.orb-panel:not(.orb-on) .orb-nd[data-u="1"]{left:70.12%;top:20%}
.orb-panel:not(.orb-on) .orb-nd[data-u="2"]{left:86.67%;top:50%}
.orb-panel:not(.orb-on) .orb-nd[data-u="3"]{left:70.12%;top:80%}
.orb-panel:not(.orb-on) .orb-nd[data-u="4"]{left:29.88%;top:80%}
.orb-panel:not(.orb-on) .orb-nd[data-u="5"]{left:13.33%;top:50%}

.orb-dots{display:flex;justify-content:flex-start;gap:10px;margin:18px 0 0 -8px}
.orb-dots button{appearance:none;-webkit-appearance:none;border:0;padding:8px;margin:0;background:none;cursor:pointer;border-radius:999px}
.orb-dots button span{display:block;width:9px;height:9px;border-radius:999px;background:#cfd3da;transition:width .5s cubic-bezier(.3,.7,.2,1),background-color .4s ease}
.orb-dots button[aria-pressed="true"] span{width:28px;background:#e85a3c}
.orb-dots button:hover span{background:#9aa1ad}
.orb-dots button[aria-pressed="true"]:hover span{background:#e85a3c}
.orb-dots button:focus-visible{outline:2px solid #e85a3c;outline-offset:2px}

/* split: bigger bubbles, smaller hub, the standards live in the set label */
@media (min-width:1100px){
  .orb-nd{width:23%}
  .orb-hub{width:18%}
  .orb-rgs{display:none}
}

/* ── stacked (below 1100) ── */
@media (max-width:1099px){
  .orb-sec{padding:56px 0 60px}
  .orb-split{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .orb-copy,.orb-sets{display:contents}
  .orb-head{order:1;text-align:center;max-width:44em;margin:0 auto}
  .orb-head .orb-lede{margin-left:auto;margin-right:auto}
  .orb-head .fcta{justify-content:center}
  .orb-setnames,.orb-lists{display:none}
  .orb-panel{order:2;width:100%;max-width:760px;margin:26px auto 0}
  .orb-dots{order:3;justify-content:center;margin:4px 0 0}
  .orb-foot{order:4;text-align:center;margin-top:16px}
}
@media (min-width:900px) and (max-width:1099px){ .orb-rgs{display:contents} }

/* ── phones / small tablets: hub on top, a grid of six tiles that swap sets ── */
@media (max-width:899px){
  .orb-panel{padding:6px 0 0}
  .orb-stage{aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}
  .orb-track,.orb-ln{display:none}
  .orb-hub{position:relative;left:auto;top:auto;transform:none;grid-column:1/-1;width:min(44%,230px);margin:12px auto 24px}
  .orb-hub::before{inset:-12px}
  .orb-hub .orb-ph{box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(15,23,42,.10),0 12px 26px rgba(15,23,42,.16)}
  .orb-mk{box-shadow:0 0 0 3px #fff,0 6px 14px rgba(15,23,42,.3)}
  .orb-rgs{grid-column:1/-1;display:flex;justify-content:center;align-items:center;margin:-4px 0 4px;min-height:14px}
  .orb-rg{position:static;transform:none!important;padding:0;font-size:11px;background:none;display:flex;align-items:center}
  .orb-rg+.orb-rg::before{content:"";display:block;width:clamp(22px,7vw,44px);height:1.5px;background:rgba(15,23,42,.2);margin:0 14px}
  .orb-nd,.orb-panel:not(.orb-on) .orb-nd{position:relative;left:auto;top:auto;width:auto;transform:none!important;margin-bottom:6px}
  .orb-ph{box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(15,23,42,.10),0 10px 22px rgba(15,23,42,.12)}
  .orb-face:focus-visible .orb-ph{box-shadow:0 0 0 4px #fff,0 0 0 7px #e85a3c}
  .orb-face:hover .orb-lift,.orb-face:focus-visible .orb-lift{transform:translateY(-4px)}
  .orb-pill{font-size:14px;transform:translate(-50%,-80%)}
  .orb-face{filter:blur(3px)}
}
@media (max-width:620px){
  .orb-sec{padding:44px 0 48px}
  .orb-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .orb-pill{font-size:13px;padding:.6em 1em}
  .orb-head .fcta{flex-direction:column;gap:16px}
}