/* ==========================================================================
   Vellum Strategy Group: Design System
   Palette sampled directly from brand logo (emerald + bronze on parchment).
   Signature motif: the regulatory "clause": citation chips, section marks
   (§), hairline ledger rules and an embossed seal treatment, echoing the
   drafting-grid construction of the wordmark and the literal meaning of
   "vellum" as the material of a document of record.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,800&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* --- Brand palette (sampled from Logo.png) --- */
  --ink:            #16241D;   /* body text */
  --emerald:        #1B4A38;   /* primary brand */
  --emerald-deep:   #0F2B20;   /* dark section bg */
  --emerald-bright: #2C6B4F;   /* links / hover */
  --bronze:         #AD8A5B;   /* accent, CTA underlines, marks */
  --bronze-dark:    #8C6E42;   /* bronze on light bg needing contrast */
  --bronze-light:   #D9C7A3;   /* tint on dark backgrounds */
  --parchment:      #F7F3EA;   /* page background */
  --parchment-dim:  #EFE6D3;   /* card / alt-section background */
  --parchment-line: #E4D9C0;   /* borders on parchment */
  --white:          #FFFFFF;

  --line:      rgba(27,74,56,.16);
  --line-dark: rgba(217,199,163,.22);

  /* Fainter than --line/--line-dark on purpose: these sit directly behind
     headings and body copy as decorative texture, not as functional
     borders, so they need to recede rather than compete with type. */
  --grid-line:      rgba(27,74,56,.07);
  --grid-line-dark: rgba(217,199,163,.10);

  /* --- Type --- */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --- Spacing (8pt system) --- */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --container: 1180px;
  --radius: 3px;
  --shadow-card: 0 1px 2px rgba(22,36,29,.06), 0 8px 24px rgba(22,36,29,.07);
  --shadow-emboss: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 30px rgba(22,36,29,.12);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--parchment);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
p, li, span, a{ overflow-wrap: break-word; }
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; color: var(--emerald-deep); font-weight:600; letter-spacing:-.01em; overflow-wrap: break-word; }
p{ margin:0; }
button{ font-family:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline: 2px solid var(--bronze-dark);
  outline-offset: 3px;
}

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (min-width: 768px){ .container{ padding-inline: var(--space-5); } }

section{ padding-block: var(--space-7); }
@media (max-width: 640px){ section{ padding-block: var(--space-5); } }

.section-alt{ background: var(--parchment-dim); }
.section-dark{
  background:
    linear-gradient(var(--grid-line-dark) 1px, transparent 1px) center top / 44px 44px,
    linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px) center top / 44px 44px,
    var(--emerald-deep);
  color: var(--parchment);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4{ color: var(--parchment); }

/* ---------- Type scale ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronze-dark);
  display:flex;
  align-items:center;
  gap:.6em;
}
.section-dark .eyebrow{ color: var(--bronze-light); }
.eyebrow::before{
  content:"§";
  font-family: var(--font-display);
  font-weight:700;
}

h1{ font-size: clamp(2.4rem, 4.6vw, 4.1rem); line-height:1.04; }
h2{ font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height:1.1; }
h3{ font-size: 1.35rem; line-height:1.25; }
h4{ font-size: 1.05rem; }
.lede{ font-size: 1.2rem; line-height:1.6; color: #3B4A41; }
.section-dark .lede{ color: #CFE0D5; }
.small{ font-size:.9rem; }
.muted{ color:#5B6960; }
.section-dark .muted{ color:#9FB6A9; }

/* ---------- Clause tags (signature element) ---------- */
.clause-tag{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing:.03em;
  padding: .4em .7em;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--emerald);
  background: rgba(27,74,56,.04);
}
.section-dark .clause-tag{
  border-color: var(--line-dark);
  color: var(--bronze-light);
  background: rgba(217,199,163,.06);
}
.clause-tag .dot{ width:5px; height:5px; border-radius:50%; background: var(--bronze); flex:none; }

.tag-row{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  font-weight:600;
  font-size:.95rem;
  padding: .85em 1.5em;
  border-radius: var(--radius);
  cursor:pointer;
  border:1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
  min-height:44px;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--emerald); color: var(--white); }
.btn-primary:hover{ background: var(--emerald-deep); }
.btn-bronze{ background: var(--bronze); color: var(--emerald-deep); }
.btn-bronze:hover{ background: var(--bronze-dark); color: var(--white); }
.btn-ghost{ background: transparent; border-color: var(--line); color: var(--emerald-deep); }
.btn-ghost:hover{ border-color: var(--emerald); background: rgba(27,74,56,.05); }
.section-dark .btn-ghost{ border-color: var(--line-dark); color: var(--parchment); }
.section-dark .btn-ghost:hover{ border-color: var(--bronze-light); background: rgba(217,199,163,.08); }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  background: rgba(247,243,234,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--parchment-line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block: .85rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ height:42px; width:auto; }
.brand-word{ font-family: var(--font-display); font-weight:700; font-size:1.05rem; color:var(--emerald-deep); line-height:1.05; }
.brand-word small{ display:block; margin-top:.25rem; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em; font-weight:500; color:var(--bronze-dark); }

