@font-face{font-family:"Schibsted Grotesk";src:url("/assets/fonts/schibsted-grotesk.woff2") format("woff2");font-weight:400 900;font-display:swap}
:root{--paper:#ECEFEA;--ink:#1A1F1C;--muted:#5A635D;--pine:#1F5C4A;--rule:#C9D0C9;--measure:40rem}
@media (prefers-color-scheme:dark){:root{--paper:#141816;--ink:#E6EAE5;--muted:#9AA39C;--pine:#7FC1A8;--rule:#2C332F}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.6 "Schibsted Grotesk",system-ui,sans-serif;font-optical-sizing:auto}
a{color:var(--pine);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:3px solid var(--pine);outline-offset:3px;border-radius:2px}
.masthead,main,.footer{max-width:64rem;margin:0 auto;padding:0 1.25rem}
.masthead{padding-top:1.75rem}
.wordmark{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.mark-bg{fill:var(--pine)}
.mark-v{fill:var(--paper)}
.intro{padding:5rem 0 3.5rem;max-width:52rem}
h1{font-size:clamp(2.5rem,7vw,5rem);line-height:1.02;font-weight:800;letter-spacing:-.035em;margin:0 0 1.5rem}
.lead{font-size:1.3rem;line-height:1.5;max-width:var(--measure);margin:0;color:var(--muted)}
h2{font-size:1.125rem;font-weight:700;margin:0 0 .75rem;letter-spacing:-.005em}
h3{font-size:1.4rem;font-weight:700;letter-spacing:-.015em;margin:0 0 .4rem}
.row{border-top:1px solid var(--rule);padding:2rem 0 2.25rem}
.row>div{max-width:var(--measure)}
.app p{margin:0 0 .75rem}
.row p{margin:0 0 .75rem}
.services h3{font-size:1.15rem;letter-spacing:-.01em;margin:0 0 .3rem}
.services h3:not(:first-child){margin-top:1.4rem}
.app{display:flex;gap:1.25rem;align-items:flex-start;max-width:var(--measure)}
.app-icon{flex:none;width:80px;height:80px;border-radius:18px;box-shadow:0 0 0 1px var(--rule)}
.muted{color:var(--muted)}
.contact{border-top:1px solid var(--rule);padding:3rem 0 4rem}
.contact p{margin:0 0 1rem;max-width:var(--measure)}
.email{display:inline-block;font-size:clamp(1.15rem,5.6vw,4rem);line-height:1.05;font-weight:800;letter-spacing:-.035em;white-space:nowrap;text-decoration-thickness:3px;text-underline-offset:.12em}
.email:hover{text-decoration-thickness:5px}
.footer{padding-bottom:2.5rem;font-size:.9rem;color:var(--muted)}
.footer p{margin:0;border-top:1px solid var(--rule);padding-top:1.25rem}
@media (min-width:52rem){
  .row{display:grid;grid-template-columns:14rem 1fr;gap:2rem}
  .row h2{margin:0}
}
.case-intro .app-icon-lg{width:112px;height:112px;border-radius:25px;margin-bottom:1.75rem}
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1rem}
.list{padding-left:1.1rem;margin:0 0 1rem}
.list li{margin:0 0 .5rem}
.diagram{margin:1.5rem 0 1.75rem}
.diagram svg{display:block;width:100%;height:auto}
.dg-hold rect{fill:var(--rule)}
.dg-hands rect{fill:none;stroke:var(--muted);stroke-dasharray:4 4}
.dg-pick rect{fill:var(--pine)}
.dg-text text{fill:var(--muted);font:500 13px "Schibsted Grotesk",system-ui,sans-serif}
.availability{margin:1.25rem 0 0;font-weight:600;color:var(--pine)}
.intro-photo{display:flex;flex-direction:column-reverse;gap:1.5rem;max-width:none}
.intro-photo>div{max-width:52rem}
.portrait{width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--rule)}
@media (min-width:52rem){
  .intro-photo{flex-direction:row;align-items:center;justify-content:space-between;gap:3rem}
  .portrait{width:230px;height:230px;flex:none}
  .intro-photo h1{font-size:clamp(2.5rem,5.2vw,4.1rem)}
}