/* =============================================================================
   LegisGate — site redesign
   -----------------------------------------------------------------------------
   The palette is taken from the logo and nothing else: Legis charcoal, Gate
   green. Parchment and brass appear only as hairlines and eyebrows, inherited
   from the existing Counsel Dossier system so this does not read as a different
   company wearing the same name.
   ============================================================================= */

/* ── Tokens ───────────────────────────────────────────────────────────────── */.lg-redesign-page{
  /* From the mark */
  --ink:        #060b10;   /* "Legis" charcoal */
  --gate:       #055e22;   /* "Gate" green */
  --gate-mid:   #044a1b;
  --gate-lift:  #089b38;   /* the green that survives a dark ground */
  --gate-glow:  #12d155;   /* highlight only — never text on light */

  /* Grounds */
  --field:      #070d0a;
  --field-2:    #0e2019;   /* far enough from --field to read as a new section */
  --paper:      #f8f7f3;
  --paper-2:    #efece4;
  --paper-3:    #e6e2d7;

  /* Ink on paper */
  --text:       #10171a;
  --text-soft:  #46514c;
  --text-mute:  #6d766f;

  /* Ink on field */
  --on-field:      #f2f5f1;
  --on-field-soft: rgba(242,245,241,.78);
  --on-field-mute: rgba(242,245,241,.56);

  /* Fine detail */
  --brass:      #c4a35a;
  --brass-deep: #7d5d23;   /* AA on paper at small sizes */
  --brass-lift: #dcc48c;   /* AA on field */
  --rule:       rgba(6,11,16,.13);
  --rule-soft:  rgba(6,11,16,.07);
  --rule-field: rgba(242,245,241,.16);

  /* Type */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Measure and rhythm.
     One rail for everything. A fixed pixel cap with wide dead gutters is the
     defect this redesign exists to remove, so the rail is a viewport fraction
     and the cap only engages past ~2000px. */
  --rail: min(1840px, 92vw);
  --rail-tight: min(1180px, 92vw);
  --gap: clamp(1.25rem, 2vw, 2.25rem);
  --band: clamp(5.5rem, 9vw, 10rem);
  --band-tight: clamp(3.5rem, 5.5vw, 6rem);
  --nav-h: 86px;

  --ease: cubic-bezier(.2,.7,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}.lg-redesign-page *, .lg-redesign-page *::before, .lg-redesign-page *::after{ box-sizing: border-box; }

/*
 * No global `scroll-behavior: smooth`.
 *
 * On `html` it hijacks every programmatic scroll, not just anchor clicks. Asking
 * for y=7200 in a review pass moved the page to y=916 — so content below the fold
 * never entered the viewport, the reveal observer never fired for it, and the
 * failsafe timer ended up carrying every screenshot. The page looked correct and
 * the mechanism that made it correct was the emergency one.
 *
 * Smooth anchor scrolling is worth having, so site.js does it per click instead,
 * where it affects the thing a person asked for and nothing else.
 */html{ -webkit-text-size-adjust: 100%; }body{
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(16px, 1.02vw, 18px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}.lg-redesign-page img, .lg-redesign-page svg, .lg-redesign-page video{ display: block; max-width: 100%; }.lg-redesign-page a{ color: inherit; }
/*
 * Selection has to work on both grounds.
 *
 * Forcing `color: var(--ink)` meant that selecting a headline on any dark section
 * painted near-black type inside a faint green box — the text vanished at the exact
 * moment a reader was trying to copy it. The light ground keeps ink; the dark
 * ground keeps its own colour and only takes the highlight.
 */.lg-redesign-page ::selection{ background: rgba(5,94,34,.20); color: var(--ink); }.lg-redesign-page .field ::selection, .lg-redesign-page .field-2 ::selection, .lg-redesign-page .hero ::selection, .lg-redesign-page .foot ::selection{
  background: rgba(8,155,56,.32);
  color: #ffffff;
}

/* ── Rails ────────────────────────────────────────────────────────────────── */.lg-redesign-page .rail{ width: var(--rail); margin-inline: auto; }.lg-redesign-page .rail-t{ width: var(--rail-tight); margin-inline: auto; }.lg-redesign-page .band{ padding-block: var(--band); }.lg-redesign-page .band-t{ padding-block: var(--band-tight); }.lg-redesign-page .field{ background: var(--field); color: var(--on-field); }.lg-redesign-page .field-2{ background: var(--field-2); color: var(--on-field); }
/* A hairline where two dark bands meet, so the seam is deliberate. */.lg-redesign-page .field + .field-2, .lg-redesign-page .field-2 + .field{ border-top: 1px solid rgba(196,163,90,.22); }.lg-redesign-page .paper-2{ background: var(--paper-2); }.lg-redesign-page .paper-3{ background: var(--paper-3); }

/* ── Type ─────────────────────────────────────────────────────────────────── */.lg-redesign-page h1, .lg-redesign-page h2, .lg-redesign-page h3, .lg-redesign-page h4{
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.018em;
}.lg-redesign-page .d1{ font-size: clamp(2.9rem, 6.1vw, 6.2rem); line-height: 0.99; letter-spacing: -0.032em; }.lg-redesign-page .d2{ font-size: clamp(2.15rem, 4vw, 4rem);    line-height: 1.04; letter-spacing: -0.026em; }.lg-redesign-page .d3{ font-size: clamp(1.5rem, 2.25vw, 2.35rem); line-height: 1.15; letter-spacing: -0.018em; }.lg-redesign-page .d4{ font-size: clamp(1.12rem, 1.32vw, 1.42rem); line-height: 1.3; letter-spacing: -0.01em; }.lg-redesign-page .lede{
  font-size: clamp(1.08rem, 1.4vw, 1.48rem);
  line-height: 1.54;
  color: var(--text-soft);
  max-width: 64ch;
}.lg-redesign-page .field .lede, .lg-redesign-page .field-2 .lede{ color: var(--on-field-soft); }.lg-redesign-page p{ margin: 0 0 1.05em; }.lg-redesign-page p:last-child{ margin-bottom: 0; }.lg-redesign-page .small{ font-size: 10pt; line-height: 1.6; color: var(--text-mute); }.lg-redesign-page .field .small, .lg-redesign-page .field-2 .small{ color: var(--on-field-mute); }

/* Eyebrow — tracked small caps under a short rule. The one repeated ornament. */.lg-redesign-page .eyebrow{
  display: flex; align-items: center; gap: .7em;
  margin: 0 0 1.15rem;
  font-family: var(--sans);
  font-size: 10pt; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--brass-deep);
}.lg-redesign-page .field .eyebrow, .lg-redesign-page .field-2 .eyebrow{ color: var(--brass-lift); }.lg-redesign-page .eyebrow::before{ content: ""; width: 1.9rem; height: 1px; background: currentColor; opacity: .6; flex: none; }.lg-redesign-page .mono{ font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.012em; }

/* ── The gate motif ───────────────────────────────────────────────────────────
   The mark is a gate frame around four ascending bars. Those bars are this
   site's one graphic idea: they mark sections, carry data, and rise on reveal.
   A logo that only appears in the corner is a logo. One that becomes the
   grammar of the page is an identity. */.lg-redesign-page .gate-bars{ display: flex; align-items: flex-end; gap: 4px; height: 26px; flex: none; }.lg-redesign-page .gate-bars i{
  display: block; width: 5px; background: var(--gate);
  transform-origin: bottom; transform: scaleY(.12);
  transition: transform .62s var(--ease-out);
}.lg-redesign-page .gate-bars i:nth-child(1){ height: 40%; transition-delay: .02s; }.lg-redesign-page .gate-bars i:nth-child(2){ height: 62%; transition-delay: .09s; }.lg-redesign-page .gate-bars i:nth-child(3){ height: 82%; transition-delay: .16s; }.lg-redesign-page .gate-bars i:nth-child(4){ height: 100%; transition-delay: .23s; }.lg-redesign-page .is-in .gate-bars i, .lg-redesign-page .gate-bars.is-in i{ transform: scaleY(1); }.lg-redesign-page .field .gate-bars i, .lg-redesign-page .field-2 .gate-bars i{ background: var(--gate-lift); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */.lg-redesign-page .btn{
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.65rem;
  border: 1px solid transparent; border-radius: 2px;
  font-family: var(--sans); font-size: 10pt; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease);
}
/* Green is the primary and only the primary. If a second green button shows up
   in one viewport, neither of them is primary any more. */.lg-redesign-page .btn-primary{ background: var(--gate); border-color: var(--gate-mid); color: #fff; }.lg-redesign-page .btn-primary:hover{ background: var(--gate-mid); box-shadow: 0 0 0 3px rgba(196,163,90,.26); }.lg-redesign-page .btn-ghost{ border-color: var(--rule); color: var(--text); background: transparent; }.lg-redesign-page .btn-ghost:hover{ border-color: var(--ink); background: rgba(6,11,16,.04); }.lg-redesign-page .field .btn-ghost, .lg-redesign-page .field-2 .btn-ghost{ border-color: var(--rule-field); color: var(--on-field); }.lg-redesign-page .field .btn-ghost:hover, .lg-redesign-page .field-2 .btn-ghost:hover{ border-color: var(--brass); background: rgba(255,255,255,.07); }.lg-redesign-page .btn-row{ display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* Text link with a rule that grows from the left. */.lg-redesign-page .tlink{
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; text-decoration: none;
  color: var(--gate); padding-bottom: 3px; position: relative;
}.lg-redesign-page .field .tlink, .lg-redesign-page .field-2 .tlink{ color: var(--brass-lift); }.lg-redesign-page .tlink::after{
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; opacity: .35;
  transform: scaleX(.999); transform-origin: left;
  transition: opacity .3s var(--ease);
}.lg-redesign-page .tlink:hover::after{ opacity: 1; }.lg-redesign-page .tlink em{ font-style: normal; transition: transform .34s var(--ease-out); }.lg-redesign-page .tlink:hover em{ transform: translateX(5px); }

/* ── Header ───────────────────────────────────────────────────────────────── */
/*
 * Lucid mist, not paper and not charcoal.
 *
 * Three attempts, and the reasoning matters more than the value. Warm paper was
 * inherited from the parchment system and read as an older brand. Charcoal framed
 * the page handsomely but merged into the dark hero, so on the landing page the bar
 * had no edge at all. This is the middle answer the founder asked for: light enough
 * to cut sharply against the dark hero, distinct enough to read as chrome over the
 * light pages.
 *
 * #e6ebe8 is not an invention — it is the Lucid mist already used as the in-product
 * body ground in this codebase, so the marketing chrome and the product chrome are
 * now literally the same surface. Its faint green cast sits with Gate green, where
 * a neutral gray goes cold beside it.
 */.lg-redesign-page .nav{
  position: sticky; top: 0; z-index: 90;
  background: rgba(230,235,232,.95);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border-bottom: 1px solid rgba(6,11,16,.14);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}.lg-redesign-page .nav.is-stuck{ box-shadow: 0 12px 34px -22px rgba(6,11,16,.45); background: rgba(230,235,232,.985); }.lg-redesign-page .nav::before{
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass) 30%, var(--gate) 62%, transparent);
  opacity: .9;
}.lg-redesign-page .nav-in{
  width: var(--rail); margin-inline: auto;
  min-height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: clamp(18px, 2.4vw, 48px);
}.lg-redesign-page .nav-links{ grid-column: 2; justify-self: center; display: flex; align-items: center; gap: clamp(14px, 1.7vw, 30px); }.lg-redesign-page .nav-links a{
  position: relative; text-decoration: none; color: var(--text);
  font-size: 1rem; font-weight: 500; letter-spacing: .01em; padding: 4px 0;
}.lg-redesign-page .nav-links a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--gate); transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--ease-out);
}.lg-redesign-page .nav-links a:hover{ color: var(--gate); }.lg-redesign-page .nav-links a:hover::after{ transform: scaleX(1); }.lg-redesign-page .nav-links a[aria-current="page"]{ color: var(--gate); font-weight: 600; }.lg-redesign-page .nav-links a[aria-current="page"]::after{ transform: scaleX(1); }.lg-redesign-page .nav-act{ grid-column: 3; justify-self: end; display: flex; align-items: center; gap: clamp(12px, 1.3vw, 22px); }.lg-redesign-page .nav-act .quiet{ text-decoration: none; font-size: 1rem; font-weight: 500; color: var(--text-soft); }.lg-redesign-page .nav-act .quiet:hover{ color: var(--gate); }.lg-redesign-page .nav-burger{ display: none; border: 0; background: none; padding: 6px; cursor: pointer; color: var(--ink); }.lg-redesign-page .nav-burger svg{ width: 26px; height: 26px; }

