/* ==========================================================================
   VAIY - brand foundations
   Loaded by every page. Tokens, reset, typography, controls, chrome.
   Page-specific rules live in assets/css/<page>.css
   ========================================================================== */

:root{
  /* brand palette ------------------------------------------------------- */
  --blue:#0026F8;
  --blue-deep:#001BB0;
  --bg:#F7F6F3;
  --panel:#ECECE9;
  --line:#E0E0DC;
  --mute:#414647;
  --ink:#16181B;

  /* aliases kept so page sheets can use either name --------------------- */
  --accent:var(--blue);
  --deep:var(--blue-deep);
  --sel:#E3E7FE;

  /* inverted blocks (dark bands on a light page) ------------------------ */
  --inv-bg:#16181B;
  --inv-ink:#F7F6F3;
  --inv-soft:rgba(247,246,243,.66);
  --inv-faint:rgba(247,246,243,.42);
  --grid:rgba(247,246,243,.06);

  /* type ---------------------------------------------------------------- */
  --display:'Sora', system-ui, sans-serif;
  --text:'DM Sans', system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#16181B;
    --panel:#1D2024;
    --line:#2A2E33;
    --mute:#9AA0A4;
    --ink:#F7F6F3;
    --blue:#3D5BFF;
    --blue-deep:#7C90FF;
    --sel:#1B2140;
    --inv-bg:#0F1113;
    --inv-ink:#F7F6F3;
    --inv-soft:rgba(247,246,243,.66);
    --inv-faint:rgba(247,246,243,.4);
    --grid:rgba(247,246,243,.05);
  }
}

/* reset --------------------------------------------------------------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--text);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; }
/* the hidden attribute must win over any display: rule a page sets */
[hidden]{ display:none !important; }
::selection{ background:var(--blue); color:#fff; }

.wrap{ max-width:1280px; margin:0 auto; padding:0 32px; }
@media (max-width:700px){ .wrap{ padding:0 20px; } }

/* motion -------------------------------------------------------------- */
.rv{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* typography ---------------------------------------------------------- */
h1{
  font-family:var(--display); margin:0; font-weight:700;
  letter-spacing:-0.04em; line-height:1.0;
  font-size:clamp(36px, 4.3vw, 66px); text-wrap:balance;
}
h1 em{ font-style:normal; color:var(--blue); }
h2{
  font-family:var(--display); margin:0; font-weight:700;
  letter-spacing:-0.036em; line-height:1.02;
  font-size:clamp(30px, 4.6vw, 68px); max-width:19ch;
}
h2 em{ font-style:normal; color:var(--blue); }
h3{ font-family:var(--display); margin:0; font-weight:600; letter-spacing:-0.022em; }

.kicker{
  font-family:var(--text); font-size:11.5px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--blue); margin:0 0 20px; font-weight:700;
  display:flex; align-items:center; gap:11px;
}
.kicker::before{ content:''; width:26px; height:2px; background:var(--blue); flex:0 0 auto; }

.lede{ margin:0; font-size:17.5px; line-height:1.6; color:var(--mute); max-width:56ch; }
.intro{ margin:26px 0 0; max-width:62ch; font-size:17.5px; line-height:1.6; color:var(--mute); }
.tiny{ margin:26px 0 0; font-size:12px; color:var(--mute); line-height:1.6; }

/* controls ------------------------------------------------------------ */
.cta{
  display:inline-block; background:var(--blue); color:#fff; text-decoration:none;
  font-size:16px; font-weight:500; padding:17px 34px; border-radius:999px;
  white-space:nowrap; transition:background .18s ease, transform .18s ease;
}
.cta:hover{ background:var(--blue-deep); transform:translateY(-2px); }
.cta.ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.cta.ghost:hover{ border-color:var(--blue); color:var(--blue); background:transparent; }

.btn{
  background:var(--blue); color:#fff; text-decoration:none; font-family:var(--text);
  font-size:14.5px; font-weight:500; padding:11px 22px; border-radius:999px;
  transition:background .18s ease;
  /* 44px is the minimum comfortable touch target */
  display:inline-flex; align-items:center; min-height:44px;
}
.btn:hover{ background:var(--blue-deep); }

/* site chrome --------------------------------------------------------- */
header{
  position:sticky; top:0; z-index:60;
  background:var(--bg); border-bottom:1px solid var(--line);
}
header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:15px; padding-bottom:15px;
}
.name{
  font-family:var(--display); font-size:23px; font-weight:700;
  letter-spacing:-0.02em; text-decoration:none; color:var(--ink); line-height:1;
}
.name span{ color:var(--blue); }

nav{ display:flex; gap:26px; font-size:14.5px; align-items:center; }
nav em{
  font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; background:var(--blue);
  padding:2px 6px; border-radius:999px; margin-left:7px; vertical-align:1.5px;
}
nav a{ color:var(--mute); text-decoration:none; position:relative; padding-bottom:3px; }
nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--blue); transition:width .22s ease;
}
nav a:hover{ color:var(--ink); }
nav a:hover::after{ width:100%; }
nav a[aria-current="page"]{ color:var(--ink); }
nav a[aria-current="page"]::after{ width:100%; }

