/* ============================================================
   Gilon US — brand tokens
   green #9FC131 and its fold-shade #67810B are taken from the mark
   ============================================================ */
:root{
  --ink:        #0E110B;
  --ink-soft:   #3A4034;
  --ink-mute:   #6B7263;
  --paper:      #FBFBF7;
  --paper-2:    #F3F4EC;
  --signal:     #9FC131;
  --signal-dp:  #67810B;
  --rule:       rgba(14,17,11,.14);
  --rule-soft:  rgba(14,17,11,.08);
  --rule-dark:  rgba(251,251,247,.16);

  --display: 'Archivo', system-ui, sans-serif;
  --prose:   'Newsreader', Georgia, serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --wrap: 1180px;
  --gut: 32px;
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--display);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }

.mono{ font-family:var(--mono); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper);
  padding:12px 18px; z-index:99; font-size:.85rem;
}
.skip:focus{ left:8px; top:8px; }

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

/* ── header ────────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(251,251,247,.88);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.head-inner{ display:flex; align-items:center; gap:36px; height:72px; }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; color:var(--ink); }
.brand-logo{ height:25px; width:auto; display:block; }
/* the fold facet is a shadow: on dark it reads as a hole punched in the mark,
   so the reversed lockup flattens the plane to a single tone */
.brand-rule{ width:1px; height:17px; background:var(--rule); flex:none; }
.brand-us{
  font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink-mute); line-height:1;
}

.nav{ display:flex; gap:26px; margin-left:auto; }
.nav a{
  font-size:.82rem; font-weight:500; letter-spacing:.01em; text-decoration:none;
  color:var(--ink-soft); padding:4px 0; position:relative;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--signal); transition:right .28s cubic-bezier(.4,0,.2,1);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ right:0; }

.menu-toggle{
  display:none; margin-left:auto; background:none; border:1px solid var(--rule);
  width:40px; height:36px; padding:0 9px; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px;
}
.menu-toggle span{ display:block; height:1.5px; background:var(--ink); transition:transform .25s, opacity .25s; }
.menu-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.mobile-nav[hidden]{ display:none !important; }
.mobile-nav{ display:none; flex-direction:column; border-top:1px solid var(--rule); background:var(--paper); }
.mobile-nav a{
  padding:14px var(--gut); text-decoration:none; font-size:.95rem; font-weight:500;
  border-bottom:1px solid var(--rule-soft);
}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--signal); color:var(--ink);
  font-family:var(--display); font-weight:600; font-size:.9rem; letter-spacing:.005em;
  padding:13px 24px; border:1px solid var(--signal); border-radius:2px;
  text-decoration:none; cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s;
}
.btn:hover{ background:var(--signal-dp); border-color:var(--signal-dp); color:var(--paper); }
.btn:active{ transform:translateY(1px); }
.btn-sm{ padding:9px 16px; font-size:.8rem; flex:none; }
.btn-block{ width:100%; padding:15px 24px; }

.btn-text{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.9rem; font-weight:500; text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:3px;
  transition:border-color .2s;
}
.btn-text::after{ content:'→'; transition:transform .22s; }
.btn-text:hover{ border-color:var(--signal-dp); }
.btn-text:hover::after{ transform:translateX(4px); }
.btn-text.sm{ font-size:.8rem; }