/* Masthead — mark + wordmark + tagline, drawn, never a raster. A baked-in
   tagline cannot be corrected, cannot be searched, and cannot stay sharp. */
/*
 * Masthead: mark, brass rule, wordmark, tagline.
 *
 * The mark is sized to the full height of the type stack so the two halves carry
 * equal weight — at 40px beside a 280px block of type it read as a bullet point.
 * The wordmark sits hard left rather than centred over the tagline: centred, it
 * floated, with the brass rule running past it on both sides.
 *
 * Deliberately not done: tracking the wordmark out to match the tagline width. It
 * balances beautifully and it is the one move that is off-limits — that is the
 * logotype, and changing its letterfit makes it a different mark.
 */.lg-redesign-page .brand{ display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; grid-column: 1; justify-self: start; }.lg-redesign-page .brand-mark{ width: 52px; height: 53px; flex: none; }.lg-redesign-page .brand-copy{
  display: flex; flex-direction: column;
  padding-left: .85rem;
  border-left: 1px solid rgba(196,163,90,.6);
}.lg-redesign-page .brand-name{
  display: flex; justify-content: flex-start; align-items: baseline;
  font-family: "Montserrat", var(--sans); font-size: 28px; font-weight: 800;
  letter-spacing: -.018em; line-height: 1;
}.lg-redesign-page .brand-name .l{ color: var(--ink); }.lg-redesign-page .brand-name .g{ color: var(--gate); }.lg-redesign-page .brand-name .tm{ font-size: 10px; font-weight: 700; align-self: flex-start; margin-left: 2px; color: var(--brass); }.lg-redesign-page .brand-tag{
  margin-top: .46em; padding-top: .46em;
  border-top: 1px solid rgba(196,163,90,.55);
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: .132em; text-transform: uppercase; line-height: 1;
  color: var(--brass-deep); white-space: nowrap;
}
/* On any dark ground. `--ink` is #060b10 and the dark field is #070d0a: rendering
   "Legis" in ink there does not make it subtle, it makes it absent. */.lg-redesign-page .field .brand-name .l{ color: #fff; }.lg-redesign-page .field .brand-name .g{ color: var(--gate-lift); }.lg-redesign-page .field .brand-name .tm{ color: var(--on-field-mute); }.lg-redesign-page .field .brand-tag{ color: var(--brass-lift); border-top-color: rgba(196,163,90,.42); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */.lg-redesign-page .hero{ position: relative; isolation: isolate; background: var(--field); color: var(--on-field); overflow: hidden; }.lg-redesign-page .hero-media{ position: absolute; inset: 0; z-index: -2; }.lg-redesign-page .hero-media img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: heroDrift 26s var(--ease) infinite alternate; }
@keyframes heroDrift { from { transform: scale(1.06) translate3d(0,0,0); } to { transform: scale(1.13) translate3d(-1.2%, -1.4%, 0); } }
@media (prefers-reduced-motion: reduce) {.lg-redesign-page .hero-media img{ animation: none; } }.lg-redesign-page .hero-scrim{
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(104deg, rgba(7,13,10,.97) 0%, rgba(7,13,10,.93) 34%, rgba(7,13,10,.62) 64%, rgba(7,13,10,.36) 100%),
    linear-gradient(0deg, rgba(7,13,10,.9) 0%, transparent 42%);
}
/*
 * The envelope hero gets its own scrim.
 *
 * The default hero scrim is 97% opaque at the left, which is correct over a busy
 * photograph and wrong over this one: the subject sits centre-right on dark wood,
 * and the wood is already dark enough to carry white type. Flattening the left
 * stop keeps the desk readable as a surface instead of a black panel, and the
 * right side stays clear so the letter is legible — it is the argument, not
 * decoration behind the argument.
 */.lg-redesign-page .hero--letter .hero-scrim{
  background:
    linear-gradient(100deg,
      rgba(7,13,10,.94) 0%,
      rgba(7,13,10,.90) 40%,
      rgba(7,13,10,.62) 62%,
      rgba(7,13,10,.22) 82%,
      rgba(7,13,10,.06) 100%),
    linear-gradient(0deg, rgba(7,13,10,.80) 0%, transparent 44%);
}
/*
 * Composition, not just crop.
 *
 * `object-fit: cover` already fills the width exactly, so `object-position` X has
 * no slack to give — the horizontal shift has to come from a transform. Scaling to
 * 1.2 buys 192px of overflow on each side; translating 6% of the box (115px) stays
 * inside it, so no edge can be exposed at any point in the drift.
 *
 * The vertical move is what actually does the work: dropping the crop to 4% pushes
 * the envelope down the frame until the return address clears both the headline and
 * the lede. That block — Office of the Attorney General, Privacy Enforcement Unit —
 * is the entire reason this photograph is on the page. Covering it with the
 * headline left a picture of a blank envelope.
 */.lg-redesign-page .hero--letter .hero-media img{
  object-position: 34% 4%;
  transform: scale(1.2) translateX(6%);
  animation: letterDrift 40s var(--ease) infinite alternate;
}
@keyframes letterDrift {
  from { transform: scale(1.2) translate3d(6%, 0, 0); }
  to   { transform: scale(1.26) translate3d(4.6%, -1.1%, 0); }
}
@media (prefers-reduced-motion: reduce) {.lg-redesign-page .hero--letter .hero-media img{ animation: none; }
}.lg-redesign-page .hero-in{ padding-block: clamp(6rem, 13vh, 11rem) clamp(1rem, 4vh, 4rem); position: relative; }.lg-redesign-page .hero h1{ max-width: 20ch; text-shadow: 0 2px 30px rgba(7,13,10,.45); }.lg-redesign-page .hero .lede{
  margin-top: 1.6rem; max-width: 60ch;
  color: rgba(242,245,241,.93);
  text-shadow: 0 1px 18px rgba(7,13,10,.6);
}.lg-redesign-page .hero-foot{
  margin-top: clamp(0.75rem, 2.5vh, 2.5rem); padding-top: 1rem;
  border-top: 1px solid var(--rule-field);
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 4rem); align-items: baseline;
}.lg-redesign-page .hero-foot .k{ font-size: 10pt; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--brass-lift); }.lg-redesign-page .hero-foot .v{ font-size: 1rem; color: var(--on-field-soft); }

