*,*::before,*::after{box-sizing:border-box}

:root{
  --paper:#E5E8DF;
  --paper-2:#F1F3EC;
  --ink:#15181A;
  --ink-soft:#4E5553;
  --clover:#0E5540;
  --clover-deep:#0A3B2C;
  --clover-light:#9CC9B2;
  --mark:#BE3A2B;
  --rule:#BAC1B3;
  --rule-dark:rgba(255,255,255,.20);
  --max:1180px;
  --gut:clamp(1.15rem,4vw,3rem);
  --display:"Archivo",system-ui,sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-optical-sizing:auto;
  font-size:clamp(1rem,.97rem + .18vw,1.09rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;
}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

h1,h2,h3,h4{
  font-family:var(--display);font-variation-settings:"wdth" 110;
  font-weight:700;line-height:1.05;letter-spacing:-.018em;margin:0;
}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(3rem,6.5vw,5.5rem)}
.section-tight{padding-block:clamp(2rem,4vw,3.25rem)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:2px}
:focus-visible{outline:2.5px solid var(--mark);outline-offset:3px}

.label{
  font-family:var(--mono);font-size:.71rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 1rem;display:block;
}
.lede{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);line-height:1.5;max-width:58ch}
.muted{color:var(--ink-soft)}
.small{font-size:.92rem}
.prose{max-width:68ch}
.prose h3{font-size:1.22rem;margin-top:2rem;font-variation-settings:"wdth" 104}
.prose h3+p{margin-top:.7rem}
.ph{
  font-family:var(--mono);font-size:.9em;color:var(--mark);
  border-bottom:1.5px dashed var(--mark);padding:0 .12em;white-space:nowrap;
}
.inline-link{color:var(--clover);text-decoration-thickness:1px;text-underline-offset:2.5px}
.inline-link:hover{color:var(--ink)}

/* header */
.site-head{
  position:sticky;top:0;z-index:20;
  background:rgba(229,232,223,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;padding-block:.7rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink)}
.brand svg{color:var(--clover);flex:none}
.brandname{font-family:var(--display);font-variation-settings:"wdth" 106;font-weight:700;font-size:1rem;line-height:1}
.brandname span{
  display:block;font-family:var(--mono);font-weight:400;font-size:.575rem;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink-soft);margin-top:.28rem;
}
.nav{display:flex;flex-wrap:wrap;gap:.4rem clamp(.7rem,2vw,1.5rem);font-family:var(--mono);font-size:.735rem;letter-spacing:.1em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--ink-soft);padding:.3rem 0;border-bottom:1.5px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--rule)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--mark)}
@media(max-width:760px){
  .head-in{padding-block:.6rem}
  .site-head .brandname span{display:none}
  .site-head .brandname{font-size:.95rem}
  .nav{font-size:.68rem;letter-spacing:.05em;gap:.35rem .85rem;width:100%}
}

/* breadcrumbs */
.crumbs{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding-top:1.15rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .55rem;margin:0;padding:0}
.crumbs li::after{content:"/";margin-left:.55rem;color:var(--rule)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-weight:600;font-size:.94rem;font-variation-settings:"wdth" 104;
  padding:.82rem 1.35rem;border-radius:2px;text-decoration:none;
  border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:background .16s ease,color .16s ease,border-color .16s ease;
  cursor:pointer;
}
.btn:hover{background:var(--clover);border-color:var(--clover);color:#fff}
.btn:active{background:var(--clover-deep);border-color:var(--clover-deep)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.75rem}

/* ledger */
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ledger li{
  display:grid;grid-template-columns:1.4rem 1fr auto;gap:.15rem .9rem;
  align-items:baseline;padding:.8rem 0;border-bottom:1px solid var(--rule);
}
.tick{font-family:var(--mono);font-size:.85rem;color:var(--mark);line-height:1.6}
.unit{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;
}
@media(max-width:560px){
  .ledger li{grid-template-columns:1.4rem 1fr}
  .unit{grid-column:2}
}

/* docket panel */
.docket{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;
  padding:clamp(1.15rem,3vw,1.85rem);
  box-shadow:0 18px 44px -30px rgba(21,24,26,.55);
}
.docket-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;align-items:baseline;margin-bottom:.35rem}
.docket-head .label{margin-bottom:0}
.docket h2{font-size:1.15rem;font-variation-settings:"wdth" 104}
.docket-note{margin-top:1rem;font-size:.9rem;color:var(--ink-soft)}

