/* ============================================================================
   For agencies — ONE HUB, MANY CLIENTS.  Loaded by agencies.html only.

   This page's signature, and nobody else's (MOTION-CHARTER §3):
     Twelve client nodes around one agency centre. As the hub arrives they
     gather from the edges into their positions (a pure function of scroll)
     and then HOLD there. From then on they answer the pointer: the ones
     near it lean toward it, the nearest one locks and says its name and
     what it is on, and the centre turns to face the cursor. No pointer,
     no motion.

   Every client here is invented. The bundle names (Site, Found, Full) are
   the ones the price list on this page uses.

   Without JS (or under reduced motion) every node sits in its place and
   every spoke is drawn to it.
   ========================================================================== */

/* ------------------------------------------------------------ the hub ---- */
.hub-wrap{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:48px;
  align-items:center; margin-top:44px;
}
.hub{
  position:relative; width:100%; max-width:560px; min-width:0; aspect-ratio:1; margin:0 auto;
  touch-action:pan-y;
}
.hub-wrap > *{ min-width:0; }              /* the square must size from the column, never the column from the square */
.hub-spokes{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.hub-spokes line{ stroke:rgba(var(--accent-rgb),.28); stroke-width:.35; vector-effect:non-scaling-stroke; stroke-width:1px; }
.hub-spokes line.lit{ stroke:rgba(var(--accent-rgb),.85); stroke-width:1.5px; }
.hub-ring{
  position:absolute; inset:9%; border-radius:50%; pointer-events:none;
  border:1px dashed rgba(var(--accent-rgb),.16);
}
.hub-centre{
  position:absolute; left:50%; top:50%; width:132px; height:132px; margin:-66px 0 0 -66px; z-index:3;
  border-radius:50%; display:grid; place-content:center; text-align:center; gap:4px;
  background:radial-gradient(60% 60% at 50% 40%, rgba(var(--accent-rgb),.22), transparent 70%),
             linear-gradient(165deg, rgba(24,86,120,.7), rgba(7,27,41,.95));
  border:1px solid rgba(var(--accent-rgb),.45);
  box-shadow:0 0 0 10px rgba(var(--accent-rgb),.05), 0 30px 60px -24px rgba(0,0,0,.9);
  will-change:transform;
}
.hub-centre b{ font:800 15px/1.15 var(--font-display); letter-spacing:-.01em; color:#eaf4fa; }
.hub-centre i{ font-style:normal; font-size:11.5px; color:#a8c4d5; }
.hub-centre::after{                        /* the target-lock corners: this is the thing being measured */
  content:""; position:absolute; inset:-8px; border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.22);
}

.hub-node{
  position:absolute; left:calc(var(--nx) * 1%); top:calc(var(--ny) * 1%);
  width:58px; height:58px; margin:-29px 0 0 -29px; z-index:4;
  border-radius:50%; display:grid; place-items:center;
  font:800 14px/1 var(--font-display); letter-spacing:.02em; color:#eaf4fa;
  background:linear-gradient(165deg, rgba(24,86,120,.6), rgba(7,27,41,.92));
  border:1px solid rgba(var(--accent-rgb),.32);
  box-shadow:0 18px 30px -18px rgba(0,0,0,.9);
  cursor:default; will-change:transform, opacity;
}
.hub-node::before{                         /* which bundle it is on: the ring's colour */
  content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--ring, rgba(255,255,255,.2));
  opacity:.75;
}
.hub-node[data-bundle="full"]{ --ring:var(--accent); }
.hub-node[data-bundle="found"]{ --ring:var(--grad-end); }
.hub-node[data-bundle="site"]{ --ring:#5b7385; }
.hub-node.locked{ border-color:var(--accent); box-shadow:0 0 22px 2px rgba(var(--accent-rgb),.45), 0 18px 30px -18px rgba(0,0,0,.9); z-index:6; }
/* the answer: name and bundle */
.hub-node::after{
  content:attr(data-label); position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%, 4px);
  white-space:nowrap; z-index:7;
  font:600 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:rgba(4,18,28,.94);
  border:1px solid rgba(var(--accent-rgb),.3); padding:6px 8px; border-radius:6px;
  opacity:0; transition:opacity .2s, transform .2s var(--ease-out); pointer-events:none;
}
.hub-node.locked::after, .hub-node:hover::after{ opacity:1; transform:translate(-50%, 0); }
/* pointer-driven only, so a short settle is fine — the scroll gather does not use this */
.hub.settled .hub-node, .hub.settled .hub-centre{ transition:transform .28s var(--ease-out); }

.hub-legend{ display:flex; flex-wrap:wrap; gap:10px 18px; margin:18px 0 0; padding:0; list-style:none; font-size:13.5px; color:#a8c4d5; }
.hub-legend li{ display:inline-flex; align-items:center; gap:8px; }
.hub-legend i{ width:10px; height:10px; border-radius:50%; border:2px solid var(--ring); }
.hub-legend .full{ --ring:var(--accent); }
.hub-legend .found{ --ring:var(--grad-end); }
.hub-legend .site{ --ring:#5b7385; }

/* armed: the gather starts from nothing */
.fx-on .hub-node{ opacity:0; }

/* --------------------------------------------------------- the argument -- */
.arg-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px; margin-top:44px; }
.arg{
  padding:26px 26px 28px; border-radius:16px; background:#fff; border:1px solid var(--border);
  box-shadow:0 24px 50px -30px rgba(15,77,114,.3);
}
.arg .num{ display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); }
.arg h3{ margin-top:12px; }
.arg p{ margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--text-muted); }
.ag-row{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:44px; align-items:center; margin-top:56px; }

