/* =========================================================
   Consultia — shared site stylesheet
   Palette derived from the Consultia mark: navy + olive/green,
   with a deep-navy editorial background carried over from the
   original template.
   ========================================================= */
:root{
  --ink:#0B1826;
  --ink-2:#122335;
  --ink-3:#182C40;
  --paper:#EFF4F7;
  --navy:#0A4A7E;
  --navy-deep:#073055;
  --green:#7A8D39;
  --green-light:#9FAC70;
  --blue-light:#6396CD;
  --slate:#8FA0AE;
  --text:#E8ECEE;
  --text-dim:#B7C2CC;
  --rule: rgba(122,141,57,0.35);
  --maxw: 1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--text);
}
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.04em; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--green-light);
}
.eyebrow::before{
  content:''; width:22px; height:1px; background:var(--green);
}
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--paper); color:var(--navy); padding:12px 18px;
  font-family:'IBM Plex Mono', monospace; font-size:13px; z-index:200;
}
.skip-link:focus{ left:16px; top:16px; }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,24,38,0.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--rule);
}
header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
  gap:24px;
}
.mark{ display:flex; align-items:center; }
.mark .logo-plate{
  display:flex; align-items:center;
  background:var(--paper);
  padding:7px 14px;
  border-radius:6px;
}
.mark img{ height:38px; width:auto; display:block; }
nav ul{ display:flex; gap:34px; list-style:none; }
nav a{
  font-size:14px; color:var(--text-dim);
  transition:color 0.2s ease;
  position:relative;
  padding-bottom:4px;
}
nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--green-light); transform:scaleX(0); transform-origin:left;
  transition: transform 0.2s ease;
}
nav a:hover, nav a:focus-visible{ color:var(--text); }
nav a:hover::after, nav a:focus-visible::after, nav a[aria-current="page"]::after{ transform:scaleX(1); }
nav a[aria-current="page"]{ color:var(--text); }
nav a:focus-visible{ outline:1px solid var(--green-light); outline-offset:4px; }
.nav-links{ display:flex; align-items:center; gap:40px; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase;
  padding:12px 22px;
  border:1px solid var(--green);
  color:var(--green-light);
  transition: all 0.25s ease;
  white-space:nowrap;
  cursor:pointer;
  background:transparent;
}
.btn:hover, .btn:focus-visible{ background:var(--green); color:var(--ink); }
.btn:focus-visible{ outline:2px solid var(--paper); outline-offset:2px; }
.btn-solid{ background:var(--green); color:var(--ink); }
.btn-solid:hover{ background:var(--green-light); border-color:var(--green-light); }

/* ---------- Hero (home) ---------- */
.hero{
  padding:120px 0 76px;
  border-bottom:1px solid var(--rule);
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:'';
  position:absolute; right:-120px; top:-160px;
  width:520px; height:520px;
  border:1px solid var(--rule);
  border-radius:50%;
  opacity:0.5;
}
.hero-grid{
  display:grid; grid-template-columns: 1.15fr 0.85fr; gap:64px; align-items:end;
}
.hero h1{
  font-size:clamp(38px, 5vw, 60px);
  line-height:1.06;
  margin:22px 0 26px;
  max-width:16ch;
}
.hero h1 em{ font-style:italic; color:var(--green-light); }
.hero p.lede{
  font-size:17.5px; color:var(--text-dim); max-width:46ch; margin-bottom:34px;
}
.hero-actions{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.hero-note{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--slate);
}
.hero-side{
  border-left:1px solid var(--rule);
  padding-left:36px;
}
.stat-row{ display:flex; flex-direction:column; gap:24px; }
.stat{ display:flex; align-items:baseline; gap:14px; }
.stat .num{
  font-family:'Fraunces', serif; font-weight:500; font-size:40px; color:var(--green-light);
  line-height:1;
}
.stat .label{ font-size:13.5px; color:var(--text-dim); line-height:1.4; max-width:22ch; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  padding:96px 0 64px;
  border-bottom:1px solid var(--rule);
}
.page-hero h1{
  font-size:clamp(34px, 4.4vw, 50px);
  margin:18px 0 20px;
  max-width:22ch;
}
.page-hero p.lede{
  font-size:17px; color:var(--text-dim); max-width:60ch;
}

