/* ============================================================
   Climate Ltd — Climate Action Platform
   Design tokens
   ============================================================ */

:root{
  /* ============ DARK THEME (default) ============ */
  --paper:        #0B1512;   /* page background */
  --paper-raised: #132720;   /* card / panel background */
  --paper-sunk:   #071009;   /* recessed panel background */
  --ink:          #ECEEE9;   /* primary text */
  --ink-soft:     #AFC0B6;   /* secondary text */
  --ink-faint:    #7C8C83;   /* tertiary / label text */
  --line:         #22322A;   /* hairline divider */
  --line-strong:  #3C4C43;   /* stronger border */
  --texture-line: rgba(236,238,233,0.05);

  --panel-dark:   #050A08;   /* deliberately-dark accent panels (CTA/footer) */
  --panel-dark-2: #0A1512;
  --paper-on-dark:#E9ECE6;   /* text inside deliberately-dark panels, fixed both themes */
  --ink-soft-on-dark: #9FAEA5;

  --teal:         #6FBAD1;   /* COLLECT */
  --teal-tint:    rgba(111,186,209,0.14);
  --amber:        #E3AA5F;   /* CALCULATE */
  --amber-tint:   rgba(227,170,95,0.14);
  --rust:         #D08E6C;   /* MODEL */
  --rust-tint:    rgba(208,142,108,0.14);
  --forest:       #7FBB98;   /* REPORT */
  --forest-tint:  rgba(127,187,152,0.14);

  /* Type */
  --serif: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  --max: 1180px;
}

/* ============ LIGHT THEME (opt-in via toggle) ============ */
html[data-theme="light"]{
  --paper:        #ECEEE9;
  --paper-raised: #F5F6F1;
  --paper-sunk:   #E3E6DE;
  --ink:          #10231C;
  --ink-soft:     #45524B;
  --ink-faint:    #6E7A72;
  --line:         #C7CCC1;
  --line-strong:  #A9B0A2;
  --texture-line: rgba(16,35,28,0.035);

  --panel-dark:   #0B1512;
  --panel-dark-2: #132720;

  --teal:         #2C5F6F;
  --teal-tint:    #DDE7E7;
  --amber:        #B8792E;
  --amber-tint:   #EFE3D2;
  --rust:         #8C4A2F;
  --rust-tint:    #EBDCD3;
  --forest:       #3E6B52;
  --forest-tint:  #DCE7DF;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* subtle ledger graph-paper texture */
body{
  background-image:
    linear-gradient(var(--paper) 0%, var(--paper) 100%),
    repeating-linear-gradient(0deg, var(--texture-line) 0, var(--texture-line) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(90deg, var(--texture-line) 0, var(--texture-line) 1px, transparent 1px, transparent 96px);
  background-attachment: fixed;
}

img{ max-width:100%; display:block; }
a{ color: var(--teal); text-decoration: none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 560;
  color: var(--ink);
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: 1.06; }
h2{ font-size: clamp(1.7rem, 2.8vw, 2.35rem); line-height: 1.16; }
h3{ font-size: 1.28rem; line-height: 1.3; }
h4{ font-size: 1.05rem; }

p{ margin: 0 0 1em; max-width: 62ch; color: var(--ink-soft); }
.lede{ font-size: 1.18rem; color: var(--ink-soft); max-width: 46ch; }

.mono{ font-family: var(--mono); letter-spacing: 0.01em; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height: 22px; width:auto; }
.brand img.logo-dark{ display:none; }
.brand img.logo-light{ display:block; }
html[data-theme="light"] .brand img.logo-dark{ display:block; }
html[data-theme="light"] .brand img.logo-light{ display:none; }
.brand-sub{
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint);
  border-left: 1px solid var(--line-strong); padding-left:10px; margin-left:2px;
  line-height:1.15;
}
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid var(--line-strong);
  background:transparent; color: var(--ink); cursor:pointer; padding:0;
  font-size:1.05rem; line-height:1; border-radius:3px;
}
.theme-toggle:hover{ border-color: var(--teal); color: var(--teal); }
.theme-toggle .icon-moon{ display:none; }
html[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
html[data-theme="light"] .theme-toggle .icon-moon{ display:inline; }
nav.primary{ display:flex; align-items:center; gap: 28px; }
nav.primary a{
  color: var(--ink); font-size: 0.92rem; font-weight: 500;
  padding: 6px 0; margin-right: 28px; position:relative;
}
nav.primary a:last-child{ margin-right:0; }
nav.primary a.active{ color: var(--teal); }
nav.primary a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--teal);
}
.header-cta{ display:flex; align-items:center; gap: 16px; }
.nav-toggle{ display:none; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--sans); font-weight: 600; font-size: 0.92rem;
  padding: 12px 20px; border-radius: 3px; border: 1px solid transparent;
  cursor:pointer; white-space:nowrap;
}
.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--teal); text-decoration:none; }
.btn-line{ border-color: var(--ink); color: var(--ink); background:transparent; }
.btn-line:hover{ background: var(--ink); color: var(--paper); text-decoration:none; }
.btn-ghost{ color: var(--ink); background:transparent; padding-left:0; padding-right:0; }
.btn-ghost:hover{ color: var(--teal); text-decoration:underline; }
.btn-on-dark{ border-color: var(--paper-on-dark); color: var(--paper-on-dark); }
.btn-on-dark:hover{ background: var(--paper-on-dark); color: var(--panel-dark); }
.btn-primary-on-dark{ background: var(--paper-on-dark); color: var(--panel-dark); }
.btn-primary-on-dark:hover{ background: var(--teal); color: var(--paper-on-dark); }

