*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: #F3F8F8; color: #10312C;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; font-weight: 300;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: #0E8CA8; text-decoration: none; }
a:hover { color: #05723B; }
img { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; }
.sect { padding: clamp(64px, 8vw, 116px) clamp(20px, 5vw, 48px); }
.eyebrow { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #0E8CA8; margin: 0 0 18px; font-weight: 400; }
h1, h2, h3, blockquote { font-family: 'Newsreader', Georgia, serif; font-weight: 300; letter-spacing: -.012em; text-wrap: pretty; }

/* header */
header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: rgba(243,248,248,.86); border-bottom: 1px solid rgba(16,49,44,.08); }
.bar { max-width: 1180px; margin: 0 auto; padding: 10px clamp(16px, 4vw, 28px); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { display: flex; align-items: flex-start; gap: .4em; color: #10312C; font-family: 'Raleway', 'Hanken Grotesk', sans-serif; font-weight: 300; font-size: 21px; line-height: 1.12; letter-spacing: .005em; white-space: nowrap; }
.logo:hover { color: #10312C; }
.logo .wm { display: grid; }
.logo img { height: 1.25em; width: auto; display: block; filter: invert(1); }
.nav { display: flex; gap: clamp(14px, 2.2vw, 30px); font-size: 14.5px; letter-spacing: .02em; }
.nav a { color: #4A6461; }
.nav a:hover { color: #0E8CA8; }
.tools { display: flex; align-items: center; gap: 10px; flex: none; }
.langs { display: flex; align-items: center; gap: 2px; border: 1px solid rgba(16,49,44,.16); border-radius: 999px; padding: 3px; }
.langs button { border: 0; background: none; cursor: pointer; padding: 6px 11px; border-radius: 999px; font: inherit; font-size: 13px; letter-spacing: .06em; color: #4A6461; transition: background .18s, color .18s; }
.langs button[aria-pressed="true"] { background: #0E8CA8; color: #fff; }
.btn { display: inline-block; padding: 15px 30px; border-radius: 999px; background: #0E8CA8; color: #fff; font-size: 16px; transition: background .2s, transform .2s; }
.btn:hover { background: #05723B; color: #fff; transform: translateY(-2px); }
.btn-sm { padding: 10px 20px; font-size: 14.5px; }
.btn-green { background: #05723B; }
.btn-green:hover { background: #0E8CA8; }
.btn-ghost { display: inline-block; padding: 15px 26px; border-radius: 999px; border: 1px solid rgba(16,49,44,.2); color: #10312C; font-size: 16px; transition: border-color .2s, color .2s; }
.btn-ghost:hover { border-color: #0E8CA8; color: #0E8CA8; }
.burger { display: none; width: 46px; height: 46px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; border: 1px solid rgba(16,49,44,.16); border-radius: 12px; background: none; cursor: pointer; }
.burger span { width: 20px; height: 1.5px; background: #10312C; display: block; transition: transform .24s, opacity .2s; }
.panel { display: none; border-top: 1px solid rgba(16,49,44,.1); background: rgba(243,248,248,.98); padding: 10px clamp(16px, 4vw, 28px) 20px; }
.panel nav { display: grid; gap: 2px; }
.panel a { padding: 14px 4px; font-size: 17px; color: #10312C; border-bottom: 1px solid rgba(16,49,44,.08); }
.panel .btn { margin-top: 14px; text-align: center; }

/* hero */
.hero { position: relative; padding: clamp(40px, 5vw, 68px) clamp(20px, 5vw, 48px) clamp(40px, 6vw, 72px); }
.glow { position: absolute; top: -160px; left: -120px; width: 540px; height: 540px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 45% 45%, rgba(14,140,168,.16), rgba(14,140,168,0) 70%); animation: drift 9s ease-in-out infinite alternate; }
.split { display: grid; gap: clamp(32px, 5vw, 60px); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 11px; border-radius: 999px; border: 1px solid rgba(5,114,59,.28); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #05723B; margin-bottom: 26px; white-space: nowrap; }
.badge i { width: 7px; height: 7px; border-radius: 50%; background: #72BF44; display: inline-block; }
h1 { font-size: clamp(40px, 6.2vw, 74px); line-height: 1.04; letter-spacing: -.015em; margin: 0 0 24px; }
h1 em { font-style: italic; color: #0E8CA8; }
.lead { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.65; color: #4A6461; max-width: 46ch; margin: 0 0 36px; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-img { width: 100%; height: clamp(340px, 50vh, 520px); object-fit: cover; object-position: 50% 72%; border-radius: 260px 260px 20px 20px; display: block; }

/* about */
.pale { background: #E7F0FB; }
.about { display: grid; gap: clamp(36px, 5vw, 72px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.portrait { position: sticky; top: 100px; width: 100%; height: clamp(380px, 34vw, 540px); object-fit: cover; object-position: 50% 20%; border-radius: 16px; display: block; }
h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1.1; margin: 0 0 16px; }
.about h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; margin: 0 0 24px; }
.body { font-size: 17.5px; line-height: 1.7; color: #3F5A57; max-width: 54ch; margin: 0 0 18px; }
.edu { list-style: none; margin: 0; padding: 0; }
.edu li { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(16,49,44,.12); font-size: 16px; line-height: 1.55; color: #234A45; }
.edu b { color: #05723B; font-family: ui-monospace, monospace; font-size: 12.5px; font-weight: 400; padding-top: 4px; }

/* principles */
.grid-bordered { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); border: 1px solid rgba(16,49,44,.12); border-radius: 18px; overflow: hidden; }
.grid-bordered > div { background: transparent; padding: clamp(24px, 3vw, 38px); border-right: 1px solid rgba(16,49,44,.12); border-bottom: 1px solid rgba(16,49,44,.12); transition: background .26s; }
.grid-bordered > div:hover { background: #E7F0FB; }
.num { font-family: ui-monospace, monospace; font-size: 12px; color: #72BF44; letter-spacing: .08em; }
.grid-bordered h3 { font-weight: 400; font-size: 23px; margin: 14px 0 12px; line-height: 1.25; }
.grid-bordered p { margin: 0; font-size: 16.5px; line-height: 1.62; color: #4A6461; text-wrap: pretty; }

/* areas (dark) */
.dark { background: #0B3F38; color: #EAF4F1; }
.dark .head { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.dark .head p { margin: 0; font-size: 17px; line-height: 1.65; color: rgba(234,244,241,.68); max-width: 44ch; }
.cards { display: grid; gap: clamp(18px, 2.4vw, 28px); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.cards > div { border: 1px solid rgba(234,244,241,.18); border-radius: 16px; padding: clamp(22px, 2.6vw, 32px); transition: border-color .24s, transform .24s, background .24s; }
.cards > div:hover { border-color: #72BF44; transform: translateY(-3px); background: rgba(114,191,68,.07); }
.cards h3 { font-weight: 400; font-size: 22px; margin: 0 0 12px; line-height: 1.3; }
.cards p { margin: 0; font-size: 16px; line-height: 1.62; color: rgba(234,244,241,.64); text-wrap: pretty; }

/* testimonials */
.quotes { display: grid; gap: clamp(20px, 2.6vw, 32px); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
figure { margin: 0; background: #E7F0FB; border-radius: 16px; padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 20px; }
figure .mark { font-family: 'Newsreader', serif; font-size: 40px; line-height: .6; color: #0E8CA8; }
blockquote { margin: 0; font-size: 19.5px; line-height: 1.5; color: #10312C; }
figcaption { margin-top: auto; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #05723B; }

/* blog */
.links { display: grid; }
.links a { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: baseline; padding: 22px 4px; border-bottom: 1px solid rgba(16,49,44,.14); color: #10312C; font-family: 'Newsreader', serif; font-size: clamp(20px, 2.3vw, 27px); line-height: 1.25; transition: padding .24s, color .24s; }
.links a:hover { color: #0E8CA8; padding-left: 14px; }
.links em { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; color: #05723B; font-style: normal; }

/* faq */
.faq { border-top: 1px solid rgba(16,49,44,.16); }
.faq > div { border-bottom: 1px solid rgba(16,49,44,.16); }
.faq button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; text-align: left; background: none; border: 0; padding: 22px 2px; cursor: pointer; font-family: 'Newsreader', serif; font-size: clamp(18px, 2vw, 22px); line-height: 1.35; color: #10312C; }
.faq h3 { margin: 0; font: inherit; }
.faq i { font-size: 22px; line-height: 1; color: #0E8CA8; font-style: normal; transition: transform .26s; }
.faq button[aria-expanded="true"] i { transform: rotate(45deg); }
.faq .ans { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .34s ease, opacity .26s ease; }
.faq button[aria-expanded="true"] + .ans { max-height: 340px; opacity: 1; }
.faq .ans p { margin: 0; padding: 0 clamp(30px, 6vw, 90px) 26px 2px; font-size: 17px; line-height: 1.7; color: #3F5A57; text-wrap: pretty; }

/* contact */
.contact { display: grid; gap: clamp(36px, 5vw, 72px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.contact h2 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; margin: 0 0 20px; letter-spacing: -.014em; }
.contact h2 em { color: #0E8CA8; }
.mailcard { display: grid; gap: 14px; background: #E7F0FB; padding: clamp(28px, 3.6vw, 44px); border-radius: 18px; border: 1px solid rgba(14,140,168,.24); color: #10312C; transition: border-color .22s, transform .22s; }
.mailcard:hover { border-color: #0E8CA8; transform: translateY(-3px); color: #10312C; }
.mailcard .addr { font-family: 'Newsreader', serif; font-size: clamp(24px, 3.4vw, 38px); line-height: 1.15; color: #0E8CA8; word-break: break-word; letter-spacing: -.01em; }
.mailcard .kicker { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #05723B; }
.mailcard .hint { font-size: 16.5px; line-height: 1.6; color: #3F5A57; }
.mailcard .go { margin-top: 6px; font-size: 15px; letter-spacing: .02em; color: #05723B; }

footer { padding: clamp(40px, 5vw, 56px) clamp(20px, 5vw, 48px); background: #0B3F38; color: rgba(234,244,241,.7); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; font-size: 14.5px; }
footer .logo { color: #fff; font-size: clamp(28px, 3vw, 40px); }
footer .logo:hover { color: #fff; }
footer .logo img { filter: none; }

[data-reveal] { animation: rise .72s cubic-bezier(.22,.7,.24,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-14px); } }

@media (max-width: 860px) {
  .logo { font-size: 18px; }
  .nav, .tools .btn { display: none; }
  .burger { display: flex; }
  body.menu-open .panel { display: block; }
  body.menu-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.menu-open .burger span:nth-child(2) { opacity: 0; }
  body.menu-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .portrait { position: static; height: 300px; aspect-ratio: auto; object-position: 50% 18%; }
  .hero-img { height: 300px; border-radius: 160px 160px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .glow { animation: none; }
  html { scroll-behavior: auto; }
}

/* languages list */
.spoken li { grid-template-columns: 1fr auto; align-items: baseline; }
.spoken em { font-style: normal; font-size: 14px; letter-spacing: .04em; color: #05723B; }

/* pricing page */
.nav a[aria-current="page"], .panel a[aria-current="page"] { color: #0E8CA8; }
.price-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.price-head h1 { font-size: clamp(38px, 5.4vw, 64px); margin-bottom: 18px; }
.price-grid { display: grid; gap: clamp(18px, 2.4vw, 28px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.price-card { background: #E7F0FB; border-radius: 18px; padding: clamp(26px, 3.4vw, 42px); }
.price-card h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 22px; }
.price-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 18px 0; border-top: 1px solid rgba(16,49,44,.12); }
.price-row span { font-size: 16.5px; line-height: 1.5; color: #3F5A57; }
.amt { font-family: 'Newsreader', Georgia, serif; font-weight: 300; font-size: clamp(32px, 3.6vw, 44px); line-height: 1; color: #0E8CA8; white-space: nowrap; }
.commit { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; }
.commit h2 { font-size: clamp(48px, 7vw, 88px); font-style: italic; line-height: 1; margin: 0 0 14px; }
.commit .sub { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #72BF44; margin: 0 0 22px; }
.commit .save { display: inline-block; margin-top: 8px; padding: 8px 16px; border-radius: 999px; background: #72BF44; color: #0B3F38; font-size: 15px; font-weight: 500; }
.commit-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 22px 0; border-top: 1px solid rgba(234,244,241,.18); }
.commit-row:last-child { border-bottom: 1px solid rgba(234,244,241,.18); }
.commit-row b { display: block; font-weight: 400; font-size: 18px; color: #EAF4F1; margin-bottom: 4px; }
.commit-row small { font-size: 15px; color: rgba(234,244,241,.7); }
.commit-row .amt { color: #EAF4F1; }