/* ---------- Ticker band (signature element) ---------- */
.ticker{
  background:var(--paper);
  color:var(--navy);
  overflow:hidden;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.ticker-track{
  display:flex;
  white-space:nowrap;
  width:max-content;
  animation: scroll-ticker 34s linear infinite;
  padding:14px 0;
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; transform:none; }
}
.ticker-track span{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  padding:0 28px;
  display:inline-flex; align-items:center; gap:10px;
  border-right:1px solid rgba(10,74,126,0.18);
  font-weight:500;
}
.ticker-track span::before{ content:'●'; font-size:6px; color:var(--green); position:relative; top:-2px; }
@keyframes scroll-ticker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Section shell ---------- */
section{ padding:104px 0; border-bottom:1px solid var(--rule); }
section:last-of-type{ border-bottom:none; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px,3.2vw,38px); margin-top:16px; }
.section-head p{ color:var(--text-dim); margin-top:16px; font-size:16px; max-width:56ch; }

/* ---------- Overview / lede ---------- */
.overview blockquote{
  font-family:'Fraunces', serif; font-weight:400; font-style:italic;
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.5;
  color:var(--paper);
  max-width:1000px;
  border-left:2px solid var(--green);
  padding-left:34px;
}
.overview .attribution{
  margin-top:28px; padding-left:36px;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--slate); text-transform:uppercase; letter-spacing:0.12em;
}

/* ---------- Services ---------- */
.service-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.service{
  background:var(--ink); padding:34px 28px 30px;
  transition: background 0.25s ease;
}
.service:hover{ background:var(--ink-2); }
.service .tag{
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--green-light); letter-spacing:0.1em;
}
.service h3{ font-size:19px; margin:16px 0 12px; line-height:1.28; }
.service p{ font-size:14px; color:var(--text-dim); }

/* ---------- Markets ---------- */
.markets{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap:64px; align-items:start;
}
.exchange-list{ display:flex; flex-direction:column; }
.exchange-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 0; border-top:1px solid var(--rule);
}
.exchange-list .exchange-row:last-child{ border-bottom:1px solid var(--rule); }
.exchange-row .name{ font-family:'Fraunces', serif; font-size:22px; }
.exchange-row .desc{ font-size:13.5px; color:var(--text-dim); max-width:30ch; text-align:right; }
.markets-copy p{ color:var(--text-dim); margin-bottom:18px; font-size:15.5px; }
.markets-copy p:last-child{ margin-bottom:0; }
.markets-copy .callout{
  margin-top:28px; padding:22px 24px;
  border:1px solid var(--rule);
  font-size:14.5px; color:var(--text);
}
.markets-copy .callout .mono{ color:var(--green-light); display:block; margin-bottom:8px; font-size:11.5px; }

/* ---------- Network / About ---------- */
.network-cols{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.network-col h3{
  font-size:14px; font-family:'IBM Plex Mono', monospace; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--green-light); margin-bottom:22px; font-weight:500;
}
.network-col ul{ list-style:none; }
.network-col li{
  padding:16px 0; border-top:1px solid var(--rule);
  font-family:'Fraunces', serif; font-size:19px;
}
.network-col li:last-child{ border-bottom:1px solid var(--rule); }
.network-col li span{
  display:block; font-family:'IBM Plex Sans', sans-serif; font-size:13px; color:var(--text-dim); margin-top:4px;
}

