@import url("./design-system.generated.css");

/* ============================================================
   volantlabs.ai — shared shell (design system)
   Single source of truth for tokens + chrome (nav, buttons, section
   scaffolding, footer). Linked by every page; page-specific styles
   stay inline per page.

   Resolved from volant_base BrandGuideline nodes:
     Typography fb9db6b0 · Color 35b2b2cd · Spacing d1e2f3a4
     Accessibility e2f3a4b5 · Data-Viz b7d8862a · Motion a904a972
   ============================================================ */

/* ---- Brand tokens ---- */
:root{
  --labs-base:var(--bg-base);
  --labs-surface:var(--bg-surface);
  --labs-elevated:var(--bg-elevated);
  --labs-accent:var(--accent);
  --labs-accent-hover:var(--accent-hover);
  --labs-text:var(--text);
  --labs-muted:var(--text-muted);
  --labs-line:var(--line);
  --labs-node:color-mix(in srgb,var(--labs-text) 90%,var(--labs-muted));
  --surface:var(--labs-surface);
  --surface-soft:color-mix(in srgb,var(--labs-surface) 72%,transparent);
  --surface-elevated:var(--labs-elevated);
  --surface-accent:color-mix(in srgb,var(--labs-accent) 14%,transparent);
  --muted:var(--labs-muted);
  --navy:var(--labs-elevated); --orange:var(--labs-accent); --orange-600:var(--labs-accent-hover); --orange-50:color-mix(in srgb,var(--labs-accent) 16%,transparent);
  --white:var(--labs-text); --charcoal:var(--labs-text); --blue-50:color-mix(in srgb,var(--labs-muted) 16%,transparent);
  --font:"Montserrat",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-weight:400;line-height:1.5;color:var(--text);background:var(--labs-base);-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.2;color:var(--text);font-weight:600}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s12)}
@media(max-width:760px){.wrap{padding:0 20px}}

/* focus states — WCAG AA (e2f3a4b5) */
a:focus-visible,button:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:2px}

/* skip-to-content link — a11y bypass block (e2f3a4b5) */
.skip{position:absolute;left:var(--s4);top:-48px;background:var(--labs-accent);color:var(--labs-base);font-weight:700;padding:var(--s3) var(--s4);border-radius:6px;z-index:100;transition:top .15s}
.skip:focus{top:var(--s4);text-decoration:none}
@media (prefers-reduced-motion:reduce){.skip{transition:none}}

/* ---- Nav ---- */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--labs-base) 90%,transparent);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;gap:var(--s8);height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--text);font-size:18px;letter-spacing:0}
.brand .glyph{width:22px;height:22px;flex:none}
header .brand .glyph line,header .brand .glyph path,header .brand .glyph ellipse,header .brand .glyph rect{stroke:var(--text)}
header .brand .glyph circle:not(:last-child){fill:var(--text)}
.navlinks{display:flex;gap:var(--s8);margin-left:var(--s8)}
.navlinks a{font-weight:500;font-size:15px;color:var(--muted);padding:6px 0;position:relative}
.navlinks a:hover{color:var(--text)}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--orange);transition:right .2s ease}
.navlinks a:hover::after,.navlinks a.active::after{right:0}
.navlinks a.active{color:var(--text);font-weight:600}
.navright{margin-left:auto;display:flex;align-items:center;gap:var(--s4)}
.btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:6px;font-family:var(--font);font-weight:600;font-size:14px;cursor:pointer;border:1px solid transparent;transition:background .15s ease,color .15s ease,border-color .15s ease}
.btn-primary{background:var(--orange);color:var(--labs-base)}
.btn-primary:hover{background:var(--orange-600);color:#fff}
.btn-primary svg [stroke]{stroke:currentColor}
.btn-primary svg [fill]:not([fill="none"]){fill:currentColor}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--muted);background:color-mix(in srgb,var(--labs-muted) 8%,transparent)}
.btn-quiet{background:color-mix(in srgb,var(--labs-muted) 8%,transparent);color:var(--muted);border:1px solid var(--line);height:38px;font-size:13px;font-weight:500}
.btn-quiet:hover{color:var(--text);border-color:var(--muted)}
.btn-quiet[aria-current="page"]{color:var(--text);border-color:var(--labs-accent);background:color-mix(in srgb,var(--orange) 8%,transparent)}
.btn-sm{height:38px;padding:0 14px;font-size:13px}
a[href="https://www.volantpartners.com/contact"]::after{
  content:"↗";
  margin-inline-start:.35em;
  color:var(--labs-accent);
  font-family:var(--mono);
  font-size:.85em;
  font-weight:700;
}
.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ico [stroke="var(--labs-elevated)"],.gl [stroke="var(--labs-elevated)"],.glyph [stroke="var(--labs-elevated)"]{stroke:var(--muted)}
.ico [fill="var(--labs-elevated)"],.gl [fill="var(--labs-elevated)"],.glyph [fill="var(--labs-elevated)"]{fill:var(--muted)}
header .brand .glyph [stroke="var(--labs-elevated)"],header .brand .glyph [stroke="var(--labs-muted)"]{stroke:var(--text)}
header .brand .glyph [fill="var(--labs-elevated)"],header .brand .glyph [fill="var(--labs-muted)"]{fill:var(--text)}
@media(max-width:880px){
  nav{height:auto;min-height:64px;align-items:flex-start;flex-wrap:wrap;padding:12px 0}
  .navlinks{order:3;width:100%;margin-left:0;gap:var(--s4);overflow-x:auto;padding-bottom:4px}
  .navlinks a{white-space:nowrap}
}
@media (max-width: 560px) {
  .navlinks {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: var(--s4);
  }
  .navlinks a {
    font-size:14px;
    white-space: nowrap;
  }
}
@media(max-width:520px){
  .brand{font-size:16px;gap:8px}
  .brand .glyph{width:20px;height:20px}
  .brand .labs-logo{width:50px;height:50px}
  .navright{width:auto;margin-left:auto}
  .navright .btn-ghost{width:auto;min-width:72px;padding:0 12px;font-size:13px;gap:8px}
  .navright .btn-primary{padding:0 12px}
}