/* ── type ──────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 22px; display:flex; align-items:center; gap:12px;
}
.eyebrow .idx{ color:var(--signal-dp); font-weight:600; }
.eyebrow.light{ color:rgba(251,251,247,.6); }
.eyebrow.light .idx{ color:var(--signal); }

h1{
  font-size:clamp(2.05rem, 4.4vw, 3.2rem);
  line-height:1.05; letter-spacing:-.032em; font-weight:700;
  margin:0 0 26px;
}
h1 em{
  font-family:var(--prose); font-style:italic; font-weight:400;
  letter-spacing:-.01em;
}

h2{
  font-size:clamp(1.7rem, 3.1vw, 2.5rem);
  line-height:1.12; letter-spacing:-.024em; font-weight:600; margin:0;
  max-width:20ch;
}
.h2-solo{ max-width:24ch; margin-bottom:40px; }

h3{ font-size:1.06rem; font-weight:600; letter-spacing:-.012em; margin:0 0 9px; }

.figure{
  font-family:var(--mono); font-weight:600; letter-spacing:-.02em;
  background:linear-gradient(transparent 54%, rgba(159,193,49,.45) 54%);
  padding:0 .05em; white-space:nowrap;
}

.lede{
  font-family:var(--prose); font-size:1.2rem; line-height:1.6; font-weight:300;
  color:var(--ink-soft); max-width:56ch; margin:0 0 32px;
}
.lede.light{ color:rgba(251,251,247,.72); }

.prose{
  font-family:var(--prose); font-weight:300; font-size:1.03rem; line-height:1.62;
  color:var(--ink-soft); margin:0 0 14px; max-width:52ch;
}

/* ── hero ──────────────────────────────────────────────── */
.hero{ padding:88px 0 96px; border-bottom:1px solid var(--rule); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:56px; align-items:center; }

.hero-cta{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:44px; }

.hero-points{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.hero-points li{
  padding:13px 0 13px 26px; border-bottom:1px solid var(--rule-soft);
  font-size:.9rem; color:var(--ink-soft); position:relative;
}
.hero-points li::before{
  content:''; position:absolute; left:0; top:20px;
  width:9px; height:1.5px; background:var(--signal-dp);
}

/* signature ledger panel */
.ledger{
  border:1px solid var(--rule); background:#fff; border-radius:2px;
  box-shadow:0 1px 0 rgba(14,17,11,.04), 0 26px 50px -34px rgba(14,17,11,.34);
}
.ledger-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 18px; border-bottom:1px solid var(--rule);
  color:var(--ink-mute);
}
.ledger-head .state{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--ink-mute); transition:color .5s;
}
.ledger-head .state::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--ink-mute); transition:background .5s;
}
.ledger.done .state{ color:var(--signal-dp); }
.ledger.done .state::before{ background:var(--signal); }

.ledger-body{ position:relative; height:252px; padding:18px; }

.scatter{ position:absolute; inset:18px; }
.chip{
  position:absolute; font-family:var(--mono); font-size:.63rem; letter-spacing:.04em;
  background:var(--paper-2); border:1px solid var(--rule); color:var(--ink-soft);
  padding:6px 10px; white-space:nowrap; border-radius:1px;
  box-shadow:0 6px 14px -10px rgba(14,17,11,.5);
  transition:transform .85s cubic-bezier(.2,.75,.25,1), opacity .5s ease;
}
.c1{ top:4%;  left:2%;   transform:rotate(-7deg)  translate(0,0); }
.c2{ top:24%; left:47%;  transform:rotate(5deg)   translate(0,0); }
.c3{ top:48%; left:6%;   transform:rotate(-3deg)  translate(0,0); }
.c4{ top:70%; left:40%;  transform:rotate(8deg)   translate(0,0); }
.c5{ top:88%; left:12%;  transform:rotate(-5deg)  translate(0,0); }

.ledger.done .chip{ transform:rotate(0) translate(0,-14px); opacity:0; }

.ledger-table{
  position:absolute; inset:18px; width:calc(100% - 36px);
  border-collapse:collapse; opacity:0; transition:opacity .55s ease .35s;
  align-self:start;
}
.ledger.done .ledger-table{ opacity:1; }
.ledger-table th{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:500; text-align:left;
  padding:0 0 9px; border-bottom:1px solid var(--rule);
}
.ledger-table td{
  font-size:.82rem; padding:11px 0; border-bottom:1px solid var(--rule-soft);
  color:var(--ink-soft);
}
.ledger-table td:first-child{ color:var(--ink); font-weight:500; }
.ledger-table .num{ text-align:right; font-family:var(--mono); font-size:.74rem; }

