/* ============================================================
   IN-SEC design system
   Black, terminal green, brass.

   THE GREEN RULE
   Terminal green is an accent, not a colour scheme. It is
   permitted on: the primary CTA, prompt lines, section markers,
   stat figures, price figures, service-card left borders and
   inline links. Never on body text, headlines, card backgrounds
   or large fills. Never more than six green elements in one
   viewport.

   Alarm red is reserved for the urgent-incident door only.
   Spending it anywhere else costs the site its one piece of
   visual urgency.
   ============================================================ */

:root{
  /* Tells the browser this document is dark, so scrollbars, form controls,
     text-selection and the flash of background before CSS paints all match
     the surface instead of coming up white. One line, no JavaScript. */
  color-scheme:dark;

  /* Surfaces - darkest to lightest */
  --ink-900:#0A0E0A; --ink-850:#0D120C; --ink-800:#101710;
  --ink-700:#161E15; --ink-600:#1F2A1E; --ink-500:#2C382A;

  /* Text */
  --bone-100:#F2EFE3;  /* headlines */
  --bone-200:#E8E4D5;  /* body */
  --bone-300:#B9C4B4;  /* secondary */
  --sage-400:#9AA396;  /* muted */
  --sage-500:#7E8A7B;  /* hover borders. Too faint for small text: labels use 400 */
  --sage-600:#5E6B5C; --sage-700:#4A5548;  /* borders */

  /* Terminal green - see THE GREEN RULE */
  --term-500:#00E06A; --term-600:#00B856; --term-900:#06210F;
  --term-bg:#12200F;  --term-bd:#1F3A1B;
  --term-wash:#0D150C;  /* barely green - for full-width bands, where
                           --term-bg reads as a fill and breaks the green rule */

  /* Alarm - incident door only */
  --alarm-500:#FF5C5C; --alarm-300:#FF8A8A;
  --alarm-bg:#180F0F;  --alarm-bd:#3A1E1E;

  --brass-400:#C9C3A6;

  --r-card:10px; --r-ctl:5px;
  --wrap:1140px; --gut:28px; --gut-edge:40px;

  /* Type scale (IBM Carbon steps). Every font-size uses one. Exceptions:
     the lockup (em) and print (pt). Headings clamp between two steps. */
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:20px;
  --fs-2xl:24px; --fs-3xl:36px; --fs-d1:42px; --fs-d2:60px;

  /* Spacing (Carbon steps) and the section rhythm built from them. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:40px; --sp-8:48px; --sp-9:64px; --sp-10:80px; --sp-11:96px;
  --space-section:var(--sp-10);
  --space-tight:var(--sp-8);
  --space-hero-top:var(--sp-11);
  --space-hero-bottom:var(--sp-10);
  --space-narrow-top:var(--sp-10);
  --space-narrow-bottom:var(--sp-9);

  /* Measure in em, not ch: Plex Sans sets about 2.4 characters to the em,
     so 30em keeps every line under 75 characters (the old ch caps ran to
     105). Resolves against each element's own size. */
  --measure:30em;

  --fs:'IBM Plex Sans',system-ui,sans-serif;
  --fd:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink-900); color:var(--bone-200);
  font-family:var(--fs); font-size:var(--fs-lg); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
/* The user agent sets [hidden]{display:none}, but any later rule with a
   display of its own beats it, which is how a hidden element ends up 61px
   tall and visible. Progressive enhancement on this site depends on hidden
   meaning hidden, so it is enforced. */
[hidden]{display:none!important}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--term-500);color:var(--ink-900);padding:10px 16px;
  font-family:var(--fd);font-weight:600;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--term-500);outline-offset:3px}

/* ---- Type ---- */
h1,h2,h3{font-family:var(--fd);color:var(--bone-100);margin:0;
  line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(var(--fs-3xl),5.5vw,var(--fs-d2));font-weight:700}
h2{font-size:clamp(var(--fs-2xl),3.4vw,var(--fs-3xl));font-weight:700}
h3{font-size:var(--fs-xl);font-weight:600}
p,.qlist li,.legal-page li{max-width:var(--measure);text-wrap:pretty}
p{margin:0 0 16px}
.lede{font-size:var(--fs-xl);color:var(--bone-300)}
h1+.lede,h2+.lede,h2+p{margin-top:var(--sp-4)}
/* A heading or lede followed by a component (cards, a table, a list, a box)
   is always 32px, whatever the component. It was 0, 16, 30, 34 or 38. */
:is(h2,.lede,p) + :is(.grid,.boundary,.qlist,.tablewrap,.ladder-table){margin-top:var(--sp-6)}
.fineprint{font-size:var(--fs-sm);color:var(--sage-400);max-width:var(--measure);margin-top:var(--sp-5)}

/* Mono prompt line - a GREEN moment */
.prompt{font-family:var(--fm);font-size:var(--fs-sm);color:var(--term-500);
  letter-spacing:.04em;margin-bottom:18px}
.prompt::before{content:"$ ";opacity:.7}

/* Section marker - GREEN */
.marker{font-family:var(--fm);font-size:var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--term-500);margin-bottom:var(--sp-3);
  display:block}
.marker-alarm{color:var(--alarm-300)}

.label{font-family:var(--fm);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--sage-400)}

/* ---- Buttons ---- */
.btn{display:inline-block;font-family:var(--fd);font-weight:600;font-size:var(--fs-md);
  padding:14px 26px;border-radius:var(--r-ctl);text-decoration:none;
  border:1px solid transparent;transition:transform .12s,background .12s}
.btn-primary{background:var(--term-500);color:var(--ink-900)}
.btn-primary:hover{background:var(--term-600);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--bone-100);border-color:var(--sage-700)}
.btn-ghost:hover{border-color:var(--sage-500)}
.btn-lg{font-size:var(--fs-lg);padding:16px 32px}

a{color:var(--term-500)}
a:hover{color:var(--term-600)}

/* ---- Utility strip ----
   Above the header, one link, the incident door. Alarm red lives here and
   nowhere else on the site - spending it anywhere else costs this strip its
   only job. Kept to the left edge, which is where CrowdStrike and Arctic
   Wolf put theirs, so it never competes with the call button on the right. */
.utilbar{background:var(--ink-850);border-bottom:1px solid var(--ink-700);
  font-size:var(--fs-xs)}
.utilbar .wrap{display:flex;align-items:center;min-height:34px;
  max-width:none;padding-left:var(--gut-edge);padding-right:var(--gut-edge)}
.urgent-link{color:var(--alarm-300);font-weight:600;text-decoration:none;
  letter-spacing:.01em;display:inline-flex;align-items:center;min-height:34px;
  border-bottom:1px solid transparent}
.urgent-link:hover{color:var(--alarm-500);border-bottom-color:var(--alarm-500)}
.urgent-link:focus-visible{outline:2px solid var(--alarm-500);outline-offset:3px}

