/* ==========================================================================
   hureal.css  .  THE SYSTEM. One file, every page.

   Extracted 22 September 2026 from the two reference implementations,
   31-homepage-light.html and 32-service-agentic.html, which already agreed
   on 184 rules out of 199 shared ones. Where they disagreed the homepage
   wins, except where the pillar carried a stated reason. Each of those is
   marked RESOLVED below.

   A page that consumes this file writes almost no CSS of its own. If a rule
   would appear on two pages, it belongs here, not there.

   THE LAWS THIS FILE ENFORCES

   1. ONE GROUND. #fafdfc from the ribbon to the legal line. The only dark
      surfaces on any page are the button, and the human gate in the schema.
   2. THE HEADLINE LAW. h1 and h2 are two lines: the quiet one in
      --ink-strong at 300, the loud one in --brand at 600. --brand measures
      3.95:1 on the canvas, so it is legal at display sizes ONLY, never on
      h3 or below and never on a body string.
   3. ONE BUTTON. --brand-action with --on-dark, measured 5.67:1. Never
      --brand with dark ink, which measures 2.59:1 and is the one pairing
      on this palette that looks plausible and is not.
   4. #4cb8ac NEVER carries small text on a light ground. 2.40:1 on white.
      It is a fill, a rule, a wash, or text on a dark plate.
   5. EVERYTHING READABLE IS VISIBLE AT REST. Nothing readable is tied to
      scroll position by opacity. Motion is additive, transform only, and
      it is removed entirely under prefers-reduced-motion.
   6. ONE GRID, ONE SPACING SCALE, ONE TYPE SCALE, ONE RULE, ONE CORNER.
   ========================================================================== */

/* ==========================================================================
   1. THE TOKENS. Every colour, size, space and shadow on the site is here
      and nowhere else. palette.md, candidate B, decided 21 September 2026.
   ========================================================================== */
:root{
  /* --- the palette. Every hex on the site appears in this block. --- */
  --brand:#028b9f;              /* mark, rules, fills, large display. 3.95:1  */
  --brand-accent:#4cb8ac;       /* dark grounds only. 4.41:1 there, 2.40:1 on white */
  --brand-action:#006b7b;       /* links, buttons, every interactive label. 6.05:1 */
  --brand-action-hover:#005563;
  --brand-dark:#0e4650;
  --brand-deep:#0d4550;
  --brand-soft:#a6d3d6;
  --canvas:#fafdfc;             /* the page ground */
  --surface-soft:#eaf5f2;       /* alternating bands */
  --surface-strong:#d9ece8;
  --paper:#fbfefc;
  --ink-strong:#0d4550;         /* 10.34:1 on canvas */
  --ink-muted:#3a6168;          /* 6.64:1 */
  --ink-soft:#456d72;           /* 5.57:1 */
  --on-dark:#edf7f5;            /* 9.69:1 on the deep surface */

  /* --- hairlines, washes and shadows. Every one is an alpha of
         --brand-deep or --brand-soft, which is how the page stays inside
         the palette without inventing a grey. --- */
  --rule:rgba(13,69,80,.15);
  --rule-soft:rgba(13,69,80,.08);
  --rule-mark:rgba(166,211,214,.55);
  --wash:rgba(166,211,214,.16);

  --shadow-1:
    0 1px 2px -1px rgba(13,69,80,.10),
    0 18px 30px -20px rgba(13,69,80,.26);
  --shadow-2:
    0 0 0 1px rgba(166,211,214,.2),
    0 2px 3px -1px rgba(13,69,80,.10),
    0 26px 44px -24px rgba(13,69,80,.3),
    0 62px 100px -62px rgba(13,69,80,.36);
  --shadow-board:
    0 1px 2px -1px rgba(13,69,80,.08),
    0 30px 54px -34px rgba(13,69,80,.26);
  --shadow-field-lift: 0 18px 34px -26px rgba(13,69,80,.3);
  --shadow-field: 0 1px 2px -1px rgba(13,69,80,.08), var(--shadow-field-lift);
  --focus-glow: 0 0 0 3px rgba(0,107,123,.14);

  /* raised at runtime by the contrast probe in hureal.js if the measured
     pixels under an artwork band ask for it. 1 = the scrim as authored.
     The probe only ever increases it. */
  --band-scrim:1;

  /* --- the one grid --- */
  --pad:clamp(20px,4.6vw,76px);       /* the page gutter */
  --maxw:1420px;                      /* the centred rail */
  /* Full bleed frames do NOT sit on the centred rail. Their copy starts at
     --artpad from the left edge of the VIEWPORT and is 40% of the remaining
     width, so its right edge lands at a constant 41.2% of the viewport at
     1024, 1440, 1920 and 2560 alike. That is load bearing: the contrast
     arithmetic for text over artwork was done per column of the PHOTOGRAPH,
     so the copy box has to keep a known column rather than drift right as
     the rail centres itself. At 48% the mid band drops to 4.11:1 and fails,
     which is how close this is. */
  --artpad:clamp(20px,6vw,132px);

  /* --- the one type scale --- */
  --h1:clamp(2.45rem,4.15vw,3.95rem);
  --t-h2:clamp(1.95rem,4vw,3.55rem);
  --t-h3:clamp(1.3rem,2.4vw,1.95rem);
  --t-h4:1.08rem;
  --t-lede:clamp(1.02rem,1.25vw,1.2rem);
  --t-body:.98rem;
  --t-small:13.5px;
  --t-meta:12px;
  --t-kick:11px;
  /* The closing line device. The floor is 1.5rem and not a pixel less: the
     loud half of this line is --brand at 3.95:1, which is legal on text of
     18pt (24px) and up and illegal below it. The old 1.42rem floor computed
     to 22.72px on a phone, so the pairing that is correct on a desktop was a
     1.4.3 AA failure on every handset. Measured 2026-09-23. */
  --t-display:clamp(1.5rem,2.8vw,2.3rem);

  /* --- the reading measures --- */
  --measure:54ch;
  --measure-wide:62ch;

  /* --- the one spacing scale --- */
  --s1:8px; --s2:14px; --s3:22px; --s4:34px;
  --s5:clamp(46px,6vh,72px);
  --s6:clamp(84px,12vh,156px);

  /* --- the one corner --- */
  --r:3px;

  /* --- the two typefaces. There is no third. --- */
  --sans:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ==========================================================================
   2. THE RESET.
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

/* Form controls do not inherit the document font. Without this line every
   button label and every tab label silently renders in the browser UI font,
   which has already happened twice on this build: the eight service tab
   labels shipped in Arial and nobody saw it for a week. */
button, input, select, textarea, optgroup { font: inherit; letter-spacing: inherit; }

img,svg{max-width:100%}
/* Every photograph is served as a <picture> so the WebP rung can be offered
   beside the JPEG one. The wrapper must not become a box of its own: with
   display:contents the <img> keeps laying out against the same parent it
   did before, so every rule written for a bare <img> still holds. */
picture{display:contents}

/* ==========================================================================
   3. BASE ELEMENTS.
   ========================================================================== */
body{
  font-family:var(--sans);
  background:var(--canvas);
  color:var(--ink-strong);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h3{margin:0 0 var(--s1); font-size:var(--t-h4); font-weight:500; letter-spacing:-.006em; color:var(--ink,var(--ink-strong))}
h4{margin:0 0 var(--s1); font-size:15px; font-weight:600; letter-spacing:-.005em; color:var(--ink,var(--ink-strong))}
p{margin:0}
ul,ol{margin:0}

a{color:var(--brand-action)}
a:hover{color:var(--brand-action-hover)}

table{border-collapse:collapse; text-align:left}
caption{caption-side:top; text-align:left}

:focus-visible{outline:2px solid var(--brand-action); outline-offset:3px}

/* ==========================================================================
   4. THE HEADLINE LAW, as one class rather than a repeated pattern.

   Markup:
     <h2 class="headline">
       <span class="ln">The quiet line</span><span class="hot">The loud one.</span>
     </h2>

   .hot is --brand at 600, which is roughly double the visual weight of the
   quiet line. --brand measures 3.95:1 on the canvas, so the treatment is
   legal on h1 and h2 only, both of which are large text at every viewport.
   The guard below catches a .hot that is ever placed on smaller type and
   drops it to --brand-action, which clears 6.05:1 at any size.

   SUSPENDED ON ARTWORK BANDS. Over a photograph --brand measures between
   2.86:1 and 3.78:1, and the first of those fails even as large text. Band
   headings are single colour. See .artband h2 below.
   ========================================================================== */
h1,h2,.headline{margin:0; font-weight:300; letter-spacing:-.026em; color:var(--ink,var(--ink-strong))}
h1{font-size:var(--h1); line-height:1.02}
h2{font-size:var(--t-h2); line-height:1.04; max-width:17ch}
h2.wide{max-width:23ch}
h2.long{max-width:28ch; font-size:clamp(1.6rem,3vw,2.7rem); line-height:1.08}
.ln{display:block}
.hot{display:block; color:var(--brand); font-weight:600; letter-spacing:-.03em}
/* the guard. --brand is illegal below display size, so a .hot that lands
   there is demoted rather than allowed to ship under the floor. */
h3 .hot,h4 .hot,h5 .hot,h6 .hot,p .hot,li .hot,dd .hot,td .hot{color:var(--brand-action); display:inline}

/* the headline switcher, an operator control. Only #h1 on a page that
   carries the switcher takes this, because the reserved height and the
   swap transition exist for it and for nothing else. */
.headline-switch{min-height:2.1em; transition:opacity .22s ease, transform .22s ease}
.headline-switch.swapping{opacity:0; transform:translateY(7px)}

/* ==========================================================================
   5. THE GROUND, AND THE RAIL.

   .band sets the token names every component inside it reads, so no
   component has to know which ground it landed on. There is no .dark:
   this site has one ground. .band.soft is the same ground one step warmer,
   used for alternation only.
   ========================================================================== */
.band{position:relative; padding:var(--s6) var(--pad)}
.band > .inner{position:relative}
.band{
  --ink:var(--ink-strong);       /* 10.34:1 on canvas */
  --ink-2:var(--ink-muted);      /* 6.64:1 */
  --ink-3:var(--ink-soft);       /* 5.57:1 */
  --meta:var(--brand-action);    /* 6.05:1 */
  --accent:var(--brand-action);
  --surface:var(--paper);
  /* A PANEL IS A STEP AWAY FROM ITS GROUND, whichever ground it is on. On
     the canvas that step is --surface-soft; on the soft band it is --paper.
     One token, so no component has to know where it landed. */
  --panel:var(--surface-soft);
  background:var(--canvas);
}
.band.soft{
  --ink-3:var(--ink-muted);      /* 6.10:1 on the soft surface, so the dimmest
                                    step is dropped rather than carried under
                                    the floor */
  background:var(--surface-soft);
  --surface:var(--paper);
  --panel:var(--paper);
}
.band.tight{padding-block:clamp(56px,8vh,104px)}

/* ==========================================================================
   6. THE PRIMITIVES.
   ========================================================================== */

/* the section kicker. Every band opens with one. */
.kicker{
  font-family:var(--mono); font-size:var(--t-kick); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--meta,var(--brand-action));
  margin:0 0 var(--s3);
}

/* the eyebrow. The kicker's hero-side twin: same face, same tracking,
   different spacing, because it sits above an h1 rather than an h2. */
.eyebrow{
  font-family:var(--mono); font-size:var(--t-kick); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--brand-action); margin:0 0 26px;     /* 5.56:1 on --surface-soft */
}

.lede{margin:var(--s4) 0 0; max-width:var(--measure); font-size:var(--t-lede); line-height:1.58; color:var(--ink-2,var(--ink-muted))}
.small{margin:var(--s3) 0 0; font-size:var(--t-small); line-height:1.62; color:var(--ink-3,var(--ink-soft)); max-width:var(--measure-wide)}

