:root{
  --navy:#032243; --navy-2:#0A2F55; --navy-deep:#021526;
  --orange:#FE7004; --teal:#019A98; --teal-lt:#3FC4C2;
  --ivory:#F6F4EF; --paper:#FFFFFF; --ink:#1B2433; --mut:#5B6472; --hairline:#E7E3DA;
  --disp:'Cormorant Garamond', Georgia, serif;
  --sans:'Montserrat', Arial, Helvetica, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.8;font-weight:400;font-size:16px}
::selection{background:var(--teal);color:#fff}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.thin{font-weight:300}

/* NAV - klay style: minimal, generous */
nav{position:sticky;top:0;left:0;right:0;z-index:80;padding:16px 0;background:#fff;border-bottom:1px solid var(--hairline);box-shadow:0 1px 0 rgba(3,34,67,.04)}
nav.solid{padding:12px 0}
.nav-in{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:40px}
.brand .bt{font:600 14px/1.1 var(--sans);letter-spacing:.18em;color:var(--navy)}
.brand .bs{display:block;font:500 7.5px/1 var(--sans);letter-spacing:.28em;color:var(--teal-lt);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:30px;font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.nav-links a{opacity:.9;transition:.2s;padding-bottom:4px;border-bottom:2px solid transparent;color:var(--navy)}
.nav-links a:hover{opacity:1;color:var(--teal);border-color:var(--teal)}
.nav-cta{background:var(--teal);color:#fff;border:1px solid var(--teal);padding:12px 24px;border-radius:2px;letter-spacing:.1em;font-weight:600}
.nav-cta:hover{background:var(--teal-lt);border-color:var(--teal-lt)}
.navtog{display:none}
@media(max-width:900px){
  .navtog{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:90}
  .navtog span{width:24px;height:2px;background:var(--navy);display:block;transition:.2s}
  .nav-links{position:absolute;top:64px;left:0;right:0;background:#fff;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);flex-direction:column;align-items:stretch;gap:0;padding:6px 0;display:none;box-shadow:0 22px 44px -26px rgba(3,34,67,.4)}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 24px;border-bottom:1px solid var(--hairline);border-radius:0}
  .nav-links a:last-child{border-bottom:none}
  .nav-links .has-drop{flex-direction:column;align-items:stretch}
  .nav-links .has-drop>a{justify-content:flex-start;padding:14px 24px;width:100%}
  .nav-links .has-drop>a::after{content:""}
  .nav-links .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;min-width:0;padding:0;background:var(--ivory)}
  .nav-links .drop a{padding:12px 38px;font-size:10px;color:var(--navy)}
  .nav-cta{display:none}
}

/* SPLASH - full screen statement (klay "Proud to be different") */
.splash{background:radial-gradient(1200px 700px at 80% 10%, #0E3A66 0%, transparent 55%), radial-gradient(900px 600px at 0% 100%, #073154 0%, transparent 50%), var(--navy);color:#fff;position:relative;overflow:hidden}

.splash-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 32px;width:100%}
.splash .kicker{font:500 12px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--teal-lt);margin-bottom:30px}


.splash .sub{font:300 clamp(17px,2vw,21px)/1.7 var(--sans);color:#C3CEDD;max-width:46ch;margin:28px 0 38px}
.splash .more{display:inline-flex;align-items:center;gap:12px;font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#fff;border-bottom:1px solid var(--teal);padding-bottom:8px;transition:.25s}
.splash .more:hover{gap:20px;color:var(--teal-lt)}
.scrollcue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;color:#8FA3BC;font:500 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;text-align:center}
.scrollcue .ln{display:block;width:1px;height:46px;background:linear-gradient(var(--teal-lt),transparent);margin:14px auto 0}

/* APPROACH - klay intro with bold phrases */
.approach{padding:130px 0;background:var(--paper)}
.approach .eyebrow{font:500 12px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--teal);margin-bottom:34px}
.approach p{font:400 clamp(22px,3vw,34px)/1.5 var(--disp);color:var(--navy);margin-bottom:28px;max-width:24ch}
.approach .body{max-width:880px}
.approach .body p{max-width:none}
.approach b{font-weight:600;font-style:italic;color:var(--navy)}
.approach .more{display:inline-flex;align-items:center;gap:12px;font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--teal);border-bottom:1px solid var(--teal);padding-bottom:8px;margin-top:18px;transition:.25s}
.approach .more:hover{gap:20px;color:var(--orange);border-color:var(--orange)}

/* VENTURES - klay service cards, large, alternating */
.ventures{background:var(--ivory);padding:40px 0 130px}
.vhead{text-align:center;padding:90px 0 10px}
.vhead .eyebrow{font:500 12px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--teal);margin-bottom:18px}
.vhead h2{font:400 clamp(34px,5vw,56px)/1.1 var(--disp);color:var(--navy)}
.vrow{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--hairline)}
.vrow:last-child{border-bottom:1px solid var(--hairline)}
.vcell{padding:64px 56px;border-right:1px solid var(--hairline);position:relative;background:var(--ivory);transition:background .35s}
.vcell:nth-child(2n){border-right:none}
.vcell:hover{background:#fff}
.vcell .num{font:400 16px/1 var(--disp);color:var(--teal);letter-spacing:.1em}
.vcell h3{font:500 30px/1.15 var(--disp);color:var(--navy);margin:14px 0 14px}
.vcell p{font:400 15px/1.7 var(--sans);color:#4A5568;max-width:42ch;margin-bottom:24px}
.vcell .lm{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--teal);display:inline-flex;gap:10px;transition:.25s}
.vcell:hover .lm{gap:18px;color:var(--orange)}
@media(max-width:820px){.vrow{grid-template-columns:1fr}.vcell{border-right:none;padding:48px 32px}}

/* CULTURE / built to thrive */
.culture{background:var(--navy);color:#fff;padding:140px 0;position:relative;overflow:hidden}
.culture .markghost{position:absolute;left:-6%;bottom:-10%;width:38%;opacity:.07}
.culture-in{position:relative;z-index:2;max-width:760px}
.culture .eyebrow{font:500 12px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--teal-lt);margin-bottom:26px}
.culture h2{font:400 clamp(36px,5.5vw,64px)/1.08 var(--disp);margin-bottom:24px}
.culture p{font:300 18px/1.8 var(--sans);color:#C3CEDD;margin-bottom:34px}
.culture .more{display:inline-flex;align-items:center;gap:12px;font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#fff;border-bottom:1px solid var(--teal);padding-bottom:8px;transition:.25s}
.culture .more:hover{gap:20px;color:var(--teal-lt)}

/* PRINCIPLES (klay's three pillars vibe) */
.pillars{padding:120px 0;background:var(--paper)}
.pillars .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:20px}
.pillar .pi{width:46px;height:46px;border-radius:50%;border:1px solid var(--teal);display:flex;align-items:center;justify-content:center;color:var(--teal);font:400 20px/1 var(--disp);margin-bottom:22px}
.pillar h3{font:500 24px/1.2 var(--disp);color:var(--navy);margin-bottom:12px}
.pillar p{font:400 15px/1.75 var(--sans);color:#4A5568}
@media(max-width:820px){.pillars .grid{grid-template-columns:1fr;gap:40px}}

/* TESTIMONIALS / what founders say */
.tnote{background:var(--ivory);padding:130px 0;text-align:center}
.tnote .eyebrow{font:500 12px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--teal);margin-bottom:40px}
.quote{max-width:880px;margin:0 auto}
.quote p{font:400 italic clamp(24px,3.4vw,38px)/1.4 var(--disp);color:var(--navy);font-style:italic}
.quote .who{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-top:30px}

/* CTA */
.cta{background:var(--navy-deep);color:#fff;text-align:center;padding:130px 0}
.cta h2{font:400 clamp(34px,5vw,58px)/1.1 var(--disp);margin-bottom:22px}
.cta p{font:300 18px/1.7 var(--sans);color:#A9B6C8;max-width:52ch;margin:0 auto 40px}
.cta .btn{display:inline-block;background:var(--teal);color:#fff;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:18px 40px;border-radius:2px;transition:.25s}
.cta .btn:hover{background:var(--teal-lt);transform:translateY(-2px)}
.cta .btn:active{background:var(--orange)}

/* FOOTER */
footer{background:#01101f;color:#7E8DA3;padding:70px 0 40px;font-size:13px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;margin-bottom:44px}
footer h4{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:18px}
footer a{display:block;margin-bottom:11px;opacity:.8;transition:.2s}
footer a:hover{opacity:1;color:var(--teal-lt)}
footer .base{border-top:1px solid rgba(255,255,255,.1);padding-top:26px;text-align:center;letter-spacing:.06em}
footer b{color:var(--teal-lt);letter-spacing:.2em}
@media(max-width:760px){footer .cols{grid-template-columns:1fr}}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease, transform .9s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* INTRO OVERLAY */
#intro{position:fixed;inset:0;z-index:200;background:
  radial-gradient(1100px 760px at 50% 42%, #FFFFFF 0%, #F2EFE8 60%, #ECE8DF 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:introOut 1.1s ease 4s forwards}
#intro .intro-mark img{width:min(300px,52vw);height:auto;
  opacity:0;transform:scale(.82) translateY(10px);
  animation:markIn 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards;
  filter:drop-shadow(0 24px 50px rgba(3,34,67,.18))}
#intro .intro-word{margin-top:34px;font:600 clamp(18px,3vw,30px)/1 var(--sans);
  letter-spacing:.34em;color:var(--navy);opacity:0;animation:fadeUp .8s ease 1s forwards}
#intro .intro-tag{margin-top:14px;font:500 11px/1 var(--sans);letter-spacing:.4em;
  color:var(--teal);opacity:0;animation:fadeUp .8s ease 1.3s forwards}
@keyframes markIn{to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes introOut{to{opacity:0;visibility:hidden;pointer-events:none}}
body{overflow-x:hidden}
/* hold splash content until intro nearly done */



@media(prefers-reduced-motion:reduce){#intro{animation:introOut .1s forwards}
  #intro .intro-mark img,#intro .intro-word,#intro .intro-tag{animation:none;opacity:1;transform:none}
  }


/* ---- DRAFT-STYLE HERO ---- */

.herocopy .kicker{margin-bottom:24px}

.herohead em{font-family:var(--disp);font-weight:500;font-style:italic;color:var(--orange);letter-spacing:0}
.herosub{font:300 clamp(16px,1.5vw,19px)/1.7 var(--sans);color:#C3CEDD;max-width:46ch;margin:26px 0 34px}
.herobtns{display:flex;gap:16px;flex-wrap:wrap}
.heromark{display:flex;justify-content:center;align-items:center;padding-left:20px}
.heromark img{width:min(380px,90%);height:auto;filter:drop-shadow(0 26px 54px rgba(0,0,0,.42));animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.herostats{max-width:1180px;margin:10px auto 0;padding:0 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.herostats .hs{padding:28px 18px 40px;text-align:center;border-right:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.14)}
.herostats .hs:last-child{border-right:none}
.herostats .hs b{display:block;font:500 clamp(28px,3.4vw,42px)/1 var(--disp);color:var(--teal-lt)}
.herostats .hs span{display:block;margin-top:10px;font:600 10px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#9FB1C8}
@media(max-width:880px){.heroflex{grid-template-columns:1fr;text-align:left;min-height:auto;padding-top:30px}.heromark{order:-1;margin-bottom:10px}.heromark img{width:min(280px,60%)}.herostats{grid-template-columns:1fr 1fr;gap:0}.herostats .hs:nth-child(2){border-right:none}}


/* home nav dropdown */
.nav-links .has-drop{position:relative;display:inline-flex;align-items:center}
.nav-links .has-drop>a::after{content:" \25BE";font-size:9px;color:var(--teal-lt)}
.nav-links .drop{position:absolute;top:100%;left:-16px;min-width:240px;background:#fff;border-top:3px solid var(--teal);box-shadow:0 24px 50px -28px rgba(3,34,67,.5);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;z-index:90}
.nav-links .has-drop:hover .drop{opacity:1;visibility:visible;transform:none}
.nav-links .drop a{display:block;padding:11px 22px;font:600 11px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);opacity:1;border:none}
.nav-links .drop a:hover{background:var(--ivory);color:var(--teal)}


/* hero buttons */
.herobtns .btn{display:inline-block;background:var(--teal);color:#fff;font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:16px 30px;border-radius:2px;transition:.25s;border:1px solid var(--teal)}
.herobtns .btn:hover{background:var(--teal-lt);border-color:var(--teal-lt)}
.herobtns .btn:active{background:var(--orange);border-color:var(--orange)}
.herobtns .btn.outline{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
.herobtns .btn.outline:hover{background:rgba(255,255,255,.08);border-color:#fff}


/* hero marquee */
.heromarquee{background:var(--teal);overflow:hidden;margin-top:0}
.mqtrack{display:inline-flex;align-items:center;white-space:nowrap;padding:14px 0;animation:mqscroll 32s linear infinite;will-change:transform}
.mqtrack span{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#fff;padding:0 22px}
.mqtrack i{color:rgba(255,255,255,.6);font-size:8px;font-style:normal}
@keyframes mqscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mqtrack{animation:none}}


/* ===== HERO (draft match) ===== */
.splash{min-height:auto}
.hero-main{max-width:1180px;margin:0 auto;padding:80px 32px 30px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}
.hero-copy .kicker{margin-bottom:22px}
.splash h1.herohead{font:700 clamp(32px,4.4vw,56px)/1.1 var(--sans);color:#fff;letter-spacing:-.01em;margin:0}
.herohead em{font-family:var(--disp);font-weight:500;font-style:italic;color:var(--orange);letter-spacing:0}
.herosub{font:300 clamp(15px,1.4vw,18px)/1.7 var(--sans);color:#C3CEDD;max-width:44ch;margin:24px 0 32px}
.herobtns{display:flex;gap:14px;flex-wrap:wrap}
.herobtns .btn{display:inline-block;background:var(--teal);color:#fff;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:16px 28px;border-radius:2px;transition:.25s;border:1px solid var(--teal)}
.herobtns .btn:hover{background:var(--teal-lt);border-color:var(--teal-lt)}
.herobtns .btn:active{background:var(--orange);border-color:var(--orange)}
.herobtns .btn.outline{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
.herobtns .btn.outline:hover{background:rgba(255,255,255,.08);border-color:#fff}
.hero-mark{display:flex;justify-content:center;align-items:center}
.hero-mark img{width:min(400px,86%);height:auto;filter:drop-shadow(0 26px 54px rgba(0,0,0,.42));animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.hero-stats{max-width:1180px;margin:0 auto;padding:0 32px 44px;display:grid;grid-template-columns:repeat(4,1fr)}
.hero-stats .hs{text-align:center;padding:24px 16px;border-right:1px solid rgba(255,255,255,.14)}
.hero-stats .hs:last-child{border-right:none}
.hero-stats .hs b{display:block;font:500 clamp(26px,3vw,38px)/1 var(--disp);color:var(--teal-lt)}
.hero-stats .hs span{display:block;margin-top:8px;font:600 9.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#9FB1C8}
.hero-marquee{background:var(--teal);overflow:hidden}
.hero-marquee .mqtrack{display:inline-flex;align-items:center;white-space:nowrap;padding:13px 0;animation:mqscroll 34s linear infinite;will-change:transform}
.hero-marquee .mqtrack span{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#fff;padding:0 22px}
.hero-marquee .mqtrack i{color:rgba(255,255,255,.55);font-size:8px;font-style:normal}
@keyframes mqscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:880px){
  .hero-main{grid-template-columns:1fr;gap:24px;padding-top:50px}
  .hero-mark{order:-1}.hero-mark img{width:min(240px,55%)}
  .hero-stats{grid-template-columns:1fr 1fr}
  .hero-stats .hs:nth-child(2){border-right:none}
}
@media(prefers-reduced-motion:reduce){.hero-marquee .mqtrack{animation:none}}


@media(max-width:600px){
  .brand .bt{font-size:13px;letter-spacing:.12em}
  .brand .bs{letter-spacing:.16em}
  .brand img{height:34px}
  .splash h1.herohead{font-size:30px;line-height:1.12}
  .hero-main{padding:36px 22px 24px;gap:18px}
  .hero-mark img{width:min(190px,52%)}
  .herosub{font-size:15px;margin:18px 0 26px}
  .herobtns{flex-direction:column;align-items:stretch}
  .herobtns .btn{text-align:center;width:100%}
  .hero-stats{grid-template-columns:1fr 1fr;padding:0 22px 30px}
  .hero-stats .hs{padding:18px 10px}
  .hero-stats .hs:nth-child(2){border-right:none}
  .hero-stats .hs:nth-child(1),.hero-stats .hs:nth-child(2){border-bottom:1px solid rgba(255,255,255,.14)}
  .hero-marquee .mqtrack span{font-size:10px;padding:0 16px}
  .vcell{padding:34px 24px}
  .vcell h3{font-size:25px}
  .culture{padding:80px 0}
  .culture h2{font-size:34px}
  .pillars{padding:70px 0}
  .tnote{padding:80px 0}
  .quote p{font-size:22px}
  .cta{padding:80px 0}
}