/* ── Reveal ───────────────────────────────────────────────────────────────────
   Elements are hidden by this stylesheet and revealed by site.js. Every hidden
   element also gets its own failsafe timer at the moment it is hidden, because
   the failure mode of an observer-only reveal is content that is invisible
   forever and fails silently — the page just reads as a design with empty
   bands. Revealing too eagerly costs an animation; failing to reveal costs the
   reader the content. */.lg-redesign-page .rv{ opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .82s var(--ease-out), transform .82s var(--ease-out); }.lg-redesign-page .rv.is-in{ opacity: 1; transform: none; }.lg-redesign-page .no-js .rv, .lg-redesign-page .rv.is-safe{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {.lg-redesign-page .rv{ opacity: 1 !important; transform: none !important; transition: none; } }

/* ── Section heads ────────────────────────────────────────────────────────── */.lg-redesign-page .head{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: end; }.lg-redesign-page .head .lede{ margin: 0; }
@media (max-width: 900px) {.lg-redesign-page .head{ grid-template-columns: 1fr; gap: 1.5rem; } }.lg-redesign-page .rule-brass{ height: 1px; background: linear-gradient(90deg, var(--brass), rgba(196,163,90,.06)); border: 0; margin: 0; }.lg-redesign-page .field .rule-brass, .lg-redesign-page .field-2 .rule-brass{ background: linear-gradient(90deg, var(--brass), rgba(196,163,90,.05)); }

/* ── Ledger — numbered rows, three columns, full rail ─────────────────────── */.lg-redesign-page .ledger{ margin-top: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--rule); }.lg-redesign-page .field .ledger, .lg-redesign-page .field-2 .ledger{ border-color: var(--rule-field); }.lg-redesign-page .ledger-row{
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.2rem, 3vw, 3.5rem);
  padding: clamp(1.6rem, 2.6vw, 2.5rem) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
  transition: background-color .3s var(--ease);
}.lg-redesign-page .field .ledger-row, .lg-redesign-page .field-2 .ledger-row{ border-color: var(--rule-field); }.lg-redesign-page .ledger-row:hover{ background: rgba(5,94,34,.035); }.lg-redesign-page .field .ledger-row:hover, .lg-redesign-page .field-2 .ledger-row:hover{ background: rgba(255,255,255,.03); }.lg-redesign-page .ledger-n{ font-family: var(--mono); font-size: 1.25rem; color: var(--brass-deep); font-weight: 500; padding-top: .2rem; }.lg-redesign-page .field .ledger-n, .lg-redesign-page .field-2 .ledger-n{ color: var(--brass-lift); }.lg-redesign-page .ledger-q{ font-family: var(--display); font-size: clamp(1.2rem, 1.6vw, 1.7rem); line-height: 1.24; margin: 0; }.lg-redesign-page .ledger-a{ color: var(--text-soft); margin: 0; font-size: 1rem; }.lg-redesign-page .field .ledger-a, .lg-redesign-page .field-2 .ledger-a{ color: var(--on-field-soft); }
@media (max-width: 900px) {.lg-redesign-page .ledger-row{ grid-template-columns: 3rem minmax(0,1fr); }.lg-redesign-page .ledger-a{ grid-column: 2; }
}