/* ONE BUTTON. --brand-action with --on-dark, measured 5.67:1. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.005em;
  background:var(--brand-action); color:var(--on-dark);
  border:1px solid var(--brand-action);
  border-radius:var(--r); padding:13px 22px; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.btn:hover{background:var(--brand-action-hover); border-color:var(--brand-action-hover); color:var(--on-dark)}
.btn:active{transform:translateY(1px)}
.btn.lg{font-size:15.5px; padding:17px 30px}
.btn.sm{font-size:13px; padding:9px 16px}
.btn.ghost{background:transparent; color:var(--brand-action); border-color:var(--rule)}
.btn.ghost:hover{background:var(--surface-soft); border-color:var(--brand-action); color:var(--brand-action)}
.btn svg{flex:none; transition:transform .22s ease}
.btn:hover svg{transform:translateX(3px)}

/* one text link, and one arrow link */
.link{
  color:var(--brand-action); font-size:15px; text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:3px;
  transition:color .25s ease, border-color .25s ease;
}
.link:hover{color:var(--brand-action-hover); border-color:var(--brand-action-hover)}
.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:500; text-decoration:none; color:var(--accent,var(--brand-action));
}
.link-arrow svg{transition:transform .22s ease}
.link-arrow:hover{color:var(--brand-action-hover)}
.link-arrow:hover svg{transform:translateX(4px)}

/* THE CTA PAIR. Two actions and the sentence that tells a visitor which one
   is theirs. The sentence is not optional: two equal buttons with no
   decision rule is how a page produces zero clicks on both. */
.cta{display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); flex-wrap:wrap; margin:38px 0 0}
.choose{margin:var(--s2) 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-soft); max-width:52ch}

/* the scroll cue. It lives inside the copy column, on the opaque part of a
   veil, never out on the artwork: on saturated glass --ink-strong measures
   about 2.8:1 and --on-dark about 3.2:1, and no colour fixes that, so the
   element moves rather than the colour. Here it measures 5.56:1. */
.cue{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  margin:var(--s5) 0 0;
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-action);
}
.cue span.rule{display:block; width:64px; height:1px; background:var(--brand)}
.cue:hover{color:var(--brand-action-hover)}

/* ONE MATERIAL. On a light ground a panel is not a translucent pane over a
   painted room. It is a clean surface: paper fill, a --brand-soft hairline,
   and a restrained real shadow cast in --brand-deep, so even the shadow
   stays inside the palette. */
.mat{
  position:relative; border-radius:var(--r);
  background:var(--surface,var(--paper));
  border:1px solid var(--rule-mark);
  box-shadow:var(--shadow-1);
}
.mat.lg{box-shadow:var(--shadow-2)}

/* ONE WAY OF TREATING A PICTURE. One ratio everywhere, centre crop. The
   placeholder fill is a palette surface, so a study that has not landed yet
   degrades to a quiet plate rather than to a broken icon. */
.shot{
  display:block; width:100%; aspect-ratio:16/9; overflow:hidden; position:relative;
  border-radius:var(--r); border:1px solid var(--rule-mark);
  background:linear-gradient(140deg, var(--surface-strong) 0%, var(--surface-soft) 62%, var(--paper) 100%);
}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot.is-pending::after{
  content:attr(data-pending);
  position:absolute; left:14px; bottom:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.shot-cap{
  margin:var(--s2) 0 0; font-family:var(--mono); font-size:11.5px; line-height:1.6;
  letter-spacing:.1em; text-transform:uppercase; color:var(--meta,var(--brand-action));
}

/* THE SLOT MARKER. A number that is NOT DECIDED is drawn as a slot rather
   than invented. Every slot carries an HTML comment naming the decision it
   is waiting on, so nobody has to guess which ones are real.
   Live examples: BAND TO SET, RANGE TO SET, WINDOW TO SET. */
.slot{
  display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; padding:3px 8px; border-radius:2px;
  border:1px dashed var(--brand-action); color:var(--brand-action); white-space:nowrap;
}

/* the wordmark. Inlined from brand/assets/hureal-wordmark.svg, path data
   identical, never typeset, never approximated. No ids anywhere inside it,
   so a third instance cannot collide with the first. The lockup element
   contains the svg and nothing else: no text node sits beside the mark. */
.hureal-svg{height:var(--hl,32px); width:auto; display:block}
.hureal-svg .g-h{fill:var(--hl-h,#028b9f)}
.hureal-svg .g-w{fill:var(--hl-w,#0d4550)}
.lockup{display:block; line-height:0; text-decoration:none}

/* ==========================================================================
   7. THE CHROME. The ribbon, the bar, the overlay menu, the breadcrumb.
      All four are rendered by assets/partials.js, so a nav change is one
      edit in one file rather than sixty three.
   ========================================================================== */

/* the ribbon. One line, one link, dismissable, and it stays dismissed for
   the session. */
.ribbon{
  position:relative; z-index:4;
  background:var(--surface-soft);
  border-bottom:1px solid var(--rule-soft);
  font-size:13px; line-height:1.4;
  display:flex; align-items:center; gap:14px;
  padding:11px var(--pad);
}
.ribbon p{margin:0; color:var(--ink-muted); flex:1}   /* 6.10:1 on the soft surface */
.ribbon a{color:var(--brand-action); text-underline-offset:3px; text-decoration-thickness:1px}
.ribbon a:hover{color:var(--brand-action-hover)}
.ribbon button{
  appearance:none; background:transparent; border:0; cursor:pointer;
  color:var(--ink-soft); font-size:18px; line-height:1; padding:4px 2px; border-radius:3px;
}
.ribbon button:hover{color:var(--ink-strong)}
body.ribbon-off .ribbon{display:none}

/* the bar. Five nav items and one action carrying an arrow. The full list
   lives behind the menu affordance below 820px. */
.bar{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,44px); padding:20px var(--pad);
}
.bar-nav{display:flex; align-items:center; gap:clamp(18px,2.4vw,34px)}
.bar-nav a{
  font-size:14.5px; font-weight:400; color:var(--ink-muted); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:3px;
  transition:color .22s ease, border-color .22s ease;
}
.bar-nav a:hover{color:var(--ink-strong); border-bottom-color:var(--brand)}
.bar-nav a[aria-current="true"]{color:var(--ink-strong); border-bottom-color:var(--brand)}
.bar-right{display:flex; align-items:center; gap:12px}
.menu-btn{
  width:44px; height:44px; border-radius:var(--r); cursor:pointer;
  background:transparent; border:1px solid var(--rule);
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:background .25s ease, border-color .25s ease;
}
.menu-btn:hover{background:var(--surface-soft); border-color:var(--brand-action)}
.menu-btn i{display:block; width:18px; height:1px; background:var(--ink-strong)}

/* the overlay menu.
   RESOLVED: the hover colour is --brand-action, not --brand. The overlay
   links start at 1.25rem, which is 20px at weight 300, and that is not
   large text, so --brand's 3.95:1 would fail there. The pillar carried the
   measurement; the homepage carried the habit. */
.overlay{
  position:fixed; inset:0; z-index:20; display:none;
  background:var(--canvas);
  padding:20px var(--pad);
}
.overlay.open{display:flex; flex-direction:column}
.overlay-top{display:flex; justify-content:flex-end}
.overlay nav{flex:1; display:flex; flex-direction:column; justify-content:center; gap:clamp(4px,1.2vh,12px); overflow-y:auto}
.overlay nav a{
  color:var(--ink-strong); text-decoration:none; font-weight:300;
  font-size:clamp(1.25rem,3.2vw,2.4rem); letter-spacing:-.024em; line-height:1.16;
  transition:color .22s ease, padding-left .3s cubic-bezier(.2,.7,.25,1);
}
.overlay nav a:hover{color:var(--brand-action); padding-left:12px}      /* 6.05:1 */
.overlay nav a[aria-current="page"]{color:var(--brand-action); font-weight:500}
.overlay .foot{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted);
}
.close-btn{
  width:44px; height:44px; border-radius:var(--r); cursor:pointer;
  background:transparent; border:1px solid var(--rule);
  color:var(--ink-strong); font-size:20px; line-height:1;
}
.close-btn:hover{border-color:var(--brand-action)}

/* the breadcrumb. The separator is a glyph, because this site has no
   dashes anywhere. */
.crumb{
  margin:0 0 var(--s3); padding:0; list-style:none;
  display:flex; flex-wrap:wrap; align-items:center; gap:0 9px;
  font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.08em;
  color:var(--ink-muted);
}
.crumb li{display:flex; align-items:center; gap:9px}
.crumb li + li::before{content:"\203A"; color:var(--ink-soft)}
/* 3px of padding above and below, not 2 below: the text run is 18px tall and
   WCAG 2.2 2.5.8 wants a 24px target. On a phone these wrap onto their own
   lines, where an 18px link is the whole target. Measured 2026-09-23. */
.crumb a{
  color:var(--brand-action); text-decoration:none;
  border-bottom:1px solid transparent;
  display:inline-block; padding:3px 0; min-height:24px; box-sizing:border-box;
}
.crumb a:hover{border-bottom-color:var(--brand-action)}
.crumb [aria-current="page"]{color:var(--ink-strong)}

/* ==========================================================================
   8. THE HERO.

   The artwork is full bleed and positioned right, so its focal bend lands
   in the right half. A veil runs left to right: OPAQUE --surface-soft to
   30%, OPAQUE --canvas at 42%, then it feathers out by 74%. The copy box is
   confined to the left 40%, entirely inside the opaque part, so the worst
   pair under the headline is --ink-strong on --surface-soft, MEASURED
   9.50:1, and it does not depend on a single pixel of the photograph. That
   is the whole reason the veil is opaque there rather than translucent.

   RESOLVED: the homepage's taller frame is the base. A pillar hero takes
   .compact, which is four smaller values and a stated reason: the homepage
   hero is the front door and gets 76svh, a pillar is a page the visitor has
   already chosen, so it gives up height to pull the next block up the fold.
   ========================================================================== */
.hero-band{
  position:relative;
  margin:0; width:100%;
  min-height:clamp(560px,76svh,860px);
  display:flex; align-items:stretch;
  overflow:hidden;
  border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
}
.hero-art{position:absolute; inset:0; margin:0}
.hero-art img{width:100%; height:100%; object-fit:cover; object-position:78% 50%; display:block}
.hero-veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,
    var(--surface-soft) 0%,
    var(--surface-soft) 30%,
    var(--canvas) 42%,
    rgba(250,253,252,.94) 52%,
    rgba(250,253,252,.46) 63%,
    rgba(250,253,252,0) 74%);
}
.hero-inner{
  position:relative; z-index:2;
  width:100%;
  padding:clamp(48px,8vh,96px) var(--artpad) clamp(104px,15vh,168px);
  display:flex; align-items:center;
}
.hero-copy{width:min(100%,40%); min-width:0}

.hero-band.compact{min-height:clamp(520px,66svh,760px)}
.hero-band.compact .hero-inner{padding:clamp(40px,6vh,76px) var(--artpad) clamp(48px,8vh,96px)}
.hero-band.compact .eyebrow{margin-bottom:20px}
.hero-band.compact .cta{margin-top:32px}

/* the supporting line under an h1. .sub is the homepage's, .definition is
   the pillar's: same type, same colour, same measure, different name
   because one asserts a stance and the other defines a noun. */
.sub,.definition{
  font-size:clamp(1.02rem,1.3vw,1.24rem); font-weight:400; line-height:1.54;
  color:var(--ink-muted); max-width:44ch;   /* 6.10:1 */
}
.sub{margin:26px 0 0; transition:opacity .22s ease, transform .22s ease}
.sub.swapping{opacity:0; transform:translateY(7px)}
.definition{margin:24px 0 0}

/* the credibility slot. Filled with a verifiable fact, never with praise.
   .fact carries a source line, .outcome does not. */
.fact,.outcome{
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.fact{margin:var(--s4) 0 0; padding:18px 0 0 var(--s3); max-width:50ch}
.outcome{margin:var(--s3) 0 0; padding:16px 0 0 var(--s3); max-width:46ch}
.fact p,.outcome p{margin:0; font-family:var(--mono); font-size:12.5px; line-height:1.74; color:var(--ink-muted)}
.fact .src{
  display:block; margin-top:9px; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand-action);
}

/* THE SERVICE MARK. One grammar, eight settings. Every mark is the same
   object: n lanes of work crossing one rule that has exactly one opening.
   What changes per service is the lane count, where the opening sits, and
   whether anything comes back. It is a graphic, so the floor is 3:1, and
   the lowest pair on it is --brand-soft used as a rule weight, never text. */
.vmark{display:block; width:64px; height:64px; margin:0 0 var(--s3)}
.vmark .lane{stroke:var(--ink-soft); stroke-width:1.2; fill:none}   /* 5.12:1 */
.vmark .lane.hot{stroke:var(--brand-action); stroke-width:2}        /* 5.56:1, twice the weight */
.vmark .pk{fill:var(--brand)}                                       /* 3.63:1, a fill, never text */
.vmark .rule{stroke:var(--ink-muted); stroke-width:1.4; stroke-dasharray:3 2.4}
.vmark .jamb{stroke:var(--ink-muted); stroke-width:2.6}

/* the corner tag. Set in --ink-strong, inside the left 24% of a frame,
   where the composited worst case measures 9.50:1 or better on every frame
   in the set. .low moves it to the bottom of the frame. */
.art-tag{
  position:absolute; z-index:3; left:var(--artpad); top:clamp(20px,3vh,34px);
  margin:0; font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-strong);
}
.art-tag.low{top:auto; bottom:clamp(20px,3vh,34px)}

