/* ============================================================
   Talent Unlimited — Trust Centre
   Shared foundation: fonts, tokens, base, buttons, header,
   document lists and the questionnaire band. Page-specific
   components live in vanta.css.
   ============================================================ */

/* ---- Fonts (self-hosted Montserrat: 400/500/600/700, only the weights used) ---- */
@font-face{font-family:Montserrat;font-weight:400;font-style:normal;font-display:optional;src:url(/assets/fonts/montserrat-regular-webfont.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:500;font-style:normal;font-display:optional;src:url(/assets/fonts/montserrat-medium-webfont.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:600;font-style:normal;font-display:optional;src:url(/assets/fonts/montserrat-semibold-webfont.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:700;font-style:normal;font-display:optional;src:url(/assets/fonts/montserrat-bold-webfont.woff2) format("woff2")}

/* ---- Tokens ---- */
:root{
  --teal:#00ceb6; --teal-600:#00b8a3; --teal-700:#00ceb6; /* brand primary (#00CEB6) for text, links and accents */
  --teal-tint:#eafbf8; --teal-tint-line:#c9f0ea;
  --ink:#1e1e35; --ink-80:#38384f; --ink-60:#5b5b70;
  --secondary:#14181e; --muted:#606a7b; --muted-2:#8b93a3;
  --bg:#fff; --bg-alt:#f6f8fb; --line:#e7e9ee; --line-2:#eef0f4;
  --ok:#0a7a33; --ok-tint:#e4f7ec;
  --pending:#9a5a00; --pending-tint:#fdf1dc;

  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(30,30,53,.04),0 1px 3px rgba(30,30,53,.06);
  --shadow:0 6px 24px rgba(30,30,53,.07);
  --font:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---- Base / reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);font-weight:400;color:var(--ink);background:var(--bg);
  font-size:clamp(15px,.35vw + 14.2px,16px);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(2.3rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.55rem,2.8vw,2.1rem)}
h3{font-size:1.12rem;letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:var(--teal-700);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--teal-600)}
strong,b{font-weight:600}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.skip-link:focus{left:0}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-weight:600;font-size:.95rem;
  padding:.72rem 1.35rem;border-radius:var(--radius-sm);border:1.5px solid transparent;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s}
.btn--primary{background:var(--teal);color:#fff}
.btn--primary:hover{background:var(--teal-600);color:#fff}
.btn--primary:disabled{opacity:.6;cursor:default}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--teal);color:var(--teal-700)}

/* ---- Header (slim, logo only) ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand svg{width:104px;height:auto}

/* ---- Document lists (public + on request) ---- */
.docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2rem)}
@media(max-width:720px){.docs-grid{grid-template-columns:1fr}}
.doc-col{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.6rem;box-shadow:var(--shadow-sm)}
.doc-col h3{display:flex;align-items:center;gap:.6rem;font-size:.95rem}
.doc-col .sub{color:var(--muted);font-size:.85rem;font-weight:400;margin-left:auto}
.doc-list{margin-top:1rem}
.doc-list li{border-top:1px solid var(--line-2)}
.doc-list li:first-child{border-top:0}
.doc-list a,.doc-list .item{display:flex;align-items:center;gap:.6rem;padding:.7rem 0;font-size:.9rem;font-weight:500;color:var(--ink)}
.doc-list a:hover{color:var(--teal-700)}
.doc-list .ico{width:1.05rem;height:1.05rem;color:var(--muted);flex:none}
.doc-list a:hover .ico{color:var(--teal-700)}
.doc-list .arrow-ico{margin-left:auto;color:var(--muted-2)}

/* ---- Questionnaires band ---- */
.qband{position:relative;overflow:hidden;background:var(--secondary);color:#fff;border-radius:18px;
  padding:clamp(2.25rem,5vw,3.5rem);display:flex;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem;flex-wrap:wrap}
.qband-glow{position:absolute;top:-55%;right:-4%;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,206,182,.22),transparent 70%);pointer-events:none}
.qband-text{position:relative;min-width:0}
.qband h2{color:#fff;font-size:clamp(1.55rem,3vw,2.25rem);line-height:1.14;margin:0;max-width:20ch}
.qband h2 .accent{color:var(--teal)}
.qband p{color:#aab2c0;margin:.85rem 0 0;font-size:1rem;max-width:46ch}
.qband-btn{position:relative;flex:none;background:#fff;color:var(--ink);border-color:#fff}
.qband-btn:hover{background:var(--teal-tint);color:var(--ink);border-color:var(--teal-tint)}

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