/* ---------- section rhythm ---------- */
section{ padding: 88px 0; position:relative; }
section.tight{ padding: 56px 0; }
.section-rule{
  border-top: 1px solid var(--line);
}
.kicker{
  display:flex; align-items:center; gap:10px;
  font-family: var(--mono); font-size: 0.76rem; color: var(--ink-faint);
  margin-bottom: 18px;
}
.kicker::before{
  content:""; width:7px; height:7px; background: var(--teal); display:inline-block;
}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap: 40px;
  margin-bottom: 44px; flex-wrap:wrap;
}
.section-head p{ margin:0; }

.on-dark{ background: var(--panel-dark); color: var(--paper-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4{ color: var(--paper-on-dark); }
.on-dark p{ color: var(--ink-soft-on-dark); }
.on-dark .kicker{ color: var(--ink-soft-on-dark); }
.on-dark .line{ border-color: rgba(233,236,230,0.18) !important; }

/* ---------- hero ---------- */
.hero{ padding-top: 64px; padding-bottom: 76px; }
.hero-grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center;
}
.hero-cta-row{ display:flex; gap:16px; margin-top: 32px; flex-wrap:wrap; }
.hero-figure{ border:1px solid var(--line); background: var(--paper-raised); padding: 18px; }
.stat-strip{
  display:grid; grid-template-columns: repeat(4,1fr);
  border-top:1px solid var(--line); margin-top: 64px; padding-top: 26px;
}
.stat-strip div{ padding-right: 20px; }
.stat-num{ font-family: var(--serif); font-size: 1.9rem; color: var(--ink); display:block; }
.stat-label{ font-size: 0.82rem; color: var(--ink-faint); }

/* ---------- breadcrumb ---------- */
.crumb{
  font-size: 0.85rem; color: var(--ink-faint); padding: 22px 0 0;
}
.crumb a{ color: var(--ink-faint); }
.page-hero{ padding-top: 26px; padding-bottom: 56px; }
.page-hero .kicker{ margin-bottom: 20px; }
.page-hero h1{ max-width: 18ch; }
.page-hero p.lede{ margin-top:18px; }

/* ---------- ledger rows (agents, capability rows) ---------- */
.ledger{ border-top:1px solid var(--line); }
.ledger-row{
  display:grid; grid-template-columns: 150px 220px 1fr; gap: 24px;
  padding: 26px 0; border-bottom: 1px solid var(--line);
  align-items:start;
}
.ledger-row .tag{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--mono); font-size: 0.72rem; font-weight:600;
  padding: 5px 9px; height: fit-content; letter-spacing:0.02em;
}
.tag-collect{ background: var(--teal-tint); color: var(--teal); }
.tag-calculate{ background: var(--amber-tint); color: var(--amber); }
.tag-model{ background: var(--rust-tint); color: var(--rust); }
.tag-report{ background: var(--forest-tint); color: var(--forest); }
.ledger-row .code{ font-family: var(--mono); font-size: 0.98rem; color: var(--ink); }
.ledger-row h4{ margin:0 0 6px; }
.ledger-row p{ margin:0; max-width: 56ch; }