/* the headline switcher. An operator control, not part of the page. */
.switcher{
  position:absolute; z-index:3;
  left:var(--artpad); bottom:clamp(26px,4.4vh,48px);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 13px; border-radius:var(--r);
  border:1px dashed var(--rule); background:var(--paper);
}
.switcher .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-action)}
.switcher .opts{display:flex; gap:6px}
.switcher button{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  width:34px; height:30px; cursor:pointer; border-radius:2px;
  background:transparent; color:var(--ink-muted);
  border:1px solid var(--rule);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.switcher button:hover{border-color:var(--brand-action); color:var(--ink-strong)}
.switcher button[aria-pressed="true"]{background:var(--brand-action); color:var(--on-dark); border-color:var(--brand-action)}
.switcher .now{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--ink-soft); max-width:34ch}

/* ==========================================================================
   9. THE MATERIAL BAND. A full bleed photograph with copy composited on the
      quiet left.

   MEASURED, against the real composited pixels of each photograph at a 200
   by 74 sample, with these exact veil stops, out to a 42% right edge. The
   layout puts the real right edge between 40.7% and 41.2% at every viewport
   from 1024 to 3840, so 42% is the pessimistic bound rather than the actual.

   Two rules follow from the arithmetic, and both are enforced rather than
   remembered:

   THE HEADLINE LAW IS SUSPENDED HERE. --brand measures between 2.86:1 and
   3.78:1 over these frames and the lowest fails even as large text, so band
   headings are single colour on every page. This is the one place the law
   is suspended, and it is suspended because the arithmetic says so.

   THERE IS NO LINK ON A BAND. --brand-action measures 4.38:1 on the worst
   frame, under the floor. Everything on a band is --ink-strong, including
   the supporting line, which takes its hierarchy from size and not colour.

   The veil alpha is multiplied by --band-scrim, which the runtime probe in
   hureal.js raises if the browser reads back anything under 5:1.
   ========================================================================== */
.artband{
  position:relative; width:100%;
  min-height:clamp(380px,46vw,560px);
  display:flex; align-items:center;
  overflow:hidden;
  border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
}
.artband > img, .artband > picture > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%; display:block;
}
.artband-veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(250,253,252,calc(.82 * var(--band-scrim))) 0%,
    rgba(250,253,252,calc(.80 * var(--band-scrim))) 40%,
    rgba(250,253,252,calc(.46 * var(--band-scrim))) 58%,
    rgba(250,253,252,0) 80%);
}
.artband-inner{position:relative; z-index:2; width:100%; padding:clamp(56px,9vh,110px) var(--artpad)}
.artband-copy{width:min(100%,40%); min-width:0}
.artband .kicker{color:var(--ink-strong)}
.artband h2{color:var(--ink-strong); max-width:15ch}
.artband-say{
  margin:var(--s4) 0 0; max-width:38ch;
  font-size:var(--t-lede); line-height:1.58;
  color:var(--ink-strong);   /* 7.48:1 composited, not --ink-muted's 4.81:1 */
}
.artband .art-tag{top:auto; bottom:clamp(20px,3vh,34px)}

/* the sign off band carries the wordmark under the line, which is what the
   frame was generated for: a broad quiet left and lower left reserved for a
   dark heading and a large dark mark. */
.signoff-mark{margin:var(--s5) 0 0}
.signoff-mark .hureal-svg{--hl:clamp(38px,5vw,68px); --hl-w:#0d4550; --hl-h:#028b9f}

/* ==========================================================================
   10. THE SECTION HEAD AND THE CONTENT LISTS.

   Every one of these is the same idea at a different width: a rule across
   the top, a mono label, a name, a sentence. They are separate classes
   because a page reads better when the markup says what the list IS, but
   the values come from one scale and nothing here is bespoke.
   ========================================================================== */

/* three or more equal steps, ruled across the top. */
.steps{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3.2vw,52px); margin:var(--s5) 0 0;
}
.step{
  border-top:1px solid var(--rule); padding:20px 0 0;
  transform:translateY(12px); transition:transform .75s cubic-bezier(.2,.7,.25,1);
}
.step.in{transform:none}
.step:nth-child(2){transition-delay:.09s}
.step:nth-child(3){transition-delay:.18s}
.step .n{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.18em; color:var(--brand-action); display:block; margin-bottom:12px}
.step p{margin:0; font-size:var(--t-body); line-height:1.62; color:var(--ink-2,var(--ink-muted))}

/* the symptom list. Sentences a visitor would say about their own business.
   Never a question with an implied yes, and never a line that tells the
   reader something is wrong. */
.symptoms{
  list-style:none; margin:var(--s5) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,4vw,72px);
  border-top:1px solid var(--rule);
}
.symptoms li{
  border-bottom:1px solid var(--rule-soft);
  padding:var(--s3) 0;
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:14px; align-items:baseline;
}
.symptoms .n{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--brand-action)}
.symptoms p{margin:0; font-size:clamp(15px,1.15vw,17px); line-height:1.5; color:var(--ink-strong)}
.symptoms-after{margin:var(--s4) 0 0; max-width:56ch; font-size:var(--t-small); line-height:1.66; color:var(--ink-2,var(--ink-muted))}
@media (max-width:820px){.symptoms{grid-template-columns:minmax(0,1fr)}}

/* the two column argument. .ba is before and after, .fit is who it is for
   and who it is not for. Same construction, different job. */
.ba,.fit{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3.4vw,64px); margin:var(--s5) 0 0;
}
.ba > div,.fit > div{border-top:1px solid var(--rule); padding:var(--s3) 0 0}
.ba h3,.fit h3{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--meta,var(--brand-action)); margin:0 0 var(--s2)}
.fit h3{margin-bottom:var(--s3)}
.ba p{margin:0 0 var(--s2); font-size:var(--t-body); line-height:1.66; color:var(--ink-2,var(--ink-muted))}
.ba p:last-child{margin-bottom:0}
.ba b,.fit li b{color:var(--ink-strong); font-weight:600}
/* the right column disqualifies a FIT. It never criticises a person and it
   never says anything about how the reader runs their business. */
.fit > div.not{border-top-color:var(--brand-action)}
.fit ul{list-style:none; margin:0; padding:0}
.fit li{padding:13px 0; border-bottom:1px solid var(--rule-soft); font-size:var(--t-body); line-height:1.6; color:var(--ink-2,var(--ink-muted))}
.fit-say{margin:var(--s3) 0 0; font-size:var(--t-small); line-height:1.66; color:var(--ink-strong); max-width:48ch}
@media (max-width:820px){.ba,.fit{grid-template-columns:minmax(0,1fr)}}

/* the stated distinction. One display line that ends an argument, with the
   loud half in --brand. Legal here because it is display size. */
.distinction{
  margin:var(--s5) 0 0; max-width:34ch;
  font-weight:300; letter-spacing:-.022em;
  font-size:var(--t-display); line-height:1.2; color:var(--ink,var(--ink-strong));
}
.distinction b{font-weight:600; color:var(--brand)}   /* large text, 3.95:1. Legal only because --t-display floors at 1.5rem (24px). Do not lower that floor. */
.distinction + p{margin:var(--s3) 0 0; max-width:var(--measure); font-size:var(--t-lede); line-height:1.58; color:var(--ink-2,var(--ink-muted))}

/* the numbered walkthrough. Required under every schema board: the
   drawing's content must exist as text in the page body, not only in alt,
   because a diagram nobody can read is a diagram no assistant can read. */
.walk{list-style:none; counter-reset:w; margin:var(--s5) 0 0; padding:0; max-width:78ch}
.walk li{
  counter-increment:w; position:relative;
  padding:0 0 var(--s3) 46px; border-bottom:1px solid var(--rule-soft); margin-bottom:var(--s3);
}
.walk li:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}
.walk li::before{
  content:counter(w,decimal-leading-zero);
  position:absolute; left:0; top:2px;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em; color:var(--brand-action);
}
.walk h3{margin:0 0 6px; font-size:15.5px; font-weight:600}
.walk p{margin:0; font-size:var(--t-small); line-height:1.66; color:var(--ink-2,var(--ink-muted))}

/* the deliverable list and its named rows. */
.gets{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(24px,3.4vw,64px); margin:var(--s5) 0 0; align-items:start}
.gets ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.gets li{padding:15px 0; border-bottom:1px solid var(--rule-soft)}
.gets .nm{display:block; font-size:15px; font-weight:600; color:var(--ink-strong); margin-bottom:4px}
.gets p{margin:0; font-size:var(--t-small); line-height:1.58; color:var(--ink-2,var(--ink-muted))}
@media (max-width:980px){.gets{grid-template-columns:minmax(0,1fr)}}

/* the category grid. Categories rather than logos, plain text examples, and
   one qualifier attached to the band as a whole rather than buried under a
   row. No partner badges and no certified marks, on any page. */
