/* ==========================================================================
   BLOCK 4 — ARTICLE PAGE, page specific only
   --------------------------------------------------------------------------
   Sections 1 to 3 are shared with the articles index and are copied rather
   than imported, because the internal page convention is that each page owns
   its own block. Section 4 onward is the article itself.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NAV — the homepage bar on the internal page's transparency mechanism
   -------------------------------------------------------------------------- */
/* Opaque, not .88. A translucent bar over the navy hero lets the mesh through
   and the sheet reads as tinted rather than white; over white content the two
   are indistinguishable, so opaque is right in both places. */
.mn.mn--over.is-open{background:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom-color:rgba(0,0,0,.13)}
.mn.mn--over.is-open .mn-mark{filter:none}
.mn.mn--over.is-open .mn-item > a,
.mn.mn--over.is-open .mn-item > button{color:#10141c}
.mn.mn--over.is-open .mn-sub{color:rgba(0,0,0,.55);border-left-color:rgba(0,0,0,.2)}
.mn--over .mn-item > button{color:#fff}
.mn--over .mn-item > button:hover,.mn--over .mn-item.open > button{color:#e8944b;background:transparent}
.mn-drawer{background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
.mn-drawer a{color:#10141c}
.mn-drawer a:hover{color:#e8944b}
.mn-drawer h5{color:rgba(0,0,0,.5)}
.mn-drawer[hidden]{display:none}
@media(min-width:1121px){ .mn-drawer{display:none} }

/* --------------------------------------------------------------------------
   2. NEXY — corner dock only, carrying the E-5 orb
   -------------------------------------------------------------------------- */
.nxd-host,.nxdP{display:none !important}
.nxd-pill{opacity:1;transform:none;pointer-events:auto}
/* The dock is fixed to the corner on every other page and it stays fixed
   here. What changes is x: it lines up with the right edge of the rail, so it
   reads as pinned under the form rather than floating over the article.
   The offset is measured off the rail by script rather than derived from the
   wrap's arithmetic, because the wrap's real edge depends on the scrollbar
   and on which breakpoint the padding is at. */
/* Nexy sits in the rail, directly under the form, and travels with it because
   the rail is sticky. The form and the pill share one box, .ar-dock, so the
   chat window can take the whole of it. She goes back to being a fixed corner
   dock at Keep reading, where the rail has ended.
   -------------------------------------------------------------------------- */
.ar-dock{position:relative;display:flex;flex-direction:column;gap:16px}

@media(min-width:1120px){
  /* In the rail she is a card, not a floating pill. The component's shadow is
     built to lift glass off a photograph; over a white column it reads as a
     grey haze, so it is replaced with the site's own card shadow and the
     ground goes solid — a translucent navy over white washes out to slate. */
  /* Full width, so her right edge lands on the form's. The component's own
     shadow is built to lift glass off a photograph; over a white column it
     reads as grey haze, so it takes the site's card shadow instead. The ground
     is the brand field rather than flat navy: the same mesh the float window
     wears, scaled to a 64px band and veiled so the wordmark stays legible. */
  html:not(.nx-loose) .ar-dock .nxd-pill{position:static;width:100%;align-self:stretch;
    background-color:#152647;
    background-image:linear-gradient(rgba(9,22,42,.44),rgba(9,22,42,.44)),var(--nx-mesh);
    background-size:cover,cover;background-position:50% 50%,52% 38%;
    border-color:rgba(255,255,255,.20);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 1px 2px rgba(16,20,28,.04),0 10px 26px -18px rgba(16,20,28,.3);
    opacity:1;transform:none;pointer-events:auto}
  html:not(.nx-loose) .ar-dock .nxd-pill:hover{
    border-color:rgba(255,255,255,.34);
    box-shadow:0 1px 2px rgba(16,20,28,.05),0 18px 40px -22px rgba(16,20,28,.42)}
  /* the component still tucks her away when the window opens, exactly as it
     does on a service or industry page */
  html:not(.nx-loose) .ar-dock .nxd-pill.is-tucked{opacity:0;pointer-events:none}

  /* THE WINDOW HAS TWO PLACEMENTS, and script picks between them at the
     moment it opens.

     Default: pinned to the foot of the viewport, on the rail's own x. This is
     the safe one. The window is 500px tall and the dock can sit most of the
     way down a laptop screen, so anchoring it to the dock would push the chat
     input off the bottom of the page — reachable only by scrolling, which
     moves the rail, which moves the window.

     .nx-float-fits: anchored to the dock, covering the form, which is what it
     should do whenever there is room for the whole window on screen.

     Either way it keeps its own 500px height. Stretching it to the dock's
     height squeezed .nxd-fstage, which is a flex item, and the orb came out
     an ellipse — a circle is the one thing that cannot survive squashing. */
  html:not(.nx-loose) .ar-dock .nxd-float{position:fixed;
    left:auto;right:var(--nx-dock-right,26px);top:auto;bottom:24px;
    width:352px;height:clamp(420px,calc(100vh - 128px),500px);z-index:401}
  html:not(.nx-loose).nx-float-fits .ar-dock .nxd-float{position:absolute;
    left:0;right:0;top:0;bottom:auto;width:auto;height:500px;z-index:6}
  .nxd-fstage{flex:none}
  /* Two prompts, not three. The component offers three and the third falls
     below the fold of a 500px window once the orb and the speaking chip have
     taken their room. A prompt you cannot see is worse than one that is not
     offered, so the third is dropped on article pages rather than the window
     being made taller. */
  .nxd-float .nxd-fasks .nxd-ask:nth-child(n+3){display:none}
}
/* once she has left the rail she is the ordinary corner dock, and the
   component's own z-index:400 puts her over everything again */
html.nx-loose .nxd-pill,html.nx-loose .nxd-float{right:26px}
/* below the rail breakpoint she is the ordinary corner dock again */
@media(max-width:1119px){
  .ar-dock .nxd-pill{position:fixed;right:26px;bottom:26px;width:auto}
}

.nxs-orb{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  --lb:20px;--lsp:1;--ldur:2.14s;background:#2b6f74;
  filter:drop-shadow(0 26px 54px rgba(10,60,70,.5))
         drop-shadow(0 0 70px rgba(90,190,210,.20));
  transition:filter .5s ease}
.nxd-float.fmode-voice .nxs-orb{--lsp:.42;
  filter:drop-shadow(0 26px 54px rgba(10,60,70,.6))
         drop-shadow(0 0 92px rgba(120,215,230,.38))}
.nxs-liquid{position:absolute;inset:-30%;
  background:
    radial-gradient(circle at 25% 30%, #a9e2ff 0 12%, transparent 36%),
    radial-gradient(circle at 75% 28%, #e5feff 0 10%, transparent 34%),
    radial-gradient(circle at 68% 76%, #234931 0 16%, transparent 43%),
    radial-gradient(circle at 20% 74%, #a2bf7a 0 11%, transparent 38%),
    conic-gradient(from 25deg,#348289,#66bbe2,#d9f0e2,#2f6b4a,#348289);
  filter:blur(var(--lb)) saturate(1.56);
  animation:nxs-liquid calc(var(--ldur) * var(--lsp)) ease-in-out infinite alternate;
  will-change:transform}
@keyframes nxs-liquid{
  0%   {transform:translate3d(-11%,-9%,0) rotate(-13deg) scale(1.06)}
  50%  {transform:translate3d(12%,8%,0)   rotate(15deg)  scale(1.15)}
  100% {transform:translate3d(-5%,14%,0)  rotate(28deg)  scale(1.09)}
}
.nxs-liquid2{position:absolute;inset:-34%;opacity:.55;
  background:
    radial-gradient(circle at 62% 18%, #d9f0e2 0 14%, transparent 40%),
    radial-gradient(circle at 18% 58%, #66bbe2 0 13%, transparent 38%),
    radial-gradient(circle at 80% 70%, #2f6b4a 0 15%, transparent 42%),
    conic-gradient(from 200deg, #2f6b4a, #348289, #a9e2ff, #348289, #2f6b4a);
  filter:blur(var(--lb)) saturate(1.44);
  animation:nxs-liquid2 calc(var(--ldur) * 1.618 * var(--lsp)) ease-in-out infinite alternate;
  will-change:transform}
@keyframes nxs-liquid2{
  0%   {transform:translate3d(11%,12%,0)   rotate(17deg)  scale(1.11)}
  50%  {transform:translate3d(-14%,-10%,0) rotate(-13deg) scale(1.05)}
  100% {transform:translate3d(8%,-14%,0)   rotate(-27deg) scale(1.13)}
}
.nxs-shade{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 30% 24%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 54%),
    radial-gradient(circle at 76% 84%,rgba(6,32,34,.55) 0%,rgba(6,32,34,0) 58%),
    radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 68%,rgba(5,26,30,.5) 100%)}
.nxs-gloss{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(ellipse 88% 44% at 46% -16%,
      rgba(255,255,255,.18) 0%,rgba(255,255,255,.08) 26%,
      rgba(255,255,255,.02) 54%,rgba(255,255,255,0) 76%),
    radial-gradient(ellipse 40% 26% at 33% 12%,
      rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 66% 46% at 70% 92%,
      rgba(200,245,255,.16) 0%,rgba(200,245,255,0) 62%);
  box-shadow:inset 0 0 34px rgba(4,22,26,.42),
             inset 0 -18px 34px rgba(4,22,26,.34),
             inset 0 0 0 1px rgba(255,255,255,.18),
             inset 0 0 22px rgba(255,255,255,.05)}
.nxs-sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;overflow:hidden;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 38%,rgba(0,0,0,.5) 72%,transparent 96%);
  mask:radial-gradient(circle at 50% 50%,#000 38%,rgba(0,0,0,.5) 72%,transparent 96%)}
.nxs-sheen i{position:absolute;inset:-70%;display:block;filter:blur(var(--sb,16px))}
.nxs-sheen i:nth-child(1){
  background:linear-gradient(112deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.19) 50%,rgba(255,255,255,0) 70%);
  animation:nxs-sw1 calc(var(--ldur) * 2 * var(--lsp)) ease-in-out infinite alternate}
.nxs-sheen i:nth-child(2){
  background:linear-gradient(64deg,rgba(190,240,255,0) 32%,rgba(190,240,255,.13) 50%,rgba(190,240,255,0) 68%);
  animation:nxs-sw2 calc(var(--ldur) * 3 * var(--lsp)) ease-in-out infinite alternate}
@keyframes nxs-sw1{0%{transform:translate3d(-46%,-22%,0)}100%{transform:translate3d(46%,22%,0)}}
@keyframes nxs-sw2{0%{transform:translate3d(42%,-18%,0)}100%{transform:translate3d(-42%,18%,0)}}
.nxs-grainwrap{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:overlay}
.nxs-grain{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  mix-blend-mode:overlay;opacity:.375;background-size:150px 150px;background-repeat:repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='2.2' intercept='-0.3'/></feComponentTransfer></filter><rect width='150' height='150' filter='url(%23n)'/></svg>")}
.nxs-av{position:relative;display:block;border-radius:50%;overflow:hidden;background:#2b6f74}
.nxs-av .nxs-orb{filter:none;--lb:4px}
.nxs-av .nxs-sheen i{--sb:3px}
.nxs-av .nxs-gloss{box-shadow:inset 0 0 7px rgba(4,22,26,.40),inset 0 -3px 6px rgba(4,22,26,.26)}
.nxs-av .nxs-grain{background-size:56px 56px;opacity:.375}
.nxd-pill .nxs-av{width:46px;height:46px;border:2px solid #101c34}
.nxd-fhead .nxs-av{width:34px;height:34px;border:1px solid rgba(255,255,255,.3)}
.nxd-fstage .nxs-orb{--lb:14px}
.nxd-fstage .nxs-sheen i{--sb:11px}
.nxd-fstage .nxs-gloss{box-shadow:inset 0 0 22px rgba(4,22,26,.40),inset 0 -9px 19px rgba(4,22,26,.26)}
.nxd-fstage img{display:none}

/* --------------------------------------------------------------------------
   3. THE ARTICLE HERO
   Shorter than a landing hero: a headline is not a proposition, so it does
   not need a screen to itself. Breadcrumb, kicker, H1, standfirst, byline.
   -------------------------------------------------------------------------- */
.at-hero{min-height:0;padding:138px 0 76px}
@media(min-width:1120px){
  .at-hero .at-wrap{min-height:0}
  .at-hero .at-hero-in{max-width:840px}
}
.at-hero .at-h1{max-width:20ch;font-size:clamp(31px,3.6vw,50px);line-height:1.08}
.at-hero .at-lede{max-width:58ch;margin-top:22px}
/* the byline strip. Dates are data, so they are mono and they are real
   <time> elements; the name is voice, so it is Geist. */
.ar-by{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.22)}
.ar-by .av{width:38px;height:38px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.ar-by b{display:block;font-family:var(--ui);font-size:14.5px;font-weight:400;color:#fff}
.ar-by b a{color:inherit;border-bottom:1px solid rgba(255,255,255,.3)}
.ar-by b a:hover{color:#e8944b;border-bottom-color:#e8944b}
.ar-by .role{display:block;font-family:var(--ui);font-size:12.5px;font-weight:300;
  color:rgba(255,255,255,.7);margin-top:1px}
.ar-by .meta i{font-style:normal;color:rgba(255,255,255,.3)}
.ar-by .meta{margin-left:auto;display:flex;gap:11px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.66)}
@media(max-width:760px){ .ar-by .meta{margin-left:0;width:100%} }

/* --------------------------------------------------------------------------
   3b. THE HEADER IMAGE
   Full bleed, and graded rather than dropped in raw. The brand field is a
   recoloured photograph, so a photograph that joins it has to be recoloured
   too: a navy multiply over the picture, the saturation pulled back, and a
   short fade at the top edge so it grows out of the hero instead of butting
   against it.
   -------------------------------------------------------------------------- */
/* Two pictures butted together show the join, so the join is the only thing
   treated. The photograph itself is left alone — its own colour is the point.
   The top band is where the work happens: the hero's navy dissolves down into
   the picture over about a quarter of its height, and the brand mesh is masked
   to that same band so the grain carries across the seam and then stops. */
.ar-hero-img{position:relative;margin:0;background:#152647;
  isolation:isolate;overflow:hidden}
.ar-hero-img img{display:block;width:100%;height:clamp(240px,30vw,420px);
  object-fit:cover;object-position:50% 46%}
/* the mesh, in the joining band only */
.ar-hero-img::after{content:"";position:absolute;left:0;right:0;top:0;height:34%;z-index:1;
  pointer-events:none;background-image:var(--nx-mesh);
  background-size:cover;background-position:50% 100%;
  mix-blend-mode:soft-light;opacity:.8;
  -webkit-mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 46%,transparent 100%);
  mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 46%,transparent 100%)}
/* the navy, dissolving out of the hero and gone by a third of the way down */
.ar-hero-img::before{content:"";position:absolute;left:0;right:0;top:0;height:38%;z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,#152647 0%,rgba(21,38,71,.88) 14%,
    rgba(21,38,71,.44) 42%,rgba(21,38,71,.16) 70%,rgba(21,38,71,0) 100%)}
.ar-hero-img figcaption{position:absolute;z-index:3;right:16px;bottom:12px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
.ar-hero-img figcaption a{color:inherit;border-bottom:1px solid rgba(255,255,255,.28)}
.ar-hero-img figcaption a:hover{color:#e8944b;border-bottom-color:#e8944b}

/* --------------------------------------------------------------------------
   4. THE ZONE — body left, rail right
   1fr / 352px, because 352 is the narrowest a four field form reads at and
   the body still clears 700px on a 1240px grid.
   -------------------------------------------------------------------------- */
.ar-zone{background:var(--void);border-top:1px solid var(--line)}
.ar-grid{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:60px;
  align-items:start;padding:76px 0 96px}
/* The body fills its column. It used to be capped at 720px inside an 824px
   column, which left 104px of dead grid on top of the 64px gap — 168px of
   white between the article and the rail, and the article read as pinned to
   the left edge. Measure is held where it belongs instead: on the prose,
   at 68ch. The furniture — chart, table, banners, quote — takes the column. */
.ar-body{max-width:none;min-width:0}

/* reading progress. Flat crimson, not the ramp: it is permanently on screen,
   and the ember is already spent on the headline. */
.ar-prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:600;
  background:var(--warm);pointer-events:none;transition:width .1s linear}

/* --------------------------------------------------------------------------
   5. PROSE
   17px/1.75 at 68ch. Long enough to read for eleven minutes, short enough
   that a retrieval model gets clean passages rather than one wall.
   -------------------------------------------------------------------------- */
.ar-body p{font-size:17px;font-weight:300;line-height:1.75;color:rgba(0,0,0,.84);
  max-width:68ch;margin-top:22px}
/* No rule between sections. The 62px of air is the separation; a hairline on
   top of it was drawing a line the reader had to look past. */
.ar-body h2{font-family:var(--display);font-size:clamp(24px,2.3vw,31px);font-weight:500;
  letter-spacing:-.03em;line-height:1.16;margin-top:60px;scroll-margin-top:104px}
.ar-body h3{font-family:var(--display);font-size:20px;font-weight:500;
  letter-spacing:-.022em;line-height:1.24;margin-top:38px;scroll-margin-top:104px}
.ar-body h2 + p,.ar-body h3 + p{margin-top:16px}
.ar-body a{color:var(--txt);border-bottom:1px solid var(--line-2);padding-bottom:1px;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.ar-body a:hover{color:#e8944b;border-bottom-color:#e8944b}
.ar-body strong{font-weight:500;color:#000}
.ar-body ul{list-style:none;margin-top:20px;max-width:68ch}
.ar-body ul li{position:relative;padding:8px 0 8px 22px;font-size:16.5px;font-weight:300;
  line-height:1.7;color:rgba(0,0,0,.84)}
.ar-body ul li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:1px;
  background:var(--warm)}

/* --------------------------------------------------------------------------
   6. THE ANSWER BLOCK — the AEO lift target
   Forty to sixty words, self contained, no "as described above". This is the
   passage an assistant quotes, so it has to survive being read alone.
   -------------------------------------------------------------------------- */
.ar-answer{margin-top:0;max-width:760px;padding:26px 28px;background:var(--slate);
  border:1px solid var(--line);border-left:3px solid var(--warm);
  border-radius:0 12px 12px 0}
.ar-answer .lab{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--warm);margin-bottom:12px}
.ar-answer p{margin:0;font-size:18px;font-weight:300;line-height:1.66;color:#000;
  max-width:60ch}

/* --------------------------------------------------------------------------
   8. THE FIGURE
   The brand mesh cropped, with a data mark over it, and a real caption that
   states the sample. A caption is a citable sentence; "Fig 1" is not.
   -------------------------------------------------------------------------- */
.ar-fig{margin-top:44px}
.ar-fig .ins-cover{aspect-ratio:16/8}
.ar-fig figcaption{margin-top:14px;font-family:var(--ui);font-size:13px;font-weight:300;
  line-height:1.6;color:rgba(0,0,0,.58);max-width:60ch}
.ar-fig figcaption b{font-weight:500;color:rgba(0,0,0,.8)}
.ins-cover{position:relative;overflow:hidden;border-radius:12px;background:#152647;
  display:block;isolation:isolate}
.ins-cover::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--nx-mesh);background-size:190% auto;background-position:8% 14%}
.ins-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(140deg,rgba(4,10,20,.52) 0%,rgba(4,10,20,.20) 52%,rgba(4,10,20,.46) 100%)}
.ins-mk{position:absolute;z-index:2;left:34px;right:34px;bottom:28px;height:44%;
  color:rgba(255,255,255,.72);pointer-events:none}
.ins-mk .em{stroke:#e8944b;opacity:1}
.ins-stamp{position:absolute;z-index:3;top:18px;left:20px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.78)}


/* --------------------------------------------------------------------------
   8b. THE CHART
   This is the article's graphic, and it is drawn from the same eight rows as
   the table below it rather than being a picture placed near them. Hairlines,
   mono axis, one ember series against one muted navy series. The design
   language's rule holds: show the artefact, never an illustration of it.
   -------------------------------------------------------------------------- */
.ar-chart{border:1px solid var(--line);border-radius:12px;background:var(--void);
  box-shadow:0 1px 2px rgba(16,20,28,.03),0 10px 26px -18px rgba(16,20,28,.16)}
.ar-chart-h{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1px solid var(--line)}
.ar-chart-h .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(0,0,0,.5)}
.ar-chart-h .key{margin-left:auto;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(0,0,0,.55)}
.ar-chart-h .key i{width:14px;height:5px;border-radius:3px;display:inline-block}
.ar-chart-h .key i + i{margin-left:10px}
.ar-chart-h .key i.r{background:rgba(21,38,71,.34)}
.ar-chart-h .key i.s{background:linear-gradient(90deg,#c8102e,#e8944b)}

.ar-chart-rows{list-style:none;margin:0;padding:14px 20px 6px}
.ar-chart-rows li{display:grid;grid-template-columns:96px 1fr 52px;gap:14px;
  align-items:center;padding:7px 0}
.ar-chart-rows .c{font-family:var(--ui);font-size:13.5px;font-weight:400;color:var(--txt)}
.ar-chart-rows .v{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  text-align:right;color:rgba(0,0,0,.66)}
/* the track carries both bars and the zero rule; bars are positioned from a
   -1 to 10 scale so Bhubaneswar's negative reads as crossing zero, not as a
   bar of length nothing */
.ar-chart-rows .t{position:relative;height:16px}
.ar-chart-rows .t i{position:absolute;height:5px;border-radius:3px}
.ar-chart-rows .t i.r{top:1px;background:rgba(21,38,71,.34)}
.ar-chart-rows .t i.s{top:10px;background:linear-gradient(90deg,#c8102e,#e8944b)}
.ar-chart-rows .t i.s.neg{background:#8d1226}
.ar-chart-rows .t b{position:absolute;top:-2px;bottom:-2px;width:1px;
  background:rgba(0,0,0,.28)}
/* the axis shares the row grid, so each tick sits at its real position on the
   -1 to 10 scale rather than being spaced evenly and lying about it */
.ar-chart-f{display:grid;grid-template-columns:96px 1fr 52px;gap:14px;
  padding:2px 20px 14px}
.ar-chart-f .ax{grid-column:2;position:relative;height:12px}
.ar-chart-f .ax span{position:absolute;top:0;transform:translateX(-50%);
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:rgba(0,0,0,.36)}
@media(max-width:640px){
  .ar-chart-rows li,.ar-chart-f{grid-template-columns:72px 1fr 44px;gap:10px}
}

/* --------------------------------------------------------------------------
   8c. THE IN-ARTICLE CTA BANNER
   Two per article, at roughly a third and two thirds. It is the brand field
   interrupting the column: navy, mesh, one ember hairline along the top edge,
   and a single button. It does not look like a section, because it is not
   one — it is an interruption, and it should read as deliberate.
   The href is the only thing that changes between placements.
   -------------------------------------------------------------------------- */
.ar-cta{position:relative;isolation:isolate;overflow:hidden;
  margin:52px 0;padding:28px 30px;border-radius:14px;background:#152647;
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  box-shadow:0 20px 46px -30px rgba(4,10,20,.7)}
.ar-cta::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--nx-mesh);background-size:cover;background-position:74% 38%}
.ar-cta::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(9,22,42,.86) 0%,rgba(9,22,42,.62) 62%,rgba(9,22,42,.44) 100%)}
.ar-cta .in,.ar-cta > a{position:relative;z-index:2}
.ar-cta .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#e8944b;margin-bottom:11px}
.ar-cta h3{font-family:var(--display);font-size:clamp(20px,2vw,25px);font-weight:500;
  letter-spacing:-.026em;line-height:1.18;color:#fff;margin:0;max-width:24ch}
.ar-cta p{margin-top:10px;font-size:14.5px;font-weight:300;line-height:1.6;
  color:rgba(255,255,255,.78);max-width:52ch}
.ar-cta > a{white-space:nowrap;padding:11px 24px}
.ar-cta > a .ar{transition:transform .3s var(--ease)}
.ar-cta > a:hover .ar{transform:translateX(4px)}
@media(max-width:760px){
  .ar-cta{grid-template-columns:1fr;gap:20px;padding:24px 22px}
  .ar-cta > a{justify-self:start}
}

/* --------------------------------------------------------------------------
   9. THE TABLE
   A real <table> with a caption, units in the header and mono figures.
   Language models quote tables more readily than prose, and a table is the
   one element that survives being stripped of its page.
   -------------------------------------------------------------------------- */
.ar-tw{margin-top:44px;overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.ar-table{width:100%;border-collapse:collapse;min-width:620px}
.ar-table caption{caption-side:top;text-align:left;padding:18px 20px 16px;
  font-family:var(--ui);font-size:13px;font-weight:300;line-height:1.55;
  color:rgba(0,0,0,.6);border-bottom:1px solid var(--line)}
.ar-table caption b{font-weight:500;color:var(--txt)}
.ar-table th,.ar-table td{padding:13px 18px;text-align:right;
  border-bottom:1px solid var(--line);font-size:14px}
.ar-table th:first-child,.ar-table td:first-child{text-align:left}
.ar-table thead th{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:400;color:rgba(0,0,0,.5);
  border-bottom:1px solid var(--line-2);vertical-align:bottom}
.ar-table tbody th{font-family:var(--ui);font-size:14.5px;font-weight:400;color:var(--txt)}
.ar-table tbody td{font-family:var(--mono);font-size:13px;letter-spacing:.02em;
  color:rgba(0,0,0,.74)}
.ar-table tbody tr:last-child th,.ar-table tbody tr:last-child td{border-bottom:0}
.ar-table tbody tr:hover{background:var(--slate)}
.ar-table td.d{color:var(--warm)}

/* AR-10 comparison table. Reuses the industry-layer .sv-cmp shape, adapted to
   sit inside .ar-tw: the wrapper already carries the border and radius, so the
   table itself stays flush. Below 760px it stacks and data-l names the column. */
.sv-cmp{width:100%;border-collapse:collapse;table-layout:fixed}
.sv-cmp caption{caption-side:top;text-align:left;padding:18px 20px 16px;
  font-family:var(--ui);font-size:13px;font-weight:300;line-height:1.55;
  color:rgba(0,0,0,.6);border-bottom:1px solid var(--line)}
.sv-cmp caption b{font-weight:500;color:var(--txt)}
.sv-cmp th,.sv-cmp td{padding:16px 18px;text-align:left;vertical-align:top;
  font-size:14px;font-weight:300;line-height:1.6;color:rgba(0,0,0,.68);
  border-bottom:1px solid var(--line)}
.sv-cmp thead th{vertical-align:bottom;padding-top:18px;padding-bottom:14px;
  font-family:var(--display);font-size:15.5px;font-weight:500;letter-spacing:-.014em;
  line-height:1.3;color:var(--txt);border-bottom:1px solid var(--line-2)}
.sv-cmp thead th:first-child{width:22%}
.sv-cmp tbody th{font-family:var(--ui);font-size:14.5px;font-weight:500;color:var(--txt)}
.sv-cmp tbody tr:last-child th,.sv-cmp tbody tr:last-child td{border-bottom:0}
@media(max-width:760px){
  .sv-cmp,.sv-cmp tbody,.sv-cmp tr,.sv-cmp th,.sv-cmp td{display:block;width:auto}
  .sv-cmp caption{display:block}
  .sv-cmp thead{display:none}
  .sv-cmp tbody th{background:var(--slate);padding:12px 18px;
    border-bottom:1px solid var(--line)}
  .sv-cmp tbody td{padding:14px 18px;border-bottom:1px solid var(--line)}
  .sv-cmp tbody tr:last-child td:last-child{border-bottom:0}
  .sv-cmp tbody td::before{content:attr(data-l);display:block;font-family:var(--mono);
    font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(0,0,0,.45);
    margin-bottom:6px}
}

/* --------------------------------------------------------------------------
   10. PULL QUOTE — the one dark object on a white section
   Attributed by role and city, never by name. The attribution is the
   credibility, and a name we cannot publish is not one.
   -------------------------------------------------------------------------- */
.ar-quote{margin-top:46px;background:#152647;border-radius:12px;padding:32px 34px;
  position:relative;isolation:isolate;overflow:hidden}
.ar-quote::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:var(--nx-mesh);background-size:cover;background-position:62% 30%}
.ar-quote::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,rgba(9,22,42,.78),rgba(9,22,42,.55))}
.ar-quote blockquote,.ar-quote figcaption{position:relative;z-index:2}
.ar-quote blockquote{margin:0;font-family:var(--display);font-size:clamp(19px,1.9vw,23px);
  font-weight:300;line-height:1.5;letter-spacing:-.016em;color:#fff;max-width:44ch}
.ar-quote figcaption{margin-top:18px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:#e8944b}

/* --------------------------------------------------------------------------
   11. METHOD — the E-E-A-T block
   Sample, roles, window and limits, stated before anyone asks. The known
   limits line is the part that earns the trust, not the sample size.
   -------------------------------------------------------------------------- */
.ar-method{margin-top:46px;border:1px solid var(--line-2);border-radius:12px;
  background:var(--void)}
.ar-method .h{display:flex;align-items:center;gap:11px;padding:14px 22px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(0,0,0,.5)}
.ar-method .h b{font-weight:400;color:var(--txt)}
.ar-method .dot{width:6px;height:6px;border-radius:50%;background:var(--warm);flex:none}
.ar-method dl{margin:0;padding:8px 22px 18px}
.ar-method dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(0,0,0,.46);margin-top:16px}
.ar-method dd{margin:5px 0 0;font-size:15px;font-weight:300;line-height:1.6;
  color:rgba(0,0,0,.82);max-width:62ch}

/* --------------------------------------------------------------------------
   12. FAQ, SOURCES, AUTHOR, CITATION
   -------------------------------------------------------------------------- */
/* The FAQ used to carry three rules in a row: its own border-top, the
   accordion's, and the h2's. Two of them were drawing an empty strip. The
   accordion brings its own top rule, so the section brings none. */
.ar-faq{margin-top:58px}
.ar-faq h2{margin-top:0;padding-top:0;border-top:0}
.ar-faq .at-acc{max-width:none;margin:22px 0 0}
/* and the last item's own bottom rule closes the block, so nothing follows it */
.ar-faq .at-acc-item:last-child .at-q{border-bottom-color:var(--line)}
.ar-faq .at-q{font-size:clamp(17px,1.6vw,20px);padding:22px 44px 22px 0}
.ar-faq .at-a .in{padding:2px 40px 24px 0;font-size:15.5px}

.ar-author{margin-top:44px;display:grid;grid-template-columns:56px 1fr;gap:20px;
  border:1px solid var(--line);border-radius:12px;padding:24px 26px}
.ar-author .av{width:56px;height:56px;border-radius:50%;background:#152647;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:14px;letter-spacing:.06em}
.ar-author b{display:block;font-family:var(--ui);font-size:16px;font-weight:500;
  letter-spacing:-.012em}
.ar-author .role{display:block;font-size:12.5px;font-weight:300;color:rgba(0,0,0,.55);
  margin-top:2px}
.ar-author p{margin-top:12px;font-size:14.5px;line-height:1.65;color:rgba(0,0,0,.72);
  max-width:60ch}

/* the copy control sits in the corner of the citation block, because that is
   where someone who wants the link is already looking */
.ar-cite{position:relative}
.ar-copy{position:absolute;top:11px;right:11px;width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;background:var(--void);
  border:1px solid var(--line-2);color:rgba(0,0,0,.55);
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.ar-copy svg{width:14px;height:14px;flex:none;position:absolute;
  transition:opacity .2s var(--ease),transform .3s var(--ease)}
.ar-copy .tk{opacity:0;transform:scale(.6)}
.ar-copy.done .lk{opacity:0;transform:scale(.6)}
.ar-copy.done .tk{opacity:1;transform:none}
.ar-copy:hover{border-color:var(--txt);color:var(--txt)}
.ar-copy.done{border-color:var(--green,#14663f);color:var(--green,#14663f)}
/* the label is for a screen reader only; the icon says it to everyone else */
.ar-copy .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

.ar-cite{margin-top:34px;padding:16px 18px;border:1px dashed rgba(0,0,0,.2);
  border-radius:8px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  line-height:1.7;color:rgba(0,0,0,.6);word-break:break-word}
.ar-cite b{display:block;padding-right:44px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(0,0,0,.44);margin-bottom:8px;font-weight:400}

/* --------------------------------------------------------------------------
   13. THE RAIL
   Table of contents on top, the form under it, Nexy in the corner below both.
   Sticky as one unit, and allowed to scroll inside itself, because a rail
   taller than the viewport that cannot scroll strands its own submit button.
   -------------------------------------------------------------------------- */
/* The rail does not scroll and it does not stop being sticky.
   --------------------------------------------------------------------------
   It used to carry max-height + overflow, which put a second scrollbar down
   the side of the form. The fix for that un-stuck the rail whenever it was
   taller than the viewport, which meant it travelled on a desktop and sat
   still on a laptop — the wrong trade, and the more visible bug of the two.

   The rail is always sticky now. What changes is its `top`, written by script:

     top = min(88, viewportHeight − railHeight − 24)

   On a viewport tall enough it resolves to 88 and the rail pins under the bar,
   as before. On a laptop it resolves to a NEGATIVE number, which pins the rail
   by its bottom edge instead: it travels with the page until its foot reaches
   24px above the fold, then holds. Either way it moves with the scroll, and
   either way the submit button is on screen. */
.ar-rail{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px}

.ar-toc{border:1px solid var(--line);border-radius:12px;background:var(--void);
  padding:18px 18px 14px}
.ar-toc .lab{display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(0,0,0,.5);margin-bottom:12px}
.ar-toc .lab .pct{margin-left:auto;color:var(--warm)}
/* The contents list shows every section. It used to be capped at 152px with
   its own scroll, because the rail was 784px and had to be kept inside a
   laptop viewport. Dropping the brief field from the form took 320px out of
   the rail, which bought the room back — so the last inner scrollbar goes
   too. The cap returns only if a rail ever exceeds ~620px again. */
.ar-toc ol{list-style:none;margin:0;counter-reset:t}
.ar-toc a{counter-increment:t;display:flex;gap:9px;padding:6px 0 6px 12px;
  border-left:2px solid var(--line);font-family:var(--ui);font-size:12.5px;font-weight:300;
  line-height:1.42;color:rgba(0,0,0,.62);
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.ar-toc a::before{content:counter(t,decimal-leading-zero);flex:none;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:rgba(0,0,0,.32);
  padding-top:3px}
.ar-toc a:hover{color:var(--txt);border-left-color:rgba(0,0,0,.4)}
.ar-toc a.on{color:var(--txt);font-weight:400;border-left-color:var(--warm)}
.ar-toc a.on::before{color:var(--warm)}

/* the form, compact for a 352px rail: three fields, single column */
.ar-form{border:1px solid var(--line);border-radius:12px;background:#fff;padding:20px 20px 18px;
  box-shadow:0 0 0 1px rgba(16,20,28,.03),0 18px 40px -22px rgba(16,20,28,.28)}
.ar-form .lf-eyebrow{font-family:var(--ui);font-size:11px;font-weight:500;color:var(--warm)}
.ar-form h3{font-family:var(--display);font-size:18.5px;font-weight:500;letter-spacing:-.024em;
  line-height:1.2;margin:9px 0 6px}
.ar-form .sub{font-size:13px;font-weight:300;line-height:1.55;color:rgba(0,0,0,.66)}
.ar-form .lf-f{display:block;margin-top:12px}
.ar-form .lf-f > span:first-child{display:block;font-family:var(--ui);font-size:11.5px;
  font-weight:500;color:rgba(0,0,0,.74);margin-bottom:6px}
.ar-form input,.ar-form textarea{width:100%;font-family:var(--ui);font-size:14px;
  font-weight:350;color:#000;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:10px 12px;line-height:1.4;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.ar-form textarea{resize:vertical;min-height:62px}
.ar-form input:focus,.ar-form textarea:focus{outline:none;border-color:var(--warm);
  box-shadow:0 0 0 3px rgba(200,16,46,.1)}
.ar-form input::placeholder,.ar-form textarea::placeholder{color:rgba(0,0,0,.36)}
.ar-form .lf-f.err input,.ar-form .lf-f.err textarea{border-color:var(--warm)}
.ar-form .lf-msg{display:none;font-size:11.5px;color:var(--warm);margin-top:5px}
.ar-form .lf-f.err .lf-msg{display:block}
.ar-form .at-btn{width:100%;justify-content:center;margin-top:14px;padding:11px 20px;
  font-size:14px;letter-spacing:.08em}
.ar-form .fine{font-size:11.5px;font-weight:300;line-height:1.55;color:rgba(0,0,0,.52);
  margin-top:11px;text-align:center}
.ar-form.sent .body{display:none}
.ar-form .done{display:none;text-align:center;padding:12px 0 4px}
.ar-form.sent .done{display:block}
.ar-form .done .tick{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--green,#14663f);color:#fff;
  font-size:16px;margin-bottom:10px}
.ar-form .done b{display:block;font-family:var(--display);font-size:17px;font-weight:500}
.ar-form .done p{font-size:13px;font-weight:300;color:rgba(0,0,0,.62);margin-top:6px}

/* --------------------------------------------------------------------------
   14. RELATED + CLOSE
   -------------------------------------------------------------------------- */
.ar-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ins-card{display:flex;flex-direction:column;background:var(--void);
  border:1px solid var(--line);border-radius:12px;padding:14px 14px 20px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.ins-card:hover{border-color:rgba(0,0,0,.26);transform:translateY(-5px);
  box-shadow:0 20px 44px -28px rgba(0,0,0,.42)}
.ins-card .ins-cover{aspect-ratio:2/1}
.ins-card .ins-body{padding:16px 8px 0;display:flex;flex-direction:column;flex:1}
.ins-card h3{font-family:var(--display);font-size:17.5px;font-weight:500;
  letter-spacing:-.02em;line-height:1.26;margin-bottom:9px}
.ins-card h3 a{color:inherit;text-decoration:none}
.ins-card:hover h3{color:#e8944b}
.ins-card p{font-size:13.5px;font-weight:300;line-height:1.6;color:rgba(0,0,0,.66)}
.ins-meta{display:flex;align-items:center;gap:9px;margin-bottom:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(0,0,0,.46)}
.ins-meta .cl{color:var(--warm)}
.ins-meta i{font-style:normal;color:rgba(0,0,0,.24)}

/* --------------------------------------------------------------------------
   15. REVEALS + BREAKPOINTS
   -------------------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-s > *{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv-s.in > *{opacity:1;transform:none}
.rv-s.in > *:nth-child(2){transition-delay:.10s}
.rv-s.in > *:nth-child(3){transition-delay:.20s}

@media(max-width:1119px){
  /* the rail unpins and splits: contents to the top of the article where a
     reader wants them, form to the end where it does not interrupt */
  .ar-grid{grid-template-columns:minmax(0,1fr);gap:0;padding-top:60px}
  .ar-rail{position:static;max-height:none;overflow:visible;display:contents}
  .ar-toc{order:-1;margin-bottom:40px}
  .ar-form{margin-top:56px}
  .ar-body{max-width:none}
  .ar-prog{display:none}
}
@media(max-width:900px){
  .at-hero{padding:118px 0 60px}
  .ar-rel{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .ar-rel{grid-template-columns:1fr}
  .ar-quote{padding:24px 22px}
  .ar-answer{padding:22px 20px}
  .ar-body p{font-size:16.5px}
}
@media(prefers-reduced-motion:reduce){
  .ins-card:hover{transform:none}
  .rv,.rv-s > *{opacity:1;transform:none}
  .ar-prog{transition:none}
}