/* Lexend, self-hosted. One variable file covers the 500 and 700 the brand
   uses. Serving it ourselves keeps the third-party provider list in the
   privacy statement complete and accurate. */
@font-face{
  font-family:'Lexend';
  src:url('lexend-variable.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ------------------------------------------------------------------
   NorthPark.ai — index
   Palette and type are taken from Brand Kit v1.0 without extension.
   Lexend ships two weights, so hierarchy is carried by size, colour and
   letterspacing rather than by weight. The hairline values (#e6ecea,
   #dfe6e5), the 20px control radius, the 62% secondary-text opacity and
   the 9px connector dot are lifted from the two diagrams so the page and
   the assets read as one drawing.
   ------------------------------------------------------------------ */

:root{
  /* primary — logo teals */
  --deep:#1b4b45;
  --mid:#308382;
  --bright:#3aa494;
  /* extended ramp */
  --ring-mid:#30867e;
  --ring-deep:#215854;
  /* accent */
  --soft:#a0d6b4;
  --blue:#005b96;
  --error:#a32b1f;      /* functional only — see README */
  /* neutral */
  --ink:#333333;
  --gray:#cccccc;
  --paper:#ffffff;
  --tint:#f4f7f6;          /* off-white surface */
  --hair:#e6ecea;          /* from the map SVGs */
  --edge:#dfe6e5;          /* card border, from the map card */

  --surface:var(--paper);  /* re-declared per section for the node halo */

  --maxw:1240px;
  --gut:clamp(20px,5vw,64px);
  --rail:28px;             /* rail offset from the gutter */
  --indent:24px;           /* text column offset from the rail */

  --r:20px;                /* control radius, from .np-btn */
  --r-card:14px;           /* card radius, from the map card */
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Lexend,"Helvetica Neue",Arial,sans-serif;
  font-weight:500;
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--soft);color:var(--deep)}

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{outline:3px solid var(--bright);outline-offset:2px;border-radius:2px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--deep);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:700;font-size:14px}
.skip:focus{left:0;text-decoration:none}

/* ---------- layout ---------- */

.page{position:relative;overflow-x:clip}
main{position:relative;display:block}
.sec,#book{scroll-margin-top:86px}

.wrap{max-width:var(--maxw);margin:0 auto;
  padding-inline:calc(var(--gut) + var(--rail) + var(--indent)) var(--gut);
  position:relative;z-index:1}

/* diagrams reclaim the rail indent */
.bleed{margin-left:calc(-1 * (var(--rail) + var(--indent)))}

.sec{padding-block:clamp(72px,9vw,132px);position:relative}
.sec--tint{background:var(--tint);--surface:var(--tint)}
.sec--dark{background:var(--deep);--surface:var(--deep);color:#fff}

/* ---------- the thread ----------
   One hairline from the arrow mark in the header to the foot of the page,
   with a node at each section and a fill that tracks how far you have read.
   The page is a thread; so is the problem. */

.hero .wrap{position:relative}
.origin{position:absolute;top:10px;left:calc(var(--gut) + var(--rail) - 12px);
  width:24px;padding:7px 0;background:var(--surface);line-height:0;z-index:2}
.origin svg{display:block;width:24px;height:auto}

.railwrap{position:absolute;inset:0;max-width:var(--maxw);margin-inline:auto;
  pointer-events:none;z-index:0}
/* Node centres land at wrap_left + gut + rail (the eyebrow's ::before is pulled
   back by --indent from the text column). The rail has to use the same sum —
   the wrapper's padding would not move an absolutely positioned child. */
.rail{position:absolute;top:0;bottom:0;left:calc(var(--gut) + var(--rail));
  width:1px;background:var(--hair)}
.railfill{position:absolute;top:0;left:0;width:1px;height:0;background:var(--ring-deep);opacity:.55}

/* ---------- type ---------- */

.eb{
  position:relative;
  margin:0 0 20px;
  font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ring-deep);line-height:1;
}
/* the connector dot, same geometry as the diagrams: r 4.5, 1.5 halo */
.eb::before{
  content:"";position:absolute;top:50%;left:calc(-1 * (var(--indent) + 4.5px));
  width:9px;height:9px;margin-top:-4.5px;border-radius:50%;
  background:var(--gray);box-shadow:0 0 0 3px var(--surface);
  transition:background .45s ease,transform .45s ease;
}
.inview .eb::before{background:var(--bright);transform:scale(1.12)}
.sec--dark .eb{color:var(--soft)}
.sec--dark .eb::before{background:rgba(255,255,255,.28)}
.sec--dark.inview .eb::before{background:var(--soft)}

h1,h2,h3{font-weight:700;color:var(--deep);margin:0;text-wrap:balance}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:#fff}

h1{font-size:clamp(2.15rem,5vw,4rem);line-height:1.05;letter-spacing:-.022em;max-width:20ch}
h2{font-size:clamp(1.7rem,3.3vw,2.7rem);line-height:1.14;letter-spacing:-.016em;max-width:22ch}
h3{font-size:1.2rem;line-height:1.35;letter-spacing:-.008em}

p{margin:0 0 1.15em;max-width:64ch}
p:last-child{margin-bottom:0}

.lede{font-size:clamp(1.06rem,1.5vw,1.28rem);line-height:1.55;max-width:56ch}
.dim{color:var(--ink);opacity:.62}          /* .ringsub opacity, from the explainer */
.sec--dark .dim{color:#fff;opacity:.72}

/* ---------- hero ---------- */

.hero{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(64px,8vw,116px)}
/* the second sentence is the one about absence — it sits back */
.hero h1 .absent{color:var(--mid)}
.hero .lede{margin-top:28px;color:var(--ink);opacity:.72;max-width:52ch}

.hero .claim{
  margin-top:32px;padding-left:20px;border-left:3px solid var(--bright);
  font-size:clamp(1.02rem,1.35vw,1.16rem);line-height:1.55;color:var(--deep);max-width:50ch;
}
.hero .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:40px}

/* ---------- controls ---------- */

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font:inherit;font-weight:700;font-size:15px;line-height:1;
  padding:15px 28px;border-radius:var(--r);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s,color .2s;
}
.btn:hover{text-decoration:none}
.btn--solid{background:var(--deep);color:#fff}
.btn--solid:hover{background:var(--ring-deep)}
.btn--ghost{background:transparent;color:var(--deep);border-color:var(--gray)}
.btn--ghost:hover{border-color:var(--mid)}
.sec--dark .btn--solid{background:var(--paper);color:var(--deep)}
.sec--dark .btn--solid:hover{background:var(--soft)}
.book .btn--solid{background:var(--deep);color:var(--paper)}
.book .btn--solid:hover{background:var(--ring-deep)}
.btn .arw{transition:transform .2s}
.btn:hover .arw{transform:translateX(3px)}

/* an onward link that names its destination */
.more{
  display:inline-flex;align-items:baseline;gap:10px;margin-top:44px;
  font-weight:700;font-size:15px;color:var(--deep);
  border-bottom:1.5px solid var(--gray);padding-bottom:6px;transition:border-color .2s;
}
.more:hover{border-color:var(--mid);text-decoration:none}
.more .arw{color:var(--mid)}

/* ---------- problem: three compounding failures ---------- */

.failures{margin-top:56px;border-top:1px solid var(--hair)}
.failure{padding:34px 0;border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:38px minmax(0,1fr);align-items:start}
.failure .ico{grid-column:1;grid-row:1;margin-top:1px}
.failure h3{grid-column:2;grid-row:1;margin:0}
.failure .body{grid-column:2;grid-row:2;margin-top:14px}
.failure .body>p:last-child{margin-bottom:0}

/* ---------- stat strip ---------- */

.stats{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.stat{padding:34px 32px 32px;border-left:1px solid var(--hair)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font-weight:700;font-size:clamp(1.85rem,3.5vw,2.8rem);
  line-height:1;letter-spacing:-.03em;margin-bottom:14px}
.stat:nth-child(1) b{color:var(--deep)}
.stat:nth-child(2) b{color:var(--ring-deep)}
.stat:nth-child(3) b{color:var(--mid)}
.stat span{display:block;font-size:14.5px;line-height:1.5;color:var(--ink);opacity:.72;max-width:30ch}
.kicker,
.stats-note{margin-top:26px;font-size:clamp(1.02rem,1.3vw,1.14rem);color:var(--deep);max-width:52ch}

/* ---------- two structural reasons ---------- */

.reasons{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.reasons>div{padding:30px 36px 30px 0;border-top:2px solid var(--deep)}
.reasons>div+div{padding-left:36px;border-left:1px solid var(--hair);border-top-color:var(--mid)}
.kicker{margin-top:34px}
.reasons h3{font-size:1.06rem;margin-bottom:12px}
.reasons .ico{margin-bottom:14px}
.reasons p{font-size:16px;margin:0}

/* ---------- diagram frames ---------- */

.figure{margin-top:52px}
.figure--framed{border:1px solid var(--hair);border-radius:var(--r-card);
  background:var(--paper);padding:clamp(14px,2vw,30px)}
.pan{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.pan>.np-explainer{min-width:1040px}
.panhint{display:none;margin:12px 0 0;font-size:13px;color:var(--ink);opacity:.62}
.pan.pannable+.panhint{display:block}

.map{display:block;width:100%;height:auto}
#mmMob{display:none;max-width:460px;margin-inline:auto}
.mapcap{display:none;margin:16px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink);opacity:.72}

/* proof line — shape of the deployment, not the figures (B1 / B7) */
.proof{
  margin:40px 0 0;padding:24px 28px;border:1px solid var(--edge);border-left:3px solid var(--bright);
  border-radius:0 var(--r-card) var(--r-card) 0;background:var(--paper);
  font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.5;color:var(--deep);max-width:58ch;
}

/* ---------- the ask ---------- */


.frames{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.frame{padding:32px 34px;border-radius:var(--r-card);background:var(--tint);
  border:1px solid var(--edge);--surface:var(--tint)}
.frame h3{font-size:1.12rem;line-height:1.4;margin-bottom:14px;max-width:26ch}
.frame p{color:var(--ink);opacity:.78;font-size:15.5px;margin:0;max-width:44ch}
.frame ul{margin:0;padding:0;list-style:none;display:grid;gap:18px}
.frame li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;
  color:var(--deep);font-size:15.5px;line-height:1.45}
.frame li .ico{margin-top:.05em;color:var(--ring-deep)}

/* ---------- booking form ---------- */

.book{margin-top:56px;background:var(--paper);border-radius:var(--r-card);
  padding:clamp(28px,3.4vw,44px);color:var(--ink);max-width:760px}
.book h3,.book h2{font-size:1.35rem;margin-bottom:8px;display:flex;align-items:center;gap:12px;
  letter-spacing:-.008em;line-height:1.35;max-width:none}
.book h3 .ico,.book h2 .ico{color:var(--mid)}
.book .book-sub{font-size:15.5px;color:var(--ink);opacity:.72;margin-bottom:28px;max-width:52ch}

.fields{display:grid;gap:22px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:grid;gap:8px;align-content:start}

/* Two fields side by side share three rows — label, control, message — so a
   label that wraps on one side, or a message that appears on only one side,
   can't push its neighbour out of line. The row spacing is margins rather than
   row-gap so the message row collapses to nothing when there is no message.
   Only applies where a pair is actually two columns; below that the fields
   stack and are independent. */
@supports (grid-template-rows: subgrid){
  @media (min-width:821px){
    .pair{grid-template-rows:auto auto auto;row-gap:0}
    .pair>.field{grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
    .pair>.field>label{margin-bottom:8px}
    .pair>.field>.err{margin-top:8px}
  }
}
.field label{font-size:13px;font-weight:700;color:var(--deep);line-height:1.4}
.field input,.field select{
  font:inherit;font-size:15.5px;font-weight:500;color:var(--ink);
  padding:13px 15px;border:1.5px solid var(--edge);border-radius:10px;background:var(--paper);
  width:100%;transition:border-color .2s;appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23308382' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;
  padding-right:40px;cursor:pointer;
}
.field input:hover,.field select:hover{border-color:var(--gray)}
.field input:focus,.field select:focus{border-color:var(--mid)}

.err{margin:0;font-size:13px;line-height:1.45;font-weight:500;color:var(--error);
  display:flex;align-items:flex-start;gap:7px}
/* Author `display` overrides the UA sheet's [hidden] rule, so say it here. */
.err[hidden]{display:none}
.err::before{content:"";flex:0 0 auto;width:14px;height:14px;margin-top:.12em;border-radius:50%;
  background:var(--error);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15 14.5H1z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.4M8 11.6v.1' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15 14.5H1z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.4M8 11.6v.1' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;}

.field input[aria-invalid],.field select[aria-invalid],.field textarea[aria-invalid]{
  border-color:var(--error);border-width:2px}
.field input[aria-invalid]:focus,.field select[aria-invalid]:focus,
.field textarea[aria-invalid]:focus{border-color:var(--error)}
.field .hint{font-size:12.5px;color:var(--ink);opacity:.78;line-height:1.45}
.field textarea{font:inherit;font-size:15.5px;font-weight:500;color:var(--ink);
  padding:13px 15px;border:1.5px solid var(--edge);border-radius:10px;background:var(--paper);
  width:100%;min-height:104px;resize:vertical;line-height:1.55;transition:border-color .2s}
.field textarea:hover{border-color:var(--gray)}
.field textarea:focus{border-color:var(--mid)}
.field .optional{font-weight:500;opacity:.6}

/* GDPR consent — required, and never pre-ticked */
.consent{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;
  padding-top:22px;border-top:1px solid var(--hair)}
.consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--deep);cursor:pointer;
  appearance:auto;border-radius:4px;flex:0 0 auto}
.consent label{font-size:13.5px;line-height:1.55;color:var(--ink);opacity:.82;cursor:pointer;font-weight:500}
.consent[data-invalid] label{opacity:1}
.consent[data-invalid] input{outline:2px solid var(--error);outline-offset:2px}
.consent .err{grid-column:2;margin-top:8px}

/* The notice that replaced the consent checkbox. Its wording is the record
   of what the visitor was told, so it is not decorative — see README. */
.notice{margin:0;padding-top:22px;border-top:1px solid var(--hair);
  font-size:13.5px;line-height:1.6;color:var(--ink);opacity:.82;max-width:62ch}
.notice a{color:var(--deep);font-weight:700;border-bottom:1.5px solid var(--gray);
  padding-bottom:1px;transition:border-color .2s}
.notice a:hover{border-color:var(--mid);text-decoration:none}

/* ALTCHA sits between the notice and the button. It is only rendered when a
   verification endpoint is configured — a challenge widget that verifies
   nothing would be worse than none. */
.altcha-slot{margin-top:20px;max-width:340px}
.altcha-slot[hidden]{display:none}
altcha-widget{
  --altcha-color-base:var(--paper);
  --altcha-color-border:var(--edge);
  --altcha-color-text:var(--ink);
  --altcha-color-border-focus:var(--mid);
  --altcha-color-error-text:var(--error);
  --altcha-border-radius:10px;
  display:block;font-size:13.5px;
}

/* honeypot */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* send failed — say what happened and what to do */
.sendfail{display:none;margin-top:20px;padding:16px 18px;border-radius:10px;
  background:var(--tint);border:1px solid var(--edge);border-left:3px solid var(--deep);
  font-size:14.5px;line-height:1.55;color:var(--ink)}
.sendfail.on{display:block}

.demo-note{margin-top:16px;padding:12px 14px;border-radius:8px;border:1px dashed var(--gray);
  font-size:13px;line-height:1.5;color:var(--ink);opacity:.75}

/* the way out for someone who isn't ready to book */
.softexit{margin-top:32px;font-size:15px;color:#fff;opacity:.72;max-width:52ch}
.softexit a{color:var(--soft);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.softexit a:hover{color:#fff}

.qualify{border-top:1px solid var(--hair);padding-top:24px;display:grid;gap:22px}
.qualify-lead{font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ring-deep);margin:0}

.book-foot{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.book-foot .fine{font-size:13px;color:var(--ink);opacity:.62;line-height:1.5;max-width:34ch;margin:0}

.sent{display:none;padding:24px 26px;border-radius:var(--r-card);
  background:var(--tint);border:1px solid var(--edge)}
.sent.on{display:block}
.sent b{display:block;color:var(--deep);font-size:1.1rem;margin-bottom:6px}
.sent p{font-size:15px;color:var(--ink);opacity:.75;margin:0}
form.done{display:none}

/* ---------- header ---------- */

.masthead{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .25s}
.masthead.stuck{border-bottom-color:var(--hair)}
.masthead .wrap{display:flex;align-items:center;gap:28px;
  padding-block:16px;padding-inline:var(--gut)}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand svg{display:block;height:34px;width:auto}
.masthead nav{margin-left:auto;display:flex;align-items:center;gap:30px;flex-wrap:nowrap}
.masthead nav a.navlink{font-size:14.5px;font-weight:700;color:var(--deep);opacity:.72;
  transition:opacity .2s;white-space:nowrap}
.masthead nav a.navlink:hover{opacity:1;text-decoration:none}
.masthead .btn{padding:12px 22px;font-size:14.5px;white-space:nowrap}

/* ---------- footer ---------- */

.foot{background:var(--deep);color:#fff;padding-block:clamp(56px,6vw,84px)}
.foot .wrap{padding-inline:var(--gut)}
.foot-top{display:flex;flex-wrap:wrap;gap:40px 64px;align-items:flex-start}
.foot-brand{display:grid;gap:16px;justify-items:start}
.foot svg{display:block;height:76px;width:auto}
.foot .motto{margin:0;color:var(--soft);font-weight:700;font-size:14px;
  letter-spacing:.02em;line-height:1}
/* Company identifier, required of Italian companies on their website. */
.foot .legal{margin:0;font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.62);
  max-width:44ch}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 36px;margin-left:auto}
.foot-links a{color:#fff;opacity:.78;font-size:14.5px;font-weight:700;transition:opacity .2s}
.foot-links a:hover{opacity:1;text-decoration:none}
.foot-rule{height:1px;background:rgba(255,255,255,.16);margin:44px 0 22px}

/* Attributed to the originating institution, never to the aggregator that
   re-reported it. No links: these are references, not exits. */
.sources{margin:30px 0 0;font-size:11px;line-height:1.7;font-weight:500;
  letter-spacing:.004em;color:rgba(255,255,255,.62);max-width:112ch}
.sources b{font-weight:500;color:rgba(255,255,255,.86);white-space:nowrap}
.sources .sep{padding:0 5px}
.sources-lead{display:block;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  font-size:9.5px;color:rgba(255,255,255,.62);margin-bottom:7px}
.foot-bot{margin:0;font-size:13.5px;color:rgba(255,255,255,.66)}

/* ---------- icons ----------
   24 x 24, 1.75 keyline, structure on currentColor so dark surfaces are free.
   The dart is fixed teal and never recoloured. Icons sit at item level only —
   section headings belong to the thread nodes. */

.ico{display:block;width:24px;height:24px;flex:0 0 auto}
.ico--sm{width:18px;height:18px}
.ico--lg{width:28px;height:28px}
.failure .ico,.reasons .ico{color:var(--ring-deep)}
.btn .ico{color:currentColor}

/* ---------- reveal ---------- */

.rv{opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.3,1)}
.rv.inview,.rv.on{opacity:1;transform:none}

/* ---------- responsive ---------- */

@media (max-width:1000px){
  .reasons{grid-template-columns:1fr}
  .reasons>div+div{padding-left:0;border-left:0;padding-top:30px}
  .reasons>div{padding-right:0}
  .frames{grid-template-columns:1fr}
}

/* The portrait build takes over below 1024, where the desktop one falls under
   ~78% and its 12.5px card text stops being readable. If the portrait file
   isn't present, the desktop map pans instead — same fallback as the
   explainer, and legible for the same reason. */
.pan:not(:has(#mmMob))>#mmDesk{min-width:1100px}
@media (max-width:1024px){
  .pan:has(#mmMob) #mmDesk{display:none}
  #mmMob{display:block}
  .mapcap{display:block}
}
@media (max-width:880px){
  .figure--framed{padding:12px}
}

/* Measured: the full set stops fitting on one line just under 900px, and
   Contact plus the button stop fitting just over 500px. Shed in that order,
   with air to spare, so nothing ever wraps to a second line. */
@media (max-width:980px){
  .masthead nav a.navlink[data-long]{display:none}
  .masthead nav{gap:24px}
}
@media (max-width:600px){
  .masthead nav a.navlink{display:none}
  .masthead nav{gap:16px}
}

@media (max-width:820px){
  :root{--rail:0px;--indent:22px}
  .sources{max-width:none}
  .bleed{margin-left:calc(-1 * var(--indent))}
  .stats{grid-template-columns:1fr;border-bottom:0}
  .stat{border-left:0;border-bottom:1px solid var(--hair);padding:26px 0}
  .stat:first-child{padding-top:26px}
  .pair{grid-template-columns:1fr}
  .foot-links{margin-left:0;width:100%}
  .foot svg{height:62px}
  h1{max-width:none}
  h2{max-width:none}
}

@media (max-width:560px){
  .figure--map{margin-left:calc(-1 * (var(--indent) + var(--gut)));
               margin-right:calc(-1 * var(--gut))}
  .mapcap{padding-inline:var(--gut)}
}

@media (max-width:480px){
  body{font-size:16.5px}
  .failure{grid-template-columns:32px minmax(0,1fr)}
  .failure{grid-template-columns:32px minmax(0,1fr)}
  .brand svg{height:26px}
  .masthead .btn{padding:11px 16px;font-size:13.5px}
  .masthead .wrap{gap:14px}
  .btn{padding:14px 22px;font-size:14.5px}
  .hero .cta-row{gap:14px}
  .hero .cta-row .btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .eb::before,.btn,.more,.btn .arw{transition:none}
  .railfill{transition:none}
}

/* ---------- long-form document page (privacy statement) ---------- */

.doc{max-width:74ch;margin-top:8px}
.doc h2{font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.25;letter-spacing:-.01em;
  margin:56px 0 16px;max-width:34ch}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:1.02rem;line-height:1.35;margin:32px 0 12px;color:var(--ring-deep)}
.doc p{font-size:16px;line-height:1.72;margin:0 0 1.05em;max-width:none}
.doc ul{margin:0 0 1.15em;padding-left:0;list-style:none;display:grid;gap:10px}
.doc li{position:relative;padding-left:22px;font-size:16px;line-height:1.6}
.doc li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--bright)}
.doc strong{font-weight:700;color:var(--deep)}
.doc a{color:var(--blue)}
.doc hr{border:0;border-top:1px solid var(--hair);margin:48px 0}

.doc table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:14.5px}
.doc thead th{text-align:left;font-weight:700;font-size:11px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--ring-deep);padding:0 16px 10px 0;
  border-bottom:1px solid var(--deep);vertical-align:bottom}
.doc tbody td{padding:14px 16px 14px 0;border-bottom:1px solid var(--hair);
  vertical-align:top;line-height:1.55}
.doc tbody tr:last-child td{border-bottom:0}
.doc th:last-child,.doc td:last-child{padding-right:0}

.doc-updated{font-size:13px;color:var(--ink);opacity:.78;margin:20px 0 0}

@media (max-width:680px){
  /* Tables become label/value pairs rather than scrolling sideways. */
  .doc thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .doc tr{display:block;padding:18px 0;border-bottom:1px solid var(--hair)}
  .doc tbody td{display:block;padding:0 0 8px;border:0}
  .doc tbody td::before{content:attr(data-label);display:block;font-size:10.5px;
    font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
    color:var(--ring-deep);margin-bottom:3px}
  .doc tbody td:last-child{padding-bottom:0}
}

/* ---------- contact page ---------- */

.sub-hero{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(28px,4vw,44px)}
.sub-hero h1{font-size:clamp(1.95rem,4vw,3.1rem);max-width:16ch}
.sub-hero .lede{margin-top:24px;opacity:.72;max-width:50ch}

.redirect{margin-top:30px;padding:20px 24px;border:1px solid var(--edge);border-radius:var(--r-card);
  background:var(--tint);font-size:15.5px;line-height:1.6;color:var(--ink);max-width:56ch}
.redirect b{color:var(--deep)}
.redirect a{font-weight:700;color:var(--deep);border-bottom:1.5px solid var(--gray);
  padding-bottom:2px;transition:border-color .2s}
.redirect a:hover{border-color:var(--mid);text-decoration:none}

.sec--form{padding-top:clamp(20px,3vw,32px);padding-bottom:clamp(72px,9vw,120px)}
.book--light{background:var(--tint);border:1px solid var(--edge)}

/* ---------- embedded explainer ----------
   Its markup and script ship as built (B4). Only the presentation is
   re-scoped here so its generic class names cannot reach the page, and so
   its control matches the page's buttons rather than looking imported. */

#npExplainer{max-width:100%;margin:0}
#npExplainer svg{display:block;width:100%;height:auto}
#npExplainer svg text{font-family:Lexend,"Helvetica Neue",Arial,sans-serif}

#npExplainer .np-controls{display:flex;align-items:center;gap:16px;margin:18px 0 0}
#npExplainer .np-btn{
  font-family:inherit;font-size:14px;font-weight:700;color:var(--deep);background:var(--paper);
  border:1.5px solid var(--gray);border-radius:var(--r);padding:11px 22px;cursor:pointer;
  transition:border-color .2s;
}
#npExplainer .np-btn:hover{border-color:var(--mid)}
#npExplainer .np-btn:focus-visible{outline:3px solid var(--bright);outline-offset:2px}
#npExplainer .np-progress{display:flex;gap:7px}
#npExplainer .np-progress i{width:7px;height:7px;border-radius:50%;background:var(--gray);
  transition:background .3s,transform .3s}
