/* Pantheon Build — marketing site. Original pantheonbuild.com CSS; ONLY the :root palette below is re-mapped to the brand navy/amber system. Shared by index.html + about.html. */
:root{
  --ink:#000814; --body:#1C2B3D; --muted:#51617A; --faint:#8093A9;
  --page:#F7F9FC; --panel:#EFF3F8; --warm:#E9EEF5; --line:#DCE3EC;
  --accent:#A57C00; --gold:#FFD60A; --gold-dark:#8F6400; --amber:#FFC300;
  --navy:#003566; --navy-deep:#001D3D; --slate:#8093A9;
  --info:#2F6FB0; --ok:#2E7D52;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--page);color:var(--body);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.mono{font-family:'IBM Plex Sans',sans-serif}
.wrap{max-width:1060px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}

/* nav */
nav{position:sticky;top:0;z-index:40;background:rgba(248,248,247,.92);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:12px;height:80px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:56px;width:auto;max-width:200px;object-fit:contain}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto}
.nav-toggle span{width:24px;height:2px;background:var(--ink);transition:all .3s ease}
.navlinks{margin-left:auto;display:flex;align-items:center;gap:40px;font-size:14px;font-weight:600;color:var(--muted)}
.navlinks a:not(.btn){position:relative}
.navlinks a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.navlinks a:hover{color:var(--ink)}
.navlinks a:not(.btn):hover::after{transform:scaleX(1)}
.navlinks a.active{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;
     border-radius:8px;padding:11px 20px;font-size:14px;font-weight:600;transition:background .15s;cursor:pointer;border:none}
.btn:hover{background:var(--navy-deep)}
.btn .arrow{color:var(--gold)}
.btn-gold{background:var(--amber);color:var(--navy-deep)}
.btn-gold:hover{background:var(--gold-dark)}
.btn-gold:hover .arrow{color:var(--gold)}
.btn-gold .arrow{color:var(--navy-deep)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--navy);background:transparent}

.wordmark{font-weight:800;font-size:18px;letter-spacing:.14em;color:var(--ink)}
.wordmark .bp{color:var(--accent)}

/* hero */
.hero{padding:88px 0 72px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.eyebrow{font-family:'IBM Plex Sans',sans-serif;font-size:11px;letter-spacing:.16em;
         color:var(--accent);text-transform:uppercase;margin-bottom:18px}
h1{font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-.025em;line-height:1.08;color:var(--ink)}
.hero p.sub{margin:22px 0 30px;font-size:18px;color:var(--muted);max-width:520px}
.tagline{font-family:'IBM Plex Sans',sans-serif;font-size:11.5px;letter-spacing:.1em;
         line-height:2;color:var(--accent);text-transform:uppercase;margin-top:26px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-art img{width:100%;max-width:340px;display:block}

/* sections */
section{padding:76px 0}
.sec-eyebrow{font-family:'IBM Plex Sans',sans-serif;font-size:10.5px;letter-spacing:.16em;
             color:var(--accent);text-transform:uppercase;margin-bottom:10px}
h2{font-size:clamp(26px,3.4vw,34px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:14px}
.lede{font-size:17px;color:var(--muted);max-width:640px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);
      border-radius:0 0 12px 12px;padding:24px}
.card .k{font-family:'IBM Plex Sans',sans-serif;font-size:10px;letter-spacing:.12em;
         color:var(--accent);text-transform:uppercase}
.card h3{font-size:16.5px;font-weight:700;color:var(--ink);margin:8px 0 8px}
.card p{font-size:13.5px;color:var(--muted);line-height:1.55}

/* quote band */
.band{background:var(--navy-deep);color:#fff;padding:84px 0;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px);
  background-size:38px 38px}
.band .wrap{position:relative}
.band blockquote{font-size:clamp(24px,3.4vw,36px);font-weight:800;letter-spacing:-.02em;
                 line-height:1.25;max-width:820px}
.band blockquote em{color:var(--gold);font-style:normal}
.band .attr{margin-top:22px;font-family:'IBM Plex Sans',sans-serif;font-size:11px;
            letter-spacing:.14em;color:#ffffff66;text-transform:uppercase}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.pillar{border-top:3px solid var(--accent);background:#fff;border-left:1px solid var(--line);
        border-right:1px solid var(--line);border-bottom:1px solid var(--line);
        border-radius:0 0 12px 12px;padding:22px}
.pillar .n{font-family:'IBM Plex Sans',sans-serif;font-size:10px;color:var(--faint);letter-spacing:.14em}
.pillar h3{font-size:15.5px;font-weight:700;color:var(--ink);margin:8px 0 6px}
.pillar p{font-size:13px;color:var(--muted)}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px}
.step .num{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;
           display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Sans',sans-serif;
           font-size:13px;font-weight:700;margin-bottom:16px}
.step .num span{color:var(--gold)}
.step h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px}
.step p{font-size:13.5px;color:var(--muted)}

/* trust */
.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 32px;margin-top:40px}
.trust li{list-style:none;display:flex;gap:12px;font-size:14.5px;color:var(--body)}
.trust li::before{content:"✓";color:var(--accent);font-weight:700;flex-shrink:0}