/* ── Cards ────────────────────────────────────────────────────────────────── */.lg-redesign-page .grid{ display: grid; gap: clamp(1rem, 1.6vw, 1.6rem); }.lg-redesign-page .g2{ grid-template-columns: repeat(2, minmax(0,1fr)); }.lg-redesign-page .g3{ grid-template-columns: repeat(3, minmax(0,1fr)); }.lg-redesign-page .g4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px) {.lg-redesign-page .g4{ grid-template-columns: repeat(2, minmax(0,1fr)); }.lg-redesign-page .g3{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px)  {.lg-redesign-page .g2, .lg-redesign-page .g3, .lg-redesign-page .g4{ grid-template-columns: 1fr; } }.lg-redesign-page .card{
  position: relative;
  padding: clamp(1.6rem, 2.2vw, 2.4rem);
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s var(--ease);
  overflow: hidden;
}.lg-redesign-page .card::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gate); transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease-out);
}.lg-redesign-page .card:hover{ transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(6,11,16,.42); border-color: var(--rule); }.lg-redesign-page .card:hover::before{ transform: scaleY(1); }.lg-redesign-page .card h3{ margin-bottom: .7rem; }.lg-redesign-page .card p{ color: var(--text-soft); font-size: 1rem; }.lg-redesign-page .field .card, .lg-redesign-page .field-2 .card{ background: rgba(255,255,255,.035); border-color: var(--rule-field); }.lg-redesign-page .field .card p, .lg-redesign-page .field-2 .card p{ color: var(--on-field-soft); }.lg-redesign-page .field .card::before, .lg-redesign-page .field-2 .card::before{ background: var(--gate-lift); }.lg-redesign-page .card-k{
  display: inline-block; margin-bottom: 1rem;
  font-family: var(--mono); font-size: 10pt; letter-spacing: .06em;
  color: var(--brass-deep);
}.lg-redesign-page .field .card-k, .lg-redesign-page .field-2 .card-k{ color: var(--brass-lift); }

