:root { --paper:#f7f8f4; --ink:#1b2420; --muted:#606a63; --green:#38cb7d; --deep-green:#237a4c; --line:#d8ddd6; --header:88px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header) + 20px); }
body { margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.65 'proxima-nova',Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
::selection { background:#b9efcd; color:var(--ink); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,.client-history summary:focus-visible { outline:2px solid var(--deep-green); outline-offset:6px; }
main[tabindex="-1"]:focus,section[tabindex="-1"]:focus { outline:none; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-weight:600; }
svg { display:block; }
.shell { width:min(1280px,calc(100% - 112px)); margin-inline:auto; }
.mono { font-family:'Space Mono',monospace; font-size:12px; }
.skip-link { position:fixed; top:12px; left:20px; z-index:100; padding:8px 16px; background:var(--ink); color:white; translate:0 -200%; }
.skip-link:focus { translate:0; }
.site-header { height:var(--header); position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line); }
.header-row { height:100%; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand { display:inline-flex; align-items:center; flex-shrink:0; }
.brand svg { width:173px; height:26px; }
.site-nav { display:flex; align-items:center; gap:36px; font-size:12px; font-weight:600; }
.nav-link { position:relative; padding-block:8px; line-height:21px; transition:color 160ms; white-space:nowrap; }
.nav-link:hover,.nav-link[aria-current] { color:var(--deep-green); }
.morse,.nav-link:not(.nav-what)::after { position:absolute; bottom:0; left:0; width:100%; height:3px; opacity:0; }
.morse { left:50%; width:81px; translate:-50% 0; fill:currentColor; shape-rendering:crispEdges; }
.nav-link:not(.nav-what)::after { content:''; background:currentColor; }
.nav-what:hover .morse,.nav-what[aria-current] .morse,.nav-link:hover::after,.nav-link[aria-current]::after { opacity:1; }
.nav-contact { display:flex; align-items:center; gap:24px; }
.arrow { font-size:21px; line-height:1; font-weight:400; }
.menu-toggle[hidden] { display:none; }
.menu-toggle { display:none; border:0; background:none; padding:10px 0 10px 20px; cursor:pointer; color: inherit; }
.hero-stage { min-height:max(620px,calc(100svh - var(--header))); display:flex; flex-direction:column; justify-content:center; }
.hero-grid { display:grid; grid-template-columns:1.13fr 1fr; align-items:center; gap:60px; padding-block:32px; flex:1; }
.hero h1 { font-size:clamp(34px,4vw,54px); line-height:1.12; letter-spacing:-.045em; font-weight:600; }
.hero h1 > span { display:block; }
.green { color:var(--deep-green); }
.hero-description { max-width:430px; margin-top:30px; font-size:19px; line-height:1.6; color:var(--muted); }
.hero-actions { margin-top:32px; display:flex; align-items:center; gap:28px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:30px; padding:14px 22px; background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:4px; font-size:14px; font-weight:600; transition:background 160ms,color 160ms; }
.button:hover { background:var(--deep-green); border-color:var(--deep-green); }
.text-link { display:inline-flex; align-items:center; gap:14px; font-size:14px; border-bottom:1px solid var(--line); padding-block:6px; }
.text-link:hover { color:var(--deep-green); border-color:var(--deep-green); }
.code-figure { position:relative; width:100%; padding:24px 14px 24px 20px; background-image:radial-gradient(#cdd8ce .8px,transparent .8px); background-size:24px 24px; }
.code-figure::before,.code-figure::after { content:'+'; position:absolute; font-family:monospace; color:#90a194; font-size:22px; line-height:1; }
.code-figure::before { left:0; top:0; }
.code-figure::after { right:0; bottom:0; }
#code-art { width:100%; max-height:clamp(300px,52svh,450px); overflow:visible; color:var(--deep-green); fill:var(--green); }
#code-art .ghost { opacity:.12; }
.section { padding-block:96px; border-top:1px solid var(--line); }
.section-title { display:flex; align-items:baseline; gap:16px; margin-bottom:44px; }
.section-title h2 { font-size:15px; font-weight:600; }
.section-number { color:var(--deep-green); font-size:12px; }
.section-intro { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; margin-bottom:56px; }
.section-intro h3 { font-size:clamp(34px,3.8vw,52px); letter-spacing:-.045em; line-height:1.14; max-width:560px; }
.section-intro p { max-width:440px; color:var(--muted); padding-top:4px; }
.work-flow { margin:0; padding:0; list-style:none; counter-reset:work-step; }
.work-flow > li { position:relative; display:grid; grid-template-columns:0 minmax(0,1fr); align-items:first baseline; padding:0 0 40px 40px; border-left:1px solid var(--line); counter-increment:work-step; }
.work-flow > li > * { grid-column:2; }
.work-flow > li::before { content:'01.' counter(work-step); grid-area:1 / 1; position:relative; left:-40px; justify-self:center; width:36px; padding-block:5px; background:var(--paper); color:var(--deep-green); text-align:center; font:12px/20px 'Space Mono',monospace; }
.work-flow > li:last-child { padding-bottom:0; border-color:transparent; }
.work-flow .section-intro { margin-bottom:0; }
.work-flow .section-intro h3 { font-size:clamp(28px,3vw,40px); line-height:1.25; }
.work-flow .services { position:relative; margin-top:56px; }
.work-flow .services::before { content:''; position:absolute; left:50%; top:-28px; height:28px; border-left:1px solid var(--line); }
.services { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-block:1px solid var(--line); }
.service { display:flex; flex-direction:column; padding:40px 48px 40px 0; }
.service + .service { border-left:1px solid var(--line); padding-left:48px; padding-right:0; }
.service h4 { margin:0 0 24px; font-size:clamp(26px,2.6vw,34px); line-height:1.18; letter-spacing:-.04em; font-weight:600; }
.service p { font-size:16px; line-height:1.65; color:var(--muted); max-width:480px; }
.service .service-direction { margin-bottom:24px; font-size:12px; color:var(--deep-green); }
.service-capabilities { margin:auto 0 0; padding-top:32px; }
.service-capabilities > div { padding-block:16px; border-top:1px solid var(--line); }
.service-capabilities > div:last-child { padding-bottom:0; }
.service-capabilities dt { font-size:16px; font-weight:600; }
.service-capabilities dd { margin:4px 0 0; color:var(--muted); font-size:14px; }
.clients { background:#eaf0e8; }
.client-flow > li { padding-bottom:48px; }
.client-flow > li::before { content:'02.' counter(work-step); background:#eaf0e8; }
.client-flow h4 { margin:0; }
.partners { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:28px; border-block:1px solid var(--line); }
.partners-build-with { grid-template-columns:repeat(5,minmax(0,1fr)); }
.partners-organisations { grid-template-columns:repeat(3,minmax(0,1fr)); }
.partners a { display:flex; flex-direction:column; align-items:center; min-width:0; padding:24px 16px; position:relative; color:var(--muted); font-size:12px; line-height:1.5; text-align:center; }
.partners a + a::before { content:''; position:absolute; left:0; top:24px; bottom:24px; border-left:1px solid var(--line); }
.client-history .partners a:nth-child(4n + 1)::before { display:none; }
.client-history .partners a:nth-child(n + 5) { border-top:1px solid var(--line); }
.partner-logo { display:grid; place-items:center; width:100%; max-width:180px; aspect-ratio:15 / 8; }
.partner-logo img { display:block; max-width:none; height:auto; filter:grayscale(1); mix-blend-mode:multiply; transition:filter 180ms; }
.partners a:hover img, .partners a:focus-visible img { filter:none; }
.partners a > span:last-child:not(.partner-logo) { margin-top:8px; max-width:180px; }
.client-history summary { display:flex; align-items:baseline; gap:12px; width:fit-content; max-width:100%; min-height:44px; list-style:none; cursor:pointer; transition:color 160ms; }
.client-history summary:hover,.client-history summary:focus-visible { color:var(--deep-green); }
.history-more { grid-column:2 / -1; display:flex; align-items:center; padding:24px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
.client-history summary::-webkit-details-marker { display:none; }
.history-toggle { flex:none; fill:none; stroke:currentColor; stroke-width:1.75; }
.client-history[open] .history-toggle { transform:rotate(180deg); }

.approach-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.approach-heading { font-size:clamp(36px,4vw,54px); letter-spacing:-.05em; line-height:1.15; max-width:480px; }
.approach-heading span { color:var(--deep-green); }
.approach-illustration { max-width:480px; margin-top:56px; }
.approach-illustration svg { width:100%; height:auto; }
.approach-illustration .concept-caption { width:132px; max-width:100%; margin-inline:auto; }
.approach-illustration figcaption { margin-top:8px; color:var(--muted); font-size:16px; }
.approach-flow > li::before { content:'03.' counter(work-step); grid-row:2; }
.approach-flow > li:last-child::after { content:''; position:absolute; grid-row:1 / 2; inset:0 auto 0 -1px; width:1px; background:var(--line); }
.principle-icon { width:74px; height:70px; margin-bottom:20px; color:var(--deep-green); overflow:visible; }
.client-flow h4, .principle h3 { font-size:23px; line-height:1.65; letter-spacing:-.025em; font-weight:600; }
.principle h3 { margin-bottom:12px; }
.principle p { color:var(--muted); font-size:16px; }
.contact { background:var(--ink); color:var(--paper); border:0; }
.contact .section-number { color:var(--green); }
.contact-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:72px; align-items:end; }
.contact h3 { font-size:clamp(46px,5.7vw,80px); line-height:1.08; letter-spacing:-.055em; }
.contact h3 span { color:var(--green); }
.contact p { color:#b9c2b9; max-width:430px; margin-top:24px; }
.contact-links { display:flex; flex-direction:column; align-items:flex-start; gap:28px; padding-bottom:8px; }
.email-link { display:flex; align-items:center; justify-content:space-between; width:100%; gap:24px; font-size:clamp(20px,2.6vw,36px); letter-spacing:-.035em; padding-bottom:18px; border-bottom:1px solid #647165; }
.email-link:hover,.phone-link:hover { color:var(--green); }
.contact a:focus-visible, .site-footer a:focus-visible { outline-color:var(--green); }
.phone-link { font-size:18px; }
.contact-location { margin-inline:auto; }
.contact-map { position:relative; max-width:1100px; margin:72px auto 0; }
.contact-map > svg { display:block; width:100%; height:auto; overflow:visible; }
.map-leaders { fill:none; stroke:var(--green); stroke-opacity:.7; }
.map-leaders path,.map-leaders circle { stroke-width:1.2; vector-effect:non-scaling-stroke; }
.map-leaders circle { fill:var(--ink); }
.map-markers { fill:var(--green); stroke:var(--ink); }
.map-markers circle { stroke-width:1; vector-effect:non-scaling-stroke; }
.map-markers .map-home { fill:none; stroke:var(--green); }
.map-cities { position:absolute; inset:0; }
.map-city { position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:6px; padding:2px 5px; background:var(--ink); color:var(--paper); font-size:13px; white-space:nowrap; }
.map-city:nth-child(1) { left:22%; top:48.837%; }
.map-city:nth-child(2) { left:40.7%; top:8.605%; }
.map-city:nth-child(3) { left:53.2%; top:-2.791%; }
.map-city:nth-child(4) { left:66%; top:12.093%; color:var(--green); }
.map-city:nth-child(5) { left:87.2%; top:51.163%; }
.map-city svg { display:block; flex:none; width:auto; height:10px; }
.site-footer { padding-block:28px; background:var(--ink); color:#b9c2b9; border-top:1px solid #3c463e; font-size:12px; }
.footer-row { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.back-top { min-height:24px; display:flex; align-items:center; gap:18px; color:var(--paper); white-space:nowrap; }
@media(max-width:1100px) {
  .shell { width:calc(100% - 64px); }
  .site-nav { gap:24px; }
  .hero-grid { gap:32px; }
  .hero-description { font-size:17px; }
  .hero-actions { gap:20px; }
  .section-intro,.approach-grid { gap:40px; }
  .service { padding-right:32px; }
  .service + .service { padding-left:32px; }
  .contact-grid { gap:48px; }
}
@media(max-width:760px) {
  :root { --header:72px; }
  .shell { width:calc(100% - 40px); }
  .menu-toggle { display:block; font-size:14px; }
  .js .site-nav { display:none; }
  .site-nav { position:absolute; top:72px; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); padding:20px; gap:20px; flex-direction:column; align-items:stretch; }
  .js .site-nav.is-open { display:flex; }
  .nav-link { width:fit-content; padding-block:10px; }
  .nav-contact { justify-content:space-between; width:100%; }
  .hero-stage { min-height:0; }
  .hero-grid { grid-template-columns:1fr; gap:44px; padding-block:48px 36px; }
  .hero h1 { font-size:clamp(27px,6.8vw,42px); }
  .hero-description { max-width:480px; margin-top:24px; }
  .hero-actions { margin-top:28px; flex-wrap:wrap; gap:18px 24px; }
  .hero-actions a { white-space:nowrap; }
  .hero-art { width:min(100%,420px); margin-inline:auto; }
  .code-figure { padding:16px 12px; }
  #code-art { max-height:360px; }
  .section { padding-block:64px; }
  .section-title { margin-bottom:32px; }
  .section-intro { grid-template-columns:1fr; gap:24px; margin-bottom:36px; }
  .section-intro h3 { max-width:520px; }
  .section-intro p { max-width:560px; }
  .work-flow > li { padding-left:26px; padding-bottom:32px; }
  .work-flow > li::before { left:-26px; }
  .work-flow .section-intro { gap:16px; }
  .work-flow .services { margin-top:28px; }
  .work-flow .services::before { display:none; }
  .services { grid-template-columns:1fr; }
  .service,.service + .service { padding:32px 0; border-left:0; }
  .service + .service { border-top:1px solid var(--line); }
  .service h4 { font-size:clamp(24px,7vw,32px); }
  .partners, .partners-build-with, .partners-organisations { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:24px; }
  .partners a { padding:18px 10px; }
  .partners a:nth-child(2n + 1)::before { display:none; }
  .partners a:nth-child(n + 3) { border-top:1px solid var(--line); }
  .partners a:last-child:nth-child(odd) { grid-column:1 / -1; }
  .partners a:last-child:nth-child(odd) .partner-logo { width:calc(50% - 10px); }
  .approach-grid { grid-template-columns:1fr; gap:36px; }
  .approach-illustration { margin-top:32px; }
  .contact-grid { grid-template-columns:1fr; gap:40px; }
  .contact-links { gap:24px; }
  .contact-map { margin-top:56px; }
  .map-city { font-size:clamp(9px,2.3vw,13px); gap:4px; padding:2px 3px; }
  .map-city:nth-child(3) { top:-12%; }
  .map-city svg { height:8px; }
  .email-link { font-size:clamp(24px,6.5vw,36px); }
  .footer-row { align-items:flex-start; }
  .footer-legal { max-width:260px; }
  .back-top { gap:8px; }
  html:not(.js) .hero { padding-top:240px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; }
}