.nav-links{ display:none; align-items:center; gap: var(--space-4); }
.nav-links a{
  font-size:.92rem;
  font-weight:600;
  color: var(--emerald-deep);
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ border-color: var(--bronze); }

.nav-cta{ display:none; }
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border:1px solid var(--parchment-line);
  border-radius:2px;
  background:none;
  cursor:pointer;
}
.nav-toggle svg{ width:20px; height:20px; }

@media (min-width: 1024px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
}

.mobile-menu{
  display:none;
  flex-direction:column;
  gap:0;
  border-top:1px solid var(--parchment-line);
  background: var(--parchment);
}
.mobile-menu.is-open{ display:flex; }
.mobile-menu a{
  padding: 1rem var(--space-3);
  border-bottom:1px solid var(--parchment-line);
  font-weight:600;
  color: var(--emerald-deep);
}
.mobile-menu .btn{ margin: var(--space-3); }
@media (min-width:1024px){ .mobile-menu{ display:none !important; } }

/* ---------- Hero / dossier stack ---------- */
.hero{
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
  background: var(--parchment);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(27,74,56,.03), rgba(27,74,56,0) 40%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) center top / 44px 44px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) center top / 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
  pointer-events:none;
  z-index:0;
}
.hero > .container{ position:relative; z-index:1; }
.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items:center;
}
@media (min-width: 960px){
  .hero-grid{ grid-template-columns: 1.15fr .85fr; }
}
.hero h1{ margin-top: var(--space-3); }
.hero .lede{ margin-top: var(--space-3); max-width: 46ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-top: var(--space-4); }
.hero-proof{ margin-top: var(--space-5); display:flex; flex-wrap:wrap; gap: var(--space-4); }
.hero-proof div{ font-family:var(--font-display); font-size:1.7rem; font-weight:700; color:var(--emerald); }
.hero-proof span{ display:block; font-family: var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bronze-dark); margin-top:.2rem; }

