:root{
  --green:#12453A; --green-d:#0C2E26; --green-l:#2A5A4E;
  --bone:#F2EFE6; --bone2:#E7E3D6; --cream:#F7F1E8;
  --ink:#14140F; --ink2:#3D3C33; --ink3:#6B6A5C;
  --ochre:#D98A2B; --ochre-l:#EDB273; --terra:#C0553A; --terra-d:#A3452D;
  --rule:#14140F; --hair:#D5D0C0;
  --gut:40px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.page{background:var(--bone);width:100%;overflow:hidden}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--gut)}
img{max-width:100%}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--terra)}
h1,h2,h3,h4{font-family:'Bricolage Grotesque','Archivo',Arial,sans-serif;font-weight:800;
  margin:0;letter-spacing:-0.035em;line-height:0.96;text-wrap:pretty}
h1{font-size:clamp(44px,6.4vw,104px);letter-spacing:-0.042em}
h2{font-size:clamp(30px,3.6vw,56px)}
h3{font-size:clamp(22px,1.9vw,30px);letter-spacing:-0.028em;line-height:1.06}
h4{font-size:19px;letter-spacing:-0.02em;line-height:1.15}
/* heading level and visual weight are separate concerns: these keep the
   document outline in order without changing the design */
.h3{font-size:clamp(22px,1.9vw,30px);letter-spacing:-0.028em;line-height:1.06}
.h4{font-family:'Bricolage Grotesque','Archivo',Arial,sans-serif;font-weight:800;margin:0;
  font-size:19px;letter-spacing:-0.02em;line-height:1.15;color:var(--ink)}

p{margin:0;color:var(--ink2)}
.lead{font-size:clamp(18px,1.35vw,22px);line-height:1.45;color:var(--ink2)}
.kick{font-family:'Archivo',Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--terra)}
.kick.o{color:var(--ochre)} .kick.m{color:var(--ink3)}
.small{font-size:15px;line-height:1.5;color:var(--ink3)}
.tiny{font-size:13px;line-height:1.45;color:var(--ink3)}
.stack{display:flex;flex-direction:column}
.hr{height:3px;background:var(--rule)}
.hr.thin{height:1px;background:var(--hair)}

