:root{--ink:#122625;--paper:#f5f5ee;--mint:#c3edab;--teal:#124a44;--line:#ced5c9}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.6 system-ui,sans-serif}a{color:inherit}button{font:inherit}img{max-width:100%;display:block}h1,h2,h3,p{margin:0 0 1rem}h1,h2,h3{line-height:1.05;letter-spacing:-.045em}h1,h2{font-size:clamp(2.1rem,5vw,4rem)}h3{font-size:1.65rem}p{max-width:63ch}.wrap{width:min(1200px,calc(100% - 48px));margin-inline:auto}.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip:focus{position:absolute;z-index:5;background:white;padding:12px}header,footer{background:#102221;color:white}.nav,.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}.nav nav{display:flex;gap:clamp(12px,3vw,40px);flex-wrap:wrap}.nav a{text-decoration:none;font-weight:650}.logo img{object-fit:contain}.portal-link{border:1px solid #97b9ad;padding:9px 14px;border-radius:6px}.hero{position:relative;isolation:isolate;display:grid;align-items:end;min-height:560px;background:var(--teal);color:white}.hero[hidden]{display:none}.hero>img,.shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}.shade{background:linear-gradient(90deg,rgba(10,28,27,.96),rgba(10,28,27,.68) 48%,rgba(10,28,27,.12)),linear-gradient(0deg,#0b1e1dc9,transparent 55%)}.hero-copy{padding-block:64px}.hero h1,.hero h2{font-size:clamp(2.7rem,6.4vw,5.9rem);max-width:11ch}.hero p:not(.eyebrow){max-width:47ch;font-size:clamp(1rem,2vw,1.23rem)}.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.15em}.hero .eyebrow,.portal .eyebrow{color:var(--mint)}.button{display:inline-block;padding:12px 18px;background:var(--mint);color:var(--ink);font-weight:750;text-decoration:none;border-radius:6px}.button:hover{background:#e0f5cf}.dark{background:var(--teal);color:white}.dark:hover{background:#183b37}.switches{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-block:18px 44px}.switches button{background:white;color:var(--ink);border:0;border-right:1px solid var(--line);text-align:left;padding:15px;cursor:pointer;font-weight:750}.switches button[aria-pressed=true]{background:var(--mint)}.switches button span{font-size:.75rem;margin-right:10px;color:#38534d}.split{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(24px,6vw,88px)}.portal{background:var(--teal);color:white;padding:64px 0}.demo{padding:20px;background:#f8faf4;color:var(--ink);border-radius:12px;box-shadow:0 16px 45px #10222155}.demo-label{display:block;color:#41675d;font-size:.72rem;font-weight:800;letter-spacing:.12em;margin-bottom:15px}.demo details{border-top:1px solid var(--line);padding:14px 0}.demo summary{cursor:pointer;font-weight:750}.demo p{margin:.5rem 0 0}.owner,.offer,.process,.reference{padding-block:58px}.owner img{width:min(100%,320px);border-radius:12px;justify-self:center}.cards,.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.cards article,.steps li{background:white;border:1px solid var(--line);border-radius:8px;padding:22px}.cards span{display:block;margin-bottom:12px;color:var(--teal);font-weight:800}.cards p{margin:0}.steps{padding-left:24px}.reference{border-top:1px solid var(--line)}.foot{padding-block:30px;flex-wrap:wrap}.foot a{color:white}:focus-visible{outline:3px solid #dd8444;outline-offset:3px}
@media(max-width:760px){.wrap{width:calc(100% - 32px)}.nav{display:grid;grid-template-columns:1fr auto;gap:10px}.nav nav{grid-row:2;grid-column:1/-1;justify-content:space-between;font-size:.88rem}.portal-link{font-size:.84rem}.hero{min-height:530px}.hero-copy{padding-block:42px}.hero>img{object-position:58% center}.shade{background:linear-gradient(0deg,#0b1e1d 2%,#0b1e1de8 40%,#0b1e1d2a 100%)}.split,.cards,.steps{grid-template-columns:1fr}.switches{grid-template-columns:repeat(2,1fr)}.switches button{border-bottom:1px solid var(--line)}.portal,.owner,.offer,.process,.reference{padding-block:38px}}

/* Readable copy on every motif and visible keyboard focus on light or dark backgrounds. */
.hero-copy > :is(h1,h2,p) { position: relative; width: fit-content; padding: .16em .28em; background: #102221; border-radius: .12em; }
:focus-visible { outline: 3px solid #102221; outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
.switches { overflow: visible; }
.switches button:focus-visible { position: relative; z-index: 1; }
.skip:focus { color: #102221; }
.nav nav a, .foot a { overflow-wrap: anywhere; }