:root{--ink:#0b2a3c;--teal:#12817f;--teal-d:#0d6462;--mist:#eaf3f5;--amber:#f2a93b;--text:#33505f;--white:#fff;--r:18px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:'Instrument Sans',system-ui,sans-serif;color:var(--text);background:var(--white);line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block;background:var(--mist)}
a{color:inherit}
h1,h2,h3,.logo{font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);line-height:1.1}
h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em}
h3{font-size:1.25rem;font-weight:700}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

.btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;font-weight:600;padding:.9rem 1.6rem;border-radius:999px;border:2px solid var(--teal);cursor:pointer;font:inherit;font-weight:600;transition:transform .25s,background .25s}
.btn:hover{background:var(--teal-d);transform:translateY(-2px)}
.btn-sm{padding:.55rem 1.2rem}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:1rem 5vw;transition:background .3s,box-shadow .3s,padding .3s}
.nav.solid{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 2px 20px rgba(11,42,60,.08);padding:.7rem 5vw}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.3rem;text-decoration:none}
.logo-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--ink);color:var(--amber)}
.nav nav{display:flex;align-items:center;gap:1.8rem}
.nav nav a:not(.btn){text-decoration:none;font-weight:500;color:var(--ink)}
.nav nav a:not(.btn):hover{color:var(--teal)}
.burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;position:relative}
.burger span{position:absolute;left:8px;right:8px;height:2px;background:var(--ink);transition:.3s}
.burger span:first-child{top:15px}.burger span:last-child{top:23px}
.burger[aria-expanded=true] span:first-child{top:19px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:19px;transform:rotate(-45deg)}

.hero{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;gap:4vw;align-items:center;padding:7rem 5vw 4rem;background:linear-gradient(120deg,var(--mist),#fff 70%)}
.hero-tag{color:var(--teal);font-weight:600;margin-bottom:1rem}
.hero-title{font-size:clamp(2.8rem,7vw,5.4rem);font-weight:800;letter-spacing:-.03em}
.line{display:block;overflow:hidden;padding-bottom:.08em}
.line>span{display:block;transform:translateY(110%);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.line:nth-child(2)>span{animation-delay:.15s}
@keyframes rise{to{transform:none}}
.hero-sub{max-width:34rem;margin:1.5rem 0 2rem;font-size:1.1rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem}
.hero-img{position:relative}
.hero-img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r) var(--r) 180px var(--r)}
.float-card{position:absolute;left:-1.5rem;bottom:2rem;background:#fff;padding:1rem 1.3rem;border-radius:14px;box-shadow:0 18px 40px rgba(11,42,60,.18);max-width:250px;display:grid;gap:.2rem;font-size:.92rem;animation:bob 5s ease-in-out infinite}
.float-card strong{color:var(--ink)}
@keyframes bob{50%{transform:translateY(-10px)}}

.strip{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink);color:#fff;text-align:center;padding:2.2rem 5vw;gap:1rem}
.strip b{display:block;font-family:'Bricolage Grotesque';font-size:2rem;color:var(--amber)}
.strip span{opacity:.85}

.section{padding:6rem 5vw}
.head{max-width:40rem;margin:0 auto 3.5rem;text-align:center}
.head p{margin-top:1rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;max-width:1200px;margin:auto}
.card{background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid #dbe7eb;transition:transform .35s,box-shadow .35s}
.card:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(11,42,60,.12)}
.card img{width:100%;height:210px;object-fit:cover;transition:transform .6s}
.card:hover img{transform:scale(1.05)}
.card>div{padding:1.5rem;display:grid;gap:.7rem;overflow:hidden}
.card a{color:var(--teal);font-weight:600}

.split{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;max-width:1200px;margin:auto}
.split-img img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r)}
.split-text{display:grid;gap:1.2rem;justify-items:start}

.dark{background:var(--ink);color:#c4d6de}
.dark h2,.dark h3{color:#fff}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:1200px;margin:auto;counter-reset:s}
.steps li{border-top:2px solid rgba(255,255,255,.2);padding-top:1.4rem;display:grid;gap:.6rem;align-content:start}
.steps span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--amber);color:var(--ink);font-weight:800}

.why{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:1200px;margin:auto}
.why div{padding-left:1.2rem;border-left:3px solid var(--teal);display:grid;gap:.4rem;align-content:start}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:5vw;background:var(--mist);align-items:start}
.contact>div{display:grid;gap:1rem;max-width:30rem;justify-self:end}
.info{list-style:none;display:grid;gap:.8rem;margin-top:.5rem}
.info b{display:block;color:var(--ink)}
.info a{text-decoration:none;color:var(--teal);font-weight:600}
.form{background:#fff;padding:2rem;border-radius:var(--r);display:grid;gap:1rem;max-width:34rem;box-shadow:0 20px 50px rgba(11,42,60,.1)}
.form label{display:grid;gap:.35rem;font-weight:500;color:var(--ink)}
.form input,.form select,.form textarea{font:inherit;padding:.8rem 1rem;border:1.5px solid #c9d9df;border-radius:10px;background:#fff;color:var(--ink);transition:border-color .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--teal)}
.form .invalid{border-color:#c0392b}
.note{min-height:1.4em;font-size:.95rem;color:var(--teal-d)}

.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:1.6rem 5vw;background:var(--ink);color:#c4d6de;font-size:.92rem}

/* reveal animations */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.reveal.from-left{transform:translateX(-60px)}
.reveal.from-right{transform:translateX(60px)}
.reveal.in{opacity:1;transform:none}

@media(max-width:960px){
  .hero,.split,.contact{grid-template-columns:1fr}
  .hero{padding-top:6.5rem}
  .float-card{left:1rem}
  .cards{grid-template-columns:1fr}
  .steps,.why{grid-template-columns:repeat(2,1fr)}
  .contact>div{justify-self:start}
  .burger{display:block}
  .nav nav{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;justify-content:center;gap:1.6rem;height:100vh;background:#fff;transform:translateY(-100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);font-size:1.3rem}
  .nav nav.open{transform:none}
  .burger{z-index:2}
}
@media(max-width:560px){
  .strip,.steps,.why{grid-template-columns:1fr}
  .section{padding:4.5rem 6vw}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .line>span{transform:none}
}