/* hero */
.hero{padding-top:clamp(2.25rem,5vw,4.25rem);padding-bottom:clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;gap:clamp(2.25rem,5vw,3.5rem);grid-template-columns:1fr}
@media(min-width:920px){.hero-grid{grid-template-columns:1.06fr .94fr;align-items:start}}
.hero h1{font-size:clamp(2.35rem,6.6vw,4.35rem);letter-spacing:-.028em;font-variation-settings:"wdth" 106}
.hero .lede{margin-top:1.4rem}

/* masthead */
.masthead{padding-top:clamp(1.5rem,3vw,2.5rem);padding-bottom:clamp(2.25rem,5vw,3.75rem);border-bottom:1px solid var(--rule)}
.masthead h1{font-size:clamp(2rem,5.2vw,3.35rem);letter-spacing:-.025em}
.masthead .lede{margin-top:1.2rem}

/* clover field */
.field{background:var(--clover);color:#E7EFE9}
.field h2,.field h3{color:#fff}
.field .label,.field .muted,.field .unit{color:var(--clover-light)}
.field .ledger{border-top-color:var(--rule-dark)}
.field .ledger li{border-bottom-color:var(--rule-dark)}
.field .btn{background:var(--paper);border-color:var(--paper);color:var(--clover-deep)}
.field .btn:hover{background:#fff;border-color:#fff;color:var(--clover-deep)}
.field .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.field .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.field .inline-link{color:#fff}

/* hairline card grid */
.cards{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);grid-template-columns:1fr;margin-top:2.5rem}
@media(min-width:720px){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--paper-2);padding:clamp(1.35rem,3vw,2rem)}
.card h3{font-size:1.16rem;font-variation-settings:"wdth" 104}
.card p{margin-top:.6rem;font-size:.97rem}
.field .cards{background:var(--rule-dark);border-color:var(--rule-dark)}
.field .card{background:var(--clover)}
.field .card p{color:var(--clover-light)}

/* plain columns */
.cols{display:grid;gap:clamp(1.75rem,4vw,2.75rem);grid-template-columns:1fr;margin-top:2.75rem}
@media(min-width:800px){.cols-3{grid-template-columns:repeat(3,1fr)}.cols-2{grid-template-columns:1fr 1fr}}
.col h3{font-size:1.18rem;padding-top:1rem;border-top:2px solid var(--ink);font-variation-settings:"wdth" 104}
.col p{margin-top:.7rem;font-size:.98rem}

.head-block{max-width:62ch}
.head-block h2{font-size:clamp(1.7rem,3.8vw,2.5rem);letter-spacing:-.022em}
.head-block p{margin-top:1rem;font-size:1.05rem}

/* index entries */
.entry{padding-block:clamp(1.8rem,3.6vw,2.6rem);border-top:1px solid var(--rule);display:grid;gap:1rem 2.5rem;grid-template-columns:1fr}
@media(min-width:860px){.entry{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}}
.entry:last-of-type{border-bottom:1px solid var(--rule)}
.entry h3{font-size:clamp(1.3rem,2.4vw,1.75rem)}
.entry h3 a{text-decoration:none;border-bottom:2px solid var(--rule)}
.entry h3 a:hover{border-bottom-color:var(--mark)}
.entry-num{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--mark);display:block;margin-bottom:.55rem}
.entry-more{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clover);text-decoration:none;border-bottom:1px solid var(--rule);display:inline-block;margin-top:.9rem}
.entry-more:hover{color:var(--ink);border-bottom-color:var(--mark)}

/* service page layout */
.svc-grid{display:grid;gap:clamp(2rem,4vw,3.25rem);grid-template-columns:1fr}
@media(min-width:940px){.svc-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start}}
.side{position:sticky;top:6.5rem}
@media(max-width:939px){.side{position:static}}
.panel{background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;padding:clamp(1.1rem,2.6vw,1.6rem);margin-bottom:1.25rem}
.panel h2,.panel h3{font-size:1.05rem;font-variation-settings:"wdth" 104}
.panel .ledger{margin-top:.85rem}
.panel .foot-note{margin-top:.9rem;font-size:.85rem;color:var(--ink-soft)}
.linklist{list-style:none;margin:.85rem 0 0;padding:0}
.linklist li{border-top:1px solid var(--rule);padding:.6rem 0}
.linklist li:last-child{padding-bottom:0}
.linklist a{text-decoration:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.linklist a:hover .ll-name{border-bottom-color:var(--mark)}
.ll-name{border-bottom:1px solid transparent;font-family:var(--display);font-weight:600;font-size:.98rem;font-variation-settings:"wdth" 104}
.ll-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}