/* ── Split: media bleeding to one edge, copy in a wide column ─────────────── */
/* Top-aligned, not centred.
   The media side is a 4:3 block; the text side is however long the copy is.
   Centring a short column against a tall image parks the text in the middle
   with a large hole above it — and where a section head already carries a lede
   on the same side, the two read as one right-hand column with a gap punched
   through it. Starting both columns at the same line is what makes them look
   related. Sections that genuinely want optical centring opt in below. */.lg-redesign-page .split{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: clamp(2rem, 5vw, 6rem); }.lg-redesign-page .split--center{ align-items: center; }.lg-redesign-page .split.rev .split-media{ order: 2; }.lg-redesign-page .split-media{ position: relative; border-radius: 3px; overflow: hidden; aspect-ratio: 4 / 3; }.lg-redesign-page .split-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }.lg-redesign-page .split:hover .split-media img{ transform: scale(1.035); }.lg-redesign-page .split-media::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(5,94,34,.16), transparent 55%);
  mix-blend-mode: multiply;
}
@media (max-width: 900px) {.lg-redesign-page .split{ grid-template-columns: 1fr; }.lg-redesign-page .split.rev .split-media{ order: 0; } }

/* ── Stats ────────────────────────────────────────────────────────────────── */.lg-redesign-page .stats{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1rem, 2vw, 2.5rem); }
/* Five figures wrap to 4 + 1 and the orphan reads as an afterthought, which is
   the opposite of what a fifth statistic is for. Auto-fit keeps them on one
   row until the column is genuinely too narrow for a 4.4rem numeral. */.lg-redesign-page .stats--5{ grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
@media (max-width: 900px) {.lg-redesign-page .stats, .lg-redesign-page .stats--5{ grid-template-columns: repeat(2, minmax(0,1fr)); } }.lg-redesign-page .stat{ border-top: 1px solid var(--rule-field); padding-top: 1.3rem; }.lg-redesign-page .paper-2 .stat, .lg-redesign-page .paper-3 .stat, .lg-redesign-page .paper .stat{ border-color: var(--rule); }.lg-redesign-page .stat-n{ font-family: var(--display); font-size: clamp(2.6rem, 4.4vw, 4.4rem); line-height: 1; letter-spacing: -.03em; }.lg-redesign-page .field .stat-n, .lg-redesign-page .field-2 .stat-n{ color: #fff; }.lg-redesign-page .stat-l{ margin-top: .55rem; font-size: 10pt; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--brass-deep); }.lg-redesign-page .field .stat-l, .lg-redesign-page .field-2 .stat-l{ color: var(--brass-lift); }.lg-redesign-page .stat-d{ margin-top: .7rem; font-size: 1rem; color: var(--text-soft); }.lg-redesign-page .field .stat-d, .lg-redesign-page .field-2 .stat-d{ color: var(--on-field-soft); }

/* ── Verdict slab — the page's closing argument ───────────────────────────── */.lg-redesign-page .verdict{
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.1vw, 3.1rem);
  line-height: 1.16; letter-spacing: -.022em;
  max-width: 30ch;
}.lg-redesign-page .verdict-wide{ max-width: 46ch; }

/* ── Pull quote ───────────────────────────────────────────────────────────── */.lg-redesign-page .quote{ border-left: 2px solid var(--brass); padding-left: clamp(1.2rem, 2vw, 2rem); }.lg-redesign-page .quote p{ font-family: var(--display); font-size: clamp(1.15rem, 1.5vw, 1.55rem); line-height: 1.35; }.lg-redesign-page .quote cite{ display: block; margin-top: 1rem; font-style: normal; font-size: 10pt; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-deep); font-weight: 700; }.lg-redesign-page .field .quote cite, .lg-redesign-page .field-2 .quote cite{ color: var(--brass-lift); }

