:root{
  --ink:#1A1A1A; --ink-2:#39463E; --muted:#6B766F;
  --line:#E0E2DC; --paper:#FFFFFF; --mist:#F4F5F1;
  --green:#87BF26; --green-d:#557C10;
  --measure:64ch;
  --r:10px;
  --hero-img:none;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.62 "Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif; font-weight:700; letter-spacing:-.025em; margin:0}
h1{font-size:clamp(1.62rem,3.9vw,2.85rem); line-height:1.16}
h1 span{display:block; text-wrap:balance}
h1 .accent{color:var(--green)}
h2{font-size:clamp(1.55rem,3vw,2.15rem); line-height:1.22}
h3{font-size:1.16rem; line-height:1.4}
p{margin:0 0 1.1em}
a{color:inherit}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px}
.narrow{max-width:var(--measure)}
:focus-visible{outline:3px solid var(--green); outline-offset:3px}

/* header */
header.site{background:var(--ink); color:#E8EFE4; position:sticky; top:0; z-index:60;
            border-bottom:1px solid rgba(255,255,255,.10)}
.bar{display:flex; align-items:center; gap:30px; min-height:88px; position:relative}
.mark{display:inline-flex; align-items:center; flex:none}
.mark img{display:block; height:50px; width:auto}
@media(max-width:560px){.mark img{height:38px}}
nav.main{margin-left:auto; display:flex; gap:28px; align-items:center}
nav.main a{text-decoration:none; font-size:.97rem; font-weight:700; letter-spacing:-.01em; color:#CBD6C5; padding:32px 0; border-bottom:2px solid transparent}
nav.main a:hover,nav.main a[aria-current="page"]{color:#fff; border-bottom-color:var(--green)}
.has-sub{position:relative}
.sub{position:absolute; top:100%; left:-12px; min-width:285px; background:var(--ink); padding:8px;
     border:1px solid rgba(255,255,255,.14); border-radius:var(--r); box-shadow:0 18px 40px rgba(0,0,0,.45);
     display:none; z-index:70}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}
.sub a{display:block; white-space:nowrap; padding:10px 14px; font-size:.93rem; font-weight:600; color:#C6D2C1; border-bottom:none; border-radius:6px}
.sub a:hover,.sub a[aria-current="page"]{background:rgba(255,255,255,.09); color:#fff}
.callbtn{text-decoration:none; font-size:.94rem; font-weight:700; color:#fff; white-space:nowrap;
         border:1px solid rgba(255,255,255,.34); border-radius:var(--r); padding:9px 17px; font-variant-numeric:tabular-nums}
.callbtn:hover{background:var(--green); border-color:var(--green); color:#14200A}
details.menu{display:none}
details.menu summary{list-style:none; cursor:pointer; color:#fff; font-size:.95rem; font-weight:700; padding:10px 0}
details.menu summary::-webkit-details-marker{display:none}

/* hero band */
.hero{position:relative; overflow:hidden; background-color:var(--ink); color:#E8E8E8; padding:110px 0 92px}
.hero:before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(880px 520px at 84% -12%, rgba(135,191,38,.24), transparent 62%)}
.hero:after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(118deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px)}
.hero .wrap{position:relative; z-index:1}
.hero h1{color:#fff; max-width:none}
.hero .lede{font-size:1.2rem; color:#A9A9A9; max-width:56ch; margin-top:26px}
/* drop a photograph in later: set --hero-img on the section and add class="photo" */
.hero.photo{background-image:
  linear-gradient(100deg, rgba(26,26,26,.93) 0%, rgba(26,26,26,.74) 54%, rgba(26,26,26,.96) 100%),
  var(--hero-img);
  background-size:cover,cover; background-position:center,center 42%; background-repeat:no-repeat}
.hero.photo:after{opacity:.5}
.hero.photo.dim{background-image:
  linear-gradient(100deg, rgba(26,26,26,.97) 0%, rgba(26,26,26,.88) 45%, rgba(26,26,26,.74) 100%),
  var(--hero-img)}
.rule{width:78px; height:5px; background:var(--green); margin:0 0 30px}

/* split hero: copy left, photograph right */
.hero.split .wrap{display:grid; grid-template-columns:1.25fr .75fr; gap:48px; align-items:start}
.hero.split .shot{align-self:center; width:100%; aspect-ratio:4 / 3; height:auto; object-fit:cover; object-position:center; border-radius:var(--r); display:block; background:#242424}
@media(max-width:860px){
  .hero.split .wrap{grid-template-columns:1fr; gap:30px}
}

/* facts strip inside the hero */
.hero.split .facts{grid-column:1 / -1; margin-top:52px}
.facts{display:grid; grid-template-columns:repeat(3,1fr); margin-top:64px; border-top:1px solid rgba(255,255,255,.2)}
.facts div{padding:24px 30px 4px 0; border-right:1px solid rgba(255,255,255,.12)}
.facts div:last-child{border-right:none}
.facts strong{display:block; font-weight:700; font-size:1.06rem; letter-spacing:-.02em; color:#FFFFFF; margin-bottom:5px}
.facts span{color:#9B9B9B; font-size:.94rem; line-height:1.5; display:block}
@media(max-width:760px){
  .facts{grid-template-columns:1fr; margin-top:44px}
  .facts div{border-right:none; border-bottom:1px solid rgba(255,255,255,.12); padding:18px 0}
}

.actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:36px}
.btn{display:inline-block; text-decoration:none; padding:14px 26px; font-size:.98rem; font-weight:500; border:1px solid var(--ink); border-radius:var(--r)}
.btn.solid{background:var(--ink); color:#fff}
.btn.solid:hover{background:var(--green-d); border-color:var(--green-d)}
.btn.ghost:hover{background:var(--mist)}
.hero .btn.solid,section.ink .btn.solid{background:var(--green); border-color:var(--green); color:#14200A}
.hero .btn.solid:hover,section.ink .btn.solid:hover{background:#9BD531; border-color:#9BD531}
.hero .btn.ghost,section.ink .btn.ghost{border-color:rgba(255,255,255,.38); color:#fff}
.hero .btn.ghost:hover,section.ink .btn.ghost:hover{background:rgba(255,255,255,.1)}

/* numbered sequence */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:46px}
@media(max-width:760px){.steps{grid-template-columns:1fr; gap:30px}}
.step .n{display:block; font-weight:600; font-size:2.2rem; letter-spacing:-.03em; line-height:1; color:var(--green-d); margin-bottom:12px}
.step h3{margin-bottom:8px}
.step p{color:var(--ink-2); margin:0; font-size:1rem}

/* generic sections */
section{padding:86px 0; border-bottom:1px solid var(--line)}
section.tint{background:var(--mist)}
section.ink{background:var(--ink); color:#F2F5EE; border-bottom:none}
section.ink h2{color:#fff}
section.ink a{color:#fff}
.sec-head{max-width:58ch; margin-bottom:38px}
.sec-head p{color:var(--ink-2); margin-top:14px}
section.ink .sec-head p{color:#C4CFC2}

/* services index rows */
.rows{border-top:1px solid var(--line)}
.row{display:grid; grid-template-columns:minmax(0,15rem) 1fr auto; gap:28px; align-items:baseline;
     padding:26px 0; border-bottom:1px solid var(--line); text-decoration:none}
.row h3{font-size:1.28rem}
.row p{color:var(--ink-2); margin:0; font-size:1rem}
.row .go{color:var(--green-d); font-size:.9rem; font-weight:500; white-space:nowrap}
.row:hover h3{color:var(--green-d)}
.row:hover{background:var(--mist); border-radius:var(--r)}
@media(max-width:760px){.row{grid-template-columns:1fr; gap:8px} .row .go{display:none}}

/* pillars + lists */
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:34px 56px}
@media(max-width:760px){.grid2{grid-template-columns:1fr; gap:28px}}
.pillar h3{margin-bottom:8px}
.pillar p{color:var(--ink-2); margin:0; font-size:1rem}
section.ink .pillar p{color:#C4CFC2}
ul.ticks{list-style:none; padding:0; margin:0; max-width:var(--measure)}
ul.ticks li{padding:11px 0 11px 30px; border-bottom:1px solid var(--line); position:relative}
ul.ticks li:before{content:""; position:absolute; left:0; top:22px; width:14px; height:2px; background:var(--green)}
section.ink ul.ticks li{border-bottom-color:#33403A}

/* vendor strip */
.vendors{display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:26px; padding:0; list-style:none}
.vendors li{border:1px solid #3B4941; border-radius:var(--r); padding:7px 15px; font-size:.9rem; color:#DCE4D8}

table.sla{width:100%; border-collapse:collapse; margin-top:24px; font-size:.97rem}
table.sla th{text-align:left; font-weight:700; border-bottom:2px solid var(--green); padding:0 16px 10px 0}
table.sla td{border-bottom:1px solid var(--line); padding:13px 16px 13px 0; vertical-align:top; color:var(--ink-2)}
table.sla td:first-child{font-weight:700; color:var(--ink); white-space:nowrap}
@media(max-width:560px){table.sla{font-size:.84rem} table.sla th,table.sla td{padding-right:8px}
  table.sla td:first-child{white-space:normal}}

/* inline figure */
.figure{margin:38px 0 0; max-width:900px}
.figure.narrowfig{max-width:440px}
.figure.narrowfig img{border:1px solid var(--line)}
.figure img{width:100%; height:auto; display:block; border-radius:var(--r)}
.figure figcaption{color:var(--muted); font-size:.92rem; margin-top:10px}

/* quotes */
.quote{max-width:780px; border-left:4px solid var(--green); padding:4px 0 4px 28px}
.quote p{font-size:1.18rem; line-height:1.55; color:var(--ink)}
.quote .who{font-size:.97rem; color:var(--muted); margin:0}
.quote .who strong{color:var(--ink); font-weight:700; display:block}
section.ink .quote p{color:#EAF0E4}
section.ink .quote .who{color:#A3B39C}
section.ink .quote .who strong{color:#fff}
@media(max-width:560px){.quote{padding-left:18px} .quote p{font-size:1.06rem}}

/* client logos and case studies */
.logos{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; list-style:none; padding:0; margin:26px 0 0}
.logos li{border:1px solid var(--line); border-radius:var(--r); padding:18px 22px; min-height:104px;
          display:flex; align-items:center; justify-content:center; text-align:center;
          font-weight:700; letter-spacing:-.015em; background:#fff}
.logos.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.logos.three{grid-template-columns:repeat(2,1fr)}}
.logos li img{max-height:52px; max-width:100%; width:auto; height:auto; display:block}
section.ink .logos li{border-color:#3B4941; background:transparent; color:#E8EFE4}
.case{border:1px solid var(--line); border-radius:var(--r); padding:30px 32px; margin-top:24px; max-width:900px}
.case h3{margin-bottom:3px}
.case .where{color:var(--muted); font-size:.95rem; margin:0 0 16px}
.case p{color:var(--ink-2)}
@media(max-width:560px){.case{padding:22px 20px}}

/* bio */
.bio{display:grid; grid-template-columns:258px 1fr; gap:40px; align-items:start; max-width:940px}
.bio img{width:100%; height:auto; display:block; border-radius:var(--r)}
.bio h3{font-size:1.3rem; margin-bottom:2px}
.bio .role{color:var(--muted); font-size:.98rem; margin:0 0 18px}
.bio p{color:var(--ink-2)}
.bio p:last-child{margin-bottom:0}
@media(max-width:700px){.bio{grid-template-columns:1fr; gap:24px} .bio img{max-width:240px}}

/* faq */
.faq{max-width:var(--measure)}
.faq details{border-bottom:1px solid var(--line); padding:18px 0}
.faq summary{cursor:pointer; font-weight:500; font-size:1.1rem; letter-spacing:-.015em; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+"; color:var(--green-d); margin-right:12px}
.faq details[open] summary:before{content:"\2212"}
.faq details p{margin:14px 0 0; color:var(--ink-2)}

/* form */
form.enq{max-width:40rem; display:grid; gap:18px}
label{display:block; font-size:.92rem; font-weight:500; margin-bottom:6px}
input,textarea,select{width:100%; font:inherit; font-size:1rem; padding:13px 15px; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:var(--r)}
textarea{min-height:150px; resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--green); outline:none; box-shadow:0 0 0 3px rgba(135,191,38,.25)}
button{font:inherit; font-weight:500; padding:13px 26px; background:var(--ink); color:#fff; border:none; cursor:pointer}
button:hover{background:var(--green-d)}
.hp{position:absolute; left:-9999px}

/* contact details */
.deets{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
@media(max-width:760px){.deets{grid-template-columns:1fr}}
.deets h3{font-size:1.05rem; margin-bottom:6px}
.deets a{color:var(--green-d)}
.deets .addr{line-height:1.5}

/* footer */
footer.site{background:var(--ink); color:#C4CFC2; padding:56px 0 34px; font-size:.94rem}
footer.site a{color:#E6EDE2; text-decoration:none}
footer.site a:hover{text-decoration:underline}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; padding-bottom:34px; border-bottom:1px solid #33403A}
@media(max-width:760px){.fgrid{grid-template-columns:1fr; gap:26px}}
.fgrid h4{font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:#8C9A88; margin:0 0 14px; font-weight:600}
.fgrid ul{list-style:none; padding:0; margin:0}
.fgrid li{margin-bottom:9px}
.legal{padding-top:22px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; color:#8C9A88; font-size:.86rem}
.skip{position:absolute; left:-9999px}
.skip:focus{position:static; display:inline-block; padding:10px}
@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* small screens */
@media(max-width:860px){
  .bar{min-height:70px; gap:14px}
  nav.main{display:none}
  .callbtn{margin-left:auto; padding:8px 13px; font-size:.88rem}
  details.menu{display:block}
  details.menu nav{position:absolute; left:-28px; right:-28px; top:100%; background:var(--ink);
    border-top:1px solid rgba(255,255,255,.12); padding:10px 28px 20px; display:flex; flex-direction:column}
  details.menu nav a{color:#D7E2D1; font-weight:700; text-decoration:none; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08)}
  details.menu nav a.subitem{padding-left:18px; font-size:.92rem; font-weight:600; color:#A9B7A4}
  details.menu nav a:last-child{border-bottom:none}
}
@media(max-width:560px){
  .logos{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
  .logos li{min-height:88px; padding:14px}
  body{font-size:16px}
  .wrap{padding:0 20px}
  .hero{padding:62px 0 52px}
  section{padding:58px 0}
  .actions .btn{flex:1 1 auto; text-align:center}
  details.menu nav{left:-20px; right:-20px; padding:10px 20px 20px}
}