.sys{
  list-style:none; margin:var(--s5) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(24px,3vw,56px);
  border-top:1px solid var(--rule);
}
.sys li{padding:var(--s3) 0; border-bottom:1px solid var(--rule-soft)}
.sys h3{font-size:14.5px; font-weight:600; margin-bottom:6px}
.sys p{margin:0; font-size:var(--t-small); line-height:1.56; color:var(--ink-2,var(--ink-muted))}
.sys .eg{display:block; margin-top:7px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-soft)}
.qualifier{
  margin:var(--s4) 0 0; padding:var(--s3) 0 0; border-top:1px solid var(--rule);
  font-size:var(--t-small); line-height:1.66; color:var(--ink-strong); max-width:72ch;
}
@media (max-width:900px){.sys{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.sys{grid-template-columns:minmax(0,1fr)}}

/* THE LINE. Two columns split by one dashed rule, which is the same rule
   the schema draws. What the system does on the left, what stays with a
   person on the right. The axis varies by page; the construction does not.
   A page that cannot name its axis has not been scoped. */
.line-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0; margin:var(--s5) 0 0; position:relative;
}
.line-grid > div{padding:var(--s4) clamp(20px,3vw,48px) var(--s4) 0}
.line-grid > div + div{
  padding-left:clamp(20px,3vw,48px); padding-right:0;
  border-left:1px dashed var(--ink-muted);
}
.line-grid h3{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; margin:0 0 var(--s3)}
.line-grid .sys-side h3{color:var(--brand-action)}
.line-grid .you-side h3{color:var(--ink-strong)}
.line-grid ul{list-style:none; margin:0; padding:0}
.line-grid li{padding:12px 0; border-bottom:1px solid var(--rule-soft); font-size:15px; line-height:1.5; color:var(--ink-strong)}
.line-grid li span{display:block; margin-top:4px; font-size:13px; line-height:1.5; color:var(--ink-muted)}
.line-say{margin:var(--s5) 0 0; max-width:60ch; font-size:var(--t-lede); line-height:1.58; color:var(--ink-2,var(--ink-muted))}
@media (max-width:820px){
  .line-grid{grid-template-columns:minmax(0,1fr)}
  .line-grid > div + div{border-left:0; border-top:1px dashed var(--ink-muted); padding-left:0; padding-top:var(--s4)}
}

/* the requirement rows. Always "what we design for" against "what we
   document for your counsel". Three words are never written in this block
   on any page: compliant, certified, and any sentence that is legal advice.
   No decoration here at all: anything drawn starts to look like a
   compliance badge, which is the exact thing that is forbidden. */
.reqs{list-style:none; margin:var(--s5) 0 0; padding:0; border-top:1px solid var(--rule)}
.reqs > li{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.05fr) minmax(0,1.05fr);
  gap:var(--s2) clamp(20px,3vw,48px);
  padding:var(--s4) 0; border-bottom:1px solid var(--rule-soft);
}
.reqs h3{font-size:15px; font-weight:600; margin:0}
.reqs h3 span{display:block; margin-top:5px; font-family:var(--mono); font-size:10.5px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.reqs .d{margin:0; font-size:var(--t-small); line-height:1.6; color:var(--ink-strong)}
.reqs .c{margin:0; font-size:var(--t-small); line-height:1.6; color:var(--ink-2,var(--ink-muted))}
.reqs .lbl{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--meta,var(--brand-action)); margin-bottom:6px}
.reqs-after{margin:var(--s4) 0 0; max-width:72ch; font-size:var(--t-small); line-height:1.66; color:var(--ink-strong)}
@media (max-width:900px){.reqs > li{grid-template-columns:minmax(0,1fr)}}

/* THE FAQ ROWS. Open at rest, never behind an accordion. An accordion hides
   the answer from a reader who is skimming and from a machine that is
   lifting, and this is the block that exists to be lifted. Answer first,
   40 to 60 words, in the words a buyer uses. There is no toggle in
   hureal.js for this component and there must never be one. */
.faq{list-style:none; margin:var(--s5) 0 0; padding:0; border-top:1px solid var(--rule); max-width:100%}
.faq > li{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:var(--s2) clamp(24px,3.4vw,64px);
  padding:var(--s4) 0; border-bottom:1px solid var(--rule-soft);
}
.faq h3{margin:0; font-size:16px; font-weight:600; line-height:1.36; letter-spacing:-.006em; max-width:32ch}
.faq p{margin:0; font-size:var(--t-small); line-height:1.7; color:var(--ink-2,var(--ink-muted)); max-width:var(--measure-wide)}
.faq p + p{margin-top:10px}
.faq a{color:var(--brand-action); text-decoration:none; border-bottom:1px solid var(--rule)}
.faq a:hover{border-bottom-color:var(--brand-action)}
@media (max-width:820px){.faq > li{grid-template-columns:minmax(0,1fr)}}

/* THE CARD. Three across, ruled at the top, the whole card is the link, and
   a bare related row does not ship: every card states its reason. */
.rel{list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.6vw,40px)}
.rel li{border-top:1px solid var(--rule); padding:var(--s3) 0 0}
.rel a{display:block; text-decoration:none; color:inherit}
.rel h3{font-size:16px; font-weight:600; margin-bottom:9px; color:var(--ink-strong)}
.rel a:hover h3{color:var(--brand-action)}
.rel p{margin:0 0 var(--s3); font-size:var(--t-small); line-height:1.6; color:var(--ink-2,var(--ink-muted))}
.rel .go{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-action)}
@media (max-width:900px){.rel{grid-template-columns:minmax(0,1fr)}}

/* the sector list and the reading rail beside it. */
.matters{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(24px,3.4vw,64px); margin:var(--s5) 0 0; align-items:start}
.matters h3{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--meta,var(--brand-action)); margin:0 0 var(--s3)}
.sectors{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.sectors li{padding:15px 0; border-bottom:1px solid var(--rule-soft)}
.sectors a{font-size:15px; font-weight:600; color:var(--ink-strong); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:2px}
.sectors a:hover{color:var(--brand-action); border-bottom-color:var(--brand-action)}
.sectors p{margin:8px 0 0; font-size:var(--t-small); line-height:1.58; color:var(--ink-2,var(--ink-muted))}
.reads{border-top:1px solid var(--rule); padding:var(--s3) 0 0}
.reads p{margin:0 0 var(--s3); font-size:var(--t-small); line-height:1.62; color:var(--ink-2,var(--ink-muted)); max-width:44ch}
@media (max-width:900px){.matters{grid-template-columns:minmax(0,1fr)}}

/* the sub service list inside a service panel. */
.subs{list-style:none; margin:var(--s4) 0 0; padding:0; border-top:1px solid var(--rule)}
.subs li{border-bottom:1px solid var(--rule-soft); padding:16px 0}
.subs h3{margin:0 0 5px; font-size:15px; font-weight:600; letter-spacing:-.005em; color:var(--ink,var(--ink-strong))}
.subs p{margin:0; font-size:var(--t-small); line-height:1.58; color:var(--ink-2,var(--ink-muted))}

/* the closing doors, and the micro line under them. */
.close-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3.4vw,56px); margin:var(--s5) 0 0;
}
.door{border-top:1px solid var(--rule); padding:var(--s3) 0 0}
.door h2,.door h3{font-size:var(--t-h4); font-weight:500; letter-spacing:-.006em; margin-bottom:12px}
/* h2 as well as h3, because on /404/ the doors sit directly under the h1 with
   no section heading between them and an h1 to h3 jump is a skipped level.
   Everywhere else the doors follow an h2 and stay h3. Measured 2026-09-23. */
.door p{margin:0 0 var(--s3); font-size:var(--t-small); line-height:1.64; color:var(--ink-2,var(--ink-muted)); max-width:44ch}
.close-micro{margin:var(--s5) 0 0; font-size:var(--t-small); color:var(--ink-3,var(--ink-soft))}
@media (max-width:860px){.close-grid{grid-template-columns:minmax(0,1fr)}}

/* the commitments row. Four, in the same words, on every page that carries
   them. No framing sentence about being a new company: the voice guide
   forbids commentary about not having proof. */
.commitments{margin:var(--s5) 0 0; padding:var(--s4) 0 0; border-top:1px solid var(--rule)}
.commitments h3{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--meta,var(--brand-action)); margin:0 0 var(--s3)}
.commitments ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.4vw,40px)}
.commitments li{border-top:1px solid var(--rule-soft); padding:var(--s3) 0 0; font-size:var(--t-small); line-height:1.6; color:var(--ink-strong)}
@media (max-width:900px){.commitments ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.commitments ul{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   11. THE NOTE SURFACES. A panel that carries a qualification, a price
       rail, or an offer. All four are the same object at different weights:
       --panel fill, one hairline, one corner.
   ========================================================================== */
.movers,.shape,.standing,.ladder,.verdict,.midcta,.third{
  margin:var(--s5) 0 0; border-radius:var(--r);
}
/* the quiet ones: a paragraph of qualification. */
.movers{padding:var(--s3) var(--s3); background:var(--paper); border:1px solid var(--rule-soft); font-size:var(--t-small); line-height:1.68; color:var(--ink-2,var(--ink-muted)); max-width:76ch}
.shape{padding:var(--s3) var(--s4); background:var(--panel,var(--surface-soft)); border:1px solid var(--rule-soft); font-size:var(--t-small); line-height:1.68; color:var(--ink-2,var(--ink-muted)); max-width:76ch}
.movers b,.shape b{color:var(--ink-strong); font-weight:600}

/* the standing list: what is true on every engagement. */
.standing{padding:var(--s4); background:var(--panel,var(--surface-soft)); border:1px solid var(--rule-soft)}
.standing h3{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--meta,var(--brand-action)); margin:0 0 var(--s3)}
.standing ol{margin:0; padding:0 0 0 20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px clamp(20px,3vw,48px)}
.standing li{font-size:var(--t-small); line-height:1.6; color:var(--ink-strong)}
.standing li::marker{color:var(--brand-action); font-family:var(--mono); font-size:11px}
@media (max-width:820px){.standing ol{grid-template-columns:minmax(0,1fr)}}

/* the smallest version rail. Every page that has a smaller entry point
   names it here. A page that has none leaves the rail out rather than
   inventing one. */
.ladder{padding:var(--s4); background:var(--panel,var(--surface-soft)); border:1px solid var(--rule-mark)}
.ladder > p:first-child{margin:0 0 var(--s3)}
.ladder h3{font-size:var(--t-h4); margin-bottom:10px}
.ladder .say{margin:0; font-size:var(--t-small); line-height:1.66; color:var(--ink-2,var(--ink-muted)); max-width:var(--measure-wide)}
.rungs{list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vw,34px)}
/* A rail with a single rung: one column at the wide measure, not a lonely third. */
.rungs.one{grid-template-columns:minmax(0,1fr);max-width:var(--measure-wide)}

.rungs li{border-top:1px solid var(--rule); padding:var(--s3) 0 0}
.rungs .nm{display:block; font-size:15px; font-weight:600; color:var(--ink-strong)}
.rungs .pr{display:block; margin-top:5px; font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.12em; text-transform:uppercase; color:var(--brand-action)}
.rungs p{margin:9px 0 0; font-size:var(--t-small); line-height:1.58; color:var(--ink-2,var(--ink-muted))}
.ladder-cta{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center; margin:var(--s4) 0 0}
@media (max-width:820px){.rungs{grid-template-columns:minmax(0,1fr)}}

/* the verdict. Allowed to go against HUREAL, and on at least one page it
   does. A page that fairly runs its own comparison becomes the reference a
   buyer uses, and being the reference is how a company gets cited. */
.verdict{margin-top:var(--s4); padding:var(--s4); background:var(--panel,var(--surface-soft)); border:1px solid var(--rule-mark); max-width:76ch}
.verdict h3{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--meta,var(--brand-action)); margin:0 0 var(--s2)}
.verdict p{margin:0 0 var(--s2); font-size:var(--t-body); line-height:1.66; color:var(--ink-strong)}
.verdict p:last-child{margin-bottom:0; color:var(--ink-2,var(--ink-muted))}

/* the offer rails. .midcta sits straight after the diagram and offers the
   thing this page can let a stranger try. .third is the close's third door. */
.midcta,.third{
  padding:var(--s4);
  display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; justify-content:space-between;
  background:var(--panel,var(--surface-soft));
}
.midcta{border:1px dashed var(--rule)}
.third{border:1px solid var(--rule-mark)}
.midcta p,.third p{margin:0; font-size:var(--t-small); line-height:1.64; color:var(--ink-strong)}
.midcta p{max-width:56ch}
.third p{max-width:58ch}
.midcta b,.third b{font-weight:600}