/* ---- Nav ----
   The mark sits in the centre of the viewport. That is a deliberate
   departure from the navigation research, where none of the ten sites
   examined centres its logo, so it is bought properly rather than
   approximated.

   The brand is taken out of flow and pinned to the exact midpoint of the
   wrap. The wrap carries equal gutters on both sides, so the lockup's
   centre IS the viewport's centre, at every width, whatever the links
   beside it are doing. A grid column will not give you this: a 1fr track
   grows past its share the moment its content is wider than the share, and
   the centre drifts without anything looking broken. It has drifted here
   before. */
.nav{position:sticky;top:env(safe-area-inset-top,0);z-index:50;overflow:visible;
  background:rgb(10 14 10 / 94%);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--ink-600)}
.nav + .alertbar{border-top-color:var(--term-bd);margin-top:-1px}
.nav .wrap,.alertbar .wrap{max-width:none;padding-left:var(--gut-edge);
  padding-right:var(--gut-edge)}
.nav .wrap{position:relative;display:flex;align-items:center;
  justify-content:space-between;gap:24px;min-height:74px}

/* THE LOCKUP. font-size is the single control. Everything else is a
   multiple of it, so the whole thing scales as one object and nothing has
   to be re-tuned per breakpoint:
     mark        .7em   = this typeface's cap height, measured
     gap         .40em
     connector   .29em wide, .145em tall = the wordmark's stem weight
   The gap used to be a fixed 9px, which is .45em at nav size and .19em at
   hero size - the reason the mark looked glued to the I on the homepage. */
/* min-height is the hit area, not the look. The lockup itself is 14px tall at
   nav size, so the link a finger has to find was 14px tall. The box is
   centred with translate(-50%,-50%) and the content is centred inside it, so
   growing the box to 44px moves nothing visually - it only makes the target
   the size WCAG 2.5.8 asks for. The inline links in body copy are exempt
   under that rule; a standalone control like this one is not. */
.brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:1;display:flex;align-items:center;justify-content:center;
  gap:.40em;font-size:20px;min-height:44px;
  text-decoration:none;white-space:nowrap}
/* The mark is a creature standing beside the word, not a glyph sitting on
   cap height, so it is set at 1.15em and optically centred rather than at
   .7em. tools/mark.js explains why the mark could not keep the wordmark's
   own stem weight: sixteen strokes at that weight merge into a solid mass.
   The connector below still holds approved option A exactly. */
.brand-logo{height:1.15em;width:auto;flex:0 0 auto}
.brand-name{font-family:var(--fd);font-weight:700;font-size:1em;
  color:var(--bone-100);letter-spacing:.06em;line-height:1}
/* The separator is drawn, not typed. A hyphen character shoved upwards with
   a transform is a patch; this is a bar at the wordmark's own stem weight,
   round-capped like the mark's stroke, lifted from the baseline to the
   cap-height midline where a separator between capitals belongs. It is the
   mark's green, which is what ties the two halves into one object. */
/* Approved option A: mark 35, wordmark stem 34, connector 33. The stem is
   the font's own, measured at .145em off the rendered glyph, so the
   connector is .145 * 33/34 = .1407em. Its centre stays on the cap-height
   midline at .35em, which fixes the offset at .35 - .1407/2 = .2797em. */
.wm-bar{display:inline-block;width:.29em;height:.1407em;margin:0 .05em;
  background:var(--term-500);border-radius:.07035em;
  transform:translateY(-.2797em)}

/* The links sit either side of the centred mark. .nav-rows is transparent
   here, so the two lists are direct flex children of the header row;
   nav-left's auto margin pushes nav-right and the call button to the right
   edge. Below 960px the same wrapper becomes the scrolling strip on row
   two, which is the reason it exists. */
.nav-rows{display:contents}
.nav-links{list-style:none;display:flex;gap:26px;margin:0;padding:0;align-items:center}
/* The flat product links exist for the two-row header only. */
.nav-flat{display:none}
.cta-short{display:none}
.nav-left{flex:0 1 auto;min-width:0;margin-right:auto}
.nav-right{flex:0 0 auto}
.nav-cta{flex:0 0 auto;margin-left:26px}
/* A nav link's hit area is its text box unless you give it one. At 15px
   that is 18px tall, which fails the 44px touch target guidance by a
   wide margin. 40px here, 44px from tablet width down.

   SCOPE THIS CAREFULLY. The selector here used to be every link in the
   header that was not the button or the brand, which
   also matched every link inside the Services panel. Those rows are three
   stacked lines - name, description, price - and inline-flex turned the
   three lines into three columns sitting on top of each other. The menu
   looked broken on every desktop view, and the selector carried enough
   specificity (three classes) to beat the .nav-panel a{display:block} rule
   further down, so the rule meant to lay the rows out never applied. The
   child combinator below matches the flat nav rows and nothing else. */
.nav-links > li > a{color:var(--bone-200);text-decoration:none;
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.005em;
  display:inline-flex;align-items:center;min-height:40px}
.nav-links > li > a:hover{color:var(--bone-100)}
.nav .btn{padding:9px 18px;font-size:var(--fs-sm)}

/* ---- Services dropdown ----
   <details> with no JavaScript. Opens on click and on Enter, announced as a
   disclosure, nothing added to the CSP. It does not close on an outside
   click - the trade for shipping no script, and the right trade here. */
.has-drop{position:relative}
.nav-drop > summary{list-style:none;cursor:pointer;
  color:var(--bone-200);font-size:var(--fs-sm);font-weight:600;letter-spacing:.005em;
  display:inline-flex;align-items:center;gap:6px;min-height:40px}
.nav-drop > summary::-webkit-details-marker{display:none}
.nav-drop > summary::marker{content:''}
.nav-drop > summary::after{content:'';width:7px;height:7px;flex:0 0 auto;
  border-right:1.6px solid currentcolor;border-bottom:1.6px solid currentcolor;
  transform:translateY(-2px) rotate(45deg);transition:transform .12s ease}
.nav-drop > summary:hover{color:var(--bone-100)}
.nav-drop[open] > summary{color:var(--bone-100)}
.nav-drop[open] > summary::after{transform:translateY(1px) rotate(225deg)}
.nav-drop > summary:focus-visible{outline:2px solid var(--term-500);outline-offset:3px}

.nav-panel{position:absolute;top:calc(100% + 12px);left:-18px;z-index:60;
  width:344px;max-width:calc(100vw - 32px);
  background:var(--ink-850);border:1px solid var(--ink-600);
  border-radius:var(--r-card);padding:8px;
  box-shadow:0 18px 40px rgb(0 0 0 / 55%)}
.nav-panel ul{list-style:none;margin:0;padding:0;display:block}
.nav-panel li{display:block}
.nav-panel li + li{border-top:1px solid var(--ink-700)}
.nav-panel a{display:block;padding:10px 14px;border-radius:var(--r-ctl);
  text-decoration:none}
.nav-panel a:hover{background:var(--ink-800)}
.np-name{display:block;font-family:var(--fd);font-weight:600;font-size:var(--fs-md);
  color:var(--bone-100);letter-spacing:.01em}
.np-line{display:block;color:var(--sage-400);font-size:var(--fs-sm);line-height:1.45;
  font-weight:400;margin-top:3px}