.story{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.story p{ color:var(--text-dim); margin-bottom:18px; font-size:15.5px; }
.story p:last-child{ margin-bottom:0; }
.story-figures{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--rule); }
.story-figures .stat{ padding:22px 0; border-bottom:1px solid var(--rule); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start; }
.contact-details{ display:flex; flex-direction:column; gap:28px; }
.contact-item .mono{ display:block; color:var(--green-light); font-size:11.5px; margin-bottom:8px; }
.contact-item a, .contact-item p{ font-family:'Fraunces', serif; font-size:20px; }
.contact-item p{ color:var(--text-dim); font-family:'IBM Plex Sans', sans-serif; font-size:14.5px; margin-top:4px; }

form.contact-form{ display:flex; flex-direction:column; gap:20px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-dim);
}
.field input, .field textarea{
  background:var(--ink-2);
  border:1px solid var(--rule);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:15px;
  padding:13px 14px;
  resize:vertical;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--green);
}
.field textarea{ min-height:130px; }
.form-submit{ align-self:flex-start; margin-top:6px; }
.form-note{ font-size:12.5px; color:var(--slate); margin-top:-4px; }

/* ---------- CTA / Footer ---------- */
.cta{ text-align:left; padding-top:100px; padding-bottom:100px; }
.cta-inner{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
}
.cta h2{ font-size:clamp(30px,4vw,46px); max-width:14ch; }
.cta-actions{ display:flex; gap:16px; }

footer{ padding:44px 0 40px; }
footer .foot-top{
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px;
  padding-bottom:32px; border-bottom:1px solid var(--rule); margin-bottom:24px;
}
footer .foot-brand{ display:flex; flex-direction:column; gap:14px; max-width:320px; }
footer .foot-brand .logo-plate{
  display:inline-flex; align-items:center; align-self:flex-start;
  background:var(--paper); padding:6px 12px; border-radius:6px;
}
footer .foot-brand img{ height:26px; width:auto; }
footer .foot-brand p{ font-size:13px; color:var(--text-dim); }
footer .foot-nav{ display:flex; gap:48px; flex-wrap:wrap; }
footer .foot-nav div{ display:flex; flex-direction:column; gap:12px; }
footer .foot-nav h4{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--slate); margin-bottom:2px; font-weight:500;
}
footer .foot-nav a{ font-size:13.5px; color:var(--text-dim); }
footer .foot-nav a:hover{ color:var(--green-light); }
footer .foot-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
footer .mono{ font-size:12px; color:var(--slate); }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-side{ border-left:none; border-top:1px solid var(--rule); padding-left:0; padding-top:32px; }
  .stat-row{ flex-direction:row; flex-wrap:wrap; gap:32px; }
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .markets{ grid-template-columns:1fr; }
  .exchange-row .desc{ text-align:left; max-width:none; }
  .network-cols{ grid-template-columns:1fr; gap:8px; }
  .story{ grid-template-columns:1fr; gap:32px; }
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  nav ul{ display:none; }
}
@media (max-width: 560px){
  .service-grid{ grid-template-columns:1fr; }
  .wrap{ padding:0 20px; }
  .hero{ padding:90px 0 56px; }
  .page-hero{ padding:76px 0 48px; }
  .cta-inner{ align-items:flex-start; }
  footer .foot-top{ flex-direction:column; }
  .mobile-nav nav{ padding-left:20px; padding-right:20px; }
}