/* ==========================================================================
   12. THE TABLES. Real table elements, because this is real tabular data
       and a screen reader should be told so. What is designed is the
       TREATMENT, not the markup: no default borders, a mono head, group
       rows carried by a spanning th with a stated scope.

       .tbl is the capability table: what it is, what it does in plain
       words, what the business gets.
       .mx is the comparison. It compares APPROACHES, never companies.
   ========================================================================== */
.tbl-wrap,.mx-wrap{margin:var(--s5) 0 0; overflow-x:auto}
.tbl,.mx{width:100%; border-collapse:collapse; text-align:left}
.tbl{min-width:680px}
.mx{min-width:720px}
.tbl caption,.mx caption{
  caption-side:top; text-align:left; margin:0 0 var(--s3);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--meta,var(--brand-action));
}
.tbl thead th{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--meta,var(--brand-action)); padding:0 clamp(14px,2vw,32px) 12px 0; border-bottom:1px solid var(--rule); vertical-align:bottom;
}
/* a group heading becomes a link the day its own page ships. */
.tbl tbody th[scope="rowgroup"]{
  padding:var(--s4) 0 10px; border-bottom:1px solid var(--rule);
  font-size:15px; font-weight:600; letter-spacing:-.005em; color:var(--ink-strong);
}
.tbl tbody th[scope="rowgroup"] span{display:block; margin-top:4px; font-family:var(--mono); font-size:10.5px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.tbl tbody th[scope="rowgroup"] a{color:var(--brand-action); text-decoration:none; border-bottom:1px solid var(--rule)}
.tbl tbody th[scope="rowgroup"] a:hover{border-bottom-color:var(--brand-action)}
.tbl tbody td{
  padding:14px clamp(14px,2vw,32px) 14px 0; border-bottom:1px solid var(--rule-soft);
  font-size:var(--t-small); line-height:1.58; color:var(--ink-2,var(--ink-muted)); vertical-align:top;
}
.tbl tbody td:first-child{color:var(--ink-strong); font-weight:600; width:23%}
.tbl tbody td:last-child{padding-right:0; color:var(--ink-strong)}
.tbl tbody tr:hover td{background:var(--surface-soft)}
.tbl-hint{display:none}
@media (max-width:760px){.tbl-hint{display:block; margin:var(--s2) 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--meta,var(--brand-action))}}

.mx th[scope="col"]{
  padding:0 clamp(14px,2vw,30px) 14px 0; border-bottom:1px solid var(--rule); vertical-align:bottom; width:25%;
}
.mx th[scope="col"] b{display:block; font-size:15px; font-weight:600; color:var(--ink-strong); letter-spacing:-.005em}
.mx th[scope="col"] span{display:block; margin-top:5px; font-family:var(--mono); font-size:10.5px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.mx th[scope="col"]:first-child{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--meta,var(--brand-action))}
.mx th[scope="col"].ours{border-bottom-color:var(--brand-action)}
.mx th[scope="row"]{
  padding:14px clamp(14px,2vw,30px) 14px 0; border-bottom:1px solid var(--rule-soft);
  font-size:var(--t-small); font-weight:600; line-height:1.5; color:var(--ink-strong); vertical-align:top;
}
.mx td{
  padding:14px clamp(14px,2vw,30px) 14px 0; border-bottom:1px solid var(--rule-soft);
  font-size:var(--t-small); line-height:1.58; color:var(--ink-2,var(--ink-muted)); vertical-align:top;
}
.mx td:last-child{padding-right:0}
.mx tbody tr:hover th[scope="row"],.mx tbody tr:hover td{background:var(--surface-soft)}

/* ==========================================================================
   13. THE DRAWN LINE DEVICE. A mono label above, one rule that draws itself
       left to right on entry, a mono label below, and a display line under
       it. The rule is the only thing that animates, it animates by
       transform, and under reduced motion it is simply drawn.
   ========================================================================== */
.line-device{margin:var(--s6) 0 0}
.line-device .above,.line-device .below{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--meta,var(--brand-action));
}
.line-device .below{color:var(--ink-3,var(--ink-soft))}
.line-device .rule{
  height:1px; margin:13px 0; background:linear-gradient(90deg,var(--brand) 0%,rgba(166,211,214,.5) 100%);
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s cubic-bezier(.2,.7,.25,1);
}
.line-device.in .rule{transform:scaleX(1)}
.line-device .close{
  margin:var(--s4) 0 0; font-weight:300; letter-spacing:-.022em;
  font-size:var(--t-display); line-height:1.2; max-width:22ch; color:var(--ink,var(--ink-strong));
}
.line-device .close b{font-weight:600; color:var(--brand)}   /* large text, 3.95:1. Legal only because --t-display floors at 1.5rem (24px). Do not lower that floor. */

/* ==========================================================================
   14. THE TAB STRIP. Eight of equal weight, one panel open at a time. The
       panels are in the markup, so all of them are readable at rest with no
       script running. Two rows of four at desk width, one scrolling row
       below 900px, never a stack of eight and never a clip.
   ========================================================================== */
.tabs-shell{margin-top:var(--s5)}
.tabs-bar{position:relative; overflow-x:clip}
.tablist{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px clamp(14px,1.7vw,26px);
  position:relative; padding:6px 0 16px;
  overflow-x:auto; scrollbar-width:none;
}
.tablist::-webkit-scrollbar{display:none}
.tab{
  background:none; border:0; cursor:pointer; text-align:left; scroll-snap-align:start;
  display:grid; align-content:start; min-width:0;
  padding:0 0 9px; font-size:clamp(14px,1.15vw,15.5px); line-height:1.3;
  font-weight:400; color:var(--ink-muted); letter-spacing:-.004em;
  transition:color .2s ease;
}
.tab > span{display:block; min-width:0}
.tab:hover{color:var(--ink-strong)}
.tab[aria-selected="true"]{color:var(--ink-strong); font-weight:600}
.tabline{position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--rule-soft)}
.tabink{
  position:absolute; left:0; top:0; height:2px; width:0; background:var(--brand);
  transition:transform .44s cubic-bezier(.22,.9,.3,1), width .44s cubic-bezier(.22,.9,.3,1);
}
.tabs-bar::before,.tabs-bar::after{
  content:""; position:absolute; top:0; bottom:1px; width:46px; z-index:2;
  pointer-events:none; opacity:0; transition:opacity .22s ease;
}
.tabs-bar::before{left:0; background:linear-gradient(90deg,var(--canvas) 24%,rgba(250,253,252,0) 100%)}
.tabs-bar::after{right:0; background:linear-gradient(270deg,var(--canvas) 24%,rgba(250,253,252,0) 100%)}
.tabs-bar.ov-l::before{opacity:1}
.tabs-bar.ov-r::after{opacity:1}
@media (max-width:900px){
  .tablist{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:max-content; gap:24px; scroll-snap-type:x proximity}
  .tab{font-size:14.5px}
  .tab > span{white-space:nowrap}
}

.svc-panel{padding-top:var(--s5)}
.svc-panel[hidden]{display:none}
.svc-grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,3.4vw,56px); align-items:start;
}
.svc-lede{
  margin:0; font-weight:300; letter-spacing:-.02em;
  font-size:var(--t-h3); line-height:1.16; color:var(--ink,var(--ink-strong)); max-width:22ch;
}
.svc-more{margin-top:var(--s3); display:inline-flex}
.svc-media{display:block}
.svc-close{margin:var(--s5) 0 0; font-size:var(--t-small); line-height:1.62; color:var(--ink-3,var(--ink-soft)); max-width:var(--measure-wide)}
.is-switching .subs li{animation:settle .34s cubic-bezier(.22,.9,.3,1) both}
.is-switching .subs li:nth-child(2){animation-delay:.06s}
.is-switching .subs li:nth-child(3){animation-delay:.12s}
@keyframes settle{from{transform:translateY(9px)} to{transform:none}}
@media (max-width:980px){.svc-grid{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   15. THE TRANSCRIPT PANELS. An exchange, alternating left and right, with
       the agent's turns on the soft fill. Clean surfaces, not translucent
       panes: there is no painted room on this site to be translucent over.
   ========================================================================== */
.panels{display:flex; flex-direction:column; gap:var(--s2); margin:var(--s5) 0 0; max-width:860px}
.panel{
  padding:17px 19px 18px; width:min(100%,470px);
  transform:translateY(10px); transition:transform .7s cubic-bezier(.2,.7,.25,1);
}
.panel.in{transform:none}
.panel:nth-child(2){transition-delay:.07s}
.panel:nth-child(3){transition-delay:.14s}
.panel:nth-child(4){transition-delay:.21s}
.panel.them{align-self:flex-start}
.panel.agent{align-self:flex-end; background:var(--surface-soft)}
.panel .who{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-action); margin:0 0 9px;      /* 6.10:1 on paper, 5.56:1 on the soft fill */
}
.panel .who .t{color:var(--ink-soft); font-weight:400; letter-spacing:.08em}
.panel p{margin:0; font-size:15.5px; line-height:1.48; color:var(--ink-strong)}
.panel .tag{
  display:inline-block; margin-top:11px; font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--brand-action);
  border-top:1px solid var(--rule); padding-top:8px;
}
.panels-after{margin:var(--s5) 0 0; max-width:var(--measure); font-size:var(--t-lede); line-height:1.58; color:var(--ink-2,var(--ink-muted))}

/* ==========================================================================
   16. THE PHASE STRIP AND THE PHASE ROWS. Two presentations of the same
       method: five phases across on a service page, an expanded row per
       phase on the homepage. The method reads as ONE method or it reads as
       eight departments, so the grammar is fixed on every page: what
       happens, what you see at the end, who from your side is needed.

       The timeline is published as a SHAPE and never as a promised number.
       Every undecided number is a .slot named in a comment above it.
   ========================================================================== */
.strip{
  list-style:none; margin:var(--s5) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0;
  border-top:1px solid var(--rule);
}
.ph{
  padding:var(--s4) clamp(14px,1.6vw,26px) var(--s4) 0;
  border-right:1px solid var(--rule-soft);
  transform:translateY(12px); transition:transform .75s cubic-bezier(.2,.7,.25,1);
}
.ph.in{transform:none}
.ph:nth-child(2){transition-delay:.07s} .ph:nth-child(3){transition-delay:.14s}
.ph:nth-child(4){transition-delay:.21s} .ph:nth-child(5){transition-delay:.28s}
.ph:last-child{border-right:0; padding-right:0}
.ph .n{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.18em; color:var(--brand-action); display:block; margin-bottom:12px}
.ph h3{font-size:15.5px; font-weight:600; margin-bottom:10px}
.ph > p{margin:0 0 var(--s3); font-size:var(--t-small); line-height:1.6; color:var(--ink-2,var(--ink-muted))}
.ph dl{margin:0; display:grid; gap:10px; border-top:1px solid var(--rule-soft); padding-top:var(--s3)}
.ph dt{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--meta,var(--brand-action)); margin-bottom:3px}
.ph dd{margin:0; font-size:12.5px; line-height:1.52; color:var(--ink-2,var(--ink-muted))}
@media (max-width:1100px){
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ph{border-right:0; border-bottom:1px solid var(--rule-soft); padding-right:clamp(14px,3vw,40px)}
  .ph:nth-child(2n){padding-right:0}
}
@media (max-width:640px){.strip{grid-template-columns:minmax(0,1fr)} .ph{padding-right:0}}