.np-price{display:block;font-family:var(--fm);font-size:var(--fs-xs);
  color:var(--bone-300);margin-top:6px}
.np-price small{color:var(--sage-400);font-size:var(--fs-xs)}
.nav-panel .np-all{display:block;padding:11px 14px 7px;font-size:var(--fs-sm);
  font-weight:500;color:var(--term-500);
  border-top:1px solid var(--ink-600);margin-top:4px;text-decoration:none}
.nav-panel .np-all:hover{text-decoration:underline}

/* ---- Alert bar ---- */
/* The band used to sit on --term-bg, which at full width is a large green
   fill - the one thing the green rule explicitly forbids, and it made the
   announcement louder than the brand directly above it. It now sits on a
   wash that is barely green, with a single green hairline tying it to the
   header. The message keeps its weight; only the surface gives way. */
.alertbar{background:var(--term-wash);
  border-top:1px solid var(--term-bd);
  border-bottom:1px solid var(--ink-600);
  font-size:var(--fs-sm);padding:9px 0}
/* nowrap on purpose. With flex-wrap:wrap the browser breaks into lines
   first and shrinks second - line one fitted the label and the sentence,
   so the link was pushed to a second row and left dangling under the
   text. nowrap forces the sentence to shrink instead, and the link stays
   where it belongs, at the end of the line. The phone block below turns
   wrapping back on. */
.alertbar .wrap{display:flex;gap:14px;align-items:center;flex-wrap:nowrap}
.alertbar .label{color:var(--sage-400);flex:0 0 auto}
/* The statement shrinks and wraps inside itself; the link stays on the
   first line, pinned right. Without min-width:0 the sentence refuses to
   shrink and pushes the link onto a second row, which made the bar half
   again as tall for no reason. */
.alertbar .msg{flex:1 1 auto;min-width:0}
.alertbar strong{color:var(--bone-100);font-weight:600}
/* Green, an arrow and an underline is three signals for one link. The
   underline arrives on hover. */
.alertbar a{white-space:nowrap;font-weight:500;text-decoration:none;
  margin-left:auto;flex:0 0 auto;
  border-bottom:1px solid transparent;padding-bottom:1px}
.alertbar a:hover{border-bottom-color:var(--term-500)}

/* ---- Sections ---- */
section{padding:var(--space-section) 0}
.section-tight{padding:var(--space-tight) 0}
/* A tight section following a full one would otherwise stack 84px + 56px of
   padding and read as a hole rather than a break. */
section + .section-tight{padding-top:0}
:is(.stats-band,.ladder,.method) + .section-tight{padding-top:var(--space-tight)}
/* No trailing margin at a block's edge: the gap between sections is the
   section padding and nothing else. */
.wrap > :last-child,.boundary > :last-child,.card > :last-child,
.finalcta > :last-child{margin-bottom:0}
.hero{padding:var(--space-hero-top) 0 var(--space-hero-bottom);border-bottom:1px solid var(--ink-600)}
.hero .sub{font-size:var(--fs-xl);color:var(--bone-300);margin:var(--sp-5) 0 var(--sp-6);max-width:var(--measure)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 14px;max-width:none}
.hero-note{font-size:var(--fs-sm);color:var(--sage-400)}

/* ---- Cards & the three-door router ---- */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* Four-item grids are pinned to two columns rather than auto-fit. At desktop
   width auto-fit gives three, which strands the fourth item alone on its own
   row with a hole beside it. A 2x2 block reads as a set; 3+1 reads as a bug. */
@media (min-width:860px){
  .services-grid,.why-grid{grid-template-columns:repeat(2,1fr)}
}

.card{background:var(--ink-800);border:1px solid var(--ink-600);
  border-radius:var(--r-card);padding:26px;text-decoration:none;
  display:flex;flex-direction:column;gap:4px}
.card h3{margin-bottom:8px}
.card p{color:var(--bone-300);font-size:var(--fs-md);margin:0;flex:1}
.card:hover{border-color:var(--sage-600)}
.card-service:hover{border-left-color:var(--term-500)}

.card-service{border-left-color:var(--term-500);box-shadow:inset 2px 0 0 var(--term-500)}
.card-alarm{background:var(--alarm-bg);border-color:var(--alarm-bd);
  border-left-color:var(--alarm-500);box-shadow:inset 2px 0 0 var(--alarm-500)}
.card-alarm h3{color:var(--alarm-300)}
.card-alarm:hover{border-color:var(--alarm-500)}

.card-go{font-family:var(--fd);font-weight:600;font-size:var(--fs-md);
  color:var(--term-500);margin-top:18px}
.card-go-alarm{color:var(--alarm-300)}
.doors .card .marker{margin-bottom:var(--sp-3)}

.card-offer .price{margin-top:20px;margin-bottom:0}

/* ---- Stats - figures are GREEN, labels are not ---- */
.stats-band{background:var(--ink-850);border-top:1px solid var(--ink-600);
  border-bottom:1px solid var(--ink-600)}
.stats-grid{margin-top:var(--sp-6)}
.stat{border-top:1px solid var(--ink-500);padding-top:18px}
.stat .fig{font-family:var(--fd);font-size:var(--fs-d1);font-weight:700;
  color:var(--term-500);line-height:1}
.stat .desc{color:var(--bone-300);font-size:var(--fs-md);margin:8px 0 0}
.stat .src{font-family:var(--fm);font-size:var(--fs-xs);color:var(--sage-400);
  margin:10px 0 0;line-height:1.45}
.stat .src a{color:var(--sage-400);text-decoration:underline;
  text-underline-offset:2px}
.stat .src a:hover{color:var(--bone-300)}

/* ---- Jurisdiction tile map ----
   Eight tiles on a four-column grid, positioned from the data file by a row
   class and a column class. No inline styles, because style-src carries no
   unsafe-inline.

   THE GREEN RULE APPLIES HERE. A choropleth wants a colour ramp and the
   obvious ramp is the brand green, which would put eight green fills in one
   viewport and break the rule eight times over. The ramp is neutral ink
   instead: the tile carries the magnitude by weight, the figure carries it by
   number, and the only green in the block is the source link.

   The four steps are deliberately far apart. A ramp that steps by one shade
   of near-black is a ramp nobody can read, which is worse than no ramp at
   all because it looks like it means something. */
.jmap-block{margin-top:44px;border-top:1px solid var(--ink-500);padding-top:26px}
.jmap-h{font-family:var(--fd);font-size:var(--fs-xl);font-weight:700;
  color:var(--bone-100);letter-spacing:.01em;margin:0}
.jmap-lede{color:var(--bone-300);font-size:var(--fs-md);margin:8px 0 0}
/* One column by default, two side by side only when there is room. The
   two-column version asked for 420px plus a 40px gutter plus the notes
   column, which overflowed a 390px phone by 59px. Mobile first is not a
   style preference here, it is the only version that cannot overflow. */
.jmap-cols{display:grid;grid-template-columns:minmax(0,1fr);
  gap:26px;align-items:start;margin-top:22px}
