:root{
  --paper:#F2F4F6; --surface:#FFFFFF; --ink:#14213D; --muted:#566079; --line:#D6DBE3; --needle:#D9352B; --needle-ink:#FFFFFF;
  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{ --paper:#0C1524; --surface:#122036; --ink:#E7EBF2; --muted:#9AA5B8; --line:#24324B; --needle:#FF5B4F; --needle-ink:#0C1524; color-scheme:dark; }
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--paper); color:var(--ink); font-family:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--needle); outline-offset:3px; border-radius:4px}

.wrap{width:min(1120px, 100% - 2.5rem); margin-inline:auto}

/* Header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px); -webkit-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); z-index:21; background:var(--paper)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; font-weight:700; letter-spacing:-.01em}
.brand svg{width:28px; height:28px}
.nav{display:flex; gap:1.5rem; font-size:.95rem}
.nav a{text-decoration:none; color:var(--muted)}
.nav a:hover{color:var(--ink)}
@media (max-width:560px){ .nav{gap:1rem; font-size:.9rem} .nav .hide-sm{display:none} }

/* Hero */
.hero{padding:clamp(3rem,8vw,6.5rem) 0 clamp(3rem,7vw,5.5rem)}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center}
@media (max-width:820px){ .hero .wrap{grid-template-columns:1fr} .compass-box{order:-1; max-width:240px; margin-inline:auto} .compass-note{display:none} }
h1{font-size:clamp(2.4rem, 5.6vw, 4.4rem); line-height:1.02; letter-spacing:-.035em; font-weight:800; margin:0 0 1.5rem; max-width:13ch}
.lede{font-size:clamp(1.1rem,1.6vw,1.25rem); color:var(--muted); max-width:46ch; margin:0 0 2rem}
.actions{display:flex; flex-wrap:wrap; gap:.75rem}
.btn{display:inline-flex; align-items:center; min-height:48px; padding:0 1.35rem; border-radius:999px; font-weight:600; text-decoration:none; border:1.5px solid var(--ink); transition:background .15s, color .15s}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{background:transparent; color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:var(--paper)}

/* Compass */
.compass-box{position:relative; aspect-ratio:1; width:100%}
.compass{width:100%; height:100%; display:block; overflow:visible}
.compass .ring{fill:var(--surface); stroke:var(--line); stroke-width:1.5}
.compass .tick{stroke:var(--muted); stroke-width:1}
.compass .tick.major{stroke:var(--ink); stroke-width:2}
.compass .card{font:700 22px "Schibsted Grotesk", system-ui, sans-serif; fill:var(--muted); text-anchor:middle; dominant-baseline:central}
.compass .card.n{fill:var(--needle)}
.compass .needle-n{fill:var(--needle)}
.compass .needle-s{fill:var(--ink)}
.compass .hub{fill:var(--paper); stroke:var(--ink); stroke-width:3}
.compass-note{position:absolute; left:50%; bottom:-2.25rem; transform:translateX(-50%); font-size:.85rem; color:var(--muted); white-space:nowrap}

/* Sections */
section{padding:clamp(3.5rem,8vw,6rem) 0; border-top:1px solid var(--line)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.1; letter-spacing:-.025em; font-weight:800; margin:0 0 1rem; max-width:20ch}
.section-intro{color:var(--muted); max-width:56ch; margin:0 0 2.5rem}

.areas{list-style:none; margin:0; padding:0; border-top:1.5px solid var(--ink)}
.areas li{display:grid; grid-template-columns:minmax(180px,1fr) 2fr; gap:1rem 2.5rem; padding:1.75rem 0; border-bottom:1px solid var(--line)}
.areas h3{margin:0; font-size:1.3rem; letter-spacing:-.015em}
.areas p{margin:0; color:var(--muted); max-width:58ch}
@media (max-width:640px){ .areas li{grid-template-columns:1fr} }

.about{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem)}
.about p{margin:0 0 1rem; max-width:56ch}
.about .principles{list-style:none; margin:0; padding:0}
.principles li{padding:1rem 0 1rem 1.75rem; border-bottom:1px solid var(--line); position:relative}
.principles li::before{content:""; position:absolute; left:0; top:1.55rem; width:10px; height:10px; border-radius:50%; border:2px solid var(--needle)}
.principles strong{display:block}
.principles span{color:var(--muted)}
@media (max-width:820px){ .about{grid-template-columns:1fr} }

.contact-mail{display:inline-block; font-size:clamp(1.35rem,4vw,2.4rem); font-weight:800; letter-spacing:-.025em; text-decoration:none; border-bottom:3px solid var(--needle); padding-bottom:.15rem; overflow-wrap:anywhere}
.contact-mail:hover{color:var(--needle)}

/* Footer */
footer{border-top:1px solid var(--line); padding:2rem 0 2.5rem; font-size:.9rem; color:var(--muted)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem}
footer nav{display:flex; gap:1.25rem}

/* Legal page */
.legal{padding:clamp(3rem,7vw,5rem) 0}
.legal .wrap{max-width:720px}
.legal h1{font-size:clamp(2rem,5vw,3rem); max-width:none}
.legal h2{font-size:1.35rem; margin:2.25rem 0 .5rem; max-width:none}
.legal p,.legal li{color:var(--ink)}
.legal .updated{color:var(--muted); margin-top:-.5rem}