html{color-scheme:light}
body{margin:0}
img{max-width:100%}
[hidden]{display:none !important}

/* Layout: left-aligned editorial grid, full-bleed imagery, hash-routed pages. Roman capitals (Marcellus) for the thesis, a quiet grotesk for everything that must be read. */
:root{
  --bg:#EEF2EF; --bg-2:#E2E9E5; --surface:#F7F9F7;
  --fg:#13282C; --muted:#5B6E6C; --line:#C9D4D0; --line-strong:#9FB0AB;
  --accent:#0E6B6B; --accent-ink:#0A4F52; --accent-soft:#D6E8E5;
  --oak:#A8773F; --oak-soft:#EBDFCB;
  --on-image:#F4F8F6;
  --display:"Marcellus", "Cormorant Garamond", Georgia, serif;
  --body:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --measure:62ch;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C191C; --bg-2:#11232A; --surface:#132529;
    --fg:#E3ECE9; --muted:#93A8A4; --line:#223A3E; --line-strong:#3A5A5E;
    --accent:#4DB6AB; --accent-ink:#9ADED4; --accent-soft:#163A3C;
    --oak:#D1A369; --oak-soft:#3A2F1F;
    --on-image:#F4F8F6;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0C191C; --bg-2:#11232A; --surface:#132529;
  --fg:#E3ECE9; --muted:#93A8A4; --line:#223A3E; --line-strong:#3A5A5E;
  --accent:#4DB6AB; --accent-ink:#9ADED4; --accent-soft:#163A3C;
  --oak:#D1A369; --oak-soft:#3A2F1F;
  --on-image:#F4F8F6;
  color-scheme:dark;
}

/* language switch: both languages are in the markup, one is shown */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:50; background:var(--bg)}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:400}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

/* ---------- type scale: 13.6 / 17 / 21 / 27 / 34 / 43 / 54 / 68 ---------- */
.display{font-family:var(--display); line-height:1.06; letter-spacing:-0.005em}
.h1{font-size:clamp(2.35rem, 5.2vw, 4.25rem)}
.h2{font-size:clamp(1.85rem, 3.3vw, 2.7rem)}
.h3{font-family:var(--body); font-weight:600; font-size:1.3rem; line-height:1.3}
.lead{font-size:clamp(1.12rem, 1.5vw, 1.32rem); line-height:1.5; font-weight:300; max-width:var(--measure)}
.lead strong{font-weight:500}
.small{font-size:.86rem; line-height:1.5}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.prose{max-width:var(--measure)}
.prose p + p{margin-top:1em}

/* ---------- shell ---------- */
.wrap{
  max-width:1240px; margin-inline:auto;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}
@media (min-width:900px){ .wrap{ padding-left:max(40px, env(safe-area-inset-left,0px)); padding-right:max(40px, env(safe-area-inset-right,0px)); } }

.site-header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none}
.brand svg{width:30px; height:30px; flex:none}
.brand-name{font-family:var(--display); font-size:1.12rem; letter-spacing:.14em; line-height:1}
.brand-name span{color:var(--muted)}
.header-right{display:flex; align-items:center; gap:1.25rem}
.nav{display:flex; gap:1.6rem; align-items:center}
.nav a{text-decoration:none; font-size:.95rem; font-weight:500; color:var(--muted); padding:.35rem 0; border-bottom:1.5px solid transparent; white-space:nowrap}
.nav a:hover{color:var(--fg)}
.nav a[aria-current="page"]{color:var(--fg); border-bottom-color:var(--accent)}
.lang{display:inline-flex; border:1px solid var(--line-strong); border-radius:999px; padding:2px; gap:2px}
.lang a{text-decoration:none}
.lang a,.lang button{font-size:.8rem; font-weight:600; letter-spacing:.04em; padding:.25rem .6rem; border-radius:999px; color:var(--muted)}
.lang a[aria-current="true"],.lang button[aria-pressed="true"]{background:var(--fg); color:var(--bg)}
.nav-toggle{display:none; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:999px}
.nav-toggle svg{width:18px; height:18px}
@media (max-width:960px){
  .nav-toggle{display:inline-flex}
  .nav{position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:.5rem 0 .75rem}
  .nav[hidden]{display:none}
  .nav a{padding:.75rem max(16px, env(safe-area-inset-left,0px)); border-bottom:0; font-size:1.05rem}
  .nav a[aria-current="page"]{color:var(--accent-ink)}
}

