:root{--teal:#0d6b73;--navy:#12333a;--gold:#c7a56a;--cream:#f7f3ea;--text:#26363a}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);line-height:1.6}
a{color:inherit}
.container{width:min(1350px,92%);margin:auto}

.topbar{background:var(--navy);color:white;font-size:.9rem}
.topbar .container{width:min(1350px,92%);margin:auto;display:flex;justify-content:space-between;padding:7px 0}

header{position:sticky;top:0;background:white;border-bottom:1px solid #ddd;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;padding:15px 0}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none}
.logo{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px}
.logo img{width:48px;height:48px;object-fit:contain;display:block}
.brand strong{display:block;color:var(--teal);letter-spacing:.08em;font-size:1.05rem}
.brand span{display:block;color:#667;letter-spacing:.16em;font-size:.72rem}
.navlinks{display:flex;gap:20px;align-items:center}
.navlinks a{text-decoration:none;font-weight:bold}
.btn{display:inline-block;background:var(--teal);color:white;text-decoration:none;padding:12px 20px;border-radius:7px;font-weight:bold;border:2px solid var(--teal)}
.btn.alt{background:white;color:var(--teal)}

.hero{position:relative;overflow:hidden;min-height:685px;padding:75px 0;background:linear-gradient(120deg,#edf6f3,#fff,#f6f0e4)}
.hero-bg{
 position:absolute;inset:0;
 background-image:
 linear-gradient(90deg,
   rgba(247,243,234,1) 0%,
   rgba(247,243,234,1) 32%,
   rgba(247,243,234,.99) 40%,
   rgba(247,243,234,.94) 46%,
   rgba(247,243,234,.78) 52%,
   rgba(247,243,234,.56) 58%,
   rgba(247,243,234,.30) 64%,
   rgba(247,243,234,.08) 70%,
   rgba(247,243,234,0) 76%),
 url('cls_basse_pic.jpg');
 background-size:100% 100%,58% 100%;
 background-position:center,right center;
 background-repeat:no-repeat
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;align-items:center;height:100%}
.hero-copy{max-width:560px;padding:35px 0;margin-left:0}
.eyebrow{color:var(--teal);font-weight:bold;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem}
.hero h1{font-size:clamp(3rem,5vw,4.5rem);line-height:1.05;color:var(--navy);margin:12px 0}
.hero p{font-size:1.18rem;color:#526367;max-width:650px}
.hero-buttons{margin-top:18px}
.values{margin-top:34px;color:var(--teal);font-size:1rem;font-weight:bold;letter-spacing:.18em;display:flex;align-items:center;gap:26px}
.values b{font-size:1rem;letter-spacing:0}

section{padding:70px 0}
.band{background:var(--cream)}
.section-head{max-width:760px;margin:0 auto 38px;text-align:center}
.section-head h2{font-size:2.25rem;color:var(--navy);margin:0 0 10px}
.section-head p{color:#647477}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card,.hero-card{padding:27px;background:white;border:1px solid #e6e2d9;border-radius:14px}
.card h3,.hero-card h3{color:var(--teal)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:white;padding:25px;border-radius:12px;border-top:5px solid var(--gold)}
.step b{color:var(--teal);font-size:1.5rem}
.about-grid,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}
.contact{background:var(--navy);color:white}
.contact h2{color:white}
.contact-card{background:white;color:var(--text);padding:30px;border-radius:14px}
.contact-card a{color:var(--teal);font-weight:bold}
footer{background:#09252a;color:#dce9e9;padding:28px 0}
.footer-grid{display:flex;justify-content:space-between;gap:20px}
.small{font-size:.9rem;color:#b8c8c9}
input,textarea{font:inherit;border:1px solid #ccc;border-radius:5px}
button{font:inherit}

@media(max-width:800px){
 .navlinks{display:none}
 .hero{min-height:650px}
 .hero-bg{
   background-size:100% 100%,cover;
   background-position:center,65% center
 }
 .hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
 .hero-copy{max-width:100%;padding:25px 0;margin-left:0}
 .cards{grid-template-columns:1fr}
 .steps{grid-template-columns:1fr 1fr}
 .topbar .container,.footer-grid{flex-direction:column}
 .values{gap:12px;letter-spacing:.1em}
}
@media(max-width:500px){
 .steps{grid-template-columns:1fr}
 .hero h1{font-size:2.8rem}
 .values{font-size:.85rem;gap:7px;letter-spacing:.05em}
}