/* ==========================================================================
   Elite Screening Solutions — base system
   Concept: "Chain of Custody". Structure borrowed from the federal CCF form:
   numbered sequence, sealed fields, monospace specimen identifiers.
   ========================================================================== */

:root{
  /* ---- colour ---- */
  --ink:#0B1A1E;          /* deep petrol black, never pure #000 */
  --ink-2:#0F2A30;        /* raised panel */
  --ink-3:#16383F;        /* hairline / border on dark */
  --teal:#1BB3AE;         /* brand, from the ESS caduceus mark */
  --teal-bright:#5FE3D3;  /* used sparingly, focus + live states */
  --teal-deep:#0E7C7B;
  --amber:#E0A458;        /* temperature-strip amber, the second accent */
  --amber-soft:#F2D9B4;
  --paper:#F4F6F5;        /* cool off-white */
  --paper-2:#E7ECEB;
  --rule:#CBD6D4;
  --grey:#6E8085;
  --grey-dark:#3D5158;

  /* ---- type ---- */
  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* fluid scale */
  --t-xs:0.75rem;
  --t-sm:0.875rem;
  --t-base:clamp(1.0625rem,0.4vw + 0.98rem,1.1875rem);
  --t-lg:clamp(1.1875rem,0.5vw + 1.09rem,1.3125rem);
  --t-xl:clamp(1.375rem,1vw + 1.15rem,1.625rem);
  --t-2xl:clamp(1.625rem,1.6vw + 1.3rem,2.125rem);
  --t-3xl:clamp(2rem,2.6vw + 1.5rem,3rem);
  --t-4xl:clamp(2.5rem,4.4vw + 1.6rem,4.25rem);
  --t-5xl:clamp(3rem,6.4vw + 1.7rem,5.75rem);

  /* ---- space ---- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --s-9:96px; --s-10:128px;
  --gutter:clamp(20px,5vw,64px);
  --measure:68ch;

  /* ---- shell ---- */
  --wrap:1240px;
  --wrap-narrow:820px;
  --radius:3px;      /* form-like, almost square */
  --radius-lg:6px;
  --header-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:var(--t-base);line-height:1.65;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,h5{margin:0;font-family:var(--display);font-weight:800;
  line-height:1.04;letter-spacing:-0.025em;text-wrap:balance}
h1{font-size:var(--t-4xl)}
h2{font-size:var(--t-3xl)}
h3{font-size:var(--t-xl);letter-spacing:-0.015em}
h4{font-size:var(--t-lg);font-weight:700;letter-spacing:-0.01em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
ul,ol{margin:0 0 1.05em;padding-left:1.25em}
li{margin-bottom:.5em}
li:last-child{margin-bottom:0}
strong{font-weight:600}
button,input,select,textarea{font:inherit;color:inherit}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s-7) 0}
table{border-collapse:collapse;width:100%}
::selection{background:var(--teal);color:#fff}

/* ---------- a11y ---------- */
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.band-dark :focus-visible{outline-color:var(--teal-bright)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);
  color:#fff;padding:14px 22px;font-family:var(--display);font-weight:700;
  font-size:var(--t-sm)}