/* Dossier stack: layered document cards evoking overlapping technical files */
.dossier{ position:relative; height: 420px; }
.dossier-card{
  position:absolute;
  inset:0;
  background: var(--white);
  border:1px solid var(--parchment-line);
  border-radius: 4px;
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}
.dossier-card.c1{ transform: rotate(-6deg) translate(-18px, 6px); z-index:1; opacity:.85; }
.dossier-card.c2{ transform: rotate(4deg) translate(14px, -8px); z-index:2; opacity:.94; }
.dossier-card.c3{ transform: rotate(-1.5deg); z-index:3; }
.dossier-card .file-tab{
  position:absolute; top:-14px; left:24px;
  background: var(--emerald); color:var(--white);
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.08em;
  padding:.35em .7em; border-radius: 2px 2px 0 0;
}
.dossier-card h4{ font-size:.95rem; color:var(--emerald-deep); }
.dossier-card .rule{ height:1px; background:var(--line); margin: .75rem 0; }
.dossier-card .redline{ display:block; height:.55em; background: rgba(173,138,91,.18); border-radius:1px; margin:.4rem 0; }
.dossier-card .redline.w60{ width:60%; }
.dossier-card .redline.w80{ width:80%; }
.dossier-card .redline.w40{ width:40%; }
.dossier-card .seal{
  position:absolute; bottom: var(--space-3); right: var(--space-3);
  width:52px; height:52px; border-radius:50%;
  border:1.5px solid var(--bronze);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.6rem; color:var(--bronze-dark); text-align:center;
}

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap: var(--space-4); }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
@media (min-width:700px){ .grid-2{ grid-template-columns: 1fr 1fr; } .grid-3{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .grid-3{ grid-template-columns: repeat(3,1fr); } }

.card{
  background: var(--white);
  border:1px solid var(--parchment-line);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
.card-flush{ padding:0; overflow:hidden; }
.section-dark .card{ background: rgba(247,243,234,.04); border-color: var(--line-dark); box-shadow:none; }
.service-list h2, .insight-list h2{ font-optical-sizing: none; font-variation-settings: 'opsz' 20; }

.icon-badge{
  width:44px; height:44px;
  border-radius: 3px;
  background: rgba(27,74,56,.07);
  color: var(--emerald);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: var(--space-2);
}
.icon-badge svg{ width:22px; height:22px; }
.section-dark .icon-badge{ background: rgba(217,199,163,.1); color: var(--bronze-light); }

/* ---------- Section marks / process ---------- */
.marks{ counter-reset: mark; }
.mark{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
}
.section-dark .mark{ border-color: var(--line-dark); }
.mark:last-child{ border-bottom: 1px solid var(--line); }
.section-dark .mark:last-child{ border-bottom-color: var(--line-dark); }
.mark-num{
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight:700;
  color: var(--bronze);
  min-width: 3ch;
}

/* ---------- Ledger rule / dividers ---------- */
.ledger{
  border:0; border-top:1px solid var(--line);
  margin: var(--space-5) 0;
  position:relative;
}
.section-dark .ledger{ border-color: var(--line-dark); }

/* ---------- Footer ---------- */
.site-footer{
  background:
    linear-gradient(to bottom, transparent 0%, var(--emerald-deep) 65%),
    linear-gradient(var(--grid-line-dark) 1px, transparent 1px) center top / 44px 44px,
    linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px) center top / 44px 44px,
    var(--emerald-deep);
  color: var(--parchment);
  padding-block: var(--space-6) var(--space-4);
}
.footer-grid{ display:grid; gap: var(--space-5); grid-template-columns: 1.3fr 1fr 1fr 1fr; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.site-footer h4{ color: var(--bronze-light); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom: var(--space-2); }
.site-footer a{ color: #CFE0D5; }
.site-footer a:hover{ color: var(--bronze-light); }
.footer-links li{ margin-bottom:.55rem; font-size:.92rem; }
.footer-bottom{ margin-top: var(--space-5); padding-top: var(--space-3); border-top:1px solid var(--line-dark); display:flex; flex-wrap:wrap; gap: var(--space-2); justify-content:space-between; font-size:.8rem; color:#9FB6A9; }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom: var(--space-3); }
.field label{ font-size:.85rem; font-weight:600; color: var(--emerald-deep); }
.field .hint{ font-size:.78rem; color: var(--muted); }
.field input, .field select, .field textarea{
  font: inherit; font-size:1rem;
  padding: .8em .9em;
  border:1px solid var(--parchment-line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  min-height:44px;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--emerald); outline-offset:1px; }
.field-row{ display:grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media(min-width:640px){ .field-row{ grid-template-columns: 1fr 1fr; } }
.required::after{ content:" *"; color: var(--bronze-dark); }
.form-note{ font-size:.82rem; color:var(--muted); margin-top:var(--space-2); }
.form-status{ font-size:.88rem; margin-top:var(--space-2); min-height:1.2em; }
.form-status.is-success{ color:var(--emerald); font-weight:600; }
.form-status.is-error{ color:#B3401F; font-weight:600; }

/* ---------- Diagnostic tool ---------- */
.diag-tabs{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom: var(--space-4); }
.diag-tab{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.04em;
  padding:.7em 1.1em; border:1px solid var(--parchment-line); border-radius: var(--radius);
  background: var(--white); cursor:pointer; min-height:44px;
}
.diag-tab.is-active{ background: var(--emerald); color:var(--white); border-color:var(--emerald); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

.diag-shell{ background: var(--white); border:1px solid var(--parchment-line); border-radius:4px; box-shadow: var(--shadow-card); padding: var(--space-5); }
.diag-progress{ height:6px; background: var(--parchment-dim); border-radius:3px; overflow:hidden; margin-bottom: var(--space-4); }
.diag-progress > span{ display:block; height:100%; background: var(--bronze); transition: width .3s ease; }
.diag-q{ display:none; }
.diag-q.is-active{ display:block; }

/* Numbered strategy steps on case-study pages */
.case-steps{ padding-left: 1.3em; margin: 0; }
.case-steps li{ margin-bottom: .7em; padding-left: .3em; }
.case-steps li::marker{ font-family: var(--font-mono); font-weight:600; color: var(--bronze-dark); }

.diag-options{ display:grid; gap:.6rem; margin-top: var(--space-3); }
.diag-option{
  display:flex; align-items:center; gap:.8em;
  padding: .9em 1em;
  border:1px solid var(--parchment-line);
  border-radius: var(--radius);
  cursor:pointer;
  font-size:.95rem;
  background: var(--parchment);
  transition: border-color .15s ease, background .15s ease;
  min-height:44px;
}
.diag-option:hover{ border-color: var(--bronze); }
.diag-option input{ accent-color: var(--emerald); width:18px; height:18px; flex:none; }
.diag-option.is-selected{ border-color: var(--emerald); background: rgba(27,74,56,.05); }
.diag-nav{ display:flex; justify-content:space-between; margin-top: var(--space-4); gap: var(--space-2); }
.diag-result{ display:none; }
.diag-result.is-active{ display:block; }
.risk-matrix{ display:grid; grid-template-columns: repeat(4,1fr); gap:.5rem; margin-block: var(--space-4); }
.risk-cell{ padding: var(--space-3) .5rem; text-align:center; border-radius: var(--radius); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; color: var(--muted); background: var(--parchment-dim); border:1px solid var(--parchment-line); }
.risk-cell.is-hit{ background: var(--emerald); color:var(--white); border-color: var(--emerald); }
.risk-band{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }

/* ---------- Utility ---------- */
.center{ text-align:center; }
.stack{ display:flex; flex-direction:column; gap: var(--space-3); }
.max-w{ max-width: 62ch; }
.mx-auto{ margin-inline:auto; }
.mt-1{margin-top:var(--space-1);} .mt-2{margin-top:var(--space-2);} .mt-3{margin-top:var(--space-3);} .mt-4{margin-top:var(--space-4);} .mt-5{margin-top:var(--space-5);}
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--emerald); color:#fff; padding:.8em 1.2em; z-index:1000; border-radius: 0 0 4px 0;
}
.skip-link:focus{ left:0; top:0; }