/* ==========================================================================
   EXAMPLE MARKETING LTD — design system
   Full-bleed colour blocks in forest green, on warm paper and sage.
   Heavy grotesk for structure, serif for prose. Rules divide, cards do not.
   ========================================================================== */

:root{
  /* surfaces */
  --paper:#FBFAF7;
  --sage:#DCE5DD;
  --green:#123B2C;
  --green-deep:#0B261C;
  --green-mid:#1A4E3B;

  /* ink */
  --ink:#0E1A15;
  --ink-2:#2E3A34;
  --muted:#5B6862;

  /* on green */
  --on-green:#C4D6CB;
  --on-green-dim:#93A89B;

  /* accent */
  --amber:#E0A22B;
  --amber-ink:#9A6A0E;

  /* rules */
  --rule:#C9D3CB;
  --rule-sage:#B3C3B7;
  --rule-green:#2C4C3E;

  /* states */
  --ok:#14614A;
  --ok-bg:#E4F0E9;
  --ok-rule:#A9CDBB;
  --err:#9E2118;
  --err-bg:#FAEAE7;
  --err-rule:#E3B7B1;

  /* metrics */
  --shell:1240px;
  --gut:clamp(20px,5vw,60px);
  --sec:clamp(60px,8vw,112px);
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body{
  font-family:'Source Serif 4',Georgia,'Times New Roman',serif;
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--ink-2);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{background:var(--amber);color:var(--ink);}
img,svg{max-width:100%;display:block;}

/* ---------- layout ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut);}
.section{padding-block:var(--sec);}
.section-tight{padding-block:clamp(44px,5.5vw,76px);}

.band-paper{background:var(--paper);}
.band-sage{background:var(--sage);}
.band-green{background:var(--green);color:var(--on-green);}
.band-green h2,.band-green h3,.band-green h4{color:var(--paper);}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--amber);color:var(--ink);
  padding:.8rem 1.4rem;font-family:'Archivo',sans-serif;font-weight:600;
}
.skip-link:focus{left:0;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- typography ---------- */
h1,h2,h3,h4{
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-0.03em;
  text-wrap:balance;
}

.t-display{font-size:clamp(2.6rem,6.2vw,4.9rem);line-height:0.98;letter-spacing:-0.04em;}
.t-page{font-size:clamp(2.1rem,4.6vw,3.5rem);letter-spacing:-0.035em;}
.t-section{font-size:clamp(1.7rem,3.1vw,2.45rem);}
.t-item{font-size:1.14rem;font-weight:600;line-height:1.25;letter-spacing:-0.02em;}

p{max-width:68ch;}
.lede{
  font-size:clamp(1.12rem,1.65vw,1.4rem);
  line-height:1.58;
  color:inherit;
  max-width:56ch;
}
.band-green .lede{color:var(--on-green);}
.dim{color:var(--muted);}
.band-green .dim{color:var(--on-green-dim);}

a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--ink);}
/* prose links on dark bands; :where() keeps specificity at zero so any
   classed element (buttons, wordmark, breadcrumb) keeps its own colour */
:where(.band-green,.site-footer) a{color:var(--amber);}
:where(.band-green,.site-footer) a:hover{color:var(--paper);}

/* section header: heading left, the sentence that qualifies it right */
.sec-head{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end;
  padding-top:1.4rem;border-top:2px solid var(--ink);
  margin-bottom:clamp(2rem,4vw,3.25rem);
}
.band-sage .sec-head{border-top-color:var(--ink);}
.band-green .sec-head{border-top-color:var(--amber);}
.sec-head p{color:var(--muted);max-width:46ch;margin-bottom:.35rem;}
.band-green .sec-head p{color:var(--on-green-dim);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif;
  font-size:.95rem;font-weight:600;line-height:1;letter-spacing:-0.01em;
  padding:1.05rem 1.75rem;
  border:2px solid var(--green);border-radius:var(--r);
  background:var(--green);color:var(--paper);
  text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep);color:var(--paper);}