.phases{list-style:none; margin:var(--s5) 0 0; padding:0; border-top:1px solid var(--rule)}
.phase{
  display:grid; grid-template-columns:44px minmax(0,1.1fr) minmax(0,1fr);
  gap:var(--s3) clamp(20px,3vw,48px);
  padding:var(--s4) 0; border-bottom:1px solid var(--rule);
}
.phase-n{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; color:var(--meta,var(--brand-action)); padding-top:4px}
.phase-body h3{font-size:var(--t-h4); margin-bottom:10px}
.phase-body p{margin:0; font-size:var(--t-small); line-height:1.62; color:var(--ink-2,var(--ink-muted)); max-width:52ch}
.phase-body p + p{margin-top:10px}
.phase-meta{display:grid; gap:var(--s2); align-content:start}
.phase-meta > div{display:grid; grid-template-columns:minmax(0,88px) minmax(0,1fr); gap:4px 14px; align-items:baseline}
.phase-meta dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--meta,var(--brand-action))}
.phase-meta dd{margin:0; font-size:13px; line-height:1.52; color:var(--ink-2,var(--ink-muted))}
@media (max-width:920px){.phase{grid-template-columns:44px minmax(0,1fr)} .phase-meta{grid-column:2 / -1}}
@media (max-width:560px){.phase{grid-template-columns:minmax(0,1fr)} .phase-meta{grid-column:1 / -1}}
@media (max-width:460px){.phase-meta > div{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   17. THE CONSOLE SURFACES. A designed representation of the primary
       artefact, never a screenshot and never a mock that implies a client.
       The company shown is "your-company", the people are roles, and
       nothing on a plate names anybody.

       Three plates exist today and they share every value: the access list
       (.pl-row), the release queue (.pl-q) and the audit trail (.log).
       .pl-plate is the frame all three sit in.
   ========================================================================== */

/* the section the plates sit in, with the grid wash behind them. */
.pl-sec{
  position:relative; overflow:hidden;
  margin:var(--s5) calc(var(--pad) * -1) 0;
  padding:clamp(30px,4.4vh,52px) var(--pad) clamp(34px,5vh,58px);
}
.pl-sec::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--wash) 1px,transparent 1px),
    linear-gradient(90deg,var(--wash) 1px,transparent 1px);
  background-size:64px 64px; background-position:center top;
  -webkit-mask-image:radial-gradient(92% 66% at 50% 46%,#000 0%,rgba(0,0,0,.4) 54%,transparent 84%);
  mask-image:radial-gradient(92% 66% at 50% 46%,#000 0%,rgba(0,0,0,.4) 54%,transparent 84%);
}
.pl-stack{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:clamp(26px,4vh,48px); margin:var(--s5) 0 0;
}
.pl-wrap{width:min(100%,960px); transform:translateY(14px); transition:transform .85s cubic-bezier(.2,.7,.25,1)}
.pl-wrap.in{transform:none}
.pl-wrap.right{align-self:flex-end}
.pl-tag{font-family:var(--mono); font-size:var(--t-meta); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--meta,var(--brand-action)); margin:0 0 11px}
.pl-wrap.right .pl-tag{text-align:right}

/* the plate itself: chrome bar, head, rows, foot. */
.pl-plate{overflow:hidden}
.pl-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px solid var(--rule-soft);
  background:var(--surface-soft);
  font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.05em;
}
.pl-crumb{color:var(--ink-strong)}                      /* 9.50:1 on the soft surface */
.pl-crumb i{font-style:normal; color:var(--ink-soft); padding:0 7px}
.pl-meta{color:var(--brand-action); font-weight:500; letter-spacing:.14em; text-transform:uppercase; font-variant-numeric:tabular-nums}
.pl-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:17px 18px 14px}
.pl-head h3{margin:0; font-size:17px; font-weight:600; letter-spacing:-.008em; color:var(--ink-strong)}
.pl-sub{margin:5px 0 0; font-size:13px; line-height:1.5; color:var(--ink-soft)}
.pl-count{font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.pl-list{list-style:none; margin:0; padding:0}
.pl-list > li{border-top:1px solid var(--rule-soft)}
.pl-foot{padding:14px 18px; border-top:1px solid var(--rule-soft); background:var(--canvas); font-size:13px; line-height:1.56; color:var(--ink-muted)}
.pl-foot.line{font-family:var(--mono); font-size:12.5px; letter-spacing:.07em; color:var(--ink-strong); background:var(--surface-soft)}
.pl-note{margin:10px 0 0; font-size:13px; line-height:1.55; color:var(--brand-action)}
.pl-note[hidden]{display:none}

/* the three row kinds. */
.pl-row,.pl-q,.log{padding:15px 18px; transition:background .2s ease}
.pl-row{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.5fr) auto; gap:6px 20px; align-items:center}
.pl-q{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px 18px; align-items:start}
.log{display:grid; grid-template-columns:78px minmax(0,1fr); gap:4px 16px; padding:14px 18px}
.pl-list > li:hover .pl-row,.pl-list > li:focus-within .pl-row,
.pl-list > li:hover .pl-q,.pl-list > li:focus-within .pl-q,
.pl-list > li:hover .log{background:var(--canvas)}

.pl-nm{display:block; font-size:15px; font-weight:600; color:var(--ink-strong)}
.pl-role{display:block; margin-top:4px; font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.12em; text-transform:uppercase; color:var(--brand-action)}
.pl-can{margin:0; font-size:13.5px; line-height:1.52; color:var(--ink-muted)}
.pl-ctl{justify-self:end}
.pl-time{font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; padding-top:2px}
.pl-did{margin:0; font-size:15px; font-weight:600; line-height:1.36; color:var(--ink-strong); font-variant-numeric:tabular-nums}
.pl-check{margin:8px 0 0; font-size:13.5px; line-height:1.54; color:var(--ink-muted)}
.pl-check b{font-family:var(--mono); font-weight:500; font-size:var(--t-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--brand-action); margin-right:9px}
.log .t{font-family:var(--mono); font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; padding-top:2px}
.log .did{margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-strong)}
.log .why{margin:6px 0 0; font-size:13px; line-height:1.54; color:var(--ink-muted)}
.log .why b{font-family:var(--mono); font-weight:500; font-size:var(--t-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--brand-action); margin-right:9px}

/* the row states. A held item carries a --brand edge, a released one a
   --surface-strong edge, a removed person is struck through. */
.pl-held .pl-q,li.log-held .log{box-shadow:inset 3px 0 0 var(--brand)}
li.pl-rel .pl-q,li.log-rel .log{box-shadow:inset 3px 0 0 var(--surface-strong)}
li.pl-out .pl-nm{color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--brand-soft)}
li.pl-out .pl-role,li.pl-out .pl-can{color:var(--ink-soft)}
.pl-ring{outline:2px solid var(--brand-action); outline-offset:3px}

/* the three inline markers. */
.pl-badge,.pl-tagline,.pl-stamp{
  display:inline-block; font-family:var(--mono); font-size:var(--t-meta); font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; border-radius:var(--r); padding:8px 12px; white-space:nowrap;
}
.pl-badge{color:var(--ink-strong); border:1px solid var(--rule); background:var(--surface-soft)}
.pl-tagline{color:var(--brand-action); border:1px dashed var(--brand-action); background:var(--surface-soft)}
.pl-stamp{color:var(--ink-soft); background:transparent; border:1px dashed var(--rule); cursor:pointer}
.pl-stamp:hover{color:var(--ink-strong); border-color:var(--brand-action)}

@media (max-width:760px){
  .pl-row,.pl-q{grid-template-columns:minmax(0,1fr); gap:10px}
  .pl-ctl{justify-self:start}
  .pl-wrap.right .pl-tag{text-align:left}
}
@media (max-width:620px){.log{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   18. THE PROMPT DEMONSTRATION. A field, a set of example questions, and a
       grounded answer with its trace beside it. The example carries no
       company name: an invented name is a name somebody real may hold.
   ========================================================================== */
.ask{max-width:820px; margin:var(--s5) 0 0}
.ask-field{
  position:relative; display:flex; align-items:center; gap:12px;
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r);
  padding:7px 7px 7px 18px;
  box-shadow:var(--shadow-field);
  transition:border-color .2s ease, box-shadow .24s ease;
}
.ask-field:focus-within{
  border-color:var(--brand-action);
  box-shadow:var(--focus-glow), var(--shadow-field-lift);
}
.ask-mark{flex:none; display:block; color:var(--brand)}
.ask-field input{
  flex:1; min-width:0; border:0; outline:0; background:none;
  font-family:var(--sans); font-size:clamp(15px,1.25vw,17px); color:var(--ink-strong);
  padding-block:12px;
}
.ask-field input::placeholder{color:var(--ink-soft); opacity:1}   /* 5.62:1 on paper */
.send{
  flex:none; width:44px; height:44px; border-radius:var(--r);
  border:1px solid var(--brand-action); background:var(--brand-action); color:var(--on-dark);
  cursor:pointer; display:grid; place-items:center;
  transition:background .18s ease, transform .18s ease;
}
.send:hover{background:var(--brand-action-hover); border-color:var(--brand-action-hover)}
.send:active{transform:translateY(1px)}
.pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s2); align-items:center}
.pill{
  border:1px solid var(--rule); background:transparent; border-radius:var(--r);
  padding:9px 14px; font-family:var(--sans); font-size:13.5px; color:var(--ink-muted); cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.pill:hover{border-color:var(--brand-action); color:var(--ink-strong); background:var(--surface-soft)}
.pill:active{transform:translateY(1px)}
.pill.is-example{border-style:dashed; color:var(--brand-action)}
.ask-hint{font-size:12.5px; color:var(--ink-3,var(--ink-soft)); margin:var(--s2) 2px 0}

.out-wrap{display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s cubic-bezier(.22,.9,.3,1)}
.out-wrap.is-open{grid-template-rows:1fr}
.out-clip{overflow:hidden; min-height:0}
.out{margin-top:18px; border-radius:var(--r); overflow:hidden}
.out-top{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--rule-soft); background:var(--surface-soft);
}
.dot{width:8px; height:8px; border-radius:999px; background:var(--brand-action); flex:none}
.out-who{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--brand-action)}
.out-kind{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted)}
.out-clear{margin-left:auto; background:none; border:0; cursor:pointer; font-family:var(--sans); font-size:12.5px; color:var(--ink-muted); text-decoration:underline; text-underline-offset:3px}
.out-clear:hover{color:var(--ink-strong)}
.out-body{display:grid; grid-template-columns:200px minmax(0,1fr)}
.trace{list-style:none; margin:0; padding:20px 18px; border-right:1px solid var(--rule-soft); background:var(--canvas)}
.trace li{position:relative; padding-left:22px; font-size:12.5px; line-height:1.4; color:var(--ink-soft); padding-bottom:16px}
.trace li:last-child{padding-bottom:0}
.trace li::before{
  content:""; position:absolute; left:2px; top:4px; width:9px; height:9px; border-radius:999px;
  border:1px solid var(--brand-soft); background:var(--paper);
}
.trace li.done{color:var(--ink-muted)}
.trace li.done::before{background:var(--brand-action); border-color:var(--brand-action)}
.out-main{padding:20px 20px 22px; min-width:0}
.out-notice{margin:0 0 14px; font-size:12.5px; line-height:1.62; color:var(--ink-muted); border-left:2px solid var(--brand-soft); padding-left:12px}
.out-notice b{color:var(--ink-strong); font-weight:600}
.out-ask{margin:0 0 12px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--meta,var(--brand-action))}
.out-ask span{color:var(--ink-muted); text-transform:none; letter-spacing:.02em; font-size:12px}
.out-ask[hidden]{display:none}
.out-say{margin:0; font-size:15.5px; line-height:1.62; color:var(--ink-strong); min-height:1.6em}
.caret{display:inline-block; width:7px; height:1.05em; background:var(--brand-action); vertical-align:-2px; margin-left:2px}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
.chip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--rule); border-radius:2px; padding:5px 9px; color:var(--ink-muted);
}
.out-note{margin:16px 0 0; font-size:13px; line-height:1.62; color:var(--ink-muted)}
.out-note b{color:var(--ink-strong); font-weight:600}
.out-foot{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-top:1px solid var(--rule-soft); background:var(--surface-soft);
  font-size:12.5px; color:var(--ink-muted);
}
.linkish{margin-left:auto; background:none; border:0; cursor:pointer; font-family:var(--sans); font-size:12.5px; color:var(--brand-action); text-decoration:underline; text-underline-offset:3px}
.linkish[hidden]{display:none}
@media (max-width:760px){
  .out-body{grid-template-columns:minmax(0,1fr)}
  .trace{border-right:0; border-bottom:1px solid var(--rule-soft); display:flex; gap:16px; flex-wrap:wrap}
}