/* ── Footer ───────────────────────────────────────────────────────────────── */.lg-redesign-page .foot{ background: var(--field); color: var(--on-field); padding-block: clamp(4rem, 7vw, 6.5rem) 2.5rem; position: relative; }.lg-redesign-page .foot::before{ content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--gate), var(--gate-lift) 48%, transparent); }
/* Brand on its own row, then the link groups.
   Squeezing the brand block and five columns into one row left the last group
   wrapping onto a second line under the wordmark, where it read as an
   afterthought — and the legal links are the ones a procurement reviewer opens
   the footer to find. */.lg-redesign-page .foot-grid{ display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: clamp(1.6rem, 3vw, 3.5rem); }.lg-redesign-page .foot-brand{ grid-column: 1 / -1; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }.lg-redesign-page .foot-brand p{ max-width: 62ch; }
@media (max-width: 1100px) {.lg-redesign-page .foot-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px)  {.lg-redesign-page .foot-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }.lg-redesign-page .foot h4{ font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-lift); margin-bottom: 1.1rem; }.lg-redesign-page .foot ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .62rem; }.lg-redesign-page .foot a{ text-decoration: none; color: var(--on-field-soft); font-size: 1rem; transition: color .2s var(--ease); }.lg-redesign-page .foot a:hover{ color: #fff; }.lg-redesign-page .foot-brand p{ color: var(--on-field-mute); font-size: 1rem; max-width: 34ch; margin-top: 1.2rem; }.lg-redesign-page .foot-brand p.foot-reach{ color: var(--brass-lift); font-size: 10pt; max-width: 40ch; margin-top: .7rem; }.lg-redesign-page .foot-bottom{
  margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--rule-field);
  display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; align-items: end;
}.lg-redesign-page .foot-bottom p{ max-width: 68ch; font-size: 10pt; color: var(--on-field-mute); }