.btn-amber{background:var(--amber);border-color:var(--amber);color:var(--ink);}
.btn-amber:hover{background:#C88C17;border-color:#C88C17;color:var(--ink);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-outline:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.band-green .btn-outline{color:var(--paper);border-color:var(--on-green-dim);}
.band-green .btn-outline:hover{background:var(--paper);border-color:var(--paper);color:var(--green);}
.btn-block{width:100%;}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}

/* ---------- header, merged into the green hero block ---------- */
.site-header{background:var(--green);}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;min-height:78px;
  border-bottom:1px solid var(--rule-green);
}

.wordmark{
  display:inline-flex;align-items:baseline;gap:.55rem;
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:1.06rem;letter-spacing:-0.03em;
  color:var(--paper);text-decoration:none;
}
.wordmark:hover{color:var(--paper);}
.wordmark em{
  font-style:normal;font-weight:500;font-size:.8rem;
  letter-spacing:0;color:var(--on-green-dim);
}

.nav-wrap{display:flex;align-items:center;gap:1.9rem;}
.nav-links{display:flex;align-items:center;gap:1.7rem;}
.nav-links a{
  position:relative;
  font-family:'Archivo',sans-serif;font-size:.93rem;font-weight:500;
  color:var(--on-green);text-decoration:none;padding-block:.4rem;
}
.nav-links a:hover{color:var(--paper);}
.nav-links a[aria-current="page"]{color:var(--paper);font-weight:600;}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--amber);
}

.nav-cta{
  font-family:'Archivo',sans-serif;font-size:.93rem;font-weight:600;
  color:var(--ink);background:var(--amber);
  padding:.7rem 1.15rem;border-radius:var(--r);text-decoration:none;
  transition:background-color .18s ease;
}
.nav-cta:hover{background:#C88C17;color:var(--ink);}

.menu-toggle{
  display:none;width:44px;height:44px;flex:none;
  background:transparent;border:1px solid var(--rule-green);border-radius:var(--r);
  cursor:pointer;align-items:center;justify-content:center;
}
.menu-toggle .bars{
  display:block;width:18px;height:2px;background:var(--paper);position:relative;
  transition:background-color .2s ease;
}
.menu-toggle .bars::before,.menu-toggle .bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--paper);
  transition:transform .2s ease;
}
.menu-toggle .bars::before{top:-6px;}
.menu-toggle .bars::after{top:6px;}
.menu-toggle[aria-expanded="true"] .bars{background:transparent;}
.menu-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg);}

/* ---------- hero ---------- */
.hero{padding-block:clamp(56px,8vw,104px) clamp(56px,8vw,112px);}
.hero h1{color:var(--paper);margin-bottom:1.6rem;max-width:16ch;}
.hero .lede{margin-bottom:2.4rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;}

.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr);
  gap:clamp(2.5rem,5vw,5rem);align-items:end;
}
/* registered identity, stated plainly rather than decorated */
.hero-id{
  border-top:1px solid var(--rule-green);padding-top:1.35rem;
  font-family:'Archivo',sans-serif;font-size:.9rem;line-height:1.55;
  color:var(--on-green-dim);
}
.hero-id strong{display:block;color:var(--paper);font-weight:600;margin-bottom:.4rem;}
.hero-id address{font-style:normal;margin-top:.7rem;}

/* ---------- ruled index (services, challenges) ---------- */
.index-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(1.5rem,3vw,3rem);
}
.index-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.index-item{
  padding-block:clamp(1.5rem,2.5vw,2rem);
  border-top:1px solid var(--rule);
}
.band-sage .index-item{border-top-color:var(--rule-sage);}
.band-green .index-item{border-top-color:var(--rule-green);}
.index-item h3{margin-bottom:.55rem;}
.index-item p{font-size:1rem;color:var(--muted);max-width:40ch;}
.band-green .index-item p{color:var(--on-green-dim);}

