:root{
  --bg:#FBFCFB; --surface:#E8F0EF; --ink:#0B2A30; --muted:#4A6469;
  --petrol:#0F3D45; --on-petrol:#F2F7F6; --amber:#E8962A; --line:#C9D9D7;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#08191C; --surface:#0E2A2F; --ink:#E9F1F0; --muted:#9DB4B7;
    --petrol:#0F3D45; --on-petrol:#F2F7F6; --amber:#F2A33A; --line:#1E4046; color-scheme:dark;
  }
}
:root[data-theme="dark"]{--bg:#08191C;--surface:#0E2A2F;--ink:#E9F1F0;--muted:#9DB4B7;--amber:#F2A33A;--line:#1E4046;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--body)}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.02em;margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:10}
.bar{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font:700 1.25rem var(--display);text-decoration:none;letter-spacing:-.01em}
nav{display:flex;gap:28px;align-items:center}
nav a{text-decoration:none;font-weight:500;font-size:.98rem;color:var(--muted)}
nav a:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--amber);color:#1A1204;font:600 1rem var(--body);padding:14px 26px;border-radius:999px;text-decoration:none;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
nav .btn{padding:10px 20px;color:#1A1204}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.lang button{border:0;background:none;font:600 .85rem var(--body);color:var(--muted);padding:6px 12px;border-radius:999px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--petrol);color:var(--on-petrol)}
.hero{background:var(--petrol);color:var(--on-petrol);position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(72px,12vw,150px);padding-bottom:clamp(72px,12vw,150px)}
.hero h1{font-size:clamp(2.6rem,7.2vw,5.6rem);font-weight:700;max-width:13ch}
.hero p{max-width:52ch;font-size:1.2rem;margin:28px 0 36px;color:#C5DAD8}
.river{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.river path{fill:none;stroke-linecap:round}
.river .a{stroke:var(--amber);stroke-width:2.5;stroke-dasharray:1800;stroke-dashoffset:1800;animation:draw 3.2s ease-out .3s forwards}
.river .b{stroke:#2C6A73;stroke-width:1.5;opacity:.7;animation:pulse 5s ease-in-out infinite}
.river .b:nth-of-type(2){animation-delay:-2.5s}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
section{padding:clamp(64px,9vw,112px) 0}
.intro{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
.intro h2,.head h2{font-size:clamp(2rem,4.4vw,3.2rem)}
.intro p{margin:0 0 1em;color:var(--muted);font-size:1.15rem}
.services{background:var(--surface)}
.head{margin-bottom:48px;max-width:30ch}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{background:var(--bg);border-radius:6px 28px 6px 28px;padding:36px;border-left:4px solid var(--amber)}
.card:nth-child(2),.card:nth-child(3){border-radius:28px 6px 28px 6px}
.card h3{font-size:1.6rem;margin-bottom:12px}
.card p{margin:0 0 16px;color:var(--muted)}
.card ul{margin:0;padding-left:1.1em;color:var(--ink)}
.card li{margin:4px 0}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:8px}
.values h3{font-size:1.35rem;margin-bottom:10px}
.values p{margin:0;color:var(--muted)}
.contact{background:var(--petrol);color:var(--on-petrol)}
.contact .box{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end}
.contact h2{font-size:clamp(2.2rem,5vw,3.8rem)}
.contact p{color:#C5DAD8;max-width:46ch;margin:20px 0 0}
.contact dl{margin:0 0 28px}
.contact dt{color:#9FC0BE;font-size:.9rem}
.contact dd{margin:0 0 14px;font:600 1.2rem var(--display)}
footer{padding:28px 0;font-size:.92rem;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media (max-width:820px){
  .intro,.grid,.values,.contact .box{grid-template-columns:1fr}
  nav a:not(.btn){display:none}
  nav{gap:12px}
  nav .btn{padding:10px 16px}
  .card{padding:28px}
}
@media (prefers-reduced-motion:reduce){.river .a{animation:none;stroke-dashoffset:0}.river .b{animation:none}html{scroll-behavior:auto}.btn{transition:none}}