/* ============================================================
   ADGENTEC core. Tokens, reset, and the few things that must be
   identical everywhere: the claim marker and the form.
   Everything that decides how a page LOOKS lives in the
   concept's own stylesheet. Five sites, five design languages.
   ============================================================ */
:root{
  /* the colour guide, and nothing outside it */
  --navy:#15213b; --navy-2:#1b2a49; --navy-3:#0f1830; --ink:#080d18;
  /* the accent, taken from the marker stroke logo */
  --acc:#8fd3ff; --acc-2:#a9ddff; --acc-3:#5cbdf7; --acc-ink:#1571a8;
  --white:#ffffff; --bone:#f4f6f9; --paper-3:#e9edf3;
  --onnavy:rgb(255 255 255/.72); --onnavy-2:rgb(255 255 255/.46);
  --hair:rgb(255 255 255/.14); --line:#dde2ea;
  --f:"Inter Tight",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font:400 17px/1.6 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  touch-action:manipulation;-webkit-tap-highlight-color:rgb(21 33 59/.12)}
/* width and height attributes are declared on media so nothing shifts while it
   loads. height:auto keeps those attributes from forcing the intrinsic size. */
img,video,svg,canvas{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--acc);color:var(--navy)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:3px}
.navy :focus-visible,.ink :focus-visible,[data-dark] :focus-visible{outline-color:var(--acc)}
/* a focus ring is never removed, only replaced. Concepts that clear the native
   outline on an input get this ring instead. */
.field input:focus-visible,.field textarea:focus-visible,
.opt:focus-visible,.chip:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ------------------------------------------------------------
   RESULT RANGE. Anonymised, client approved, set as emphasis.
   ------------------------------------------------------------ */
.claim{white-space:nowrap;background:rgb(193 238 58/.16);
  box-shadow:inset 0 -2px 0 var(--acc);padding:0 .12em;border-radius:2px}

/* ------------------------------------------------------------
   THE FORM. Identical behaviour on all five, themed by each.
   It stores to this browser and sends nothing, anywhere, ever.
   ------------------------------------------------------------ */
.fstep{display:none}
.fstep[data-on]{display:block;animation:fin .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes fin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fprog{display:flex;align-items:center;gap:8px;margin-bottom:26px}
.fprog i{height:3px;flex:1;border-radius:2px;background:currentColor;opacity:.16;transition:opacity .3s}
.fprog i.on{opacity:1;color:var(--acc)}
.fcount{font:600 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:14px}
.field{margin-bottom:16px}
.field label{display:block;font:600 13px/1.4 var(--f);margin-bottom:7px}
.field input,.field textarea{width:100%;padding:14px 15px;border-radius:5px;
  border:1px solid currentColor;background:transparent;font:400 16px/1.4 var(--f)}
.field .hint{margin-top:7px;font:400 13px/1.45 var(--f);opacity:.6}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{padding:11px 15px;border-radius:999px;border:1px solid currentColor;
  font:500 14px/1 var(--f);transition:background-color .16s,border-color .16s,color .16s,opacity .16s;opacity:.7}
.opt[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:var(--navy);opacity:1}
.frow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.fback{font:500 14px/1 var(--f);opacity:.6;text-decoration:underline;text-underline-offset:4px}
.fdone{display:none}
.fdone[data-on]{display:block;animation:fin .4s cubic-bezier(.2,.8,.2,1) both}

/* reduced motion is honoured everywhere, without exception */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ------------------------------------------------------------
   TEXT THAT REACTS TO SCROLL.
   Put data-ink on a heading. Words rise in sequence as it enters
   view, and the lime marker wipes across any <em> inside it.
   ------------------------------------------------------------ */
[data-ink] .wd{display:inline-block;opacity:0;transform:translateY(.42em);
  transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
[data-ink].lit .wd{opacity:1;transform:none}
/* The marker is painted as a BACKGROUND on the text itself, not as an absolutely
   positioned box behind it. A single box cannot follow text that wraps, so it
   covered the line beneath. A background with box-decoration-break:clone paints one
   clean rectangle per line and can never sit on top of a glyph. */
[data-ink] em{font-style:normal;
  background-image:linear-gradient(var(--acc),var(--acc));
  background-repeat:no-repeat;background-position:0 50%;background-size:0% 100%;
  padding:.04em .1em;border-radius:5px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .55s cubic-bezier(.2,.8,.2,1) .2s}
[data-ink].lit em{background-size:100% 100%}
@media (prefers-reduced-motion:reduce){
  [data-ink] .wd{opacity:1;transform:none;transition:none}
  [data-ink] em{background-size:100% 100%;transition:none}
}

/* ------------------------------------------------------------
   NAV SAFETY. Concepts style their own nav, but no nav may ever
   push the page sideways. A longer call to action must shrink
   rather than overflow.
   ------------------------------------------------------------ */
.nav,.nav-in{max-width:100%;min-width:0}
.nav-links{min-width:0;flex-wrap:wrap}
@media (max-width:640px){
  .nav-in{gap:10px}
  .nav .btn{font-size:11.5px;padding:9px 13px;letter-spacing:0}
}
@media (max-width:420px){
  .nav .btn{font-size:11px;padding:8px 11px}
}

/* ------------------------------------------------------------
   READABILITY FLOOR. Uppercase mono labels may be small because
   they are scanned, not read. A sentence is read, so it never
   goes under 13px on any concept.
   ------------------------------------------------------------ */
p,li,dd{text-wrap:pretty}
/* Zero specificity on purpose. A floor may only raise unstyled text; with a
   normal selector the :not() chain outranked every p size in the concepts and
   pinned every paragraph on the site to the body size. */
:where(p:not([class*=label]):not([class*=eyebrow]):not([class*=tick]),li,dd){font-size:max(1em,13px)}