@media (min-width:900px){
  .jmap-cols{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:40px}
}
.jmap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;max-width:420px}
.jr1{grid-row:1}.jr2{grid-row:2}.jr3{grid-row:3}.jr4{grid-row:4}
.jc1{grid-column:1}.jc2{grid-column:2}.jc3{grid-column:3}.jc4{grid-column:4}
.jcell{border:1px solid var(--ink-500);border-radius:var(--r-ctl);
  padding:10px 10px 9px;display:flex;flex-direction:column;gap:3px;
  min-height:62px;justify-content:center;
  transition:border-color .35s ease,box-shadow .35s ease}
.jabbr{font-family:var(--fm);font-size:var(--fs-xs);letter-spacing:.1em;
  color:var(--bone-300);line-height:1}
.jfig{font-family:var(--fd);font-weight:700;font-size:var(--fs-xl);
  color:var(--bone-100);line-height:1;font-variant-numeric:tabular-nums}
.jband-1{background:var(--ink-850);border-color:var(--ink-600)}
.jband-1 .jfig{color:var(--sage-400)}
.jband-2{background:var(--ink-700);border-color:var(--ink-500)}
.jband-2 .jfig{color:var(--bone-300)}
.jband-3{background:var(--ink-600);border-color:var(--sage-700)}
.jband-3 .jfig{color:var(--bone-200)}
.jband-4{background:var(--ink-500);border-color:var(--sage-600)}
.jband-4 .jfig{color:var(--bone-100)}
.jmap-key{display:flex;flex-wrap:wrap;gap:10px 14px;margin:0 0 14px;
  padding:0;list-style:none}
.jmap-key li{display:flex;align-items:center;gap:7px;
  font-family:var(--fm);font-size:var(--fs-xs);color:var(--sage-400);letter-spacing:.02em}
.jkey-sw{width:14px;height:14px;border-radius:3px;border:1px solid var(--ink-500);
  flex:0 0 auto}
.jmap-note{color:var(--sage-400);font-size:var(--fs-sm);margin:0;
  line-height:1.55}
.jmap-note + .jmap-note{margin-top:10px}
.jmap-src{font-family:var(--fm);font-size:var(--fs-xs);color:var(--sage-400);margin:14px 0 0}
.jmap-src a{color:var(--sage-400);text-decoration:underline;text-underline-offset:2px}
.jmap-src a:hover{color:var(--bone-300)}

/* ---- The live line ----
   One moving number. It is a projection and the sentence beneath it says so,
   which is the whole reason it is allowed to exist. Green is permitted here
   because it is a figure, which the green rule allows; it is also the only
   green in this block apart from the source link. */
.jlive{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;max-width:none;
  margin:20px 0 0;padding-top:18px;border-top:1px solid var(--ink-600)}
.jlive-fig{font-family:var(--fd);font-weight:700;font-size:var(--fs-3xl);line-height:1;
  color:var(--term-500);font-variant-numeric:tabular-nums}
/* The label sits on the figure's baseline, one line, straight after it. A
   reserved four-digit width used to leave a hole after a two-digit figure
   and pushed the label onto two lines; the text now only shifts on the
   three ticks a day where the figure gains a digit. */
.jlive-lab{color:var(--bone-300);font-size:var(--fs-md);line-height:1.4}
.jlive-note{color:var(--sage-400);font-size:var(--fs-sm);line-height:1.55;
  margin:10px 0 0}
.jlive-age{display:block;margin-top:4px;color:var(--sage-400)}
.jlive-age[data-stale]{color:var(--alarm-300)}

/* The rotating read. Outline rather than fill, so eight tiles lighting up in
   turn never becomes eight green fills. */
.jcell[data-lit]{border-color:var(--term-500);
  box-shadow:0 0 0 1px var(--term-500) inset}
@media (prefers-reduced-motion:reduce){.jcell{transition:none}}

/* ---- Loadout progress ----
   Everything here is created by /js/loadout.js and does not exist without it,
   which is why the wrapper collapses to nothing when the strip is absent. */
.lo-strip-wrap{padding:0}
/* Without the script the wrap is empty and must take no vertical space at
   all, or the page carries a mystery gap where a feature is not. */
.lo-strip-wrap .wrap:empty{display:none}
.lo-strip-wrap:has(.wrap:empty){display:none}
.lo-strip{border:1px solid var(--ink-600);border-radius:var(--r-card);
  background:var(--ink-850);padding:18px 20px 16px;margin:var(--sp-5) 0 0}
/* The strip has no padding, so the section after it keeps its own. */
.lo-strip-wrap + .section-tight{padding-top:var(--space-tight)}
.lo-strip-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:12px}
.lo-rank{font-family:var(--fd);font-weight:700;font-size:var(--fs-xl);color:var(--bone-100);
  letter-spacing:.01em}
.lo-count{font-family:var(--fm);font-size:var(--fs-sm);color:var(--sage-400);
  font-variant-numeric:tabular-nums}
.lo-bar{height:8px;border-radius:4px;background:var(--ink-600);overflow:hidden}
.lo-bar > span{display:block;height:100%;width:var(--pct,0%);
  background:var(--term-500);border-radius:4px;transition:width .3s ease}
@media (prefers-reduced-motion:reduce){.lo-bar > span{transition:none}}
.lo-note{color:var(--sage-400);font-size:var(--fs-xs);line-height:1.5;margin:12px 0 0}
.lo-reset{background:none;border:0;padding:0;margin-left:2px;cursor:pointer;
  font:inherit;color:var(--term-500);text-decoration:underline;
  text-underline-offset:2px}
.lo-reset:hover{color:var(--term-600)}
.lo-reset:focus-visible{outline:2px solid var(--term-500);outline-offset:3px}

.lo-tick{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-family:var(--fm);font-size:var(--fs-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--sage-400);cursor:pointer;
  min-height:44px;user-select:none}
.lo-tick input{width:17px;height:17px;accent-color:var(--term-500);cursor:pointer;
  margin:0;flex:0 0 auto}
.lo-tick:hover{color:var(--bone-300)}
.steps li[data-done],.loadout-item[data-done]{border-color:var(--sage-600)}
.steps li[data-done] .lo-tick,.loadout-item[data-done] .lo-tick{color:var(--term-500)}

/* ---- Price ---- */
.price{font-family:var(--fd);font-size:var(--fs-3xl);font-weight:700;color:var(--term-500)}
.price small{font-size:var(--fs-sm);color:var(--sage-400);font-weight:400}

.services-grid{margin-top:var(--sp-6)}

/* ---- Split sections ----
   Heading on the left, content on the right, from 1024px up. A capped line
   length inside a 1140px column left the right half of every text section
   empty; this puts the heading in that space instead of a picture. The
   heading scrolls with its section: a sticky heading hung in place over the
   long Loadout lists and was then shoved off, which read as a glitch. The
   same split runs inside a standalone boundary box. */
.split-head{margin-bottom:var(--sp-5)}
.split-head > :last-child,.split-body > :last-child{margin-bottom:0}
.split-body > :first-child{margin-top:0}
@media (min-width:1024px){
  .split,.split-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
    column-gap:var(--sp-9);align-items:start}
  .split-box{column-gap:var(--sp-7)}
  .split-head{margin-bottom:0}
}