/* ==========================================================================
   19. THE SCHEMA BOARD. The drawing is produced by assets/schema.js from a
       specification; this is only its treatment, and the treatment is the
       same on every page.

       THE COLOUR LAW, binding: teal is what the SYSTEM does, the dark plate
       is what stays with a PERSON, muted is what the business ALREADY RUNS.
       No third meaning is ever assigned, and every role stays legible with
       the colour removed, because the tell is the stripe WEIGHT, not the
       hue.

       On a light board the human gate takes --brand-deep as a SOLID FILL
       with --on-dark text and becomes THE ONLY DARK PLATE ON THE BOARD. On
       the dark board it was the only light plate. Same idea, inverted
       correctly: "the only light plate" reads as nothing here.

       Every measured ratio below was computed against the board fill.
   ========================================================================== */
.schema-wrap{margin:var(--s5) 0 0}
.schema-board{
  border-radius:var(--r); border:1px solid var(--rule);
  background:var(--paper);
  padding:clamp(12px,1.8vw,26px);
  box-shadow:var(--shadow-board);
  overflow-x:auto;
}
.dg{display:block; width:100%; height:auto}
.schema-hint{display:none}
@media (max-width:1000px){
  .dg{min-width:720px}
  .schema-hint{display:block; margin:var(--s2) 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--meta,var(--brand-action))}
}

.dg text{font-family:var(--sans); font-weight:500}
.dg .m{font-family:var(--mono); font-weight:400; letter-spacing:.055em}
.dg .body{stroke-width:.075}

/* BUILT. What the system does. */
.dg .p-built .body{fill:var(--surface-soft); stroke:var(--brand-action)}   /* edge 6.10:1 on the board */
.dg .p-built .stripe{fill:var(--brand)}                                    /* 3.98:1 on the board */
.dg .p-built .t{fill:var(--ink-strong)}                                    /* 9.50:1 on the plate */
.dg .p-built .s{fill:var(--ink-muted)}                                     /* 6.10:1 */
.dg .p-built .n{fill:var(--ink-muted)}

/* HUMAN. What stays with a person. THE ONLY DARK PLATE. */
.dg .p-human .body{fill:var(--brand-deep); stroke:var(--brand-deep); stroke-width:.17}  /* 10.42:1 */
.dg .p-human .stripe{fill:var(--brand-accent)}                             /* 4.41:1 on the plate */
.dg .p-human .t{fill:var(--on-dark)}                                       /* 9.69:1 */
.dg .p-human .s{fill:var(--brand-soft)}                                    /* 6.51:1 */
.dg .p-human .n{fill:var(--brand-soft)}

/* OWN. What the business already runs. */
.dg .p-own .body{fill:var(--surface-strong); stroke:var(--ink-soft)}       /* edge 5.62:1 */
.dg .p-own .stripe{fill:var(--ink-soft)}                                   /* 4.65:1 on the plate */
.dg .p-own .t{fill:var(--ink-muted)}                                       /* 5.54:1, the lowest on the board */
.dg .p-own .s{fill:var(--ink-soft)}
.dg .p-own .n{fill:var(--ink-soft)}

/* OUT. What is outside the boundary: drawn, never filled. */
.dg .p-out .body{fill:none; stroke:var(--ink-soft); stroke-width:.12; stroke-dasharray:.62 .46}  /* 5.62:1 */
.dg .p-out .t{fill:var(--ink-soft)} .dg .p-out .s{fill:var(--ink-soft)} .dg .p-out .n{fill:var(--ink-soft)}

/* channels, arrowheads, packets, the boundary rule and its break marks. */
.dg .ch{fill:none; stroke:var(--brand-action); stroke-width:.14; stroke-linejoin:miter; stroke-linecap:butt}  /* 6.10:1 */
.dg .ch-dead{stroke:var(--ink-soft); stroke-width:.12; stroke-dasharray:.55 .42}
.dg .ch-ret{stroke:var(--ink-soft); stroke-width:.1; stroke-dasharray:1.05 .62}
.dg .ah{fill:var(--brand-action); stroke:none}
.dg .ah-dead,.dg .ah-ret{fill:var(--ink-soft)}
.dg .pk{fill:var(--brand)}                                                 /* 3.98:1, a graphic, never text */
.dg .rule{fill:none; stroke:var(--ink-muted); stroke-width:.14; stroke-dasharray:.66 .48; stroke-linecap:butt}
.dg .brk{stroke:var(--ink-soft); stroke-width:.16; stroke-linecap:butt}
.dg .lb{fill:var(--ink-muted)} .dg .lb-hu{fill:var(--ink-strong)} .dg .lb-out{fill:var(--ink-soft)}

/* the legend. Required under every board: the colour law has to be stated
   in words on the page, not carried in the reader's head. */
.legend-row{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s4);
  margin:var(--s4) 0 0; padding:var(--s3) 0 0; border-top:1px solid var(--rule);
}
.legend-row div{display:flex; align-items:flex-start; gap:10px; max-width:30ch}
.legend-row i{width:15px; height:15px; border-radius:2px; flex:none; display:block; margin-top:2px}
.legend-row b{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--meta,var(--brand-action)); margin-bottom:4px}
.legend-row p{margin:0; font-size:var(--t-small); line-height:1.52; color:var(--ink-2,var(--ink-muted))}
.sw-built{background:var(--surface-soft); border:1px solid var(--brand-action); box-shadow:inset 0 3px 0 var(--brand)}
.sw-human{background:var(--brand-deep); box-shadow:inset 0 3px 0 var(--brand-accent)}
.sw-own{background:var(--surface-strong); border:1px solid var(--ink-soft); box-shadow:inset 0 2px 0 var(--ink-soft)}

/* the brand object divider, drawn by hureal.js into a host of this class. */
.divider{display:block; width:100%; height:120px; margin:0; padding:0; background:transparent; overflow:hidden}
.divider svg{display:block; width:100%; height:120px}

/* ==========================================================================
   20. THE FOOTER. No wordmark here: the sign off band above carries it, and
       two stacked marks is decoration rather than a sign off.
   ========================================================================== */
.site-foot{padding:var(--s5) var(--pad); border-top:1px solid var(--rule); background:var(--surface-soft); color:var(--ink-strong)}
.foot-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(24px,3.4vw,56px)}
.foot-blurb{max-width:36ch; margin:0; font-size:var(--t-small); line-height:1.64; color:var(--ink-muted)}
.foot-h{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-action); margin:0 0 var(--s3)}
.foot-svc{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px clamp(18px,2.6vw,40px)}
.foot-svc a{color:var(--ink-muted); text-decoration:none; font-size:14px; line-height:1.4; border-bottom:1px solid transparent; padding-bottom:2px}
.foot-svc a:hover{color:var(--ink-strong); border-bottom-color:var(--brand)}
.foot-svc a[aria-current="page"]{color:var(--ink-strong); border-bottom-color:var(--brand)}
.foot-legal{
  margin:var(--s5) 0 0; padding:var(--s3) 0 0; border-top:1px solid var(--rule);
  display:flex; gap:var(--s2) var(--s4); flex-wrap:wrap; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-muted);
}
.foot-legal a{color:var(--ink-muted); text-decoration:none}
.foot-legal a:hover{color:var(--brand-action)}
@media (max-width:860px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.foot-svc{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   21. THE REVIEW NOTE. Tagged, so it is never mistaken for the page. It is
       removed before launch; until then it carries what a reviewer needs to
       know about what is decided and what is not.
   ========================================================================== */
.note-band{background:var(--surface-strong); color:var(--ink-strong); padding:var(--s5) var(--pad)}
.note-tag{
  display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-muted);
  border:1px solid var(--rule); border-radius:2px; padding:6px 10px; margin:0 0 var(--s3);
}
.note-band h2{font-size:clamp(1.3rem,2.2vw,1.8rem); margin-bottom:var(--s3); max-width:30ch; font-weight:400}
.note-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,42px)}
.note-cols p{margin:0; font-size:14px; line-height:1.68; color:var(--ink-muted)}
.note-cols .h{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-action); margin-bottom:11px}
.measured{
  margin:var(--s4) 0 0; padding:16px 18px; border-radius:var(--r);
  background:var(--paper); border:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:12px; line-height:1.72; color:var(--ink-muted);
}
.measured b{color:var(--ink-strong); font-weight:500}
@media (max-width:900px){.note-cols{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   22. UTILITIES.
   ========================================================================== */
.inner{max-width:var(--maxw); margin:0 auto}
.cols-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3.4vw,64px)}
.cols-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,3.2vw,52px)}
.cols-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.4vw,40px)}
@media (max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cols-2,.cols-3,.cols-4{grid-template-columns:minmax(0,1fr)}}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ==========================================================================
   23. LOAD MOTION. Additive only. Everything readable is visible at rest on
       load, and nothing readable is ever tied to scroll position by
       opacity. The only things that move on scroll are transforms.
   ========================================================================== */
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.r1{animation:rise .85s cubic-bezier(.2,.7,.25,1) .05s both}
.r2{animation:rise .85s cubic-bezier(.2,.7,.25,1) .16s both}
.r3{animation:rise .85s cubic-bezier(.2,.7,.25,1) .28s both}
.r4{animation:rise .85s cubic-bezier(.2,.7,.25,1) .4s both}
.r5{animation:rise .85s cubic-bezier(.2,.7,.25,1) .52s both}

/* ==========================================================================
   24. RESPONSIVE. 390, 834, 1280, 1440.

   Above 980px the hero and every artwork band composite copy over the
   photograph, and the frame is wide enough that object-fit:cover crops
   VERTICALLY, so the full image width is on screen and the measured left
   hand quiet zone is exactly where the arithmetic put it.

   At 980px and below a cover crop starts eating the image sideways and the
   quiet zone stops being where it was measured, so the frames STACK:
   artwork on top at its own ratio, copy below on the flat canvas. NOTHING
   IS COMPOSITED OVER A PHOTOGRAPH AT ANY WIDTH WHERE THE CROP IS NOT KNOWN.
   ========================================================================== */