/* ---------- process ---------- */
.process{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.process > div{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding: 28px 24px; position:relative;
}
.process .num{ font-family: var(--mono); color: var(--ink-faint); font-size:0.8rem; }
.process h4{ margin-top:10px; }

/* ---------- feature blocks (platform page) ---------- */
.stage{
  display:grid; grid-template-columns: 260px 1fr; gap: 48px;
  padding: 56px 0; border-bottom: 1px solid var(--line);
}
.stage:first-of-type{ border-top: 1px solid var(--line); }
.stage-marker{ display:flex; align-items:flex-start; gap:14px; }
.stage-marker .stage-no{ font-family: var(--serif); font-size: 2.6rem; color: var(--line-strong); line-height:1; }
.stage-marker .stage-label{ font-family: var(--mono); font-size:0.78rem; color: var(--ink-faint); margin-top:8px; display:block;}
.feature-pair{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.feature-pair h3{ display:flex; align-items:center; gap:10px; }
.feature-pair ul{ margin:14px 0 0; padding:0; list-style:none; }
.feature-pair li{
  padding: 10px 0 10px 20px; border-top:1px solid var(--line);
  font-size: 0.94rem; color: var(--ink-soft); position:relative;
}
.feature-pair li:first-child{ border-top:none; }
.feature-pair li::before{
  content:"–"; position:absolute; left:0; color: var(--teal);
}

/* ---------- grids ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
.grid-3 > div{ background: var(--paper); padding: 30px; }
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
.grid-4 > div{ background: var(--paper); padding: 26px; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; }

.problem-item{ padding: 28px 0; border-top: 1px solid var(--line); }
.problem-item .eyebrow{ font-family: var(--mono); font-size:0.74rem; color: var(--amber); }

/* ---------- table (comparison, frameworks) ---------- */
.tbl{ width:100%; border-collapse: collapse; font-size: 0.92rem; }
.tbl th, .tbl td{ text-align:left; padding: 14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl thead th{ font-family: var(--mono); font-size:0.74rem; color: var(--ink-faint); font-weight:600; border-bottom:2px solid var(--ink); }
.tbl tbody tr:hover{ background: var(--paper-raised); }
.tbl td.hi, .tbl th.hi{ background: rgba(44,95,111,0.06); }
.table-scroll{ overflow-x:auto; }

/* ---------- industries ---------- */
.industry-row{
  display:grid; grid-template-columns: 64px 240px 1fr 220px; gap: 24px;
  padding: 30px 0; border-bottom:1px solid var(--line); align-items:start;
}
.industry-row:first-child{ border-top:1px solid var(--line); }
.industry-row .idx{ font-family:var(--serif); color: var(--line-strong); font-size:1.6rem; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-family: var(--mono); font-size:0.7rem; padding:5px 9px; border:1px solid var(--line-strong); color: var(--ink-soft); }

/* ---------- office / map ---------- */
.office-list{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); margin-top: 40px;}
.office-list > div{ background: var(--paper); padding: 24px; }
.office-list h4{ margin-bottom:6px; }
.office-list .role{ font-family: var(--mono); font-size:0.72rem; color: var(--teal); }

/* ---------- quote / copilot panel ---------- */
.copilot-panel{
  border: 1px solid var(--line-strong); background: var(--panel-dark); color: var(--paper-on-dark);
  padding: 34px; display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:center;
}
.copilot-panel .q{ font-family: var(--mono); font-size:0.95rem; color:#EFC98B; }
.copilot-panel .a{ font-family: var(--mono); font-size:0.82rem; color: var(--paper-on-dark); margin:10px 0 0; padding-left:16px; border-left:2px solid var(--teal); }

/* ---------- CTA band ---------- */
.cta-band{ background: var(--panel-dark); color: var(--paper-on-dark); padding: 76px 0; }
.cta-band .wrap{ display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; }
.cta-band h2{ color: var(--paper-on-dark); margin:0; max-width: 20ch; }
.cta-band .actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- footer ---------- */
footer{ background: var(--panel-dark-2); color: var(--ink-soft-on-dark); padding: 64px 0 32px; }
footer .foot-top{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 40px; border-bottom:1px solid rgba(233,236,230,0.14);
}
footer img.brand-logo{ height:20px; margin-bottom:18px; }
footer h5{ font-family: var(--mono); font-size:0.74rem; color: var(--paper-on-dark); margin:0 0 14px; text-transform:none; }
footer ul{ list-style:none; margin:0; padding:0; }
footer li{ margin-bottom:10px; }
footer a{ color: var(--ink-soft-on-dark); font-size:0.9rem; }
footer a:hover{ color: var(--paper-on-dark); }
.foot-bottom{ display:flex; justify-content:space-between; padding-top: 26px; font-size:0.8rem; flex-wrap:wrap; gap:10px; }
.foot-bottom .mono{ color: var(--ink-soft-on-dark); }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.field{ margin-bottom: 20px; }
.field label{ display:block; font-size:0.82rem; font-family:var(--mono); color: var(--ink-faint); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; font-family: var(--sans); font-size:0.96rem; color: var(--ink);
  background: var(--paper-raised); border:1px solid var(--line-strong); padding: 12px 14px;
}
.field textarea{ resize:vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus{ outline: 2px solid var(--teal); }

/* ---------- misc ---------- */
.line{ border:none; border-top:1px solid var(--line); margin: 0; }
.small{ font-size: 0.85rem; color: var(--ink-faint); }
.center{ text-align:center; }
.mt-0{ margin-top:0; }
ul.plain{ list-style:none; padding:0; margin:0; }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  nav.primary{ display:none; }
  .hero-grid, .grid-2, .contact-grid{ grid-template-columns: 1fr; }
  .process, .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: 1fr; }
  .stage{ grid-template-columns: 1fr; }
  .feature-pair{ grid-template-columns: 1fr; }
  .stat-strip{ grid-template-columns: repeat(2,1fr); row-gap:24px; }
  .industry-row{ grid-template-columns: 1fr; gap:10px; }
  .office-list{ grid-template-columns: repeat(2,1fr); }
  footer .foot-top{ grid-template-columns: 1fr 1fr; }
  .copilot-panel{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .wrap{ padding: 0 20px; }
  section{ padding: 56px 0; }
  .office-list{ grid-template-columns: 1fr; }
  footer .foot-top{ grid-template-columns: 1fr; }
}