.right,
.head-r{ display:flex; align-items:center; gap:16px; }
.li{ color:var(--mute); display:inline-flex; align-items:center; line-height:0; }
.li:hover{ color:var(--blue); }

/* mobile navigation ----------------------------------------------------
   Below 1000px the horizontal nav will not fit, so it becomes a panel
   that drops out of the header, opened by the hamburger button. The
   button is hidden on desktop; the panel styling is scoped to the same
   breakpoint so the desktop layout is untouched. */
.navtoggle{
  display:inline-flex; align-items:center; justify-content:center;
  /* 44px keeps the touch target comfortable */
  width:44px; height:44px; margin-right:-11px;
  background:none; border:0; padding:0; cursor:pointer; color:var(--ink);
}
.navtoggle .bars{
  display:block; position:relative;
  width:22px; height:2px; border-radius:2px;
  background:currentColor; transition:background .16s ease;
}
.navtoggle .bars::before,
.navtoggle .bars::after{
  content:''; position:absolute; left:0;
  width:22px; height:2px; border-radius:2px;
  background:currentColor; transition:transform .22s ease;
}
.navtoggle .bars::before{ top:-7px; }
.navtoggle .bars::after{ top:7px; }
.navtoggle[aria-expanded="true"] .bars{ background:transparent; }
.navtoggle[aria-expanded="true"] .bars::before{ transform:translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .bars::after{ transform:translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion:reduce){
  .navtoggle .bars,
  .navtoggle .bars::before,
  .navtoggle .bars::after{ transition:none; }
}

@media (min-width:1000px){
  .navtoggle{ display:none; }
}

@media (max-width:999px){
  /* the panel is positioned against the header bar */
  header .wrap{ position:relative; }
  nav{
    display:block; gap:0;
    position:absolute; left:0; right:0; top:100%;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:2px 32px 16px;
    box-shadow:0 18px 30px -22px rgba(0,0,0,.35);
    visibility:hidden; opacity:0; transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  nav.open{ visibility:visible; opacity:1; transform:none; }
  nav a{
    display:flex; align-items:center;
    min-height:50px; padding:0 0 0 0;
    font-size:16.5px; color:var(--ink);
    border-bottom:1px solid var(--line);
  }
  nav a:last-child{ border-bottom:0; }
  nav a::after{ display:none; }
  nav a[aria-current="page"]{ color:var(--blue); }
}
@media (max-width:700px){
  nav{ padding:2px 20px 16px; }
}
@media (prefers-reduced-motion:reduce){
  nav{ transition:none; }
}

footer a{ color:var(--mute); text-decoration:none; }
footer a:hover{ color:var(--blue); }

/* shared site footer ---------------------------------------------------
   Used on every page. Carries the internal links, which matters twice
   over: the top nav is hidden below 940px, and search engines follow
   these. Overrides the older flex footer in the page sheets. */
.sitefoot{
  display:block; border-top:1px solid var(--line);
  padding:clamp(44px,5vw,64px) 0 clamp(40px,5vw,56px);
  font-size:14px; color:var(--mute); margin-top:0;
}
.sitefoot .cols{
  display:grid; grid-template-columns:1fr 1fr; gap:32px 24px;
  padding-bottom:34px; border-bottom:1px solid var(--line);
}
@media (min-width:760px){ .sitefoot .cols{ grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; } }
.sitefoot .fh{
  font-family:var(--display); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); font-weight:700; margin:0 0 16px;
}
.sitefoot ul{ list-style:none; margin:0; padding:0; }
.sitefoot li{ margin:0 0 10px; }
.sitefoot li a{ font-size:14.5px; }
.sitefoot .brandcol{ grid-column:1 / -1; }
@media (min-width:760px){ .sitefoot .brandcol{ grid-column:auto; } }
.sitefoot .fname{
  font-family:var(--display); font-size:24px; font-weight:700;
  letter-spacing:-.02em; color:var(--ink); line-height:1; display:block; margin:0 0 14px;
}
.sitefoot .fname span{ color:var(--blue); }
.sitefoot .fdesc{ margin:0 0 18px; max-width:34ch; font-size:14px; line-height:1.55; }
.sitefoot .fsoc{ display:flex; gap:14px; align-items:center; }
.sitefoot .fsoc a{ display:inline-flex; align-items:center; line-height:0; }
.sitefoot .fsoc a:hover{ color:var(--blue); }
.sitefoot .base{
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;
  padding-top:24px; font-size:13px;
}

/* accessibility ------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible{ outline:2.5px solid var(--blue); outline-offset:4px; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{
  left:32px; top:12px; z-index:99;
  background:var(--blue); color:#fff; padding:11px 18px; border-radius:3px;
}