/* ---------- Mobile navigation (added: accessible drawer) ---------- */
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  flex:0 0 auto;
  width:46px; height:46px; padding:11px;
  background:transparent; border:1px solid var(--rule); border-radius:6px;
  cursor:pointer;
}
.nav-toggle-bar{
  display:block; width:100%; height:2px; background:var(--text);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-toggle:focus-visible{ outline:2px solid var(--green-light); outline-offset:2px; }

.mobile-nav{
  border-top:1px solid var(--rule);
  background:rgba(11,24,38,0.98);
  backdrop-filter: blur(10px);
}
.mobile-nav[hidden]{ display:none; }
.mobile-nav nav{ display:flex; flex-direction:column; padding:12px 32px 26px; }
.mobile-nav a{
  padding:15px 0; font-size:16px; color:var(--text-dim);
  border-bottom:1px solid var(--rule);
  transition:color 0.2s ease;
}
.mobile-nav a:last-of-type{ border-bottom:none; }
.mobile-nav a[aria-current="page"]{ color:var(--text); }
.mobile-nav a:hover, .mobile-nav a:focus-visible{ color:var(--text); }
.mobile-nav a:focus-visible{ outline:1px solid var(--green-light); outline-offset:2px; }
.mobile-nav .btn{ margin-top:18px; align-self:flex-start; border-bottom:none; }
body.nav-open{ overflow:hidden; }

@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (min-width: 981px){
  .mobile-nav{ display:none !important; }
}

/* ---------- Form: validation + status states ---------- */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{
  border-color:#c0563f;
}
.field-error{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:#ff9d8a; margin-top:2px;
}
.form-status{
  font-size:14.5px; margin-top:2px;
}
.form-status:empty{ display:none; }
.form-status.is-success{ color:var(--green-light); }
.form-status.is-error{ color:#ff9d8a; }
.form-status:focus-visible{ outline:none; }

/* ---------- Small utilities ---------- */
.inline-link{ color:var(--green-light); border-bottom:1px solid var(--rule); }
.inline-link:hover, .inline-link:focus-visible{ border-bottom-color:var(--green-light); }
.foot-disclaimer{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--rule);
  color:var(--slate); font-size:11px; line-height:1.6; letter-spacing:0.02em;
}
.contact-note{ font-family:'Fraunces', serif; font-size:20px; color:var(--text); margin-top:0; }

/* =========================================================
   Theme toggle button + light theme
   ========================================================= */

/* Keep the brand mark on the left and cluster the controls on the right. */
header .mark{ margin-right:auto; }

.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  width:44px; height:44px; padding:0;
  background:transparent;
  border:1px solid var(--rule);
  border-radius:6px;
  color:var(--text-dim);
  cursor:pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover, .theme-toggle:focus-visible{ color:var(--text); border-color:var(--green-light); }
.theme-toggle:focus-visible{ outline:2px solid var(--green-light); outline-offset:2px; }
.theme-toggle svg{ width:20px; height:20px; display:block; }
.theme-toggle .icon-moon{ display:none; }
.theme-toggle .icon-sun{ display:block; }
[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
[data-theme="light"] .theme-toggle .icon-moon{ display:block; }

/* Smooth cross-fade when switching themes. */
body, header, .mobile-nav, .ticker,
.field input, .field textarea{
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ---------- Light theme ---------- */
[data-theme="light"]{
  --ink:#EEF3F7;      /* page background */
  --ink-2:#FFFFFF;    /* raised surfaces: cards, inputs, hovers */
  --ink-3:#E2EAF1;
  --navy:#0A4A7E;
  --navy-deep:#073055;
  --green:#5F6E27;
  --green-light:#5F6E27;
  --blue-light:#356AA0;
  --slate:#5B6A76;
  --text:#0C1B29;
  --text-dim:#41505B;
  --rule: rgba(10,74,126,0.18);
}
[data-theme="light"] body{ background:var(--ink); color:var(--text); }
[data-theme="light"] header{ background:rgba(238,243,247,0.9); }
[data-theme="light"] .mobile-nav{ background:rgba(238,243,247,0.98); }

/* The ticker stays a bold band — flipped to navy so it still reads as a signature stripe on a light page. */
[data-theme="light"] .ticker{ background:var(--navy); color:#EFF4F7; }
[data-theme="light"] .ticker-track span{ border-right-color:rgba(255,255,255,0.18); }
[data-theme="light"] .ticker-track span::before{ color:#9FAC70; }

[data-theme="light"] .overview blockquote{ color:var(--text); }
[data-theme="light"] .btn:focus-visible{ outline-color:var(--navy); }
[data-theme="light"] .field-error,
[data-theme="light"] .form-status.is-error{ color:#b3402a; }
[data-theme="light"] .field input[aria-invalid="true"],
[data-theme="light"] .field textarea[aria-invalid="true"]{ border-color:#b3402a; }