/* buttons */
.btn{background:var(--ochre);color:var(--ink);font-weight:700;padding:17px 28px;font-size:16px;
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;border:2px solid var(--ochre)}
.btn:hover{background:var(--ochre-l);border-color:var(--ochre-l);color:var(--ink)}
.btn.out{background:transparent;border:2px solid var(--ink);color:var(--ink)}
.btn.out:hover{background:var(--ink);color:var(--bone)}
.btn.onGreen{border-color:var(--ochre)}
.btn.out.onGreen{border-color:var(--green-l);color:var(--cream)}
.btn.out.onGreen:hover{background:var(--cream);color:var(--green);border-color:var(--cream)}
.btn.ink{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.btn.ink:hover{background:#000;border-color:#000;color:var(--bone)}

/* nav */
.nav{background:var(--bone);border-bottom:3px solid var(--rule);position:relative;z-index:2}
.navrow{display:flex;justify-content:space-between;align-items:center;padding:18px 0;gap:24px}
.mark{font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:800;font-size:21px;
  letter-spacing:-0.03em;text-transform:uppercase;color:var(--ink);line-height:1}
.links{display:flex;gap:24px;align-items:center;font-size:15px;font-weight:500}
.links a{color:var(--ink2)} .links a:hover{color:var(--terra)}
.links a.on{color:var(--ink);font-weight:700;box-shadow:inset 0 -3px 0 var(--ochre)}
.pill{background:var(--ochre);color:var(--ink)!important;padding:11px 18px;font-weight:700}
.pill:hover{background:var(--ochre-l)}
.burger{display:none}

/* hero */
.hero{background:var(--green);color:var(--cream);padding:74px 0 80px}
.hero h1,.hero h2{color:var(--cream)}
.hero p{color:#C8D6CE}
.hero .lead{color:#D5E1DA;max-width:660px;margin-top:28px}
.herogrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:64px;align-items:end}
.hero.slim{padding:56px 0 60px}
.hero.slim .herogrid{align-items:start}
.stamp{background:var(--ochre);color:var(--ink);font-weight:700;font-size:19px;padding:15px 22px;
  display:inline-block;margin-top:28px}
.btnrow{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.facts{border:2px solid var(--green-l)}
.facts .f{color:#D5E1DA;font-size:15.5px;padding:14px 20px;border-bottom:1px solid var(--green-l)}
.facts .f:last-child{border-bottom:none}
.facts .f b{color:var(--cream)}
.facts .hd{background:var(--green-l);color:var(--cream);font-size:12px;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;padding:10px 20px}

/* sections */
.sec{padding:80px 0}
.sec.tight{padding:56px 0}
.sec.alt{background:var(--bone2)}
.sec.ink{background:var(--ink);color:var(--cream)}
.sec.ink h2,.sec.ink h3{color:var(--cream)}
.sec.ink p{color:#B5B1A2}
.sechd{max-width:840px;margin-bottom:44px}
.sechd h2{margin-top:16px}
.sechd .lead{margin-top:18px;max-width:720px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 60px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px}
.g2.sp,.g3.sp{gap:40px 44px}
.blk{padding:28px 0;border-top:3px solid var(--rule)}
.blk .n{font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:800;font-size:38px;
  color:var(--ochre);line-height:1;margin-bottom:10px}
.blk p{font-size:16.5px;margin-top:10px}
.tick{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:16.5px;color:var(--ink2)}
.tick i{width:9px;height:9px;background:var(--ochre);flex:none;margin-top:9px}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tag{border:2px solid var(--ink);padding:9px 16px;font-size:15px;font-weight:500;color:var(--ink)}
.card{border:3px solid var(--ink);padding:32px 34px;background:var(--bone)}
.card.green{background:var(--green);border-color:var(--green);color:var(--cream)}
.card.green h2,.card.green h3{color:var(--cream)} .card.green p{color:#C8D6CE}
.quote{font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:600;
  font-size:clamp(21px,2vw,30px);line-height:1.16;letter-spacing:-0.03em;color:var(--ink)}

/* session rows */
.srow{display:grid;grid-template-columns:290px minmax(0,1fr) 190px;gap:36px;align-items:center;
  padding:26px 0;border-top:3px solid var(--rule)}
.srow .fmt{font-size:12.5px;font-weight:700;letter-spacing:0.11em;text-transform:uppercase;
  color:var(--ink3);margin-top:8px}
.srow p{font-size:16.5px}
.pr{font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:800;font-size:38px;
  letter-spacing:-0.035em;text-align:right;line-height:1;color:var(--ink)}
.pr s{display:block;font-family:'Archivo',Arial,sans-serif;font-size:13px;font-weight:500;
  color:var(--ink3);letter-spacing:0;margin-top:6px}
.pr s:first-child{margin-top:0;margin-bottom:6px}

/* layout variants that used to be inline styles, moved here so the
   breakpoints below can collapse them on small screens */
.herogrid.flip{grid-template-columns:360px minmax(0,1fr);gap:64px}
.srow.r2{grid-template-columns:300px minmax(0,1fr)}
.srow.r2rev{grid-template-columns:minmax(0,1fr) 300px}
.srow.r3{grid-template-columns:90px 220px minmax(0,1fr)}


/* table */
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{text-align:left;padding:18px 16px;border-bottom:1px solid var(--hair)}
.tbl thead th{border-bottom:3px solid var(--rule);font-size:12px;font-weight:700;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--ink3);padding-bottom:12px}
.tbl td.n,.tbl th.n{text-align:right}
.tbl .p{font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:800;font-size:26px;
  letter-spacing:-0.03em;line-height:1.05}
.tbl .p s{display:block;font-family:'Archivo',Arial,sans-serif;font-size:12.5px;font-weight:500;
  color:var(--ink3);letter-spacing:0;margin-top:4px}
.tbl .p s:first-child{margin-top:0;margin-bottom:4px}
.tbl .nm{font-family:'Bricolage Grotesque',Arial,sans-serif;font-weight:700;font-size:21px;
  letter-spacing:-0.03em}

/* forms */
.field{display:flex;flex-direction:column;gap:8px}
.flabel{display:block;font-size:12px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--ink3)}
.input{display:block;width:100%;border:2px solid var(--ink);background:var(--bone);
  padding:14px 16px;min-height:52px;font-family:inherit;font-size:15px;color:var(--ink);
  border-radius:0;-webkit-appearance:none;appearance:none}
.input::placeholder{color:var(--ink3);opacity:1}
.input:hover{border-color:var(--green)}
textarea.input{line-height:1.5;resize:vertical}
.input.area{min-height:120px;line-height:1.5}
.input.area.short{min-height:80px}
select.input{cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%236B6A5C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 5.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
select.input:invalid{color:var(--ink3)}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.form2 .wide{grid-column:span 2}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap}
.input:user-invalid{border-color:var(--terra)}
.ferr{font-size:13px;font-weight:600;color:var(--terra-d)}
.formmsg{margin-top:22px;border:3px solid var(--ink);background:var(--bone2);padding:18px 20px;
  font-size:16px;color:var(--ink)}
.formmsg.ok{background:var(--green);border-color:var(--green);color:var(--cream)}
.formmsg.bad{background:var(--bone2);border-color:var(--terra)}
.formsent{border:3px solid var(--green);background:var(--green);color:var(--cream);padding:34px 32px}
.formsent h3{color:var(--cream)}
.formsent p{color:#C8D6CE;margin-top:14px}
button.btn{font-family:inherit;cursor:pointer;border-radius:0}
button.btn[disabled]{opacity:0.55;cursor:progress}

/* cta + footer */
.ctab{background:var(--terra);color:var(--cream);padding:78px 0}
.ctab h2{color:var(--cream)}
.ctab p{color:#F4DDD4;font-size:19px;max-width:520px;margin-top:20px}
.ctab .row{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start}
.ctab .cbox{border:2px solid #D68A75;padding:22px}
.ctab .cbox .l{font-size:12px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:#F0BDAE}
.ctab .cbox .v{font-size:18px;color:var(--cream);margin:4px 0 16px}
.foot{background:var(--ink);color:#96958A;padding:56px 0 44px;font-size:15px}
.foot a{color:#96958A} .foot a:hover{color:var(--ochre)}
.foot .mark{color:var(--cream)}
.footgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px}
.foot .col{display:flex;flex-direction:column;gap:9px}
.foot .lab{font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:#5F5E55;margin-bottom:2px}

/* article */
.prose{max-width:720px}
.prose p{font-size:19px;line-height:1.68;color:var(--ink2)}
.prose h2{font-size:clamp(26px,2.4vw,34px);margin-top:14px}
.prose ol{font-size:19px;line-height:1.62;color:var(--ink2);padding-left:24px;margin:0}
.prose li{margin-bottom:14px}

/* focus + skip link */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ochre);outline-offset:2px}
.input:focus-visible{border-color:var(--ink);outline-offset:0}
.hero a:focus-visible,.ctab a:focus-visible,.foot a:focus-visible,.card.green a:focus-visible,
.sec.ink a:focus-visible{outline-color:var(--ochre)}
.skip{position:absolute;left:-9999px;top:0;z-index:9;background:var(--ochre);color:var(--ink);
  font-weight:700;padding:14px 20px}
.skip:focus{left:0}

/* contact details on coloured surfaces */
.ctab .cbox .v.em{font-size:16px;margin-bottom:16px;word-break:break-word}
.ctab .cbox a{color:var(--cream);box-shadow:inset 0 -2px 0 #E0917C}
.ctab .cbox a:hover{color:var(--ochre);box-shadow:inset 0 -2px 0 var(--ochre)}
.facts a{color:var(--cream);box-shadow:inset 0 -2px 0 var(--green-l);word-break:break-word}
.facts a:hover{color:var(--ochre);box-shadow:inset 0 -2px 0 var(--ochre)}
.prose a{box-shadow:inset 0 -2px 0 var(--ochre)}

/* print: the rate card gets printed and taken into meetings */
@media print{
  .nav,.ctab,.skip,.burger,#enquiry{display:none}
  body{background:#fff;font-size:12pt}
  .hero{background:#fff;color:var(--ink)}
  .hero h1,.hero h2,.hero .lead,.hero p{color:var(--ink)}
  .sec{padding:18pt 0}
  .foot{background:#fff;color:var(--ink3)}
  .foot a,.foot .mark{color:var(--ink)}
}

@media (max-width:1100px){
  :root{--gut:32px}
  .herogrid,.herogrid.flip{grid-template-columns:1fr;gap:40px;align-items:start}
  .ctab .row{grid-template-columns:1fr;gap:36px}
  .footgrid{grid-template-columns:1fr 1fr;gap:32px}
  .srow{grid-template-columns:240px minmax(0,1fr) 150px;gap:24px}
  .srow.r3{grid-template-columns:90px minmax(0,1fr)}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  :root{--gut:22px}
  body{font-size:16px}
  .links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bone);
    border-bottom:3px solid var(--rule);flex-direction:column;align-items:stretch;gap:0;
    padding:6px var(--gut) 18px}
  .links.open{display:flex}
  .links a{padding:14px 0;border-bottom:1px solid var(--hair);font-size:17px}
  .links a.pill{margin-top:14px;text-align:center;border-bottom:none}
  .burger{display:block}
  .hero{padding:44px 0 48px}
  .hero .lead{margin-top:20px}
  .sec{padding:48px 0}
  .sechd{margin-bottom:30px}
  .g2,.g3{grid-template-columns:1fr;gap:0}
  .g2.sp,.g3.sp{gap:28px}
  .srow,.srow.r2,.srow.r2rev,.srow.r3{grid-template-columns:1fr;gap:10px;
    padding:22px 0;align-items:start}
  .pr{text-align:left;font-size:32px;display:flex;align-items:baseline;gap:12px}
  .pr s{margin-top:0}
  .btnrow{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .card{padding:24px 22px}
  .stamp{font-size:17px;padding:13px 18px}
  .tbl th,.tbl td{padding:12px 8px;font-size:14px}
  .footgrid{grid-template-columns:1fr;gap:26px}
  .prose p,.prose ol{font-size:17px}
  .form2{grid-template-columns:1fr}
  /* span 2 in a one-column grid would create an implicit second column */
  .form2 .wide{grid-column:span 1}
}