/* --------------------------------------------------------- the platform -- */
.platform{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:center;
  margin-top:40px; padding:28px 30px; border-radius:16px;
  background:linear-gradient(165deg, rgba(var(--primary-rgb),.08), rgba(var(--primary-rgb),.02));
  border:1px solid rgba(var(--primary-rgb),.25);
}
.platform h3{ font-size:1.35rem; }
.platform p{ margin:8px 0 0; font-size:15px; line-height:1.55; color:var(--text-muted); max-width:60ch; }
.platform .amt{ font:800 clamp(2.6rem,4.4vw,3.6rem)/1 var(--font-display); letter-spacing:-.04em; color:var(--primary); font-variant-numeric:tabular-nums; }
.platform .per{ font-size:14px; color:var(--text-muted); margin-top:4px; }
.ag-cap{ margin:34px 0 8px; font-size:15px; color:var(--text-muted); }
/* the row reveals as one, and its top padding keeps the "Most agencies" flag
   inside the reveal's clip — a revealed card clips anything hanging above it */
.ag-cols{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; margin-top:16px; padding-top:14px; }

/* ------------------------------------------------------------ the table -- */
.tbl-scroll{ overflow-x:auto; margin-top:40px; -webkit-overflow-scrolling:touch; }
.modules{ width:100%; min-width:640px; border-collapse:collapse; font-size:15px; }
.modules th{
  text-align:left; padding:0 14px 14px 0; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#a8c4d5; border-bottom:1px solid rgba(var(--accent-rgb),.22);
}
.modules th.thead-you{ color:var(--accent); }
.modules td{ padding:18px 14px 18px 0; border-bottom:1px solid rgba(var(--accent-rgb),.1); vertical-align:top; }
.modules tr:last-child td{ border-bottom:0; }
.modules .mname{ font:700 1.05rem/1.3 var(--font-display); color:#eaf4fa; white-space:nowrap; }
.modules .mwhat{ color:#a8c4d5; line-height:1.5; max-width:38ch; }
.modules .mprice{ font:800 1.5rem/1 var(--font-display); color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap; }
.modules .mprice span, .modules .mretail span{ display:block; font:500 12.5px/1.4 var(--font-body); color:#a8c4d5; margin-top:5px; }
.modules .mretail{ font:700 1.1rem/1 var(--font-display); color:#eaf4fa; white-space:nowrap; }
.ag-note{ margin-top:22px; font-size:15px; line-height:1.55; color:#a8c4d5; max-width:78ch; }
.ag-note b{ color:var(--accent); }

/* ------------------------------------------------------------- the maths -- */
.calc{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:32px; margin-top:44px; align-items:start; }
.calc-in, .calc-out{ padding:26px 28px; border-radius:16px; background:#fff; border:1px solid var(--border); box-shadow:0 24px 50px -30px rgba(15,77,114,.3); }
.field{ margin-bottom:24px; }
.field label{ display:block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.field .val{ font:800 1.8rem/1.1 var(--font-display); color:var(--text); margin:6px 0 10px; font-variant-numeric:tabular-nums; }
.field input[type=range]{ width:100%; accent-color:var(--primary); cursor:pointer; }
.seg{ display:flex; gap:8px; margin-top:10px; }
.seg button{
  flex:1; padding:10px 0; border-radius:8px; font:700 14px var(--font-body); cursor:pointer;
  border:1px solid rgba(var(--primary-rgb),.3); background:#fff; color:var(--primary);
  transition:background .2s var(--ease-out), color .2s var(--ease-out);
}
.seg button[aria-pressed="true"]{ background:var(--primary); color:#fff; border-color:var(--primary); }
.calc-row{ display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--border); font-size:15px; }
.calc-row .k{ color:var(--text-muted); }
.calc-row .v{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); }
.calc-row--big{ border-bottom:0; padding-top:18px; }
.calc-row--big .k{ color:var(--text); font-weight:700; }
.calc-row--big .v{ font:800 clamp(1.8rem,3vw,2.4rem)/1 var(--font-display); color:var(--primary); }
.calc-note{ margin:16px 0 0; font-size:14px; color:var(--text-muted); }

/* --------------------------------------------------------- the allowance -- */
.allow-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; margin-top:40px; }
.allow-grid h4{ font-family:var(--font-display); font-size:1.05rem; margin:0 0 8px; }
.allow-grid p{ margin:0; font-size:15px; line-height:1.55; color:var(--text-muted); }
.allow-grid b{ color:var(--text); }

/* ------------------------------------------------------------ responsive -- */
@media (max-width:900px){
  .hub-wrap{ grid-template-columns:1fr; gap:30px; }
  .hub{ max-width:none; }
  .hub-node{ width:48px; height:48px; margin:-24px 0 0 -24px; font-size:12px; }
  .hub-centre{ width:104px; height:104px; margin:-52px 0 0 -52px; }
  .hub-centre b{ font-size:13px; }
  .arg-grid, .ag-cols, .allow-grid{ grid-template-columns:1fr; gap:22px; }
  .ag-row{ grid-template-columns:1fr; gap:26px; margin-top:40px; }
  .platform{ grid-template-columns:1fr; gap:14px; }
  .platform > div:last-child{ text-align:left !important; }
  .calc{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .hub-node{ opacity:1 !important; transform:none !important; }
  .hub-centre{ transform:none !important; }
}