/* ---- Scope boundary ---- */
.boundary{background:var(--ink-800);border:1px solid var(--ink-600);
  border-left-color:var(--brass-400);box-shadow:inset 2px 0 0 var(--brass-400);
  border-radius:var(--r-card);padding:var(--sp-6)}
.boundary h3{margin-bottom:12px}
.boundary .marker{color:var(--brass-400)}
.boundary p{color:var(--bone-300)}
.boundary-out{font-size:var(--fs-md);color:var(--sage-400);margin-bottom:0}

/* ---- How we work ---- */
.method{background:var(--ink-850);border-top:1px solid var(--ink-600)}
.steps{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
/* Five steps in a four-column grid left the fifth alone on a row. */
@media (min-width:1200px){
  .steps:has(> li:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
}
.steps li{border-top:1px solid var(--ink-500);padding-top:18px}
.step-n{font-family:var(--fm);font-size:var(--fs-xs);letter-spacing:.14em;
  color:var(--term-500);display:block;margin-bottom:10px}
.steps h3{margin-bottom:8px}
.steps p{color:var(--bone-300);font-size:var(--fs-md);margin:0}

/* ---- Why IN-SEC ---- */
.why-grid{margin-top:var(--sp-6)}
.reason{border-top:1px solid var(--ink-500);padding-top:18px}
.reason h3{margin-bottom:8px}
.reason p{color:var(--bone-300);font-size:var(--fs-md);margin:0}

/* ---- Credibility strip ---- */
.credstrip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  border-top:1px solid var(--ink-600);border-bottom:1px solid var(--ink-600);
  padding:22px 0}
.cred{font-family:var(--fm);font-size:var(--fs-xs);letter-spacing:.06em;
  color:var(--sage-400);border:1px solid var(--ink-600);
  border-radius:99px;padding:7px 14px}

/* ---- Final CTA ---- */
.finalcta{border-top:1px solid var(--ink-600);text-align:center}
.wrap.finalcta{padding-top:var(--sp-8)}
.finalcta .lede{margin:var(--sp-4) auto var(--sp-6)}
.finalcta .hero-actions{justify-content:center}
.finalcta p{margin-left:auto;margin-right:auto}

/* ---- Footer ---- */
footer{background:var(--ink-850);border-top:1px solid var(--ink-600);
  padding:52px 0 34px;font-size:var(--fs-sm);color:var(--sage-400)}
footer a{color:var(--bone-300);text-decoration:none}
footer a:hover{color:var(--bone-100)}
.foot-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:30px}
.foot-grid h2{font-family:var(--fm);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--sage-400);margin:0 0 12px;font-weight:500}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-frameworks{font-size:var(--fs-sm);color:var(--sage-400);margin:0 0 22px}
.foot-frameworks strong{color:var(--bone-300);font-weight:600}
.legal{border-top:1px solid var(--ink-600);padding-top:22px;font-size:var(--fs-sm)}
.legal p{margin:0 0 6px;max-width:none}
.disclaimer{color:var(--sage-400)}

/* ---- What you actually get ----
   Numbered because a report, a plan and a matrix arrive in that order and
   build on each other - the numbering is information, not decoration. */
.artefacts{list-style:none;margin:var(--sp-6) 0 0;padding:0;counter-reset:a;
  display:grid;gap:2px;background:var(--ink-600);
  border:1px solid var(--ink-600);border-radius:var(--r-card);overflow:hidden}
.artefacts li{counter-increment:a;background:var(--ink-800);padding:22px 26px;
  display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:baseline}
.artefacts li::before{
  content:counter(a,decimal-leading-zero);
  font-family:var(--fm);font-size:var(--fs-xs);letter-spacing:.08em;
  color:var(--term-500);grid-row:1 / span 2}
.artefacts h3{margin:0}
.artefacts p{margin:0;color:var(--bone-300);font-size:var(--fs-md);grid-column:2}

/* ---- Where this sits ---- */
.ladder{background:var(--ink-850);border-top:1px solid var(--ink-600);
  border-bottom:1px solid var(--ink-600)}
.tablewrap{overflow-x:auto;margin-top:var(--sp-6);
  border:1px solid var(--ink-600);border-radius:var(--r-card)}
.ladder-table{border-collapse:collapse;width:100%;min-width:660px;
  font-size:var(--fs-md);background:var(--ink-800)}
.ladder-table th,.ladder-table td{
  text-align:left;padding:18px 20px;vertical-align:top;
  border-bottom:1px solid var(--ink-600)}
.ladder-table thead th{
  font-family:var(--fm);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--sage-400);font-weight:500;background:var(--ink-850);
  white-space:nowrap}
.ladder-table tbody tr:last-child th,
.ladder-table tbody tr:last-child td{border-bottom:none}
.ladder-table tbody th{font-family:var(--fd);font-weight:600;font-size:var(--fs-lg);
  color:var(--bone-100)}
/* Explicit widths. Left to itself the browser gave the description column the
   least room and the two short columns the most, which is backwards. */
.ladder-table col.c-option{width:42%}
.ladder-table col.c-price{width:16%}
.ladder-table col.c-who{width:26%}
.ladder-table col.c-ind{width:16%}
.row-note{display:block;font-family:var(--fs);font-weight:400;font-size:var(--fs-sm);
  color:var(--sage-400);margin-top:7px;line-height:1.5}
.ladder-table .num{font-family:var(--fm);font-size:var(--fs-md);color:var(--bone-200);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.ladder-table td{color:var(--bone-300)}

/* Our row is marked once, with a left rule and a lift - not a green fill.
   A highlighted row that shouts undermines the honesty of the table. */
.row-us{background:var(--ink-700)}
.row-us th[scope="row"]{box-shadow:inset 3px 0 0 var(--term-500)}
.row-us .num{color:var(--term-500);font-weight:500}
.yes{color:var(--term-500);font-weight:600}
.no{color:var(--sage-400)}

/* ---- FAQ ----
   <details>/<summary>. No JavaScript, nothing extra for the CSP, and it
   stays findable by the browser's own page search. */
.faq-list{margin-top:var(--sp-6);border-top:1px solid var(--ink-600)}
.faq-list details{border-bottom:1px solid var(--ink-600)}
.faq-list summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:var(--fd);font-weight:600;font-size:var(--fs-lg);color:var(--bone-100)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--fm);font-size:var(--fs-xl);color:var(--term-500);line-height:1}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list summary:hover{color:var(--term-500)}
.faq-list details > p{color:var(--bone-300);font-size:var(--fs-md);
  margin:0 0 16px;padding-right:40px}
.faq-list details > p:last-child{padding-bottom:22px}

/* ---- Decision gates ----
   Same <details> disclosure as the FAQ and the Services menu. Opens on click
   and on Enter, announced correctly, nothing added to the CSP, no script.

   Deliberately not a form that computes an answer. Three inputs and a
   printed verdict is legal advice with a progress bar on it, and each gate
   shows both branches instead. Escape does not close these either, which is
   the same known trade as the Services menu. */
