:root{
    --forest-950:#06280E; --forest-900:#0D4416; --forest-800:#12571E;
    --lime-600:#497C1F;  --lime-400:#8CC231;
    --bone:#EFEFEA; --stone:#57635A;
    --serif:"Source Serif 4",Georgia,serif; --sans:"Archivo",system-ui,sans-serif;
    --gut:clamp(1.5rem,5vw,5.5rem); --maxw:1240px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--forest-950);color:var(--bone);font-family:var(--sans);
       font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--lime-400);outline-offset:3px}

  header{position:relative;z-index:6;background:#fff;border-bottom:1px solid rgba(13,68,22,.14)}
  .bar{display:flex;align-items:center;justify-content:space-between;gap:2rem;
       padding-top:1.35rem;padding-bottom:1.35rem}
  .lockup{display:flex;align-items:center;gap:.9rem;flex-shrink:0;text-decoration:none}
  .lockup .mk{height:52px;width:48.6px;flex:none}
  .lockup .mk svg{width:100%;height:100%;display:block}
  .lockup .rule{width:1px;height:44px;background:rgba(13,68,22,.3);flex:none}
  .lockup .wm{height:37px;width:auto;display:block}
  nav ul{display:flex;gap:1.7rem;list-style:none;margin:0;padding:0}
  nav a{font-size:.86rem;letter-spacing:.02em;text-decoration:none;color:rgba(13,68,22,.76);
        padding-bottom:2px;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
  nav a:hover{color:var(--forest-900);border-bottom-color:var(--lime-600)}
  nav a[aria-current]{color:var(--forest-900);border-bottom-color:var(--lime-600)}
  .menu-btn{display:none;background:none;border:1px solid rgba(13,68,22,.28);color:var(--forest-900);
            font-family:var(--sans);font-size:.82rem;padding:.5rem .85rem;border-radius:2px;cursor:pointer}

  .hero{position:relative;overflow:hidden;padding:clamp(4.5rem,11vw,9.5rem) 0 clamp(4rem,9vw,7.5rem)}
  .hero.short{padding:clamp(3.5rem,7vw,6rem) 0 clamp(3rem,6vw,4.5rem)}
  .hero-mark{position:absolute;right:-11%;top:50%;transform:translateY(-50%);
             height:118%;aspect-ratio:1872/2001;opacity:.22;pointer-events:none;user-select:none}
  .hero-mark svg{width:100%;height:100%;display:block}
  .hero .wrap{position:relative;z-index:2}
  h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.15rem,5.5vw,4.7rem);
     line-height:1.06;letter-spacing:-.018em;margin:0}
  h1 span{display:block}
  .hero.short h1{font-size:clamp(2rem,4.6vw,3.8rem)}
  .lede{margin:clamp(2rem,4vw,3rem) 0 0;padding-left:1.6rem;border-left:1px solid rgba(140,194,49,.55);
        max-width:62ch;font-size:1.06rem;line-height:1.75;color:rgba(239,239,234,.82)}
  .lede p{margin:0 0 1rem} .lede p:last-child{margin-bottom:0}
  .cta{display:inline-block;margin-top:2.6rem;text-decoration:none;font-size:.9rem;letter-spacing:.03em;
       font-weight:500;padding:.95rem 1.9rem;color:var(--forest-950);background:var(--lime-400);
       border-radius:2px;transition:background .18s}
  .cta:hover{background:#9BD139}
  .cta.ghost{background:transparent;color:var(--bone);border:1px solid rgba(239,239,234,.4)}
  .cta.ghost:hover{background:rgba(239,239,234,.08)}

  .facts{background:var(--forest-900);border-top:1px solid rgba(239,239,234,.1)}
  .facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-top:0;padding-bottom:0}
  .fact{padding:2.6rem 2rem;border-left:1px solid rgba(239,239,234,.14)}
  .fact:first-child{border-left:0;padding-left:0}
  .fact b{display:block;font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.2;
          color:var(--lime-400);margin-bottom:.5rem}
  .fact span{font-size:.92rem;line-height:1.55;color:rgba(239,239,234,.7)}

  .practice{background:var(--bone);color:var(--forest-950);padding:clamp(4.5rem,9vw,7.5rem) 0}
  .practice h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.7rem);
               line-height:1.18;letter-spacing:-.012em;margin:0 0 3.2rem;max-width:22ch;color:var(--forest-900)}
  .band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,11fr);gap:clamp(1.5rem,5vw,4.5rem);
        padding:2.6rem 0;border-top:1px solid rgba(13,68,22,.2)}
  .band:last-of-type{border-bottom:1px solid rgba(13,68,22,.2)}
  .band h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.25;margin:0;
           color:var(--forest-900);letter-spacing:-.008em}
  .band p{margin:0 0 1.15rem;color:var(--stone);max-width:66ch}
  .band a{font-size:.88rem;font-weight:500;letter-spacing:.02em;text-decoration:none;color:var(--lime-600);
          border-bottom:1px solid rgba(73,124,31,.45);padding-bottom:2px;transition:border-color .18s}
  .band a:hover{border-bottom-color:var(--lime-600)}

  .principal{background:var(--forest-900);padding:clamp(4.5rem,9vw,7.5rem) 0}
  .principal .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,11fr);
                   gap:clamp(1.5rem,5vw,4.5rem);align-items:start}
  .principal h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.5rem);
                line-height:1.2;margin:0;letter-spacing:-.012em}
  .principal p{margin:0 0 1.15rem;color:rgba(239,239,234,.8);max-width:66ch}
  .principal p:last-of-type{margin-bottom:1.9rem}
  .sig{font-family:var(--serif);font-size:1.05rem;color:var(--bone);padding-left:1.3rem;
       border-left:1px solid rgba(140,194,49,.55);line-height:1.5}
  .sig em{display:block;font-style:normal;font-family:var(--sans);font-size:.85rem;
          color:rgba(239,239,234,.62);margin-top:.75rem}

  .contact{background:var(--forest-950);padding:clamp(4.5rem,9vw,7.5rem) 0 clamp(3.5rem,6vw,5rem)}
  .contact h2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.12;
              margin:0 0 1.4rem;letter-spacing:-.015em;max-width:18ch}
  .contact p{margin:0;max-width:58ch;color:rgba(239,239,234,.78)}
  .details{margin-top:3rem;padding-top:2.2rem;border-top:1px solid rgba(239,239,234,.14);
           display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
  .details div span{display:block;font-size:.82rem;color:rgba(239,239,234,.55);margin-bottom:.45rem}
  .details div a,.details div p{font-size:1rem;color:var(--bone);text-decoration:none;margin:0}
  .details div a:hover{color:var(--lime-400)}
  footer{border-top:1px solid rgba(239,239,234,.1);padding:1.8rem 0;font-size:.82rem;color:rgba(239,239,234,.5)}
  footer .wrap{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}

  /* --- scroll sequence (Our Approach only) --- */
  .seq{position:relative;height:560vh}
  .stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--forest-950)}
  .frames{position:absolute;inset:0}
  .frame{position:absolute;inset:0;opacity:0;will-change:opacity}
  .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block}
  .scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
         background:linear-gradient(100deg, rgba(6,40,14,.9) 0%, rgba(6,40,14,.74) 26%, rgba(6,40,14,.3) 52%, rgba(6,40,14,.07) 74%, rgba(6,40,14,0) 100%),
                    linear-gradient(to top, rgba(6,40,14,.5) 0%, rgba(6,40,14,0) 34%)}
  .copy{position:absolute;inset:0;z-index:3;display:flex;align-items:center;pointer-events:none}
  .copy .wrap{width:100%}
  .rail{position:relative;height:64vh;max-width:36ch}
  .step{position:absolute;top:50%;transform:translateY(calc(-50% + 14px));opacity:0;will-change:opacity,transform}
  .step h2{font-family:var(--serif);font-weight:300;letter-spacing:-.015em;
           font-size:clamp(1.9rem,4.1vw,3.2rem);line-height:1.08;margin:0 0 1.1rem;
           text-shadow:0 2px 34px rgba(6,40,14,.85)}
  .step p{margin:0;font-size:1.02rem;color:rgba(239,239,234,.9);max-width:44ch;padding-left:1.3rem;
          border-left:1px solid rgba(140,194,49,.7);text-shadow:0 2px 22px rgba(6,40,14,.9)}
  .ticks{position:absolute;right:clamp(1rem,3vw,2.6rem);top:50%;transform:translateY(-50%);
         z-index:4;display:flex;flex-direction:column;gap:.7rem}
  .tick{width:2px;height:32px;background:rgba(239,239,234,.25);position:relative;overflow:hidden}
  .tick i{position:absolute;inset:0;background:var(--lime-400);transform:scaleY(0);transform-origin:top;
          will-change:transform}
  .loader{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:var(--forest-950);
          transition:opacity .6s;font-size:.8rem;letter-spacing:.09em;color:rgba(239,239,234,.45)}
  .loader.gone{opacity:0;pointer-events:none}
  .disclaimer{padding:2.6rem 0 0;font-size:.85rem;color:rgba(239,239,234,.5);max-width:62ch}

  @media (max-width:1080px){ nav ul{gap:1.2rem} nav a{font-size:.8rem} }
  @media (max-width:900px){
    .facts .wrap{grid-template-columns:1fr 1fr}
    .fact{padding:1.9rem 1.4rem}
    .fact:nth-child(odd){border-left:0;padding-left:0}
    .fact:nth-child(3),.fact:nth-child(4){border-top:1px solid rgba(239,239,234,.14)}
    .band,.principal .wrap,.details{grid-template-columns:1fr}
    .band h3{margin-bottom:1rem}
    .principal h2{margin-bottom:1.4rem}
  }
  @media (max-width:820px){
    .seq{height:470vh}
    .rail{max-width:none}
    .step p{font-size:.95rem}
    .ticks{right:.7rem}
    .scrim{background:linear-gradient(180deg, rgba(6,40,14,.84) 0%, rgba(6,40,14,.55) 42%, rgba(6,40,14,.34) 70%, rgba(6,40,14,.6) 100%)}
  }
  @media (max-width:760px){
    nav{display:none} .menu-btn{display:block}
    .lockup{gap:.65rem}
    .lockup .mk{height:38px;width:35.5px}
    .lockup .rule{height:32px}
    .lockup .wm{height:27px}
    .hero-mark{height:auto;width:165%;right:-55%;opacity:.14}
    .facts .wrap{grid-template-columns:1fr}
    .fact,.fact:nth-child(odd){border-left:0;padding:1.5rem 0;border-top:1px solid rgba(239,239,234,.14)}
    .fact:first-child{border-top:0;padding-top:0}
  }
  @media (prefers-reduced-motion:reduce){
    .seq{height:auto}
    .stage{position:static;height:auto}
    .frames{position:static;height:56vh}
    .frame{opacity:0} .frame:last-child{opacity:1}
    .copy{position:static;padding:2.5rem 0}
    .rail{height:auto}
    .step{position:static;opacity:1;transform:none;margin-bottom:2.5rem}
    .ticks,.scrim{display:none}
    *{transition:none !important}
  }

  /* ------------------------------------------------------------------
     Colour system, measured rather than eyeballed.
     Body text targets 7:1 (AAA), headings and large text 4.5:1, links 4.5:1.
     Surfaces alternate so no two consecutive full-width blocks match.
     ------------------------------------------------------------------ */
  :root{
    --surface-deep:#06280E;    /* darkest, hero and closing */
    --surface-forest:#0D4416;  /* brand green, mid-dark bands */
    --surface-bone:#EFEFEA;    /* light */
    --surface-sand:#E3E4DC;    /* light alternate, 1.11 against bone */

    --ink-dark:#38443A;        /* body on light   8.85 bone / 7.97 sand */
    --ink-head:#0B3A13;        /* headings light 11.18 bone /10.07 sand */
    --ink-link:#35661C;        /* links on light  5.93 bone / 5.34 sand */
    --ink-light:rgba(239,239,234,.86);   /* body on dark 7.69 / 10.50 */
    --accent:#9BD139;          /* accent on dark  6.24 forest / 8.78 deep */
    --accent-fill:#8CC231;     /* button fill, dark text on it 7.50 */
  }
  .band p, .list li{color:var(--ink-dark)}
  .band h3{color:var(--ink-head)}
  .band a{color:var(--ink-link);border-bottom-color:rgba(53,102,28,.45)}
  .band a:hover{border-bottom-color:var(--ink-link)}
  .practice h2, .lead{color:var(--ink-head) !important}
  .pull{color:var(--ink-head);border-left-color:var(--ink-link)}
  .fact b, .cross-grid b{color:var(--accent)}
  .fact span, .cross-grid span, .principal p{color:var(--ink-light)}
  .lede{color:var(--ink-light)}
  .details div span{color:rgba(239,239,234,.72)}
  footer{color:rgba(239,239,234,.68)}
  .cta{background:var(--accent-fill)}
  .step p{color:rgba(239,239,234,.94)}

  /* ---- alternating band surfaces ---- */
  .sections{background:var(--surface-bone);padding:0}
  .band-row{background:var(--surface-bone)}
  .band-row.alt{background:var(--surface-sand)}
  .band-row .band{border-top:0;padding:clamp(2.6rem,4.5vw,3.6rem) 0}
  .band-row + .band-row .band{border-top:1px solid rgba(13,68,22,.14)}
  .band-row.alt + .band-row .band,
  .band-row + .band-row.alt .band{border-top:0}
  .lead-row{background:var(--surface-forest);padding:clamp(3rem,6vw,4.5rem) 0}
  .lead-row .lead{color:var(--bone) !important;margin:0;max-width:26ch}

  /* ---- hero background image ---- */
  .hero.has-img{padding-top:clamp(5rem,10vw,8rem);padding-bottom:clamp(4.5rem,9vw,7rem)}
  .hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
  .hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
  /* The scrim is what guarantees legibility, not the photograph. Weighted to
     the left where the copy sits, and floored across the whole frame so a
     bright sky can never wash out the headline. */
  .hero-bg:after{content:"";position:absolute;inset:0;
    background:
      linear-gradient(96deg, rgba(6,40,14,.95) 0%, rgba(6,40,14,.88) 30%, rgba(6,40,14,.62) 58%, rgba(6,40,14,.46) 100%),
      linear-gradient(to bottom, rgba(6,40,14,.55) 0%, rgba(6,40,14,.3) 45%, rgba(6,40,14,.7) 100%)}
  .hero.has-img .hero-mark{opacity:.1}

  /* ---- image beside a section ---- */
  .band-side{display:flex;flex-direction:column;gap:1.3rem}
  .band-side img{width:100%;height:auto;display:block;border-radius:2px;
                 box-shadow:0 1px 2px rgba(13,68,22,.14)}
  /* With the call-to-action buttons gone, the address is the only way in,
     so it is set as the largest thing in its block rather than a detail. */
  .contact-email{font-family:var(--serif);font-size:clamp(1.25rem,2.6vw,1.7rem);
                 line-height:1.3;margin:0 0 .4rem}
  /* .band a styles the small "read more" links; the email must not inherit it */
  .contact-email a{color:var(--ink-link);text-decoration:none;
                   font-size:inherit;font-weight:400;letter-spacing:0;
                   border-bottom:2px solid rgba(53,102,28,.4);padding-bottom:1px}
  .contact-email a:hover{border-bottom-color:var(--ink-link)}
  .details .email-lead a{font-size:1.15rem;color:var(--accent)}
  @media (max-width:900px){ .band-side img{max-width:520px} }

  /* service pages */
  .lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.9vw,2.2rem);
        line-height:1.24;letter-spacing:-.012em;margin:0 0 1.6rem;color:var(--bone);max-width:24ch}
  .sections{background:var(--bone);color:var(--forest-950);padding:clamp(4rem,8vw,6.5rem) 0}
  .sections .band:first-of-type{border-top:0;padding-top:0}
  .list{margin:0;padding:0;list-style:none}
  .list li{position:relative;padding-left:1.5rem;margin-bottom:.9rem;color:var(--stone);max-width:70ch}
  .list li:before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--lime-600)}
  .pull{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.35;
        color:var(--forest-900);padding-left:1.5rem;border-left:2px solid var(--lime-400);
        margin:2.5rem 0 0;max-width:40ch}
  .cross{background:var(--forest-900);padding:clamp(3.5rem,7vw,5.5rem) 0}
  .cross h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.8vw,2.1rem);
            margin:0 0 2rem;letter-spacing:-.012em}
  .cross-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .cross-grid a{display:block;padding:1.8rem 1.8rem 1.8rem 1.8rem;text-decoration:none;
                border-left:1px solid rgba(239,239,234,.16);transition:background .18s}
  .cross-grid a:first-child{border-left:0;padding-left:0}
  .cross-grid a:hover{background:rgba(239,239,234,.05)}
  .cross-grid b{display:block;font-family:var(--serif);font-weight:400;font-size:1.2rem;
                color:var(--lime-400);margin-bottom:.5rem}
  .cross-grid span{font-size:.9rem;color:rgba(239,239,234,.7);line-height:1.55}
  @media (max-width:820px){
    .cross-grid{grid-template-columns:1fr}
    .cross-grid a,.cross-grid a:first-child{border-left:0;padding:1.4rem 0;
      border-top:1px solid rgba(239,239,234,.16)}
    .cross-grid a:first-child{border-top:0;padding-top:0}
  }

/* ---- mobile navigation ---- */
.menu-btn[aria-expanded="true"]{background:rgba(13,68,22,.08)}
@media (max-width:760px){
  nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
      border-bottom:1px solid rgba(13,68,22,.14);box-shadow:0 12px 24px rgba(6,40,14,.10);z-index:20}
  nav.open{display:block}
  nav ul{flex-direction:column;gap:0;padding:.4rem 0}
  nav li{border-top:1px solid rgba(13,68,22,.10)}
  nav li:first-child{border-top:0}
  nav a{display:block;padding:.95rem var(--gut);font-size:.95rem;border-bottom:0}
  nav a[aria-current]{background:rgba(140,194,49,.14)}
  header{position:relative}
}