main{min-height:60vh}
.page{animation:page-in .38s ease-out both}
@keyframes page-in{from{opacity:.001; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .page{animation:none} html{scroll-behavior:auto} }

.section{padding-block:clamp(3.5rem, 7vw, 6.5rem)}
.section + .section{border-top:1px solid var(--line)}
.section-tight{padding-block:clamp(2.25rem, 4vw, 3.5rem)}
.band{background:var(--bg-2)}

/* page intro: title left, lead right */
.intro{display:grid; gap:1.5rem 4rem; grid-template-columns:1fr; align-items:end}
@media (min-width:900px){ .intro{grid-template-columns:7fr 5fr} }
.intro .kicker{font-size:.95rem; color:var(--muted); margin-bottom:1rem}
.intro .kicker b{font-weight:500; color:var(--accent-ink)}

.grid{display:grid; gap:2rem 3rem}
.cols-2{grid-template-columns:1fr}
.cols-3{grid-template-columns:1fr}
.cols-4{grid-template-columns:1fr}
@media (min-width:720px){ .cols-2{grid-template-columns:1fr 1fr} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:1fr 1fr} }
@media (min-width:1080px){ .cols-4{grid-template-columns:repeat(4,1fr)} }
.grid > *{min-width:0}

/* ---------- buttons ---------- */
.actions{display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center}
.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.8rem 1.35rem; border-radius:999px; text-decoration:none; font-weight:500; font-size:.98rem; border:1px solid transparent; transition:background .18s, border-color .18s, color .18s}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.btn-ghost{border-color:var(--line-strong); color:inherit}
.btn-ghost:hover{border-color:var(--fg)}
.btn-on-image{border-color:rgba(255,255,255,.6); color:#fff; background:rgba(8,20,24,.25)}
.btn-on-image:hover{background:rgba(255,255,255,.14); border-color:#fff}
.btn svg{width:16px; height:16px}

/* ---------- hero ---------- */
.hero{position:relative; color:var(--on-image); background:#0C191C; overflow:hidden}
.hero img{width:100%; height:100%; object-fit:cover; object-position:center 62%; position:absolute; inset:0}
.hero::after{content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,19,23,.86) 0%, rgba(7,19,23,.66) 38%, rgba(7,19,23,.22) 70%, rgba(7,19,23,.05) 100%),
    linear-gradient(180deg, rgba(7,19,23,.0) 35%, rgba(7,19,23,.72) 100%);
}
.hero .wrap{position:relative; z-index:1; min-height:min(78vh, 760px); display:flex; flex-direction:column; justify-content:flex-end; padding-block:clamp(2rem, 6vw, 4.5rem) clamp(2.25rem, 5vw, 3.5rem)}
.hero .h1{max-width:19ch; text-shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 40px rgba(0,0,0,.35); animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero .lead{color:rgba(244,248,246,.92); text-shadow:0 1px 2px rgba(0,0,0,.4); margin-top:1.4rem; max-width:58ch; animation:rise .9s .12s cubic-bezier(.2,.7,.2,1) both}
.hero .actions{margin-top:2rem; animation:rise .9s .22s cubic-bezier(.2,.7,.2,1) both}
.hero .credit{position:absolute; right:max(16px, env(safe-area-inset-right,0px)); bottom:1rem; font-size:.74rem; color:rgba(244,248,246,.6)}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .hero .h1,.hero .lead,.hero .actions{animation:none} }
@media (max-width:600px){ .hero .wrap{min-height:82vh} .hero img{object-position:62% 60%} .hero::after{background:linear-gradient(180deg, rgba(7,19,23,.15) 0%, rgba(7,19,23,.35) 35%, rgba(7,19,23,.9) 100%)} }

/* facts strip */
.facts{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
@media (min-width:860px){ .facts{grid-template-columns:repeat(4,1fr)} .facts.five{grid-template-columns:repeat(5,1fr)} }
@media (max-width:859px){ .facts.five .fact:last-child{grid-column:1 / -1; border-right:0; padding-left:0} }
.fact{padding:1.6rem 1.4rem 1.6rem 0; border-right:1px solid var(--line); min-width:0}
.fact:nth-child(2n){border-right:0; padding-left:1.4rem}
@media (min-width:860px){ .fact:nth-child(2n){border-right:1px solid var(--line); padding-left:0} .fact + .fact{padding-left:1.6rem} .fact:last-child{border-right:0} }
.fact .value{font-family:var(--display); font-size:clamp(2rem, 3.4vw, 2.8rem); line-height:1; color:var(--accent-ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.fact .value sup{font-size:.4em; vertical-align:top; position:relative; top:.35em}
.fact .label{margin-top:.55rem; color:var(--muted); font-size:.93rem; line-height:1.4}

/* ---------- misc components ---------- */
.rule-list > li{padding:1.1rem 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr; gap:.25rem 2rem}
.rule-list > li:last-child{border-bottom:1px solid var(--line)}
@media (min-width:640px){ .rule-list:not(.stack) > li{grid-template-columns:minmax(0,13rem) 1fr} }
.rule-list .k{color:var(--muted); font-size:.95rem}
.rule-list .v{min-width:0}
.rule-list.stack > li{padding:.85rem 0; gap:.15rem}

.pillars h3{margin-bottom:.6rem}
.pillars p{color:var(--muted); max-width:38ch}
.pillars .glyph{width:44px; height:44px; margin-bottom:1.1rem; color:var(--accent)}

.checklist li{position:relative; padding-left:1.4rem; padding-block:.28rem}
.checklist li::before{content:""; position:absolute; left:0; top:.95em; width:.55rem; height:.55rem; border-radius:50%; background:var(--accent); opacity:.85}

figure{margin:0}
figcaption{font-size:.86rem; color:var(--muted); margin-top:.7rem; line-height:1.5}
.frame{background:var(--surface); border:1px solid var(--line); padding:.6rem}
.frame img{width:100%}
.photo{overflow:hidden; border-radius:4px; background:var(--bg-2)}
.photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.photo.zoom{cursor:zoom-in}
.photo.zoom:hover img{transform:scale(1.02)}

table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
th,td{text-align:left; padding:.7rem .75rem .7rem 0; border-bottom:1px solid var(--line); vertical-align:top}
th{font-weight:500; color:var(--muted); font-size:.88rem}
td.r,th.r{text-align:right; padding-right:0; white-space:nowrap}
tr.total td{font-weight:600; border-bottom:2px solid var(--line-strong)}

.timeline{display:grid; gap:0; grid-template-columns:1fr}
@media (min-width:860px){ .timeline{grid-template-columns:repeat(5,1fr)} }
.timeline li{border-top:2px solid var(--line-strong); padding:1.1rem 1.5rem 0 0; position:relative}
.timeline li::before{content:""; position:absolute; top:-6px; left:0; width:10px; height:10px; border-radius:50%; background:var(--bg); border:2px solid var(--accent)}
.timeline .when{font-family:var(--display); font-size:1.55rem; line-height:1; color:var(--accent-ink)}
.timeline p{margin-top:.6rem; color:var(--muted); font-size:.95rem; max-width:30ch}
@media (max-width:859px){ .timeline li{padding:0 0 1.5rem 1.6rem; border-top:0; border-left:2px solid var(--line-strong)} .timeline li::before{top:.3rem; left:-6px} }

.page-cards{display:grid; gap:1.5rem; grid-template-columns:1fr}
@media (min-width:720px){ .page-cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .page-cards{grid-template-columns:repeat(4,1fr)} }
.page-card{text-decoration:none; display:flex; flex-direction:column; gap:.9rem; border-radius:6px}
.page-card .photo{aspect-ratio:4/3; position:relative; isolation:isolate}
.page-card .photo img{transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease}
.page-card .photo::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 0 var(--accent); transition:box-shadow .25s ease; border-radius:4px; pointer-events:none}
.page-card h3{font-family:var(--display); font-weight:400; font-size:1.45rem; line-height:1.15; transition:color .2s}
.page-card p{color:var(--muted); font-size:.95rem}
.page-card .go{display:inline-flex; align-items:center; gap:.45rem; color:var(--accent-ink); font-weight:500; font-size:.92rem}
.page-card .go svg{width:14px; height:14px; transition:transform .25s ease}
.page-card .go span{position:relative}
.page-card .go span::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:1.5px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.page-card:hover .photo img,.page-card:focus-visible .photo img{transform:scale(1.045)}
.page-card:hover .photo::after,.page-card:focus-visible .photo::after{box-shadow:inset 0 0 0 2px var(--accent)}
.page-card:hover h3,.page-card:focus-visible h3{color:var(--accent-ink)}
.page-card:hover .go svg,.page-card:focus-visible .go svg{transform:translateX(4px)}
.page-card:hover .go span::after,.page-card:focus-visible .go span::after{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){ .page-card .photo img,.page-card .go svg,.page-card .go span::after{transition:none} .page-card:hover .photo img{transform:none} }

.callout{border-left:3px solid var(--oak); padding:.25rem 0 .25rem 1.25rem; color:var(--muted); max-width:var(--measure)}
.callout b{color:var(--fg); font-weight:500}

.todo{display:inline-block; border:1px dashed var(--oak); color:var(--oak); border-radius:3px; padding:0 .4rem; font-size:.9em; white-space:nowrap}

.tabs{display:flex; flex-wrap:wrap; gap:.25rem; border-bottom:1px solid var(--line); margin-bottom:1.25rem}
.tabs button{padding:.6rem .9rem; font-weight:500; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--fg); border-bottom-color:var(--accent)}
.tabpanel[hidden]{display:none}

.gallery{display:grid; gap:.75rem; grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){ .gallery{grid-template-columns:repeat(3,1fr)} }
.gallery .photo{aspect-ratio:3/2}
.gallery .wide{aspect-ratio:21/9; grid-column:1 / -1}

.lightbox{position:fixed; inset:0; z-index:100; background:rgba(6,14,16,.92); display:flex; align-items:center; justify-content:center; padding:max(16px, env(safe-area-inset-left,0px))}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%; max-height:88vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox .close{position:absolute; top:calc(1rem + env(safe-area-inset-top,0px)); right:calc(1rem + env(safe-area-inset-right,0px)); color:#fff; width:44px; height:44px; border:1px solid rgba(255,255,255,.4); border-radius:50%; display:flex; align-items:center; justify-content:center}
.lightbox figcaption{position:absolute; left:0; right:0; bottom:calc(1rem + env(safe-area-inset-bottom,0px)); text-align:center; color:rgba(255,255,255,.75)}

.steps{counter-reset:s; display:grid; gap:1.5rem 3rem; grid-template-columns:1fr}
@media (min-width:720px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .steps{grid-template-columns:repeat(4,1fr)} }
.steps li{counter-increment:s; border-top:1px solid var(--line-strong); padding-top:1rem}
.steps li::before{content:counter(s) "."; display:block; font-family:var(--display); font-size:1.7rem; color:var(--accent-ink); margin-bottom:.4rem; line-height:1}
.steps h3{margin-bottom:.4rem}
.steps p{color:var(--muted); font-size:.95rem}

.contact-block{display:grid; gap:2rem 3rem; grid-template-columns:1fr}
@media (min-width:860px){ .contact-block{grid-template-columns:1fr 1fr} }
.mail-card{border-top:1px solid var(--line-strong); padding-top:1.5rem; display:flex; flex-direction:column; gap:.6rem; min-width:0}
.mail-label{font-size:.85rem; color:var(--muted)}
.mail-addr{font-family:var(--display); font-size:clamp(1.5rem, 3.2vw, 2.4rem); line-height:1.15; color:var(--accent-ink); text-decoration:none; word-break:break-all; user-select:all}
.mail-addr:hover{text-decoration:underline; text-underline-offset:.15em}
.mail-actions{display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; align-items:center; margin-top:.75rem}

.pager{display:flex; justify-content:space-between; gap:2rem; border-top:1px solid var(--line); padding-block:2rem 2.5rem}
.pager a{text-decoration:none; display:flex; align-items:center; gap:.7rem; min-width:0; max-width:48%; color:var(--muted)}
.pager a.next{margin-left:auto; text-align:right; flex-direction:row-reverse}
.pager .arrow{flex:none; width:18px; height:18px; color:var(--accent-ink); transition:transform .22s ease}
.pager .txt{display:flex; flex-direction:column; gap:.1rem; min-width:0}
.pager .txt > span{font-size:.8rem; letter-spacing:.01em}
.pager .txt > b{font-family:var(--display); font-weight:400; font-size:1.2rem; line-height:1.15; color:var(--fg); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.2em; transition:color .18s, text-decoration-color .18s}
.pager a:hover .txt > b,.pager a:focus-visible .txt > b{color:var(--accent-ink); text-decoration-color:var(--accent)}
.pager a.prev:hover .arrow{transform:translateX(-4px)}
.pager a.next:hover .arrow{transform:translateX(4px)}
@media (prefers-reduced-motion: reduce){ .pager .arrow{transition:none} .pager a:hover .arrow{transform:none} }

.site-footer{border-top:1px solid var(--line); padding-block:2.5rem 3rem; color:var(--muted); font-size:.9rem}
.site-footer .wrap{display:grid; gap:1.5rem 3rem; grid-template-columns:1fr}
@media (min-width:860px){ .site-footer .wrap{grid-template-columns:2fr 1fr 1fr} }
.site-footer a{text-decoration:none; color:inherit}
.site-footer a:hover{color:var(--fg)}
.site-footer ul li{padding:.15rem 0}

/* ---------- depth diagram ---------- */
.depth-wrap{display:grid; gap:2rem 3rem; grid-template-columns:1fr; align-items:start}
@media (min-width:980px){ .depth-wrap{grid-template-columns:7fr 5fr} }
.depth{width:100%; height:auto; display:block; font-family:var(--body)}
.depth text{fill:var(--fg); font-size:12.5px}
.depth .lbl-muted{fill:var(--muted)}
.depth .lbl-accent{fill:var(--accent-ink); font-weight:600}
.depth .lbl-sm{font-size:11px}
.depth .iso{stroke:var(--line-strong); stroke-dasharray:3 5; stroke-width:1}
.depth .axis{stroke:var(--line-strong); stroke-width:1}
.depth .ground{fill:var(--bg-2)}
.depth .hole{stroke:var(--fg); stroke-width:2.5}
.depth .hole-plan{stroke:var(--oak); stroke-width:2; stroke-dasharray:4 5}
.depth .fault{stroke:var(--accent); stroke-width:1.2; fill:none; opacity:.75}
.depth .zone{fill:var(--accent); opacity:.16}
.depth .zone-line{stroke:var(--accent); stroke-width:1.5}
.depth .probe{stroke:var(--oak); stroke-width:1.5}
.depth .probe-dot{fill:var(--oak)}
.depth .probe-lbl{fill:var(--oak); font-weight:600}
.probe-ctl{margin-top:1.25rem; display:grid; gap:.5rem}
.probe-ctl label{font-size:.9rem; color:var(--muted)}
.probe-ctl input[type=range]{width:100%; accent-color:var(--oak)}
.probe-ctl output{font-family:var(--display); font-size:1.5rem; color:var(--oak); font-variant-numeric:tabular-nums}
.chem{display:grid; gap:1rem; grid-template-columns:1fr}
.chem li{border-top:1px solid var(--line); padding-top:.7rem}
.chem .k{font-size:.86rem; color:var(--muted)}
.chem .v{font-weight:500; margin-top:.15rem}