.ledger-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 18px; border-top:1px solid var(--rule); color:var(--ink-mute);
}
.ledger-foot .hash{ color:var(--signal-dp); }

/* ── sections ──────────────────────────────────────────── */
.section{ padding:96px 0; border-bottom:1px solid var(--rule); }
.band{ background:var(--paper-2); }

.split{ display:grid; grid-template-columns:1.25fr 1fr; gap:56px; align-items:end; margin-bottom:56px; }
.split h2{ max-width:22ch; }
.split-side .prose{ margin-bottom:0; }

/* problem faults */
.faults{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--rule); }
.faults li{ padding:28px 28px 6px 0; border-right:1px solid var(--rule-soft); }
.faults li:last-child{ border-right:0; }
.faults li + li{ padding-left:28px; }
.fault-n{ display:block; color:var(--signal-dp); margin-bottom:14px; }
.faults p{ font-family:var(--prose); font-weight:300; color:var(--ink-soft); font-size:.98rem; line-height:1.6; margin:0; }

/* pillars */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.pillar{
  padding:30px 26px 34px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:transparent; transition:background .3s;
}
.pillar:hover{ background:rgba(159,193,49,.09); }
.pillar.pillar-note{
  display:flex; align-items:center; background:rgba(159,193,49,.07);
}
.pillar.pillar-note:hover{ background:rgba(159,193,49,.07); }
.pillar-note p{
  font-family:var(--mono) !important; font-size:.68rem !important; letter-spacing:.09em;
  text-transform:uppercase; line-height:1.9 !important; color:var(--ink-mute) !important;
}
.pillar p{ font-family:var(--prose); font-weight:300; font-size:.98rem; line-height:1.6; color:var(--ink-soft); margin:0; }

/* capability table */
.table-scroll{ overflow-x:auto; }
.cap-table{ width:100%; border-collapse:collapse; min-width:620px; }
.cap-table thead th{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:500; text-align:left;
  padding:0 20px 12px 0; border-bottom:1px solid var(--ink);
}
.cap-table td{ padding:20px 20px 20px 0; border-bottom:1px solid var(--rule-soft); vertical-align:top; }
.cap-table tbody tr{ transition:background .25s; }
.cap-table tbody tr:hover{ background:rgba(159,193,49,.1); }
.col-n{ width:52px; color:var(--signal-dp); }
.cap-name{ width:270px; font-weight:600; letter-spacing:-.01em; }
.cap-table td:last-child{
  font-family:var(--prose); font-weight:300; color:var(--ink-soft); font-size:1rem;
}

/* market */
.market-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; border-top:1px solid var(--rule); padding-top:34px; }
.sub{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); font-weight:500; margin-bottom:18px; }
.who{ list-style:none; margin:0; padding:0; }
.who li{
  padding:14px 0; border-bottom:1px solid var(--rule-soft);
  font-size:1.06rem; font-weight:500; letter-spacing:-.012em;
  display:flex; align-items:center; gap:14px;
}
.who li::before{ content:''; width:5px; height:5px; background:var(--signal); flex:none; }
.note{ color:var(--ink-mute); margin-top:22px; }

/* team */
.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--rule); }
.member{ padding:30px 30px 34px 0; border-right:1px solid var(--rule-soft); }
.member:last-child{ border-right:0; }
.member + .member{ padding-left:30px; }
.member h3{ font-size:1.2rem; margin-bottom:6px; }
.role{ color:var(--signal-dp); margin:0 0 16px; }
.member .prose{ font-size:.98rem; }
.member .btn-text{ margin-top:6px; }

/* ── closing / contact ─────────────────────────────────── */
.closing{ background:var(--ink); color:var(--paper); padding:100px 0; }
.closing-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:start; }
.closing h2{ color:var(--paper); max-width:24ch; margin-bottom:22px; }