/* ---- First viewport rhythm ---- */
.hero.hero-rhythm > .wrap,
.pagehead.pagehead-rhythm > .wrap{padding-top:var(--s24)}
.hero.hero-rhythm .hero-copy{align-self:start}
.pagehead.pagehead-rhythm > .wrap{padding-left:var(--s12);padding-right:var(--s12)}
.hero.hero-rhythm-story{align-items:flex-start}
@media(max-width:760px){
  .hero.hero-rhythm > .wrap,
  .pagehead.pagehead-rhythm > .wrap{padding-top:var(--s16)}
  .pagehead.pagehead-rhythm > .wrap{padding-left:20px;padding-right:20px}
}

/* ---- Section scaffolding ---- */
section.band{padding:var(--s24) 0}
@media(max-width:760px){section.band{padding:var(--s16) 0}}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s8)}
.band-head h2{font-size:clamp(24px,3vw,32px);font-weight:700}
.band-head > .lane{font-size:13px;font-weight:600;color:var(--text)}
.lead{font-size:17px;color:var(--muted);max-width:62ch;margin-top:var(--s2)}

/* ---- Footer ---- */
footer{background:#020815;color:var(--muted);padding:var(--s16) 0 var(--s8);border-top:1px solid var(--line)}
.foot-top{display:grid;grid-template-columns:minmax(360px,1fr) auto;gap:var(--s12);align-items:start;padding-bottom:var(--s8);border-bottom:1px solid var(--line)}
footer .brand{color:#fff}
.footer-brand-grid {
  display:flex;
  flex-direction:column;
  gap:var(--s6);
  max-width: min(680px, 100%);
}
.footer-brand{display:grid;grid-template-columns:50px minmax(0,1fr);grid-template-rows:auto auto;align-items:start;column-gap:12px;row-gap:4px}
.footer-brand .brand{display:contents;font-size:20px;line-height:1.2;font-weight:700;color:#fff}
.footer-brand .brand > img,
.footer-brand .brand > .footer-logo,
.footer-brand .brand > .labs-logo{grid-column:1;grid-row:1 / span 2;align-self:start}
.footer-brand .brand > .volant-partners-link{grid-column:2;grid-row:1}
.footer-brand p{grid-column:2;grid-row:2;min-width:0;margin:0;font-size:14px;color:#9aa0ab}
.footer-logo{display:block;width:50px;height:50px;object-fit:contain;flex:none}
.foot-cols{display:flex;gap:var(--s12);flex-wrap:wrap;justify-content:flex-end}
.foot-col h5{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7f90ad;font-weight:700;margin-bottom:var(--s3)}
.foot-col a{display:block;font-size:14px;color:var(--muted);padding:4px 0}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding-top:var(--s6);font-size:13px;color:#7f90ad}
.foot-bottom .nrp{color:#f2b293}
.volant-partners-link {
  color: inherit;
  text-decoration: none;
}
.volant-partners-link:hover {
  text-decoration: underline;
}
@media(max-width:960px){.foot-top{grid-template-columns:1fr}.foot-cols{justify-content:flex-start}}
@media(max-width:680px){.footer-brand-grid{max-width:100%}}

/* ---- Linked cards ---- */
a.card-link{color:inherit;text-decoration:none}
a.card-link:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:12px}
a.card-link .more{pointer-events:none}

/* ---- Global reduced-motion (a11y e2f3a4b5 · Motion a904a972) ----
   Applied site-wide so motion safety is consistent on every page. */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}