:root{
  --ink:#111827;
  --muted:#5b6472;
  --line:#e4e7ec;
  --paper:#f7f5f0;
  --white:#ffffff;
  --navy:#111827;
  --teal:#159ca8;
  --red:#b71918;
  --stone:#ebe7df;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
}

a{color:inherit;text-decoration:none}

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px clamp(20px,5vw,72px);
  border-bottom:1px solid rgba(17,24,39,.1);
  background:rgba(247,245,240,.92);
  backdrop-filter:blur(14px);
}

.brand img{
  display:block;
  width:140px;
  height:auto;
}

.nav{
  display:flex;
  gap:30px;
  align-items:center;
  font-size:15px;
  font-weight:650;
}

.nav a{color:#303847}
.nav a:hover{color:var(--teal)}

.nav-cta{
  padding:10px 18px;
  border-radius:999px;
  background:var(--navy);
  color:white!important;
}

.menu-toggle{
  display:none;
  border:1px solid var(--line);
  background:white;
  border-radius:999px;
  padding:9px 14px;
  font-weight:700;
}

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(320px,.72fr);
  gap:56px;
  align-items:center;
  min-height:calc(100vh - 88px);
  padding:76px clamp(20px,5vw,72px);
  background:radial-gradient(circle at 88% 16%, rgba(21,156,168,.18), transparent 30%),linear-gradient(135deg,#fbfaf7 0%,#f0ede6 100%);
}

.eyebrow{
  margin:0 0 18px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--teal);
}

.eyebrow.light{color:#8bd9de}

h1,h2,h3,p{margin-top:0}

h1{
  max-width:900px;
  margin-bottom:26px;
  font-size:clamp(48px,7vw,88px);
  line-height:1.06;
  letter-spacing:-.045em;
  font-weight:800;
}

h2{
  margin-bottom:22px;
  font-size:clamp(34px,4vw,56px);
  line-height:1.08;
  letter-spacing:-.035em;
}

h3{
  margin-bottom:12px;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.015em;
}

.hero-text{
  max-width:780px;
  margin-bottom:34px;
  font-size:clamp(19px,2.2vw,25px);
  color:#394150;
}

.hero-actions,
.contact-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:14px 22px;
  font-weight:800;
  border:1px solid transparent;
}

.primary{
  background:var(--navy);
  color:white;
}

.primary:hover{background:#263141}

.secondary{
  background:white;
  border-color:#ccd2db;
  color:var(--ink);
}

.secondary:hover{border-color:#8791a1}

.hero-card{
  border:1px solid rgba(17,24,39,.12);
  border-radius:32px;
  background:var(--white);
  box-shadow:0 28px 80px rgba(17,24,39,.12);
  padding:34px;
}

.card-number{
  display:block;
  margin-bottom:18px;
  font-size:84px;
  line-height:.9;
  font-weight:900;
  letter-spacing:-.06em;
  color:var(--teal);
}

.hero-card p{
  font-size:23px;
  line-height:1.28;
  font-weight:750;
}

.card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.card-tags span{
  padding:9px 12px;
  border-radius:999px;
  background:#f0f6f6;
  color:#14636a;
  font-size:13px;
  font-weight:800;
}

.section{
  padding:72px clamp(20px,5vw,72px);
}

.intro,
.credentials-section{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:64px;
  align-items:start;
}

.intro p,
.approach-copy p,
.contact-card p {
    font-size: 19px;
    color: #4b5565;
    margin-bottom: 1.25rem;
}

.section-heading{
  max-width:860px;
  margin-bottom:42px;
}

.services-section{background:white}

.services-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}

.service-card{
  padding:32px;
  border-radius:28px;
  border:1px solid var(--line);
  background:#faf9f6;
}

.service-card.feature-card{
  background:#111827;
  color:white;
  border-color:#111827;
}

.service-card p{color:#626b78}
.feature-card p{color:#d3d8df}

.service-card ul{
  display:grid;
  gap:10px;
  margin:22px 0 0;
  padding:0;
  list-style:none;
}

.service-card li{
  position:relative;
  padding-left:24px;
  color:#3e4856;
}

.feature-card li{color:#f4f7fa}

.service-card li:before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--teal);
}

.dark-panel{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:64px;
  background:var(--navy);
  color:white;
}

.dark-panel p{color:#dbe2eb}

.clients-section{background:#f0ede6}

.client-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.client-list span,
.credentials span{
  display:flex;
  align-items:center;
  min-height:64px;
  padding:16px 18px;
  border-radius:18px;
  background:white;
  border:1px solid var(--line);
  font-weight:750;
}

.credentials{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.contact-section{background:white}

.contact-card{
  max-width:940px;
  margin:auto;
  padding:46px;
  border-radius:34px;
  background:linear-gradient(135deg,#111827,#1f2937);
  color:white;
  text-align:center;
  box-shadow:0 28px 80px rgba(17,24,39,.18);
}

.contact-card p{
  max-width:710px;
  margin-left:auto;
  margin-right:auto;
  color:#d8dee8;
}

.contact-actions{
  justify-content:center;
  margin-top:30px;
}

.contact-card .secondary{
  background:transparent;
  color:white;
  border-color:rgba(255,255,255,.35);
}

.contact-card .primary{
  background:white;
  color:#111827;
}

.footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:28px clamp(20px,5vw,72px);
  background:#0b111d;
  color:#b6bfca;
  font-size:14px;
}

.footer p{margin:0}

@media(max-width:900px){
  html{
    scroll-padding-top:100px;
  }

  .menu-toggle{
    display:block;
  }

  .nav{
    display:none;
    position:absolute;
    left:20px;
    right:20px;
    top:76px;
    flex-direction:column;
    align-items:stretch;
    padding:18px;
    border:1px solid var(--line);
    border-radius:20px;
    background:white;
    box-shadow:0 24px 60px rgba(17,24,39,.16);
  }

  .nav-open .nav{
    display:flex;
  }

  .brand img{
    width:132px;
  }

  .hero,
  .intro,
  .dark-panel,
  .credentials-section{
    grid-template-columns:1fr;
  }

  .hero{
    gap:34px;
    min-height:auto;
    padding-top:54px;
  }

  .services-grid,
  .client-list,
  .credentials{
    grid-template-columns:1fr;
  }

  .section{
    padding-top:64px;
    padding-bottom:64px;
  }

  .footer{
    flex-direction:column;
  }

  .hero-card{
    padding:26px;
  }

  .card-number{
    font-size:68px;
  }
}

@media(max-width:520px){
  html{
    scroll-padding-top:95px;
  }

  h1{
    font-size:44px;
    line-height:1.08;
    letter-spacing:-.03em;
  }

  h2{
    line-height:1.1;
    letter-spacing:-.025em;
  }

  .hero-actions .button,
  .contact-actions .button{
    width:100%;
  }

  .contact-card{
    padding:32px 22px;
  }

  .site-header{
    padding-left:16px;
    padding-right:16px;
  }
}