.skip:focus{left:8px;top:8px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.band{padding-block:clamp(56px,8vw,112px);position:relative}
.band-tight{padding-block:clamp(40px,5vw,72px)}
.band-dark{background:var(--ink);color:var(--paper)}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4{color:#fff}
.band-deep{background:var(--ink-2);color:var(--paper)}
.band-tint{background:var(--paper-2)}
.prose{max-width:var(--measure)}
.prose h2{margin-top:var(--s-8);margin-bottom:var(--s-4)}
.prose h3{margin-top:var(--s-7);margin-bottom:var(--s-3)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul{padding-left:1.1em}
.prose li::marker{color:var(--teal-deep)}
.grid{display:grid;gap:var(--s-6)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.split{display:grid;gap:clamp(32px,5vw,72px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.stack-6{display:flex;flex-direction:column;gap:var(--s-6)}
.stack-4{display:flex;flex-direction:column;gap:var(--s-4)}

/* ---------- eyebrow / form-field label ---------- */
/* The small caps mono label is the CCF field marker. It carries a real
   value (step number, section id, reg cite), never decoration. */
.eyebrow{font-family:var(--mono);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);
  display:flex;align-items:center;gap:10px;margin-bottom:var(--s-4)}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;
  flex:none}
.band-dark .eyebrow,.band-deep .eyebrow{color:var(--teal-bright)}
.eyebrow-amber{color:var(--amber)}

.lede{font-size:var(--t-lg);line-height:1.55;color:var(--grey-dark);
  max-width:60ch}
.band-dark .lede,.band-deep .lede{color:#B9CBCC}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:var(--t-sm);
  letter-spacing:.02em;padding:15px 26px;border-radius:var(--radius);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease),
    border-color .25s var(--ease),transform .25s var(--ease);
  position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--teal);color:#04231F;border-color:var(--teal)}
.btn-primary:hover{background:var(--teal-bright);border-color:var(--teal-bright)}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.band-dark .btn-ghost,.band-deep .btn-ghost{color:#fff;border-color:#2E5158}
.band-dark .btn-ghost:hover,.band-deep .btn-ghost:hover{background:#fff;
  color:var(--ink);border-color:#fff}
.btn-lg{padding:18px 34px;font-size:var(--t-base)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* arrow that travels on hover */
.btn .arw{transition:transform .3s var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- text link with rule ---------- */
.tlink{font-family:var(--display);font-weight:700;font-size:var(--t-sm);
  color:var(--teal-deep);text-decoration:none;display:inline-flex;
  align-items:center;gap:8px;padding-bottom:3px;
  border-bottom:1.5px solid rgba(14,124,123,.28);transition:border-color .25s,
    gap .25s var(--ease-out)}
.tlink:hover{border-color:var(--teal-deep);gap:12px}
.band-dark .tlink,.band-deep .tlink{color:var(--teal-bright);
  border-color:rgba(95,227,211,.3)}
.band-dark .tlink:hover,.band-deep .tlink:hover{border-color:var(--teal-bright)}

/* ---------- the "sealed field" card ----------
   A boxed field with a corner marker, echoing a form's data box. */
.field{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  padding:var(--s-6);position:relative;transition:border-color .3s var(--ease),
    transform .3s var(--ease),box-shadow .3s var(--ease)}
.field::before{content:"";position:absolute;left:-1px;top:-1px;width:16px;
  height:16px;border-top:2px solid var(--teal);border-left:2px solid var(--teal);
  opacity:0;transition:opacity .3s var(--ease)}
.field:hover{border-color:var(--grey);transform:translateY(-3px);
  box-shadow:0 14px 34px -20px rgba(11,26,30,.45)}
.field:hover::before{opacity:1}
.field .fnum{font-family:var(--mono);font-size:var(--t-xs);font-weight:500;
  color:var(--teal-deep);letter-spacing:.1em;display:block;margin-bottom:var(--s-3)}
.field h3{margin-bottom:var(--s-3)}
.field p{font-size:var(--t-base);color:var(--grey-dark)}
.band-dark .field,.band-deep .field{background:var(--ink-2);
  border-color:var(--ink-3);color:#C4D4D5}
.band-dark .field:hover,.band-deep .field:hover{border-color:var(--teal-deep)}
.band-dark .field p,.band-deep .field p{color:#9FB5B7}
.band-dark .field .fnum,.band-deep .field .fnum{color:var(--teal-bright)}

/* ---------- images ---------- */
figure{margin:0}
.shot{position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--ink-2)}
.shot img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-out)}
.shot-tall{aspect-ratio:4/5}
.shot-wide{aspect-ratio:16/10}
.shot-sq{aspect-ratio:1/1}
a:hover .shot img,.shot:hover img{transform:scale(1.035)}
/* teal duotone wash keeps stock photography on-brand */
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,rgba(11,26,30,.42),rgba(27,179,174,.12) 55%,
    rgba(11,26,30,.5));mix-blend-mode:multiply}
.shot-plain::after{display:none}
.caption{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.04em;
  color:var(--grey);margin-top:10px}

/* ---------- rules & dividers ---------- */
.hairline{height:1px;background:var(--rule);border:0}
.band-dark .hairline{background:var(--ink-3)}
/* perforation, like a tear-off form edge */
.perf{height:1px;background-image:linear-gradient(90deg,var(--rule) 0 6px,
  transparent 6px 12px);background-size:12px 1px;border:0}
.band-dark .perf{background-image:linear-gradient(90deg,var(--ink-3) 0 6px,
  transparent 6px 12px)}

/* ---------- utilities ---------- */
.mono{font-family:var(--mono)}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.mt-4{margin-top:var(--s-4)} .mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)} .mt-7{margin-top:var(--s-7)}
.mt-8{margin-top:var(--s-8)}
.mb-5{margin-bottom:var(--s-5)} .mb-6{margin-bottom:var(--s-6)}
.mb-7{margin-bottom:var(--s-7)}
.teal{color:var(--teal-deep)}
.band-dark .teal{color:var(--teal-bright)}
.amber{color:var(--amber)}

/* ---------- scroll reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
}