/* ── Scroll progress ──────────────────────────────────────────────────────── */.lg-redesign-page .progress{ position: fixed; inset: 0 auto auto 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--gate), var(--gate-lift)); z-index: 200; }

/* ── Mobile drawer ────────────────────────────────────────────────────────── */.lg-redesign-page .drawer{ position: fixed; inset: 0; z-index: 150; display: none; }.lg-redesign-page .drawer.is-open{ display: block; }.lg-redesign-page .drawer-scrim{ position: absolute; inset: 0; background: rgba(6,11,16,.55); backdrop-filter: blur(3px); border: 0; width: 100%; }.lg-redesign-page .drawer-panel{
  position: absolute; inset: 0 0 0 auto; width: min(380px, 88vw);
  background: var(--paper); padding: 1.6rem 1.6rem 2.5rem;
  display: flex; flex-direction: column; gap: .25rem;
  box-shadow: -22px 0 50px rgba(6,11,16,.28);
  animation: drawerIn .34s var(--ease-out);
}
@keyframes drawerIn { from { transform: translateX(14px); opacity: .4; } to { transform: none; opacity: 1; } }.lg-redesign-page .drawer-panel a{ padding: .85rem 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; font-size: 1rem; }.lg-redesign-page .drawer-panel .btn{ margin-top: 1.4rem; justify-content: center; }.lg-redesign-page .drawer-close{ align-self: flex-end; border: 0; background: none; font-size: 1.5rem; cursor: pointer; padding: 4px 8px; color: var(--ink); }