/* ---------- stance ---------- */
.stance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);}
.stance{border-top:3px solid var(--amber);padding-top:1.35rem;}
.stance h3{font-size:1.3rem;margin-bottom:.7rem;}
.stance p{font-size:1rem;color:var(--muted);}
.band-green .stance p{color:var(--on-green-dim);}

/* ---------- stages (a real sequence, so it carries numerals) ---------- */
.stage-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2.25rem);}
.stage{border-top:1px solid var(--rule);padding-top:1.3rem;}
.band-sage .stage{border-top-color:var(--rule-sage);}
.stage-no{
  font-family:'Archivo',sans-serif;font-size:.85rem;font-weight:700;
  color:var(--amber-ink);margin-bottom:.9rem;display:block;
}
.stage h3{font-size:1.3rem;margin-bottom:.6rem;}
.stage p{font-size:.99rem;color:var(--muted);}

/* ---------- definition blocks ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:start;}
.deflist{border-top:2px solid var(--ink);}
.deflist > div{
  display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:1rem;
  padding-block:1rem;border-bottom:1px solid var(--rule);
}
.band-sage .deflist > div{border-bottom-color:var(--rule-sage);}
.deflist dt{font-family:'Archivo',sans-serif;font-size:.88rem;font-weight:500;color:var(--muted);}
.deflist dd{font-family:'Archivo',sans-serif;font-size:.99rem;font-weight:500;color:var(--ink);line-height:1.5;}
.deflist address{font-style:normal;}

.marklist{list-style:none;display:grid;gap:.9rem;margin-top:1.6rem;}
.marklist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;font-size:1rem;}
.marklist li::before{content:"";width:.55rem;height:.55rem;margin-top:.62rem;background:var(--amber);}

.note{
  margin-top:1.75rem;padding:1.15rem 1.35rem;
  border-left:3px solid var(--amber);background:var(--sage);
  font-size:.99rem;color:var(--ink-2);
}
.band-sage .note{background:var(--paper);}
.band-green .note{background:var(--green-mid);border-left-color:var(--amber);color:var(--on-green);}

.backlinks{
  display:flex;flex-wrap:wrap;gap:1.25rem 2rem;
  margin-top:1.75rem;padding-top:1.4rem;border-top:1px solid var(--rule);
  font-family:'Archivo',sans-serif;font-size:.93rem;
}

/* ---------- forms ---------- */
.form-block{
  background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.4rem);
}
.band-paper .form-block{background:var(--sage);border-color:var(--rule-sage);}
.form-block h2{font-size:1.35rem;margin-bottom:1.5rem;}

.field{margin-bottom:1.3rem;}
.field label{
  display:block;margin-bottom:.45rem;
  font-family:'Archivo',sans-serif;font-size:.9rem;font-weight:600;color:var(--ink);
}
.field .hint{display:block;font-weight:400;color:var(--muted);font-size:.85rem;margin-top:.2rem;}

