:root {
  --navy: #19333f;
  --navy-deep: #102a35;
  --teal: #08758a;
  --teal-dark: #075d70;
  --teal-soft: #dff0f3;
  --ink: #26343a;
  --muted: #66747a;
  --line: #dce4e6;
  --white: #ffffff;
  --offwhite: #f7f9f9;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "DM Sans", Arial, sans-serif;
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
.container { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }

.site-header {
  height: 98px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #edf0f1;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
}
.nav-wrap { height: 100%; display:flex; align-items:center; justify-content:space-between; }
.brand img { width: 300px; max-width: 62vw; display:block; }
.nav { display:flex; gap: 44px; align-items:center; }
.nav a {
  font-size: 13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--navy);
}
.nav a:hover { color:var(--teal); }
.menu-toggle { display:none; border:0; background:none; font-size:28px; color:var(--navy); }

.hero {
  min-height: 560px;
  background: linear-gradient(90deg, #fff 0%, #fff 47%, #f5f8f8 100%);
  overflow:hidden;
}
.hero-grid { min-height:560px; display:grid; grid-template-columns: 52% 48%; align-items:center; }
.hero-copy { padding: 65px 20px 65px 0; position:relative; z-index:2; }
.eyebrow { color:var(--teal); font-weight:800; font-size:13px; letter-spacing:.17em; margin:0 0 10px; }
h1,h2 { font-family:"Playfair Display", Georgia, serif; color:var(--navy); line-height:1.12; font-weight:600; margin:0; }
h1 { font-size:clamp(42px, 4.6vw, 68px); max-width:700px; }
h1 span { color:#274650; }
h2 { font-size:clamp(34px, 4vw, 48px); }
.accent-line { width:78px; height:4px; background:var(--teal); margin:28px 0 25px; }
.hero-text { max-width:590px; font-size:18px; color:#4c5b61; }
.button {
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:17px; padding:14px 28px; border-radius:5px;
  background:var(--teal); color:white; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; font-size:13px;
  transition:.2s ease;
}
.button:hover { background:var(--teal-dark); transform:translateY(-1px); }

.hero-art { height:560px; position:relative; overflow:hidden; }
.paper { position:absolute; width:430px; height:280px; background:#fff; box-shadow:0 14px 35px rgba(16,42,53,.08); transform:rotate(8deg); right:-30px; top:125px; }
.paper-two { transform:rotate(-4deg); right:65px; top:170px; opacity:.8; }
.calculator {
  position:absolute; right:115px; top:70px; width:230px; height:295px;
  padding:22px; background:#26363b; border-radius:17px;
  transform:rotate(6deg); box-shadow:0 20px 30px rgba(16,42,53,.2);
}
.display { height:43px; background:#aebbb5; border-radius:5px; margin-bottom:18px; box-shadow:inset 0 2px 5px rgba(0,0,0,.2); }
.calc-row { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:9px; }
.calc-row i { display:block; height:32px; background:#3f4e53; border-radius:5px; box-shadow:inset 0 -2px 0 rgba(0,0,0,.25); }
.chart { position:absolute; right:105px; bottom:90px; display:flex; align-items:end; gap:10px; transform:rotate(-2deg); }
.bar { width:28px; border-radius:3px 3px 0 0; background:var(--teal); }
.b1{height:35px}.b2{height:55px}.b3{height:85px}.b4{height:120px}
.pie { position:absolute; right:330px; bottom:72px; width:120px; height:120px; border-radius:50%; background:conic-gradient(var(--teal) 0 35%, #8ebfc8 35% 63%, #d6e7ea 63% 100%); box-shadow:0 7px 20px rgba(16,42,53,.1); }
.pen { position:absolute; width:260px; height:10px; background:linear-gradient(90deg,#a8b2b5,#eef2f2,#88969a); border-radius:50px; right:270px; bottom:78px; transform:rotate(-28deg); box-shadow:0 3px 7px rgba(0,0,0,.16); }

.section { padding:95px 0; }
.section-heading { text-align:center; max-width:900px; margin:0 auto 60px; }
.section-heading h2 { margin-top:4px; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.service-card { text-align:center; padding:0 32px; border-right:1px solid var(--line); }
.service-card:last-child { border-right:0; }
.icon-circle {
  width:104px; height:104px; border-radius:50%; margin:0 auto 22px;
  display:grid; place-items:center; background:#edf3f4; color:var(--teal);
  font-size:35px; font-weight:800;
}
.service-card:nth-child(3) .icon-circle { font-size:19px; }
.service-card h3, .benefit h3 { text-transform:uppercase; letter-spacing:.08em; font-size:14px; color:var(--navy); margin:0 0 10px; }
.service-card p { color:var(--muted); margin:0; font-size:14px; }

.why-us { padding:85px 0 95px; background:linear-gradient(135deg,#075d70,#126e80); color:white; }
.light h2, .light .eyebrow { color:white; }
.light .eyebrow { opacity:.95; }
.benefit-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.benefit { text-align:center; padding:0 30px; border-right:1px solid rgba(255,255,255,.35); }
.benefit:last-child { border-right:0; }
.benefit-icon { font-size:48px; line-height:1; margin-bottom:22px; }
.benefit h3 { color:white; }
.benefit p { color:rgba(255,255,255,.9); font-size:14px; margin:0; }

.about { background:var(--offwhite); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.about-grid h2 { margin-top:8px; }
.about-grid > p { font-size:17px; color:var(--muted); margin:0; }

.contact { padding:85px 0; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.contact h2 { margin:5px 0 20px; max-width:500px; }
.contact p { color:var(--muted); max-width:570px; }
.contact-details { border-left:1px solid var(--line); padding-left:55px; display:grid; gap:25px; color:var(--navy); font-weight:600; }
.contact-details a, .contact-details div { display:flex; align-items:center; gap:18px; }
.contact-details span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--teal); color:white; flex:0 0 42px; }

.footer { background:var(--navy-deep); color:white; padding:28px 0; }
.footer-wrap { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.footer img { width:235px; filter:brightness(0) invert(1); }
.footer p { font-size:12px; opacity:.8; margin:0; }
.footer-links { display:flex; gap:20px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }

@media (max-width: 900px) {
  .nav { gap:20px; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-art { display:none; }
  .hero { min-height:auto; }
  .service-grid, .benefit-grid { grid-template-columns:repeat(2,1fr); gap:45px 0; }
  .service-card:nth-child(2) { border-right:0; }
  .benefit:nth-child(2) { border-right:0; }
  .about-grid, .contact-grid { grid-template-columns:1fr; gap:35px; }
  .contact-details { border-left:0; border-top:1px solid var(--line); padding:30px 0 0; }
}
@media (max-width: 650px) {
  .container { width:min(calc(100% - 32px),var(--max)); }
  .site-header { height:78px; }
  .brand img { width:220px; }
  .menu-toggle { display:block; }
  .nav { display:none; position:absolute; left:0; right:0; top:78px; background:white; padding:18px 20px; flex-direction:column; border-bottom:1px solid var(--line); }
  .nav.open { display:flex; }
  .hero-copy { padding:70px 0; }
  h1 { font-size:40px; }
  .section { padding:70px 0; }
  .service-grid, .benefit-grid { grid-template-columns:1fr; }
  .service-card, .benefit { border-right:0; border-bottom:1px solid var(--line); padding:0 15px 35px; }
  .service-card:last-child, .benefit:last-child { border-bottom:0; padding-bottom:0; }
  .benefit { border-color:rgba(255,255,255,.25); }
  .footer-wrap { flex-direction:column; text-align:center; }
}