@media (max-width: 1279px) {.lg-redesign-page .nav-in{ grid-template-columns: auto minmax(0, 1fr) auto; }.lg-redesign-page .nav-links{ justify-self: end; margin-right: clamp(10px, 1.6vw, 26px); }
}
@media (max-width: 700px) {.lg-redesign-page .brand-tag{ display: none; } }
@media (max-width: 1080px) {.lg-redesign-page .nav-links{ display: none; }.lg-redesign-page .nav-in{ grid-template-columns: auto 1fr auto; }.lg-redesign-page .nav-act{ grid-column: 3; }.lg-redesign-page .nav-burger{ display: block; }.lg-redesign-page .brand-mark{ width: 44px; height: 45px; }.lg-redesign-page .brand-name{ font-size: 24px; }.lg-redesign-page .brand-copy{ padding-left: .7rem; }
}
@media (max-width: 560px) {.lg-redesign-page .nav-act .quiet, .lg-redesign-page .nav-act .btn{ display: none; }
}

/* ── Utility ──────────────────────────────────────────────────────────────── */.lg-redesign-page .mt-1{ margin-top: .6rem; }.lg-redesign-page .mt-2{ margin-top: 1.2rem; }.lg-redesign-page .mt-3{ margin-top: 2rem; }.lg-redesign-page .mt-4{ margin-top: 3rem; }.lg-redesign-page .mt-5{ margin-top: clamp(3rem, 5vw, 5rem); }.lg-redesign-page .center{ text-align: center; }.lg-redesign-page .max-60{ max-width: 60ch; }.lg-redesign-page .max-70{ max-width: 70ch; }.lg-redesign-page .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }.lg-redesign-page a:focus-visible, .lg-redesign-page button:focus-visible{ outline: 2px solid var(--gate); outline-offset: 3px; border-radius: 2px; }.lg-redesign-page .field a:focus-visible, .lg-redesign-page .foot a:focus-visible{ outline-color: var(--brass); }

/* ── Heading colour, forced ───────────────────────────────────────────────
   Headings (.d1-.d4, h1-h4) never set their own `color` — the design was
   inheritance-only: .field/.hero/.foot set `color` and every descendant,
   headings included, was meant to pick it up. That is correct CSS, and it
   is exactly what loses to a stray host-app rule that sets `color`
   DIRECTLY on h1/h2/etc: inheritance is always the lowest-priority source
   for a property, so ANY rule matching the element itself outranks it,
   no matter how specific the ancestor rule was. Verified live: real
   pages under the actual production build render headings in the host
   app's own ink navy instead of white on dark grounds — this file was
   never wrong on a page that carries no such stray rule, which is why
   this went unnoticed in isolated local testing and only showed up once
   real pages shipped.

   Fix: give headings their own DIRECT, !important rule per ground, so
   they no longer depend on inheritance at all. */.lg-redesign-page .field h1, .lg-redesign-page .field h2, .lg-redesign-page .field h3, .lg-redesign-page .field h4, .lg-redesign-page .field-2 h1, .lg-redesign-page .field-2 h2, .lg-redesign-page .field-2 h3, .lg-redesign-page .field-2 h4, .lg-redesign-page .hero h1, .lg-redesign-page .hero h2, .lg-redesign-page .hero h3, .lg-redesign-page .hero h4, .lg-redesign-page .foot h1, .lg-redesign-page .foot h2, .lg-redesign-page .foot h3, .lg-redesign-page .foot h4, .lg-redesign-page .prod h1, .lg-redesign-page .prod h2, .lg-redesign-page .prod h3, .lg-redesign-page .prod h4{
  color: var(--on-field) !important;
}.lg-redesign-page .paper h1, .lg-redesign-page .paper h2, .lg-redesign-page .paper h3, .lg-redesign-page .paper h4, .lg-redesign-page .paper-2 h1, .lg-redesign-page .paper-2 h2, .lg-redesign-page .paper-2 h3, .lg-redesign-page .paper-2 h4, .lg-redesign-page .paper-3 h1, .lg-redesign-page .paper-3 h2, .lg-redesign-page .paper-3 h3, .lg-redesign-page .paper-3 h4, body h1, body h2, body h3, body h4{
  color: var(--text) !important;
}
/* Body copy too, defensively — same failure mode, less visually obvious
   in a screenshot but the same root cause. */.lg-redesign-page .field p, .lg-redesign-page .field-2 p, .lg-redesign-page .hero p, .lg-redesign-page .foot p{ color: var(--on-field-soft); }.lg-redesign-page .field .lede, .lg-redesign-page .field-2 .lede, .lg-redesign-page .hero .lede{ color: var(--on-field-soft) !important; }