/* Fonts: the original site uses DM Serif Display + Instrument Sans (both OFL).
   Drop the .woff2 files in /public/fonts/ (see README); until then the fallbacks below are used. */
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;
  src:local("DM Serif Display"),url("/fonts/dm-serif-display-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:local("Instrument Sans"),url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2")}

:root{
  --taupe:#807862; --taupe-dark:#6d6652; --charcoal:#404040; --ink:#1a1a1a; --white:#fff;
  --cream:#f4f1ea; --line:#ddd7c8; --olive:#4a4a1a;
  --serif:"DM Serif Display","Iowan Old Style",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font:400 18px/1.6 var(--sans);color:var(--ink);background:var(--white)}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;margin:0 0 .5em}
h2{font-size:clamp(2rem,4.5vw,3.1rem)} h3{font-size:1.25rem}
.center{text-align:center}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.narrow{width:min(860px,100% - 40px)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;background:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px;top:8px}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:var(--taupe);color:#fff}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:84px}
.logo img{display:block;height:58px;width:auto}
#nav{display:flex;gap:34px;order:2;margin-left:auto;margin-right:28px}
.logo{order:1}
.bar-right{order:3;display:flex;align-items:center;gap:10px}
.lang{display:flex;gap:2px;font-size:.9rem;letter-spacing:.06em}
.lang a{text-decoration:none;padding:6px 8px;opacity:.75}
.lang a:hover,.lang a[aria-current]{opacity:1}
.lang a[aria-current]{border-bottom:1px solid #fff}
#nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;font-size:1.05rem}
#nav a:hover,#nav a[aria-current]{border-color:#fff}
.menu-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer;width:48px;height:44px}
.menu-toggle span{display:block;height:1px;background:#fff;margin:9px 0}
@media (max-width:860px){
  .menu-toggle{display:block}
  #nav{order:0;margin:0;display:none;position:absolute;left:0;right:0;top:100%;background:var(--taupe);flex-direction:column;gap:0;padding:4px 20px 20px}
  #nav.open{display:flex}
  #nav a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.25);font-size:1.15rem}
}

/* hero */
.hero{position:relative;height:calc(100vh - 84px);height:calc(100svh - 84px);min-height:380px;background:#222;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center;filter:grayscale(1)}
.hero-logo{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);width:min(470px,72vw);height:auto}

/* sections */
section{padding:84px 0}
.hero{padding:0}
.intro{background:#fff;padding:56px 0 24px}
.intro-box{background:var(--taupe);color:#fff;padding:56px clamp(24px,6vw,84px);width:min(1100px,100% - 40px)}
.intro p{font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.6;text-align:justify;hyphens:auto;margin:0 0 1.4em}
.intro p:last-child{margin:0}
.light{background:#fff}
.taupe{background:var(--taupe);color:#fff}
.lead{max-width:68ch}
.button{display:inline-block;background:transparent;color:#fff;padding:13px 26px;text-decoration:none;border:1px solid #fff;font:inherit;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.button:hover,.button:focus-visible{background:#fff;color:var(--taupe)}
.light .button{color:var(--taupe);border-color:var(--taupe)}
.light .button:hover{background:var(--taupe);color:#fff}

/* kernprincipes */
.principles{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.principles li{position:relative;overflow:hidden;aspect-ratio:4/5;background:#222}
.principles img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.principles span{position:absolute;inset:auto 0 0 0;padding:90px 18px 18px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6));font:600 1rem/1.35 var(--sans)}
.principles span::after{content:"";display:block;margin-top:14px;border-bottom:1px solid rgba(255,255,255,.7)}
.principles-head{display:flex;align-items:flex-end;gap:36px}
.principles-head h2{margin:0;text-align:left}
.principles-head .rule{flex:1;border-bottom:1px solid #8c8c8c;margin-bottom:.5em}
@media (max-width:900px){.principles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.principles{grid-template-columns:1fr}.principles li{aspect-ratio:4/4.2}}

/* expertise band */
.expertise-band{position:relative;color:#fff;background:#222;overflow:hidden}
.band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.45)}
.band-content{position:relative}
.domains{list-style:none;padding:0;margin:30px 0 36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 28px}
.domains li a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.35);text-decoration:none;font-family:var(--serif);font-size:1.3rem}
.domains li a:hover,.domains li a:focus-visible{padding-left:8px;border-color:#fff}

/* team */
.team{background:var(--charcoal);color:#fff}
.team .lead{margin-bottom:1em}
.team-grid{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{position:relative;background:#2b2b2b}
.card-open{display:block;width:100%;padding:0;border:0;background:none;color:#fff;text-align:left;cursor:pointer;font:inherit;position:relative;overflow:hidden}
.card-open img{display:block;width:100%;aspect-ratio:600/622;object-fit:cover;object-position:top;transition:transform .5s}
.card-open:hover img,.card-open:focus-visible img{transform:scale(1.03)}
.card-body{position:absolute;inset:auto 0 0 0;padding:90px 86px 22px 22px;background:linear-gradient(transparent,rgba(0,0,0,.82));display:flex;flex-direction:column;gap:3px;border-bottom:0}
.card-role{font-weight:700;font-size:.95rem}
.card-tags{font-size:.85rem;line-height:1.4;opacity:0;max-height:0;overflow:hidden;transition:opacity .3s,max-height .3s}
.card-more{font-size:.9rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.card-name{font-family:var(--serif);font-size:1.9rem;line-height:1.1;margin-top:4px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.6)}
.card-open:hover .card-tags,.card-open:focus-visible .card-tags{opacity:.95;max-height:8em}
@media (hover:none){.card-tags{opacity:.95;max-height:8em}}
.card-open:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.card-mail{position:absolute;right:20px;bottom:26px;width:54px;height:54px;border-radius:50%;background:var(--taupe);color:#fff;display:grid;place-items:center;text-decoration:none}
.card-mail:hover,.card-mail:focus-visible{background:#fff;color:var(--taupe)}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.team-grid{grid-template-columns:1fr}}

/* profile dialog */
dialog.profile{border:0;padding:0;width:min(960px,calc(100vw - 32px));max-height:calc(100vh - 32px);background:#fff;color:var(--ink);overflow:auto}
dialog::backdrop{background:rgba(20,20,20,.7)}
.profile form{margin:0}
.profile .close{position:absolute;top:6px;right:10px;width:44px;height:44px;border:0;background:none;font-size:2.2rem;line-height:1;cursor:pointer;z-index:2;color:var(--ink)}
.profile-grid{display:grid;grid-template-columns:300px 1fr}
.profile-side{background:var(--cream)}
.profile-side img{display:block;width:100%;aspect-ratio:600/622;object-fit:cover;object-position:top}
.contact{padding:22px 24px 30px;font-size:.95rem}
.contact h3{font:700 .75rem var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--olive);margin-bottom:10px}
.contact p{margin:6px 0}
.contact a{color:var(--olive);word-break:break-all}
.profile-main{padding:44px 44px 36px}
.profile-main h2{text-transform:uppercase;letter-spacing:.05em;font-size:clamp(1.7rem,3vw,2.2rem);margin-bottom:.1em}
.role{margin:0;color:var(--taupe);font-weight:700}
.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:14px 0 18px;border-bottom:1px solid #aaa;padding-bottom:18px}
.tags li{font-size:.8rem;border:1px solid var(--line);border-radius:99px;padding:2px 10px;color:#666}
.profile-main p{margin:0 0 14px;font-size:1rem}
@media (max-width:700px){
  .profile-grid{grid-template-columns:1fr}
  .profile-side img{aspect-ratio:16/11;object-position:top}
  .profile-main{padding:22px 20px 28px}
  dialog.profile{width:100vw;max-width:100vw;height:100vh;max-height:100vh}
}

/* forms / contact */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px}
@media (max-width:800px){.split{grid-template-columns:1fr;gap:36px}}
form.contact-form{display:grid;gap:14px}
form label{display:grid;gap:4px;font-size:.95rem}
form input,form select,form textarea{font:inherit;padding:11px 12px;border:1px solid var(--line);background:#fff;color:var(--ink);width:100%;border-radius:0}
.hp{position:absolute;left:-9999px}
.fine{font-size:.85rem;opacity:.9;margin:0}
.form-status{margin:0;font-weight:700}
.map-link{display:inline-block;margin-top:8px}
address{font-style:normal}
#contact h2{border-bottom:1px solid var(--taupe);padding-bottom:.25em;max-width:12em}

/* text pages */
.page-head{background:var(--taupe);color:#fff;padding:64px 0 48px;position:relative;overflow:hidden}
.page-head h1{margin:0;font-size:clamp(2.2rem,5vw,3.4rem);position:relative}
.page-head.has-img{padding:110px 0 80px}
.page-head.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.45)}
.prose{max-width:75ch}
.prose h2{font-family:var(--sans);font-weight:700;font-size:1.15rem;text-transform:uppercase;letter-spacing:.05em;margin-top:2em}
.prose ul,.prose ol{padding-left:1.2em}
.domain{padding:48px 0;border-bottom:1px solid var(--line)}
.domain:last-child{border:0}
.domain h2{text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.6rem,3vw,2.2rem)}
.domain .prose p{margin:0 0 1em}

/* footer */
.site-footer{background:var(--taupe);color:#fff;padding:56px 0 24px}
.site-footer a{color:#fff}
.foot{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:32px;align-items:start}
.foot-logo img{width:140px;height:auto;display:block}
.foot-nav{display:flex;flex-direction:column;gap:6px;border-left:2px solid rgba(255,255,255,.7);padding-left:20px;font-size:1.2rem}
.foot-nav a{text-decoration:none;padding:6px 0}
.foot-nav a:hover{text-decoration:underline}
.foot-legal{display:flex;flex-direction:column;gap:8px;font-size:1rem}
.copy{margin-top:36px;font-size:.85rem;opacity:.85}
@media (max-width:700px){.foot{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* map */
.map-section{padding:0;background:#2a2a2a}
.map{position:relative;min-height:520px;display:flex}
.map-canvas{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 50%,rgba(128,120,98,.35),transparent 55%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 48px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 48px),#2f2e2a;overflow:hidden}
.map-canvas iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  }
.map-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;text-align:center;padding:20px 20px 20px 380px}
.map.loaded .map-placeholder{display:none}
.map-placeholder .fine{max-width:30ch}
.map-pin{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-34px 0 0 -17px;background:var(--taupe);border:3px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 3px 10px rgba(0,0,0,.5);pointer-events:none}
.map-pin::after{content:"";position:absolute;inset:8px;background:#fff;border-radius:50%}
.map-pin-label{position:absolute;left:46px;top:-4px;transform:rotate(45deg);transform-origin:left top;background:#fff;color:var(--ink);padding:2px 12px;font:600 .9rem var(--sans);white-space:nowrap;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.map-card{position:relative;z-index:2;align-self:center;margin:40px 0 40px max(20px,calc((100vw - 1180px) / 2));background:#fff;color:var(--ink);padding:32px 34px;width:min(340px,100% - 40px);box-shadow:0 10px 36px rgba(0,0,0,.35);border-top:4px solid var(--taupe)}
.map-card h3{font-size:1.9rem;border-bottom:1px solid var(--taupe);padding-bottom:.25em;margin-bottom:.8em}
.map-card p{margin:0 0 1em}
.map-card a:not(.button){text-underline-offset:3px}
.map-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:1.2em 0 0!important}
.map-card .button{color:#fff;background:var(--taupe);border-color:var(--taupe)}
.map-card .button:hover,.map-card .button:focus-visible{background:var(--taupe-dark);color:#fff}
.map-osm{font-size:.9rem}
@media (max-width:760px){
  .map{flex-direction:column;min-height:0}
  .map-canvas{position:relative;height:340px;order:1}
  .map-card{order:2;margin:-48px auto 0;width:calc(100% - 40px);margin-bottom:0;box-shadow:0 -4px 24px rgba(0,0,0,.25)}
  .map-section{padding-bottom:24px;background:#fff}
  .map-placeholder{padding:20px}
}
.map-card address{margin-bottom:1em}

.map-pin{display:none}

/* scroll reveal (only when JS runs; content stays visible without it) */
.js [data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}
.js [data-reveal].in{opacity:1;transform:none}

/* home: banner, introduction, principles and expertises each fill exactly one screen on desktop */
#over-ons,#kernprincipes,#expertises{min-height:100vh;min-height:100svh;display:flex}
#over-ons{align-items:center;padding:40px 0}
#kernprincipes>.wrap,#expertises>.band-content{display:flex;flex-direction:column;justify-content:center}
#kernprincipes{padding:56px 0 40px}
#expertises{align-items:center;padding:56px 0}
#expertises>.band-content{width:min(1180px,100% - 40px)}
@media (min-width:901px) and (min-height:620px){
  .hero{min-height:0}
  #over-ons,#kernprincipes,#expertises{height:100vh;height:100svh;min-height:0;overflow:hidden}
  #over-ons .intro-box p{font-size:clamp(1.05rem,min(1.7vw,2.6vh),1.45rem);line-height:1.5;margin-bottom:1em}
  #kernprincipes>.wrap{width:min(1500px,100% - 40px);height:100%}
  #kernprincipes h2{margin-bottom:.6em;font-size:clamp(1.8rem,min(4vw,6vh),3.1rem)}
  .principles{flex:1;min-height:0;margin:0;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,minmax(0,1fr))}
  .principles li{aspect-ratio:auto}
  #expertises h2{font-size:clamp(1.8rem,min(4vw,6vh),3.1rem)}
  #expertises .domains a{padding:min(14px,1.6vh) 0}
}
@media (min-width:1280px) and (min-height:620px){
  .principles{grid-template-columns:repeat(6,1fr);grid-template-rows:minmax(0,1fr)}
}