/* founders / team (About) */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.person{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);
        border-radius:0 0 14px 14px;padding:28px;display:flex;gap:22px;align-items:center}
.headshot{width:96px;height:96px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
          justify-content:center;font-family:'IBM Plex Sans',sans-serif;font-size:26px;font-weight:700;
          color:var(--navy);background:linear-gradient(135deg,#E7E3DA,#F3F1EC);border:1px solid var(--line);overflow:hidden}
.headshot img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center}
.person .role{font-family:'IBM Plex Sans',sans-serif;font-size:10.5px;letter-spacing:.14em;
              color:var(--accent);text-transform:uppercase}
.person h3{font-size:21px;font-weight:800;color:var(--ink);margin:6px 0 4px}
.person a.mail{font-family:'IBM Plex Sans',sans-serif;font-size:13.5px;color:var(--info)}
.person a.mail:hover{text-decoration:underline}

.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.teammate{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;text-align:center}
.teammate .avatar{width:64px;height:64px;border-radius:50%;margin:0 auto 12px;background:var(--warm);
                  border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;
                  color:var(--faint);font-size:22px;overflow:hidden}
.teammate .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center}
.teammate h4{font-size:14.5px;font-weight:700;color:var(--ink)}
.teammate p{font-size:12px;color:var(--faint);margin-top:2px}
.teammate.placeholder h4{color:var(--faint)}

/* demo section + form */
.demo{background:var(--warm);border-top:1px solid var(--line)}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px;align-items:start}
.demo-copy p{font-size:15px;color:var(--muted);margin-bottom:16px}
.demo-copy .direct{font-family:'IBM Plex Sans',sans-serif;font-size:13px}
.demo-copy .direct a{color:var(--info)}
.demo-copy .direct a:hover{text-decoration:underline}
form.demo-form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px}
form.demo-form label{display:block;font-size:12px;font-weight:600;color:var(--body);margin:0 0 6px}
form.demo-form .field{margin-bottom:16px}
form.demo-form input,form.demo-form textarea{width:100%;border:1px solid var(--line);border-radius:8px;
  padding:11px 13px;font-size:14px;font-family:inherit;color:var(--ink);background:var(--page)}
form.demo-form input:focus,form.demo-form textarea:focus{outline:none;border-color:var(--accent)}
form.demo-form textarea{resize:vertical;min-height:88px}
form.demo-form button{width:100%;justify-content:center;margin-top:4px}

/* footer */
footer{padding:34px 0 44px;border-top:1px solid var(--line)}
.foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--faint)}
.foot img{width:24px;height:24px;object-fit:contain}
.foot .spacer{flex:1}
.foot a:hover{color:var(--ink)}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{max-width:320px;margin:0 auto}
  .cards,.steps{grid-template-columns:1fr 1fr}
  .pillars{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .demo-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-inner{height:64px}
  .brand img{height:40px;max-width:140px}
  .navlinks{gap:20px;font-size:13px}
  section{padding:56px 0}
  h1{font-size:clamp(28px,4vw,44px)}
  h2{font-size:clamp(22px,3vw,28px)}
  .hero{padding:56px 0 48px}
  .cta-row{gap:8px;flex-wrap:wrap}
  .btn{padding:10px 16px;font-size:13px}
  form.demo-form label{font-size:11px}
}
@media(max-width:600px){
  .nav-toggle{display:flex}
  .navlinks{position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0;margin:0}
  .navlinks.active{max-height:300px;padding:16px 28px;gap:16px}
  .navlinks a{padding:8px 0}
  .navlinks .btn{padding:14px 20px;width:100%;justify-content:center}
  .nav-toggle span:nth-child(2){transition-opacity .3s ease}
  .nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(8px,8px)}
  .nav-toggle.active span:nth-child(2){opacity:0}
  .nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}
  .cards,.steps,.pillars,.trust,.people,.team-grid{grid-template-columns:1fr}
  .navlinks .hide-sm{display:none}
  .person{flex-direction:column;text-align:center}
  .wrap{padding:0 16px}
  section{padding:44px 0}
  h1{font-size:clamp(24px,3.5vw,36px)}
  h2{font-size:clamp(20px,2.5vw,24px}
  .hero{padding:44px 0 36px}
  .eyebrow,.sec-eyebrow{font-size:10px}
  .hero p.sub,.lede{font-size:15px}
  .card,.step{padding:18px}
  .pillar{padding:16px}
  .person{gap:16px;padding:20px}
  .headshot{width:80px;height:80px}
  .teammate{padding:16px}
  .teammate .avatar{width:56px;height:56px;margin:0 auto 10px}
  .trust{grid-template-columns:1fr;gap:10px 0}
  .cta-row{gap:8px}
  .btn{padding:10px 14px;font-size:12px}
  .band blockquote{font-size:clamp(20px,2.5vw,28px}
  form.demo-form{padding:20px}
  form.demo-form input,form.demo-form textarea{padding:10px 12px;font-size:13px}
  .demo-grid{gap:24px}
  .demo-copy p{font-size:14px}
  .step .num{width:32px;height:32px;font-size:12px}
  .person .role{font-size:9px}
  .person h3{font-size:18px}
  .teammate h4{font-size:13px}
  .teammate p{font-size:11px}
}