.gates{list-style:none;margin:var(--sp-6) 0 0;padding:0;
  border-top:1px solid var(--ink-600);counter-reset:none}
.gates > li{border-bottom:1px solid var(--ink-600)}
.gate > summary{cursor:pointer;list-style:none;position:relative;
  padding:19px 44px 19px 0;
  font-family:var(--fd);font-weight:600;font-size:var(--fs-lg);color:var(--bone-100);
  display:flex;align-items:baseline;gap:12px;min-height:44px}
.gate > summary::-webkit-details-marker{display:none}
.gate > summary::marker{content:''}
.gate > summary::after{content:"+";position:absolute;right:6px;top:50%;
  transform:translateY(-50%);font-family:var(--fm);font-size:var(--fs-xl);
  color:var(--term-500);line-height:1}
.gate[open] > summary::after{content:"\2212"}
.gate > summary:hover{color:var(--term-500)}
.gate > summary:focus-visible{outline:2px solid var(--term-500);outline-offset:3px}
.gate-n{font-family:var(--fm);font-size:var(--fs-xs);color:var(--sage-400);
  letter-spacing:.08em;flex:0 0 auto}
.gate-body{padding:0 44px 20px 0}
.gate-body p{color:var(--bone-300);font-size:var(--fs-md);margin:0 0 12px;line-height:1.6}
.gate-body p:last-child{margin-bottom:0}
.gate-body strong{color:var(--bone-100);font-weight:600}

/* ---- Contact page ---- */
.hero-narrow{padding:var(--space-narrow-top) 0 var(--space-narrow-bottom)}
.hero-narrow .sub{margin-bottom:0}
.contact-grid{align-items:start}
.contact-primary{padding:30px 32px}
.contact-secondary{padding:30px 32px;border-left-color:var(--sage-700);
  box-shadow:inset 2px 0 0 var(--sage-700)}
.contact-primary h2,.contact-secondary h2,.urgent h2{
  font-size:clamp(var(--fs-xl),2.6vw,var(--fs-2xl));margin:6px 0 14px}
.contact-primary h3,.urgent h3{font-size:var(--fs-md);margin:26px 0 10px}
.contact-primary p,.contact-secondary p,.urgent p{flex:0 0 auto}
.contact-primary .hero-actions{margin:20px 0 6px}
.mail{font-family:var(--fm);font-size:var(--fs-md);word-break:break-all}

/* Numbered because the qualification questions get asked in this order and
   the urgent steps have to be done in this order. */
.qlist{margin:0;padding-left:1.3em;display:grid;gap:9px}
.qlist li{color:var(--bone-300);font-size:var(--fs-md);padding-left:4px}
.qlist li::marker{font-family:var(--fm);font-size:var(--fs-sm);color:var(--term-500)}

.urgent{padding:30px 32px}
.urgent h2{color:var(--alarm-300)}
.urgent .qlist li::marker{color:var(--alarm-300)}
.urgent a{color:var(--alarm-300)}
.urgent a:hover{color:var(--alarm-500)}
.urgent strong{color:var(--bone-100)}

/* 404 - what is still being built */
.upcoming{list-style:none;margin:0 0 26px;padding:0;
  display:flex;flex-wrap:wrap;gap:9px}
.upcoming li{font-family:var(--fm);font-size:var(--fs-xs);color:var(--sage-400);
  border:1px solid var(--ink-600);border-radius:99px;padding:6px 13px}

/* ---- Legal pages ----
   Narrower measure than the marketing pages. These get read carefully by
   people checking whether we mean it, so the line length matters more than
   the impact does. */
:where(.legal-page .wrap > *){max-width:820px}
.legal-page h2{font-size:clamp(var(--fs-xl),2.6vw,var(--fs-2xl));margin:44px 0 14px}
.legal-page .wrap > h2:first-child{margin-top:0}
.legal-page h3{font-size:var(--fs-lg);margin:26px 0 8px;color:var(--bone-100)}
.legal-page p{color:var(--bone-300)}
.legal-page .boundary{margin-bottom:8px}
.legal-page .boundary h2{margin:0 0 12px}
.legal-page .qlist{margin:14px 0 0}
.legal-page .qlist li{padding-bottom:4px}
.legal-page .qlist strong{color:var(--bone-100);font-weight:600}
.legal-page .tablewrap{margin-top:20px}
.legal-page .ladder-table tbody th{font-size:var(--fs-md)}

.legal-meta{margin-top:52px;padding-top:24px;border-top:1px solid var(--ink-600)}
.legal-meta p{font-size:var(--fs-sm);color:var(--sage-400)}
.legal-meta strong{color:var(--bone-200)}
.unreviewed{color:var(--brass-400);font-weight:600}

/* Tighten before the links reach the centred mark, rather than after. */
@media (max-width:1300px){
  :root{--gut-edge:28px}
  .nav .wrap{gap:18px}
  .nav-links{gap:20px}
  .nav-cta{margin-left:20px}
}
@media (max-width:1180px){
  .nav-links{gap:16px}
  .nav-cta{margin-left:16px}
}

/* ---- Two-row header ----
   Below this width a single row cannot hold the links, the call button and
   a centred mark without one of them touching another. Rather than letting
   the mark slide off centre, the header becomes two rows: the lockup
   centred and alone on the first, the links and the call button on the
   second. The mark stays exactly centred all the way down to 360px, which
   is the whole point of the change.

   The breakpoint is measured, not guessed. Forcing the single row and
   sweeping 1180 down to 900 in 20px steps, the gap between the last link
   and the lockup runs 127px at 1180, 92px at 1120, 42px at 1020, 34.7px at
   960 and 24.7px at 940. The rule is that the gap must stay at least as
   wide as the page's edge gutter, or the links read as touching the mark.
   The gutter is 28px at these widths, so the row breaks at 960. */