.field input,.field select,.field textarea{
  width:100%;
  font-family:'Archivo',sans-serif;font-size:1rem;color:var(--ink);
  background:var(--paper);
  border:1px solid #9FAEA5;border-radius:var(--r);
  padding:.85rem 1rem;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field textarea{resize:vertical;min-height:120px;line-height:1.5;}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6862' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;
  padding-right:2.75rem;
}
.field input::placeholder,.field textarea::placeholder{color:#6E7C75;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(18,59,44,.16);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--err);}

.field-error{
  display:none;margin-top:.45rem;
  font-family:'Archivo',sans-serif;font-size:.86rem;font-weight:500;color:var(--err);
}
.field-error.is-visible{display:block;}

.consent{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:start;
  padding:1.05rem 1.15rem;margin-bottom:1.5rem;
  background:var(--paper);border-left:3px solid var(--green);border-radius:0 var(--r) var(--r) 0;
}
.band-paper .consent{background:var(--paper);}
.consent input[type="checkbox"]{width:20px;height:20px;margin-top:.2rem;accent-color:var(--green);cursor:pointer;}
.consent label{font-family:'Source Serif 4',Georgia,serif;font-size:.97rem;font-weight:400;color:var(--ink-2);line-height:1.55;cursor:pointer;}
.consent.is-invalid{border-left-color:var(--err);}
.consent .field-error{grid-column:1 / -1;margin-top:.5rem;}

.form-status{margin-top:1.3rem;}
.form-status:empty{margin-top:0;}
.status-msg{
  padding:1rem 1.2rem;
  background:var(--ok-bg);border-left:3px solid var(--ok);
  font-size:.98rem;color:var(--ok);
}
.status-msg.is-error{background:var(--err-bg);border-left-color:var(--err);color:var(--err);}
.status-msg strong{
  display:block;margin-bottom:.25rem;color:inherit;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.95rem;
}
.form-fine{margin-top:1.25rem;font-size:.92rem;color:var(--muted);}

/* ---------- page head (interior pages) ---------- */
.page-head{padding-block:clamp(48px,6.5vw,86px);}
.page-head h1{color:var(--paper);}
.page-head .lede{margin-top:1.25rem;}
.breadcrumb{
  font-family:'Archivo',sans-serif;font-size:.88rem;color:var(--on-green-dim);margin-bottom:1.15rem;
}
.breadcrumb a{color:var(--on-green-dim);text-decoration:none;}
.breadcrumb a:hover{color:var(--paper);text-decoration:underline;}

/* ---------- legal ---------- */
.legal-grid{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.legal-toc{position:sticky;top:96px;border-top:2px solid var(--ink);padding-top:1.1rem;}
.legal-toc h2{font-size:.98rem;margin-bottom:.9rem;}
.legal-toc ol{list-style:none;counter-reset:toc;}
.legal-toc li{counter-increment:toc;border-bottom:1px solid var(--rule);}
.legal-toc a{
  display:flex;gap:.65rem;padding-block:.55rem;
  font-family:'Archivo',sans-serif;font-size:.88rem;line-height:1.35;
  color:var(--ink-2);text-decoration:none;
}
.legal-toc a::before{content:counter(toc);color:var(--amber-ink);font-weight:600;min-width:1.1rem;flex:none;}
.legal-toc a:hover{color:var(--green);}

.legal-body{counter-reset:sec;}
.legal-body section{padding-bottom:2.5rem;}
.legal-body h2{
  counter-increment:sec;font-size:clamp(1.3rem,2.1vw,1.6rem);
  margin-bottom:1rem;padding-top:1.1rem;border-top:1px solid var(--rule);
  scroll-margin-top:96px;
}
.legal-body h2::before{content:counter(sec) ". ";color:var(--amber-ink);}
.legal-body h3{font-size:1.05rem;margin:1.5rem 0 .5rem;}
.legal-body p{margin-bottom:1rem;}
.legal-body ul{margin:0 0 1rem 1.15rem;max-width:68ch;}
.legal-body li{margin-bottom:.5rem;}
.legal-meta{
  padding:1rem 1.25rem;margin-bottom:2rem;
  background:var(--sage);border-left:3px solid var(--amber);
  font-size:.95rem;color:var(--ink-2);
}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;padding:1.25rem;
  background:rgba(11,38,28,.72);
}
.modal.is-open{display:flex;}
.modal-panel{
  width:100%;max-width:460px;max-height:92vh;overflow-y:auto;
  background:var(--paper);border-top:5px solid var(--amber);border-radius:0 0 var(--r) var(--r);
  padding:clamp(1.5rem,3vw,2.2rem);position:relative;
}
.modal-panel h2{font-size:1.5rem;margin-bottom:.7rem;}
.modal-panel > p{color:var(--muted);font-size:.99rem;margin-bottom:1.5rem;}
.modal-close{
  position:absolute;top:1rem;right:1rem;width:34px;height:34px;
  display:grid;place-items:center;
  background:var(--sage);border:0;border-radius:var(--r);
  color:var(--ink);font-size:1.15rem;line-height:1;cursor:pointer;
}
.modal-close:hover{background:var(--rule-sage);}
.modal-fine{margin-top:1.2rem;font-size:.9rem;color:var(--muted);}
body.is-locked{overflow:hidden;}

/* ---------- footer ---------- */
.site-footer{background:var(--green-deep);color:var(--on-green);padding-block:clamp(52px,6.5vw,84px) 2rem;}
.site-footer h2{font-family:'Archivo',sans-serif;font-size:.92rem;font-weight:600;color:var(--paper);margin-bottom:1rem;}
.foot-top{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,3rem);padding-bottom:clamp(2.25rem,4vw,3.25rem);
}
.foot-brand .wordmark{font-size:1.2rem;}
.foot-brand address{
  font-style:normal;margin-top:1.3rem;
  font-family:'Archivo',sans-serif;font-size:.94rem;line-height:1.7;color:var(--on-green-dim);
}
.foot-brand .foot-email{display:inline-block;margin-top:1rem;font-family:'Archivo',sans-serif;font-weight:500;}
.foot-col ul{list-style:none;display:grid;gap:.65rem;font-family:'Archivo',sans-serif;font-size:.94rem;}
.foot-col a{text-decoration:none;}
.foot-col a:hover{text-decoration:underline;}
.linklike{font:inherit;color:var(--amber);background:none;border:0;padding:0;text-align:left;cursor:pointer;}
.linklike:hover{color:var(--paper);text-decoration:underline;}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:.5rem 2rem;
  padding-top:1.6rem;border-top:1px solid var(--rule-green);
  font-family:'Archivo',sans-serif;font-size:.85rem;color:var(--on-green-dim);
}
.foot-bottom p{max-width:none;}