#npExplainer .np-progress i.done{background:var(--mid)}
#npExplainer .np-progress i.now{background:var(--bright);transform:scale(1.45)}
#npExplainer .np-sr{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

#npCam{transform-box:view-box;transform-origin:0 0;
  transition:transform 1.3s cubic-bezier(.42,.02,.28,1)}
#npCam.slow{transition-duration:2.2s}

#npExplainer .b{opacity:0;transition:opacity .5s ease}
#npExplainer .b.on{opacity:1}
#npExplainer .draw{stroke-dasharray:100;stroke-dashoffset:100;visibility:hidden;
  transition:stroke-dashoffset 1.05s cubic-bezier(.35,.1,.25,1)}
#npExplainer .draw.on{stroke-dashoffset:0;visibility:visible}
#npExplainer .draw.slowdraw{transition-duration:2s}
#npExplainer .rise{opacity:0;transform:translateY(30px);
  transition:opacity .65s ease,transform .9s cubic-bezier(.2,.75,.3,1)}
#npExplainer .rise.on{opacity:1;transform:none}

#npExplainer .eyebrow{font-weight:700;font-size:11px;letter-spacing:1.6px;fill:var(--mid)}
#npExplainer .station{font-weight:700;font-size:15px;fill:var(--deep)}
#npExplainer .flow{font-weight:500;font-size:14px;fill:var(--ink)}
#npExplainer .flowlead{font-weight:700;font-size:14px;fill:var(--deep)}
#npExplainer .ring{font-weight:700;font-size:15px;fill:var(--deep)}
#npExplainer .ringsub{font-weight:500;font-size:12.5px;fill:var(--ink);opacity:.62}
#npExplainer .pre{fill-opacity:0;transition:fill-opacity .7s ease}
#npExplainer .pre.on{fill-opacity:1}
#npExplainer .edge{font-weight:500;font-size:11.5px;fill:var(--ink);opacity:.62}
#npExplainer .edgeHi{font-weight:500;font-size:11.5px;fill:var(--mid)}
#npExplainer .said{font-weight:500;font-size:15px;fill:var(--mid)}
#npExplainer .saidbig{font-weight:700;font-size:21px;fill:var(--deep)}
#npExplainer .memcap{font-weight:700;font-size:13px;letter-spacing:2px;fill:var(--mid)}
#npExplainer .capA{font-weight:700;font-size:15px;fill:var(--deep)}

@media (prefers-reduced-motion:reduce){
  #npCam,#npExplainer .b,#npExplainer .draw,#npExplainer .rise,#npExplainer .pre{
    transition:none!important;animation:none!important;transform:none!important}
}