@media (max-width:960px){
  .nav .wrap{display:grid;grid-template-columns:1fr auto;
    grid-template-rows:auto auto;align-items:center;
    gap:6px 14px;min-height:0;
    padding-top:10px;padding-bottom:10px}
  .brand{position:static;transform:none;
    grid-column:1 / -1;grid-row:1;justify-self:center;font-size:19px}
  /* Both lists flow into one scrolling strip. The split either side of the
     mark is a desktop idea; on a phone it would just be two strips. */
  .nav-rows{display:flex;align-items:center;gap:18px;
    grid-column:1;grid-row:2;justify-self:stretch;min-width:0;
    flex-wrap:nowrap;overflow-x:auto;padding-right:26px;
    scrollbar-width:none;
    /* The strip always has more links than room at these widths, and a link
       chopped mid-word against the call button reads as broken text rather
       than as something you can push. The fade says "there is more". CSS
       only, so it costs nothing and needs no script. */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
  .nav-rows::-webkit-scrollbar{display:none}
  .nav-left,.nav-right{display:contents}
  /* The dropdown is a single-row idea. Inside a horizontally scrolling
     strip its panel is clipped by the scroll container, which is a trap on
     a touch screen, so the products become ordinary links instead. */
  .has-drop{display:none}
  .nav-flat{display:block}
  .nav-cta{grid-column:2;grid-row:2;justify-self:end;margin-left:0}
  .nav-links li{flex:0 0 auto}
  .nav-links li a{white-space:nowrap}
  /* The panel is anchored to a list item inside a scrolling strip, so it
     is pinned to the strip's left edge rather than to the summary. */
  .nav-panel{left:0}
}

/* Pointer-size guidance applies from tablet width down, where a finger is
   the input. 44px on every nav target, including the incident link. */
@media (max-width:1024px){
  /* Target size, WCAG 2.5.8. The exception is for links that sit inline in a
     sentence; a footer nav list, the alert bar's link and the one-thing pick
     are standalone controls and do not qualify for it. The footer list was
     19px tall - a line of text with an 8px gap under it. */
  .nav-links > li > a,
  .nav-drop > summary{min-height:44px}
  .foot-grid ul a,
  .alertbar a,
  .loadout-pick h2 a,
  .loadout-compete h2 a,
  .ladder-table th a{display:inline-flex;align-items:center;min-height:44px}
  /* The panel can be opened by touch at 1024, so its own links count too. */
  .nav-panel a{min-height:44px;display:flex;flex-direction:column;justify-content:center}
  .nav-panel .np-all{flex-direction:row;align-items:center}
  .foot-grid ul{gap:2px}
  .urgent-link{min-height:44px}
  .utilbar .wrap{min-height:44px}
  .nav .btn{min-height:44px;display:inline-flex;align-items:center}
}

@media (max-width:1000px){
  .nav-links{gap:15px}
  .nav .btn{padding:8px 13px}
  .brand{font-size:18px}
}

/* Inline style attributes are blocked by the CSP (style-src has no
   'unsafe-inline'), so spacing lives in a class or it silently does
   nothing. */
.label-spaced{margin-bottom:12px}

/* ---- The Loadout ----
   A reading list, so it is typeset as one: a rule between entries, the name
   doing the work, and the description in secondary text. Entry names are bone
   and only turn green on hover - fifteen green links in one viewport would
   break the green rule on its most visible page. The section markers are the
   green. */
.loadout-edition{font-family:var(--fm);font-size:var(--fs-sm);color:var(--sage-400);
  margin-top:18px;letter-spacing:.04em}
.loadout-pick h2,.loadout-compete h2{margin:8px 0 10px;font-size:var(--fs-2xl)}
.loadout-pick h2 a,.loadout-compete h2 a{color:var(--bone-100);text-decoration:none}
.loadout-pick h2 a:hover,.loadout-compete h2 a:hover{color:var(--term-500)}
.loadout-blurb{color:var(--sage-400);margin:10px 0 22px;font-size:var(--fs-md)}
.loadout-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink-600)}
.loadout-item{border-bottom:1px solid var(--ink-600);padding:18px 0}
.loadout-item > a{font-family:var(--fd);font-weight:600;font-size:var(--fs-lg);
  color:var(--bone-100);text-decoration:none;border-bottom:1px solid transparent}
.loadout-item > a:hover{color:var(--term-500);border-bottom-color:var(--term-500)}
.loadout-tag{font-family:var(--fm);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--sage-400);border:1px solid var(--ink-600);
  border-radius:999px;padding:2px 9px;margin-left:10px;white-space:nowrap}
.loadout-what{color:var(--bone-300);font-size:var(--fs-md);margin:7px 0 0}
.loadout-after{color:var(--sage-400);font-size:var(--fs-sm);margin:4px 0 0}
.loadout-k{font-family:var(--fm);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--sage-400);margin-right:8px}
.loadout-points{color:var(--bone-300);font-size:var(--fs-sm);margin:8px 0 0}
.loadout-points strong{color:var(--bone-100)}
.loadout-section + .loadout-section{padding-top:0}

/* ---- Narrow screens ----
   800px, not 720: at 768 (a tablet held upright) the one-row header
   left the call button 8px off the edge. Small tablets get the
   stacked header; 834 and up keep the single row. */
@media (max-width:800px){
  :root{--gut:20px; --gut-edge:20px}
  body{font-size:var(--fs-md)}

  /* The two-row header, and the flat product links with it, are already in
     force from 960 down. Only sizing changes here. */
  .brand{font-size:17.5px}
  .nav-rows{gap:16px}

  .utilbar{font-size:var(--fs-xs)}
  .utilbar .wrap{min-height:30px}
}

/* ---- Phone ----
   The call button moves up beside the mark so the link strip gets the whole
   of row two. Measured at 390px: with the button on row two the strip was
   164px wide carrying 917px of links, which shows a visitor one and a half
   items and reads as broken. Full width it shows three and a half. The
   button takes its short label here, and the widths are checked against the
   mark so the two never meet: at 360px the gap between them is 13px. */