/* ---------- one orchestrated entrance, hero only ---------- */
.enter{opacity:0;transform:translateY(12px);}
.js-ready .enter{animation:enter-up .65s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d,0ms);}
@keyframes enter-up{to{opacity:1;transform:none;}}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .index-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stage-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero-grid{grid-template-columns:1fr;gap:2.5rem;align-items:start;}
  .legal-grid{grid-template-columns:1fr;}
  .legal-toc{position:static;}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:860px){
  .menu-toggle{display:inline-flex;}
  .nav-wrap{gap:.75rem;}
  .nav-wrap .nav-cta{display:none;}
  .site-header{position:relative;}
  .nav-links{
    display:none;position:absolute;left:var(--gut);right:var(--gut);top:calc(100% - 1px);
    z-index:80;flex-direction:column;align-items:stretch;gap:0;
    background:var(--green-deep);border:1px solid var(--rule-green);border-radius:0 0 var(--r) var(--r);
    padding:.4rem;
  }
  .nav-links.is-open{display:flex;}
  .nav-links a{padding:.85rem 1rem;font-size:1rem;}
  .nav-links a:hover{background:var(--green-mid);}
  .nav-links a[aria-current="page"]::after{left:1rem;right:auto;bottom:.55rem;width:1.6rem;}

  .sec-head{grid-template-columns:1fr;align-items:start;gap:.9rem;}
  .sec-head p{margin-bottom:0;}
  .stance-grid,.split{grid-template-columns:1fr;}
}

@media (max-width:640px){
  body{font-size:1rem;}
  .index-grid,.index-grid.cols-2,.stage-grid{grid-template-columns:1fr;}
  .foot-top{grid-template-columns:1fr;gap:2.25rem;}
  .hero-actions .btn{width:100%;}
  .deflist > div{grid-template-columns:1fr;gap:.15rem;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .enter,.js-ready .enter{opacity:1;transform:none;animation:none;}
}