@media (max-width:980px){
  .hero-band{display:block; min-height:0}
  .hero-art{position:relative; inset:auto; width:100%; aspect-ratio:16/10}
  .hero-art img{object-position:72% 50%}
  .hero-veil{display:none}
  .hero-inner{display:block; padding:clamp(34px,6vh,58px) var(--pad) clamp(96px,14vh,132px); background:var(--surface-soft)}
  .hero-band.compact .hero-inner{padding:clamp(34px,6vh,58px) var(--pad) clamp(48px,8vh,72px)}
  .hero-copy{width:100%}
  .hero-band .art-tag{position:static; margin:0; padding:0 var(--pad) clamp(24px,4vh,36px); background:var(--surface-soft)}
  .switcher{left:var(--pad); right:var(--pad); bottom:clamp(18px,3vh,30px); justify-content:space-between}

  .artband{display:block; min-height:0}
  .artband > img, .artband > picture > img{position:relative; inset:auto; aspect-ratio:16/10}
  .artband-veil{display:none}
  .artband-inner{padding:clamp(40px,7vh,70px) var(--pad)}
  .artband-copy{width:100%}
  .artband .art-tag{position:static; margin:0; padding:0 var(--pad) clamp(28px,5vh,44px); background:transparent}

  .steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .bar-nav{display:none}
  .menu-btn{display:flex}
}
@media (max-width:640px){
  .panel{width:100%}
  .bar .btn{display:none}
  .switcher .now{display:none}
  h2,h2.wide,h2.long{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .step,.pl-wrap,.panel,.ph{transform:none}
  .line-device .rule{transform:scaleX(1)}
}

/* ==========================================================================
   24. THREE COMPONENTS ADDED 22 SEPTEMBER 2026, for the hub, the router and
       the two conversion pages. Each one is SYSTEM LEVEL rather than page
       level: every one of the three is wanted by more than one page in the
       inventory, which is the test section 2 of build-system.md sets. They
       are appended as one block so the extraction that produced sections 1
       to 23 stays readable as the thing it is.

       .cards   the service card with a picture. /services/ carries all
                eight at equal weight, and any later "everything we build"
                surface carries the same object.
       .router  the situation rail. SITEMAP 5.3 puts it in three places:
                /start-here/, a full homepage section, and the fourth rail
                of the services mega menu. One component, three homes.
       .form    the one form. /discovery-call/ books, /performance-audit/
                requests, /contact/ asks, and the newsletter consents. Four
                pages, one construction, and the CASL consent line is part
                of the component rather than something a page remembers.

       NOTHING HERE INTRODUCES A VALUE. Every colour is a token, every size
       is on the scale, every corner is --r and every shadow is one of the
       four. The rules below are arrangement and nothing else.
   ========================================================================== */

/* THE SERVICE CARD. A picture, a name, one outcome sentence, and the label
   that says where the link goes. The whole card is the link, the same as
   .rel, because a card with a link inside it has two hit targets and a
   reader has to find the small one. Four across so eight is two even rows:
   at three across the last row is two cards wide and the eighth service
   looks like an afterthought, which is the one thing the hub cannot do. */
.cards{
  list-style:none; margin:var(--s5) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,48px);
}
.cards > li{display:grid}
.card{
  display:grid; grid-template-rows:auto auto 1fr auto; gap:var(--s2);
  text-decoration:none; color:inherit; align-content:start;
}
.card h3{margin:0; font-size:16px; font-weight:600; line-height:1.3; color:var(--ink-strong)}
.card p{margin:0; font-size:var(--t-small); line-height:1.6; color:var(--ink-2,var(--ink-muted))}
.card .go{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand-action);
}
.card:hover h3{color:var(--brand-action)}
.card:hover .shot{border-color:var(--brand-soft)}
@media (max-width:1080px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards{grid-template-columns:minmax(0,1fr)}}

/* THE SITUATION RAIL. A sentence the visitor would say about their own week,
   then two or three sentences, then the route stated as a sentence rather
   than as a button: SITEMAP 6.1 rule 3 says every internal link states a
   reason, and the reason is the anchor's context.

   FIRST PERSON, ALWAYS. "We look smaller than we are" is a sentence a
   visitor recognises as theirs. The same content in the second person is a
   diagnosis of their business and is forbidden sitewide. */
.router{list-style:none; margin:var(--s5) 0 0; padding:0; border-top:1px solid var(--rule)}
.router > li{
  display:grid; grid-template-columns:44px minmax(0,.92fr) minmax(0,1.28fr);
  gap:var(--s2) clamp(22px,3vw,56px);
  padding:var(--s4) 0; border-bottom:1px solid var(--rule-soft); align-items:start;
}
.router .n{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--brand-action); padding-top:5px}
.router h3{
  margin:0; font-size:clamp(16px,1.35vw,19px); font-weight:500; line-height:1.36;
  letter-spacing:-.008em; color:var(--ink-strong); max-width:26ch;
}
.router p{margin:0; font-size:var(--t-small); line-height:1.7; color:var(--ink-2,var(--ink-muted)); max-width:var(--measure-wide)}
.router p + p{margin-top:10px}
.router a{color:var(--brand-action); text-decoration:none; border-bottom:1px solid var(--rule)}
.router a:hover{border-bottom-color:var(--brand-action)}
@media (max-width:900px){
  .router > li{grid-template-columns:34px minmax(0,1fr)}
  .router h3,.router > li > div{grid-column:2}
}

/* THE ONE FORM. Label above field, one column on a phone, two where a pair
   of short fields belongs on one line. The focus state is the same glow the
   rest of the site uses, and the consent line is a real checkbox with a real
   sentence beside it: CASL consent is a design requirement here, not a
   growth tactic, so it is never pre-ticked and never implied by submitting. */
.form{margin:var(--s5) 0 0; display:grid; gap:var(--s3); max-width:var(--measure-wide)}
.form-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3)}
.field{display:grid; gap:7px; min-width:0}
.field > label{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--meta,var(--brand-action));
}
.field > label .opt{color:var(--ink-3,var(--ink-soft)); letter-spacing:.1em}
.field input,.field textarea,.field select{
  width:100%; padding:12px 14px; border-radius:var(--r);
  border:1px solid var(--rule-mark); background:var(--surface,var(--paper));
  color:var(--ink-strong); font-size:15px; line-height:1.5;
  box-shadow:var(--shadow-field);
}
.field textarea{min-height:124px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-soft); opacity:1}   /* 5.57:1 */
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--brand-action);
  box-shadow:var(--focus-glow), var(--shadow-field-lift);
}
.field .hint{margin:0; font-size:12.5px; line-height:1.5; color:var(--ink-3,var(--ink-soft))}
.consent{
  display:grid; grid-template-columns:18px minmax(0,1fr); gap:11px; align-items:start;
  font-size:12.5px; line-height:1.6; color:var(--ink-2,var(--ink-muted));
}
.consent input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--brand-action)}
.form-foot{display:flex; gap:clamp(18px,2.4vw,34px); align-items:center; flex-wrap:wrap; margin-top:var(--s1)}
.form-note{
  margin:var(--s3) 0 0; font-size:12.5px; line-height:1.66;
  color:var(--ink-3,var(--ink-soft)); max-width:60ch;
}
.form-note b{color:var(--ink-strong); font-weight:600}
@media (max-width:640px){.form-row{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   25. THE PUBLISHING SPINE, added 23 September 2026 for /insights/ and the
       eight topic indexes.

       TWO COMPONENTS, AND BOTH ARE SYSTEM LEVEL rather than page level.
       Nine pages in the inventory want the same two objects: the hub and
       every one of the eight topic indexes. That is the test section 2 of
       build-system.md sets, so they live here and no insights page carries
       a stylesheet.

       .topics  the topic filter, built as LINKS rather than as script.
                Every control is a real route from SITEMAP 1.1, so it
                filters with JavaScript switched off, a crawler follows it,
                and a reader can send somebody one topic as a URL. The
                current topic is a span rather than a link, because a
                control that points at the page it is on is not a control.
       .posts   the article row: topic, title, one line standfirst. Adding
                an article is adding one <li>. Each row carries data-topic
                so a client side instant filter can be added to hureal.js
                later without touching a single page.

       NOTHING HERE INTRODUCES A VALUE. Every colour is a token, every size
       is on the scale, the corner is --r, and the row rules are the same
       two hairlines every other list on the site uses.
   ========================================================================== */

/* THE TOPIC RAIL. Mono at --t-meta rather than at --t-kick: these are hit
   targets, not labels, so they take the larger of the two mono sizes and a
   pad that clears the 24px minimum target on every viewport. --brand-action
   is 6.05:1, which is the only teal legal on small text. */
.topics{list-style:none; margin:var(--s4) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.topics a,.topics span{
  display:inline-block; padding:9px 15px; border-radius:var(--r);
  font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.08em;
  line-height:1.2; text-decoration:none;
}
.topics a{border:1px solid var(--rule); background:var(--surface,var(--paper)); color:var(--brand-action)}
.topics a:hover{border-color:var(--brand-action); background:var(--panel,var(--surface-soft))}
.topics span{border:1px solid var(--brand-action); background:var(--panel,var(--surface-soft)); color:var(--ink-strong)}

/* THE ARTICLE ROW. The topic sits in its own column at desk width so the
   index scans as a table of contents rather than as a stack of cards, and
   it moves above the title below 820 where a 17vw column stops being one. */
.posts{list-style:none; margin:var(--s4) 0 0; padding:0; border-top:1px solid var(--rule)}
.posts > li{border-bottom:1px solid var(--rule-soft)}
.posts a{
  display:grid; grid-template-columns:clamp(150px,17vw,230px) minmax(0,1fr);
  gap:var(--s2) clamp(22px,3vw,56px); align-items:start;
  padding:var(--s4) 0; text-decoration:none; color:inherit;
}
.posts .tp{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-action); padding-top:5px}
.posts h3{
  margin:0 0 9px; font-size:clamp(16px,1.35vw,19px); font-weight:500; line-height:1.36;
  letter-spacing:-.008em; color:var(--ink-strong); max-width:34ch;
}
.posts p{margin:0; font-size:var(--t-small); line-height:1.66; color:var(--ink-2,var(--ink-muted)); max-width:var(--measure-wide)}
.posts a:hover h3{color:var(--brand-action)}

/* THE EMPTY STATE, which is a row rather than a panel: the rail is drawn
   and waiting, and what stands in it says so in plain words. It is deleted
   the day the first article lands. */
.posts > li.is-empty{padding:var(--s4) 0; max-width:var(--measure-wide)}
.posts > li.is-empty p{margin:0; font-size:var(--t-small); line-height:1.7; color:var(--ink-2,var(--ink-muted))}
.posts > li.is-empty p + p{margin-top:var(--s2)}
.posts > li.is-empty b{color:var(--ink-strong); font-weight:600}

@media (max-width:820px){
  .posts a{grid-template-columns:minmax(0,1fr); gap:10px}
  .posts .tp{padding-top:0}
}

/* The article rail on a pillar page. Shows what is actually published on that
   topic, however many that is, and links to the rest. */
.rail-posts{list-style:none;margin:var(--s3) 0;padding:0;display:grid;gap:var(--s3)}
.rail-posts li{border-top:1px solid var(--rule);padding-top:var(--s2)}
.rail-posts a{color:var(--ink-strong);text-decoration:none;font-weight:600;font-size:var(--t-small);line-height:1.45;display:block}
.rail-posts a:hover{color:var(--brand-action)}

/* Every form says what it does with what you type, above the first field,
   and links to the privacy page. Required by the privacy draft, and it is
   also the thing a cautious buyer looks for before typing his name. */
.form-purpose{margin:0 0 var(--s4);font-size:var(--t-small);line-height:1.6;color:var(--ink-muted);max-width:var(--measure)}
.form-purpose b{color:var(--ink-strong)}

/* The error summary. Hidden at rest, focused on a failed submit, so a screen
   reader lands on the list of problems rather than hunting for red borders. */
.form-errors{margin:0 0 var(--s4);padding:var(--s3);border:1px solid var(--brand-action);border-radius:var(--r);background:var(--surface-soft)}
.form-errors p{margin:0 0 6px;font-size:var(--t-small);color:var(--ink-strong)}
.form-errors ul{margin:0;padding-left:1.1em;font-size:var(--t-small);line-height:1.7}
.form-errors a{color:var(--brand-action)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--brand-action);box-shadow:0 0 0 2px rgba(0,107,123,.14)}
.field .err{display:block;margin-top:5px;font-size:var(--t-meta);color:var(--brand-action)}