@media (max-width:640px){
  /* The mark already spans both columns of row one and centres inside that
     span, which is the whole content width, so it stays exactly centred
     with no absolute positioning involved. The call button is placed into
     the same row on top of it, at the right edge. Grid items are allowed to
     share a cell; the measured gap between the two at 360px is 13px. */
  .brand{font-size:17px}
  .nav-cta{grid-column:2;grid-row:1;place-self:center end}
  .nav-rows{grid-column:1 / -1;grid-row:2;gap:15px}
  .cta-long{display:none}
  .cta-short{display:inline}
  /* The button gets narrower, never shorter: 44px is the touch target and
     it holds all the way down. The height comes out of the row padding
     instead. */
  .nav .btn{padding:0 12px;font-size:var(--fs-sm);min-height:44px}
  .nav .wrap{padding-top:5px;padding-bottom:7px;row-gap:2px}

  .loadout-item > a{font-size:var(--fs-md)}
  .loadout-tag{margin-left:0;display:inline-block;margin-top:6px}
  .loadout-what{font-size:var(--fs-sm)}

  :root{--space-section:var(--sp-9);--space-tight:var(--sp-7);
    --space-hero-top:var(--sp-9);--space-hero-bottom:var(--sp-8);
    --space-narrow-top:var(--sp-8);--space-narrow-bottom:var(--sp-7)}
  .hero .sub{font-size:var(--fs-lg)}
  .prompt{font-size:var(--fs-xs)}
  .hero-actions .btn{width:100%;text-align:center}
  .alertbar{font-size:var(--fs-sm)}
  .alertbar .wrap{flex-wrap:wrap;row-gap:6px}
  .alertbar a{margin-left:0}
  .stat .fig{font-size:var(--fs-3xl)}
  .boundary{padding:24px 22px}
  .contact-primary,.contact-secondary,.urgent{padding:24px 22px}
  .artefacts li{grid-template-columns:1fr;gap:6px;padding:20px}
  .artefacts li::before{grid-row:auto}
  .artefacts p{grid-column:1}
  .faq-list summary{font-size:var(--fs-md);padding-right:34px}
  .faq-list details > p{padding-right:0}

  /* The ladder becomes stacked cards rather than a sideways-scrolling table.
     Scrolling a table horizontally to reach "Independent" - the column the
     whole section exists to show - defeats the point of the section. */
  .tablewrap{overflow-x:visible;border:none;border-radius:0}
  .ladder-table{min-width:0;width:100%;background:transparent}
  .ladder-table thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .ladder-table tr{display:block;background:var(--ink-800);
    border:1px solid var(--ink-600);border-radius:var(--r-card);
    padding:20px;margin-bottom:14px}
  .ladder-table tbody th,.ladder-table td{display:block;padding:0;border:none}
  .ladder-table tbody th{font-size:var(--fs-lg);margin-bottom:10px}
  .ladder-table td{display:flex;justify-content:space-between;gap:16px;
    padding:9px 0;border-top:1px solid var(--ink-600);font-size:var(--fs-sm)}
  .ladder-table td::before{
    content:attr(data-label);
    font-family:var(--fm);font-size:var(--fs-xs);letter-spacing:.1em;
    text-transform:uppercase;color:var(--sage-400);flex:0 0 auto}
  .ladder-table .row-us{border-color:var(--sage-700)}
  .ladder-table .row-us th[scope="row"]{box-shadow:none;
    border-left:3px solid var(--term-500);padding-left:12px;margin-left:-4px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---- Print ----
   People forward the reporting rules to a board and take the pricing page
   into a meeting. On a dark site that prints as a black rectangle and burns
   a cartridge, and every link loses its destination.

   Nothing here is decoration: chrome comes off, colours invert, and every
   external link prints its URL after it so a printed page can still be
   checked against its source. That last part matters more on this site than
   most, because the whole argument is that the figures are attributable. */
@media print{
  :root{color-scheme:light}
  *{background:#fff!important;color:#000!important;
    box-shadow:none!important;text-shadow:none!important}
  body{font-size:11pt;line-height:1.45}

  /* Chrome, calls to action and anything that only works on a screen. */
  .utilbar,.nav,.alertbar,.skip,.nav-cta,.hero-actions,.finalcta,
  footer .foot-grid,.jmap-key{display:none!important}

  /* Disclosures print open. A printed page with the answers collapsed is a
     printed page with the answers missing. */
  details{display:block!important}
  details > summary{list-style:none}
  details > summary::after{content:''!important}
  details:not([open]) > *{display:block!important}

  a{text-decoration:underline}
  /* The destination, so a printed claim can still be checked. Internal
     links get the full URL; a bare "/pricing" on paper helps nobody. */
  main a[href^="http"]::after{content:" (" attr(href) ")";
    font-size:9pt;word-break:break-all}
  main a[href^="/"]::after{content:" (https://in-sec.org" attr(href) ")";
    font-size:9pt;word-break:break-all}
  main a[href^="#"]::after,main a[href^="mailto"]::after{content:''}

  /* Keep a heading with what it introduces, and do not split a tile,
     a card or a disclosure across two sheets. */
  h1,h2,h3{break-after:avoid-page}
  .card,.stat,.jcell,.gates > li,.faq-list details{break-inside:avoid-page}
  table{break-inside:auto}
  tr{break-inside:avoid}

  /* Borders have to survive the colour reset or every table and tile
     collapses into an undifferentiated block of text. */
  .card,.stat,.jcell,.ladder-table th,.ladder-table td,.boundary{
    border:1px solid #999!important}
  .gates > li,.faq-list details{border-bottom:1px solid #ccc!important}

  /* The site's own address, printed once, so a forwarded page says where
     it came from. */
  main::after{content:"in-sec.org";display:block;margin-top:24pt;
    padding-top:8pt;border-top:1px solid #999;
    font-family:monospace;font-size:9pt}
}

/* ---- Very wide screens ----
   At 3840 a 1140px column is 30% of the display and the page reads as a
   phone layout that has been blown up. The fix is NOT to let the text run
   the full width: a 300-character line is worse than a stranded column.

   Two things move instead. The wrap grows, so the grids get room and the
   cards stop being narrow ribbons. And the root type grows, so a 4K panel
   viewed from a normal desk distance is not showing 16px body text. The
   measure is in em, so bigger type keeps the same line length.

   Breakpoints are deliberately above the common desktop sizes. Nothing here
   fires on a 1440 or 1920 monitor, which is the overwhelming majority. */
@media (min-width:1700px){
  :root{--wrap:1320px;--gut-edge:52px}
}
@media (min-width:2200px){
  :root{--wrap:1480px;--gut-edge:64px}
  body{font-size:var(--fs-xl)}
}
@media (min-width:3000px){
  :root{--wrap:1680px;--gut-edge:88px}
  .brand{font-size:23px}
  .nav .wrap{min-height:84px}
}

/* Measure, restated where an earlier rule would win on specificity. */
.legal-page p,
.legal-page li,
.boundary p,
.legal-meta p,
.fineprint,
.gate-body p,
.hero-note,.src,.jmap-src{max-width:var(--measure)}

/* ---- Contact us card + online enquiry form ---- */
.contact-write .hero-actions{margin:22px 0 14px}
.contact-alt{color:var(--bone-300);font-size:var(--fs-md)}

.enquiry-layout{display:grid;gap:24px;align-items:start}
@media (min-width:960px){.enquiry-layout{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}}
.enquiry-card{padding:32px}
.enquiry-aside{display:grid;gap:16px}
.enquiry-aside .card{padding:24px}
.enquiry-aside .hero-actions{margin:16px 0 0}
.enquiry-aside .fineprint{margin-top:4px}

.enquiry-form{display:grid;gap:20px}
.field-row{display:grid;gap:20px}
@media (min-width:640px){.field-row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:8px;min-width:0}
.field label{font-family:var(--fm);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--sage-400)}
.req{color:var(--term-500)}
.enquiry-form input[type="text"],
.enquiry-form input[type="email"],
.enquiry-form select,
.enquiry-form textarea{
  width:100%;box-sizing:border-box;font-family:var(--fs);font-size:var(--fs-md);line-height:1.4;
  color:var(--bone-100);background:var(--ink-900);
  border:1px solid var(--ink-500);border-radius:var(--r-ctl);padding:13px 14px;
  transition:border-color .12s}
.enquiry-form input:hover,.enquiry-form select:hover,.enquiry-form textarea:hover{border-color:var(--sage-700)}
.enquiry-form input:focus,.enquiry-form select:focus,.enquiry-form textarea:focus{
  outline:none;border-color:var(--term-500);box-shadow:0 0 0 3px var(--term-900)}
.enquiry-form select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239AA396' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.enquiry-form select option{background:var(--ink-800);color:var(--bone-100)}
.enquiry-form textarea{resize:vertical;min-height:9rem}
.enquiry-form .field-hint{font-size:var(--fs-sm);color:var(--sage-500);margin:0;flex:none}
.enquiry-form .check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  color:var(--bone-300);font-size:var(--fs-md)}
.enquiry-form .check input{width:18px;height:18px;margin:3px 0 0;flex:none;accent-color:var(--term-500)}
.form-actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.form-actions .btn{border:0;cursor:pointer}
.form-note{font-size:var(--fs-sm);color:var(--sage-500)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.enquiry-card{padding:22px 18px}}