.contact-list{ list-style:none; margin:34px 0 0; padding:0; border-top:1px solid var(--rule-dark); }
.contact-list li{
  display:flex; align-items:center; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--rule-dark);
}
.contact-list .label{ color:rgba(251,251,247,.45); width:64px; flex:none; }
.contact-list a{ color:var(--signal); text-decoration:none; font-size:.98rem; border-bottom:1px solid transparent; }
.contact-list a:hover{ border-bottom-color:var(--signal); }

.form{ border:1px solid var(--rule-dark); padding:30px; border-radius:2px; background:rgba(251,251,247,.03); }
.field{ margin-bottom:16px; }
.field label{
  display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(251,251,247,.55); margin-bottom:7px;
}
.field input,.field select,.field textarea{
  width:100%; background:rgba(251,251,247,.05); color:var(--paper);
  border:1px solid var(--rule-dark); border-radius:2px;
  padding:11px 13px; font-family:var(--display); font-size:.92rem;
  transition:border-color .2s, background .2s;
}
.field textarea{ resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--signal); background:rgba(251,251,247,.08);
}
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--signal) 50%),linear-gradient(135deg,var(--signal) 50%,transparent 50%); background-position:calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.field select option{ color:#0E110B; }
.form-note{ color:rgba(251,251,247,.4); margin:14px 0 0; text-align:center; letter-spacing:.09em; }
.field.invalid input{ border-color:#C4562F; }

/* ── footer ────────────────────────────────────────────── */
.site-foot{ background:var(--ink); border-top:1px solid var(--rule-dark); padding:34px 0; }
.foot-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.foot-brand{ color:var(--paper); }
.foot-brand .brand-logo{ height:23px; --logo-fold:var(--signal); }
.foot-brand .brand-rule{ background:var(--rule-dark); }
.foot-brand .brand-us{ color:rgba(251,251,247,.5); }
.foot-line{ color:rgba(251,251,247,.45); margin:0; }

/* ── reveal ────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.d1{ transition-delay:.09s; }
.d2{ transition-delay:.18s; }
.d3{ transition-delay:.27s; }
.d4{ transition-delay:.36s; }

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1020px){
  .hero-grid{ grid-template-columns:1fr; gap:52px; }
  .split{ grid-template-columns:1fr; gap:24px; align-items:start; }
  .pillars{ grid-template-columns:repeat(2,1fr); }
  .closing-grid{ grid-template-columns:1fr; gap:48px; }
}

@media (max-width:800px){
  :root{ --gut:22px; }
  .nav{ display:none; }
  .head-inner .btn-sm{ display:none; }
  .menu-toggle{ display:flex; }
  .mobile-nav{ display:flex; }
  .hero{ padding:60px 0 68px; }
  .section{ padding:66px 0; }
  .closing{ padding:70px 0; }

  .faults, .team{ grid-template-columns:1fr; }
  .faults li, .member{ border-right:0; border-bottom:1px solid var(--rule-soft); padding:26px 0; }
  .faults li + li, .member + .member{ padding-left:0; }
  .pillars{ grid-template-columns:1fr; }
  .market-grid{ grid-template-columns:1fr; gap:40px; }
  .ledger-body{ height:250px; }
  .foot-inner{ flex-direction:column; align-items:flex-start; gap:14px; }
}

@media (max-width:640px){
  .cap-table{ min-width:0; }
  .cap-table thead{ position:absolute; left:-9999px; }
  .cap-table tr{ display:block; border-bottom:1px solid var(--rule); padding:20px 0; }
  .cap-table tbody tr:hover{ background:transparent; }
  .cap-table td{ display:block; padding:0; border:0; width:auto; }
  .cap-table .col-n{ width:auto; margin-bottom:6px; }
  .cap-table .cap-name{ font-size:1.1rem; margin-bottom:6px; }
}

@media (max-width:520px){
  .ledger-table th:nth-child(3), .ledger-table td:nth-child(3){ display:none; }
  .ledger-body{ height:238px; }
}

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