:root{
  --paper:#f7f7f5;
  --ink:#0f172a;
  --accent:#03336e;
  --rust:#c75c3b;
  --muted:#64748b;
  --muted-bg:#e8eaef;
  --border:rgba(15,23,42,0.08);
  --card:#ffffff;
  --font-display:"Fraunces", Georgia, serif;
  --font-sans:"Inter", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
em{font-style:italic}
.display{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;line-height:0.95}
.mono{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase}
.accent{color:var(--accent)}
.muted{color:var(--muted)}
.italic{font-style:italic}
.container{max-width:1400px;margin:0 auto;padding:0 1.5rem;width:100%}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:var(--ink);color:var(--paper);padding:.5rem .75rem;z-index:100}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(247,247,245,0.6);border-bottom:1px solid var(--border);
  transition:background .3s ease;}
.nav.scrolled{background:rgba(247,247,245,0.92)}
.nav-inner{max-width:1400px;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{height:36px;width:36px;transition:transform .4s ease}
.brand:hover img{transform:rotate(20deg)}
.nav-links{display:none;gap:2.5rem}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--accent)}
.btn-cta{background:var(--accent);color:var(--paper);padding:.65rem 1rem;display:inline-flex;align-items:center;gap:.5rem;transition:background .2s}
.btn-cta:hover{background:var(--ink)}
.btn-cta span{transition:transform .2s}
.btn-cta:hover span{transform:translateX(4px)}
@media(min-width:900px){.nav-links{display:flex}}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:7rem 0 3rem}
.glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;animation:glow 6s ease-in-out infinite alternate}
.glow-a{top:25%;right:-10rem;width:700px;height:700px;background:rgba(3,51,110,0.08)}
.glow-b{bottom:-10rem;left:-10rem;width:600px;height:600px;background:rgba(199,92,59,0.10);animation-delay:-3s}
.glow-c{top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:800px;background:rgba(3,51,110,0.06)}
@keyframes glow{from{opacity:.6;transform:translate(0,0) scale(1)}to{opacity:1;transform:translate(0,-10px) scale(1.05)}}
.meta-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;color:var(--muted);font-size:.625rem;letter-spacing:.25em;margin-bottom:4rem}
@media(min-width:768px){.meta-row{grid-template-columns:repeat(4,1fr)}}
.meta-row .right{text-align:right}
.hide-sm{display:none}
@media(min-width:768px){.hide-sm{display:block}}

.headline{font-size:clamp(3.5rem,16vw,15rem);margin:0;letter-spacing:-0.04em}
.line{display:block;overflow:hidden}
.word{display:block;transform:translateY(110%);animation:rise .9s cubic-bezier(.22,1,.36,1) forwards}
.line:nth-child(1) .word{animation-delay:.15s}
.line:nth-child(2) .word{animation-delay:.27s}
.line:nth-child(3) .word{animation-delay:.39s}
.line:nth-child(4) .word{animation-delay:.51s}
@keyframes rise{to{transform:translateY(0)}}

.hero-foot{margin-top:4rem;display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:end}
@media(min-width:768px){.hero-foot{grid-template-columns:5fr 3fr 1fr}}
.lead{font-size:1.05rem;line-height:1.65;color:rgba(15,23,42,0.7);margin:0;max-width:36rem}
.btn-dark{background:var(--ink);color:var(--paper);padding:1rem 1.25rem;text-align:center;display:inline-block;transition:background .2s}
.btn-dark:hover{background:var(--accent)}
.scroll{color:var(--muted);font-size:.625rem;letter-spacing:.25em;text-align:right}

/* marquee */
.marquee{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--accent);color:var(--paper);padding:1.25rem 0;overflow:hidden}
.marquee-track{display:flex;gap:2.5rem;align-items:center;white-space:nowrap;width:max-content;animation:marquee 40s linear infinite;font-size:clamp(2rem,5vw,4rem)}
.marquee-track .star{font-size:1.5rem}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}

/* sections */
.section{padding:8rem 0;border-top:1px solid var(--border)}
.section-head{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:5rem}
@media(min-width:768px){.section-head{grid-template-columns:3fr 9fr}}
.section-head h2{margin:0;font-size:clamp(3rem,8vw,6rem)}

.rows{border-top:1px solid var(--border)}
.row{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:2.5rem .5rem;border-bottom:1px solid var(--border);align-items:center;transition:background .2s;cursor:pointer}
.row:hover{background:rgba(232,234,239,0.6)}
.row:hover .num{color:var(--accent)}
.row:hover h3{font-style:italic;color:var(--accent)}
.row .num{color:var(--muted);transition:color .2s}
.row h3{margin:0;font-size:clamp(1.8rem,4vw,3rem);transition:all .2s}
.row p{margin:0}
.row .tags{display:flex;flex-wrap:wrap;gap:.5rem;grid-column:1/-1}
.row .tags span{border:1px solid var(--border);padding:.25rem .5rem;color:var(--muted);font-size:.625rem}
@media(min-width:900px){
  .row{grid-template-columns:auto 5fr 4fr 2fr;gap:1.5rem}
  .row .tags{grid-column:auto;justify-content:flex-end}
}

.approach{background:rgba(232,234,239,0.4)}
.acts{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border)}
@media(min-width:768px){.acts{grid-template-columns:repeat(3,1fr)}}
.act{background:var(--paper);padding:3rem 2.5rem;min-height:360px;display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.act-n{font-size:4.5rem;font-style:italic}
.act h3{margin:0 0 .75rem;font-size:2rem}
.act p{margin:0}

.team{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border)}
@media(min-width:768px){.team{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);aspect-ratio:3/4;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;transition:background .25s,color .25s;cursor:pointer}
.card:hover{background:var(--accent);color:var(--paper)}
.card-top{display:flex;justify-content:space-between;font-size:.625rem}
.initials{font-size:clamp(3rem,6vw,5rem);font-style:italic;transition:transform .3s}
.card:hover .initials{transform:translateY(-4px)}
.name{font-size:1.15rem;line-height:1.1}
.role{margin-top:.5rem;font-size:.625rem;opacity:.7}

/* contact */
.contact{position:relative;overflow:hidden}
.contact-h{font-size:clamp(3rem,12vw,11rem);margin:0}
.contact-row{margin-top:5rem;display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:end}
@media(min-width:768px){.contact-row{grid-template-columns:1fr 1fr}}
.contact-ctas{display:flex;flex-wrap:wrap;gap:.75rem}
.contact-ctas .btn-cta{padding:1rem 1.5rem}
.btn-outline{border:1px solid var(--border);padding:1rem 1.5rem;transition:background .2s}
.btn-outline:hover{background:var(--muted-bg)}
.socials{display:flex;gap:1.5rem;color:var(--muted);justify-content:flex-start}
@media(min-width:768px){.socials{justify-content:flex-end}}
.socials a:hover{color:var(--accent)}
.foot{margin-top:6rem;padding-top:2.5rem;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;color:var(--muted);align-items:center;font-size:.625rem}
@media(min-width:768px){.foot{grid-template-columns:repeat(4,1fr)}}
.foot-brand{display:flex;align-items:center;gap:.75rem}
.foot-brand img{height:32px;width:32px}
.foot .right{text-align:right}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .word{transform:none}
}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