/* faq */
.faq{margin-top:1rem;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:1.02rem;font-variation-settings:"wdth" 104;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.95rem;font-family:var(--mono);color:var(--mark);font-size:1.1rem}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--clover)}
.faq .answer{padding:0 0 1.15rem;font-size:.99rem;max-width:66ch}

/* case study */
.case{border:1px solid var(--rule);border-radius:3px;background:var(--paper-2);padding:clamp(1.25rem,3vw,2.15rem);margin-top:2rem}
.case-head{border-bottom:2px solid var(--ink);padding-bottom:1rem;margin-bottom:1.5rem}
.case-head h2{font-size:clamp(1.3rem,2.8vw,1.85rem)}
.case-grid{display:grid;gap:1.75rem;grid-template-columns:1fr}
@media(min-width:820px){.case-grid{grid-template-columns:1.1fr 1fr}}
.figures{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:1.25rem}
@media(min-width:520px){.figures{grid-template-columns:1fr 1fr}}
.fig{background:var(--paper-2);padding:1.1rem 1.2rem}
.fig .figure{
  font-family:var(--mono);font-size:1.05rem;color:var(--mark);
  border-bottom:1.5px dashed var(--mark);display:inline-block;padding-bottom:.1rem;
}
.fig .unit{display:block;margin-top:.6rem;white-space:normal}
.notice{border-left:3px solid var(--mark);background:var(--paper-2);padding:1rem 1.15rem;font-size:.94rem;margin-top:1.75rem}

/* form */
.form{margin-top:1.75rem;max-width:620px}
.form-row{display:grid;gap:.42rem;margin-bottom:1.15rem}
.form-grid{display:grid;gap:0 1.1rem;grid-template-columns:1fr}
@media(min-width:640px){.form-grid{grid-template-columns:1fr 1fr}}
label{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.hint{font-family:var(--body);font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
input,select,textarea{
  font-family:var(--body);font-size:1rem;width:100%;color:var(--ink);
  padding:.72rem .85rem;border:1px solid var(--rule);border-radius:2px;background:var(--paper-2);
  min-height:44px;
}
textarea{min-height:130px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%;background-size:6px 6px;background-repeat:no-repeat}
input:focus,select:focus,textarea:focus{border-color:var(--clover);background:#fff}
.form-note{font-size:.87rem;color:var(--ink-soft);margin-top:1.1rem}

.steps{list-style:none;margin:1.25rem 0 0;padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-left:2.3rem;margin-bottom:1.1rem;font-size:.98rem}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:.08rem;
  font-family:var(--mono);font-size:.72rem;color:var(--mark);
  border:1.5px solid var(--mark);border-radius:50%;width:1.5rem;height:1.5rem;
  display:grid;place-items:center;
}

.note-strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:clamp(2rem,4vw,3rem)}
.note-strip-in{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}
.note-strip svg{color:var(--clover);flex:none}
.note-strip p{font-size:clamp(1.02rem,1.8vw,1.2rem);max-width:52ch}

.closer h2{font-size:clamp(1.85rem,4.2vw,2.9rem);max-width:18ch;letter-spacing:-.024em}
.closer p{margin-top:1rem;max-width:52ch}

.map{border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin-top:1.25rem;background:var(--paper-2)}
.map iframe{border:0;width:100%;height:340px;filter:saturate(.55) contrast(.95)}

.empty{border:1px dashed var(--rule);border-radius:3px;padding:clamp(1.5rem,4vw,2.5rem);background:var(--paper-2);margin-top:2rem}
.empty h2{font-size:1.3rem}
.empty p{margin-top:.8rem;max-width:60ch}

/* footer */
.site-foot{background:var(--clover-deep);color:#D6E3D9;padding-block:clamp(2.5rem,5vw,3.75rem);font-size:.94rem}
.foot-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.35fr 1fr 1fr 1.1fr}}
.site-foot a{color:#D6E3D9}
.site-foot .brand{color:#fff}
.site-foot .brand svg{color:var(--clover-light)}
.site-foot .brandname span{color:var(--clover-light)}
.foot-title{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clover-light);margin:0 0 .9rem}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{margin-bottom:.5rem}
.foot-list a{text-decoration:none}
.foot-list a:hover{text-decoration:underline}
.foot-tag{margin-top:1.1rem;max-width:34ch;color:var(--clover-light)}
.foot-base{margin-top:2.5rem;padding-top:1.35rem;border-top:1px solid var(--rule-dark);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--clover-light)}
.site-foot .ph{color:#F0A79C;border-bottom-color:#F0A79C}
address{font-style:normal}

/* motion */
@keyframes rowin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.docket .ledger li{animation:rowin .55s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i,0)*85ms + 180ms)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
