/*
 * Homepage styles, from the approved mockup index.html.
 *
 * The homepage is one of the five runtime pages and carries its own style
 * layer, separate from the shared stylesheet the 17 static pages use. It is
 * enqueued on the front page only.
 *
 * Asset references were rewritten to self-hosted files; nothing else changed.
 */

:root{
    --navy:#1B2D73; --navy-deep:#14224F; --cream:#FAF8F2; --paper:#FFFFFF; --tint:#F5F6F6;
    --ink:#1E2430; --slate:#4B5058; --line:#E4E2DA; --gold:#C9A84C; --gold-deep:#9A7B2E; --radius:8px;
    --shadow-photo:0 20px 40px rgba(20,34,79,0.10);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--cream);color:var(--slate);font-family:'Instrument Sans',system-ui,sans-serif;font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit}
  ::selection{background:var(--navy);color:var(--cream)}
  @keyframes jcndMarquee{to{transform:translateX(-50%)}}
  .nav-links{display:flex;align-items:center;gap:26px}
  .nav-burger{display:none;background:none;border:none;cursor:pointer;color:var(--navy);font-size:30px;line-height:1;padding:4px 8px}
  .marquee{position:relative;overflow:hidden}
  .marquee-track{display:flex;width:max-content;animation:jcndMarquee 36s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .marquee-group{display:flex;align-items:center;gap:clamp(44px,5vw,76px);padding-right:clamp(44px,5vw,76px);flex:none}
  .marquee-group > *{align-self:center}
  .marquee-track{will-change:transform}
  .grid-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px)}
  .grid-cond{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px)}
  .grid-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,22px)}
  .split{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
  .split-prog{grid-template-columns:0.95fr 1.05fr}
  .split-web{grid-template-columns:1fr 400px;gap:clamp(28px,4vw,52px)}
  .split-about{grid-template-columns:0.82fr 1.18fr;gap:clamp(36px,5vw,80px)}
  .fw-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:end}
  .faq-grid{display:grid;grid-template-columns:360px 1fr;gap:clamp(32px,5vw,72px);align-items:start}
  .faq-side{position:sticky;top:32px}
  .lvl-row{display:grid;grid-template-columns:minmax(0,110px) 1fr;gap:clamp(20px,4vw,56px);align-items:center}
  .lvl-inner{display:grid;grid-template-columns:minmax(220px,0.9fr) 1.3fr;gap:clamp(8px,2vw,40px);align-items:baseline}
  .foot-grid{display:flex;gap:clamp(40px,5vw,64px);align-items:flex-start;flex-wrap:wrap}
  .tviewport{overflow:hidden}
  .ttrack{display:flex;gap:24px;transition:transform .35s ease}
  .tcard{flex:0 0 calc((100% - 48px)/3);min-width:0}
  .mitem{height:64px;display:flex;align-items:center;flex:none}
  .grid-cond > a:hover .cond-ico{background:var(--navy) !important;color:var(--cream) !important}
  .rev{opacity:0;transform:translateY(18px);transition:opacity .4s ease,transform .4s ease}
  .rev-in{opacity:1;transform:none}
  @media (max-width:1024px){
    .nav-links{display:none}
    .nav-burger{display:block}
    .split-prog,.split-web,.split-about,.fw-head,.faq-grid{grid-template-columns:1fr}
    .faq-side{position:static}
    .grid-cond{grid-template-columns:repeat(2,1fr)}
    .hero-card{min-height:620px !important}
    .web-photo{max-width:440px}
    .tcard{flex:0 0 calc(50% - 12px)}
  }
  @media (max-width:768px){
    .grid-trio{grid-template-columns:1fr}
    .tcard{flex:0 0 100%}
    .grid-stats{grid-template-columns:repeat(2,1fr);row-gap:38px}
    .statcell{border-left:none !important}
    .foot-grid{flex-direction:column;gap:40px}
    .hero-card{min-height:560px !important}
  }
  @media (max-width:480px){
    .grid-cond{grid-template-columns:1fr}
    .lvl-row{grid-template-columns:56px 1fr;gap:16px}
    .lvl-inner{grid-template-columns:1fr;gap:6px}
    .hero-card{min-height:520px !important}
    .marquee-group{gap:36px;padding-right:36px}
    .grid-stats{grid-template-columns:1fr;row-gap:32px}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important}
    .rev{opacity:1;transform:none}
    .marquee-track{width:100%;flex-wrap:wrap;justify-content:center}
    .marquee-group{flex-wrap:wrap;justify-content:center;padding-right:0}
    .marquee-group[aria-hidden="true"]{display:none}
  }