/* ============================================================
   Symlink Digital — shared design system
   tokens + base + components, used by / and /proxymatch/
   ============================================================ */

:root{
  --ink: #0E1B2A;
  --ink-2: #16283D;
  --ink-3: #1E3348;
  --ink-line: rgba(237,238,231,0.14);
  --text-on-ink: #EDEEE7;
  --text-on-ink-muted: #93A6AF;

  --paper: #EDEEE7;
  --paper-2: #E3E5D9;
  --paper-3: #D7DACB;
  --paper-line: rgba(22,34,44,0.12);
  --text-on-paper: #16222C;
  --text-on-paper-muted: #53616A;

  --amber: #C9601D;
  --amber-ink: #C86A2E;
  --teal: #0D9488;
  --teal-ink: #1FA595;

  --font-display: Rockwell, "Roboto Slab", "Zilla Slab", "Noto Serif", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "SF Mono", Consolas, "Roboto Mono", "Courier New", monospace;

  --measure: 42rem;
  --wrap: 74rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--text-on-paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; margin:0; text-wrap:balance; letter-spacing:-0.01em; }
p{ margin:0; }
.mono{ font-family:var(--font-mono); }
.tnum{ font-variant-numeric:tabular-nums; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:1.75rem; }
@media (max-width:640px){ .wrap{ padding-inline:1.25rem; } }
.measure{ max-width:var(--measure); }

section{ position:relative; }
.band-ink{
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(200,106,46,0.10), transparent 60%),
    radial-gradient(ellipse 700px 600px at -10% 100%, rgba(31,165,149,0.08), transparent 60%),
    var(--ink);
  color:var(--text-on-ink);
}
.band-paper{ background:var(--paper); color:var(--text-on-paper); }
.band-paper2{ background:var(--paper-2); color:var(--text-on-paper); }

.pad-xl{ padding-block:6.5rem; }
.pad-lg{ padding-block:5rem; }
@media (max-width:760px){
  .pad-xl{ padding-block:4rem; }
  .pad-lg{ padding-block:3.25rem; }
}

/* ============ reveal on scroll ============ */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ============ eyebrow / section head ============ */
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:0.55em;
  color:var(--amber);
  margin-bottom:1rem;
}
.band-ink .eyebrow{ color:var(--amber-ink); }
.eyebrow::before{ content:""; width:1.6em; height:1px; background:currentColor; opacity:0.7; }

.section-head{ margin-bottom:2.75rem; }
.section-head h2{ font-size:clamp(1.6rem,3vw,2.35rem); line-height:1.15; }
.section-head .dek{ margin-top:0.9rem; color:var(--text-on-paper-muted); max-width:36rem; font-size:1.02rem; }
.band-ink .section-head .dek{ color:var(--text-on-ink-muted); }

/* ============ tick rail (well-log motif) ============ */
.rail{
  position:absolute; left:0; top:0; bottom:0; width:1.75rem;
  background-image: repeating-linear-gradient(to bottom, currentColor 0, currentColor 1px, transparent 1px, transparent 28px);
  color:var(--paper-line); opacity:0.9;
  display:none;
}
.band-ink .rail{ color:var(--ink-line); }
@media (min-width:900px){ .rail{ display:block; } .rail-pad{ padding-left:2.75rem; } }

/* ============ nav ============ */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(14,27,42,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--ink-line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:4.25rem; }
.brand{ display:flex; align-items:baseline; gap:0.6rem; text-decoration:none; color:var(--text-on-ink); }
.brand .mark{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:-0.01em; }
.brand .sep{ width:6px; height:6px; background:var(--amber-ink); border-radius:1px; transform:rotate(45deg); }
.brand .sub{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-on-ink-muted); }
.navlinks{ display:flex; gap:1.75rem; list-style:none; margin:0; padding:0; font-size:0.9rem; }
.navlinks a{ text-decoration:none; color:var(--text-on-ink-muted); transition:color .2s ease; }
.navlinks a:hover, .navlinks a:focus-visible{ color:var(--text-on-ink); }
.navlinks{ display:none; }
@media (min-width:840px){ .navlinks{ display:flex; } }
.navcta{ display:none; }
@media (min-width:640px){ .navcta{ display:inline-flex; } }

/* ============ buttons ============ */
.btn{
  font-family:var(--font-body); font-size:0.92rem; font-weight:600;
  display:inline-flex; align-items:center; gap:0.55em;
  padding:0.8rem 1.4rem; border-radius:3px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:focus-visible{ outline:2px solid var(--amber-ink); outline-offset:2px; }
.btn-primary{ background:var(--amber-ink); color:#1A0D02; box-shadow:0 0 0 rgba(200,106,46,0); }
.btn-primary:hover{ background:#DE8146; transform:translateY(-1px); box-shadow:0 6px 24px rgba(200,106,46,0.35); }
.btn-ghost{ background:transparent; color:var(--text-on-ink); border-color:var(--ink-line); }
.btn-ghost:hover{ border-color:var(--text-on-ink-muted); }
.btn-dark{ background:var(--ink); color:var(--paper); }
.btn-dark:hover{ background:var(--ink-2); transform:translateY(-1px); }
.btn-outline-dark{ background:transparent; color:var(--text-on-paper); border-color:var(--paper-line); }
.btn-outline-dark:hover{ border-color:var(--text-on-paper-muted); }
.btn svg{ width:1em; height:1em; }

/* ============ hero ============ */
.hero{ position:relative; overflow:hidden; padding-top:7.5rem; padding-bottom:5.5rem; }
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:0.85; mix-blend-mode:screen; }
.hero .wrap{ position:relative; z-index:2; }
.chip{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.04em;
  color:var(--text-on-ink-muted); border:1px solid var(--ink-line);
  padding:0.4rem 0.8rem; border-radius:99px; margin-bottom:1.75rem;
}
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal-ink); box-shadow:0 0 0 3px rgba(31,165,149,0.18); }
.hero h1{ font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.08; max-width:20ch; color:var(--text-on-ink); }
.hero .lede{ margin-top:1.5rem; max-width:38rem; font-size:1.12rem; color:var(--text-on-ink-muted); }
.hero .ctarow{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.25rem; }

.statrow{
  margin-top:4rem; padding-top:2.25rem; border-top:1px solid var(--ink-line);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2rem;
}
.stat .num{ font-family:var(--font-display); font-size:1.9rem; color:var(--text-on-ink); text-shadow:0 0 24px rgba(200,106,46,0.25); }
.stat .lbl{ margin-top:0.35rem; font-size:0.85rem; color:var(--text-on-ink-muted); max-width:22ch; }

/* ============ cards ============ */
.grid{ display:grid; gap:1.5rem; }
.g3{ grid-template-columns:repeat(3,1fr); }
.g2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:860px){ .g3{ grid-template-columns:1fr; } .g2{ grid-template-columns:1fr; } }

.card{
  background:var(--paper-2); border:1px solid var(--paper-line);
  padding:1.75rem; border-radius:3px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-3px); border-color:rgba(200,106,46,0.45); box-shadow:0 12px 28px rgba(14,27,42,0.08); }
.band-ink .card{ background:var(--ink-2); border-color:var(--ink-line); }
.band-ink .card:hover{ border-color:rgba(200,106,46,0.4); box-shadow:0 12px 28px rgba(0,0,0,0.35); }
.card h3{ font-size:1.08rem; margin-bottom:0.65rem; }
.card p{ color:var(--text-on-paper-muted); font-size:0.95rem; }
.band-ink .card p{ color:var(--text-on-ink-muted); }

.card-flag{ border-left:3px solid var(--amber); }
.band-ink .card-flag{ border-left-color:var(--amber-ink); }
.card-mono-head{ font-family:var(--font-mono); font-size:0.95rem; letter-spacing:0.02em; }

/* ============ process rail ============ */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
@media (max-width:860px){ .process{ grid-template-columns:1fr; } }
.step{ padding:1.5rem 1.5rem 1.5rem 0; border-top:2px solid var(--paper-3); position:relative; }
.step:first-child{ padding-left:0; }
@media (max-width:860px){ .step{ border-top:none; border-left:2px solid var(--paper-3); padding:0 0 2rem 1.5rem; } }
.step .idx{ font-family:var(--font-mono); font-size:0.78rem; color:var(--amber); display:block; margin-bottom:0.75rem; }
.band-ink .step{ border-top-color:var(--ink-3); }
@media (max-width:860px){ .band-ink .step{ border-left-color:var(--ink-3); } }
.band-ink .step .idx{ color:var(--amber-ink); }
.step h4{ font-size:1.02rem; margin-bottom:0.5rem; }
.step p{ font-size:0.9rem; color:var(--text-on-paper-muted); }
.band-ink .step p{ color:var(--text-on-ink-muted); }
.process-note{
  margin-top:2.25rem; padding-top:1.75rem; border-top:1px solid var(--paper-line);
  color:var(--text-on-paper-muted); font-size:0.98rem; max-width:44rem;
}
.band-ink .process-note{ border-top-color:var(--ink-line); color:var(--text-on-ink-muted); }

/* ============ note / callout ============ */
.note{
  display:flex; gap:0.9rem; padding:1.15rem 1.35rem; border:1px solid var(--paper-line);
  background:var(--paper-3); border-radius:3px; margin-top:1.75rem;
}
.note .ni{ flex:none; width:1.1rem; height:1.1rem; margin-top:0.15rem; color:var(--amber); }
.note .nt{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber); display:block; margin-bottom:0.35rem; }
.note p{ font-size:0.92rem; color:var(--text-on-paper-muted); }

/* ============ charts ============ */
.chart-card{
  background:var(--paper-2); border:1px solid var(--paper-line); border-radius:3px;
  padding:1.85rem 1.85rem 1.5rem;
}
.chart-title{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-on-paper-muted); margin-bottom:1.4rem; }

.bars{ display:flex; flex-direction:column; gap:1.4rem; }
.bar-row{ display:grid; grid-template-columns:6.5rem 1fr; align-items:center; gap:1rem; }
.bar-row .lab{ font-family:var(--font-mono); font-size:0.82rem; color:var(--text-on-paper); }
.bar-track{ position:relative; height:1.9rem; background:var(--paper-3); border-radius:2px; overflow:visible; }
.bar-fill{
  height:100%; border-radius:2px 4px 4px 2px; background:var(--amber);
  display:flex; align-items:center; justify-content:flex-end; padding-right:0.65rem;
  width:0; transition:width 1.1s cubic-bezier(.2,.7,.2,1);
}
.bar-fill.is-teal{ background:var(--teal); }
.bar-fill.is-muted{ background:#9AA79E; }
.bar-fill .val{ font-family:var(--font-mono); font-size:0.82rem; color:#1A0D02; white-space:nowrap; }
.bar-fill.is-teal .val{ color:#04211D; }
.bar-fill.is-muted .val{ color:#1A2420; }
.bar-flag{
  margin-top:0.5rem; display:inline-flex; align-items:center; gap:0.45em;
  font-family:var(--font-mono); font-size:0.72rem; color:#8A4610;
  background:rgba(201,96,29,0.12); border:1px solid rgba(201,96,29,0.35);
  padding:0.25rem 0.6rem; border-radius:2px;
}
.bar-flag .dot{ width:5px; height:5px; border-radius:50%; background:var(--amber); }

.legend{ display:flex; gap:1.5rem; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--paper-line); }
.legend .li{ display:flex; align-items:center; gap:0.5em; font-size:0.82rem; color:var(--text-on-paper-muted); }
.legend .sw{ width:0.7rem; height:0.7rem; border-radius:2px; }
.legend .sw.amber{ background:var(--amber); }
.legend .sw.muted{ background:#9AA79E; }
.legend .sw.teal{ background:var(--teal); }

.table-view{ margin-top:1.5rem; }
.table-view table{ width:100%; border-collapse:collapse; font-size:0.86rem; }
.table-view th,.table-view td{ text-align:left; padding:0.55rem 0.75rem; border-bottom:1px solid var(--paper-line); }
.table-view th{ font-family:var(--font-mono); font-weight:400; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-on-paper-muted); }
.table-view td.num{ font-family:var(--font-mono); }
details.table-toggle summary{ cursor:pointer; font-family:var(--font-mono); font-size:0.76rem; color:var(--text-on-paper-muted); letter-spacing:0.04em; margin-top:1.25rem; }
details.table-toggle summary:hover{ color:var(--text-on-paper); }

/* ============ pull quote ============ */
.pullquote{
  font-family:var(--font-display); font-size:clamp(1.15rem,2.2vw,1.55rem);
  line-height:1.42; color:var(--text-on-ink); max-width:42rem; text-wrap:balance;
  position:relative; padding-left:1.5rem; border-left:3px solid var(--amber-ink);
}
.pullquote cite{ display:block; margin-top:1.25rem; font-family:var(--font-mono); font-size:0.78rem; color:var(--text-on-ink-muted); font-style:normal; letter-spacing:0.03em; }

/* ============ timeline ============ */
.timeline{ display:flex; gap:2.5rem; flex-wrap:wrap; }
.tl-item{ flex:1; min-width:220px; position:relative; padding-top:1.5rem; }
.tl-item::before{ content:""; position:absolute; top:0; left:0; width:2.1rem; height:2px; background:var(--amber); }
.tl-item .date{ font-family:var(--font-mono); font-size:0.85rem; color:var(--amber); display:block; margin-bottom:0.5rem; }
.tl-item h4{ font-size:1.05rem; margin-bottom:0.4rem; }
.tl-item p{ font-size:0.9rem; color:var(--text-on-paper-muted); }
.tl-arrow{ display:flex; align-items:center; color:var(--paper-3); font-size:1.5rem; }
@media (max-width:640px){ .tl-arrow{ display:none; } }

/* ============ stamps (TRL/CRL) ============ */
.stamps{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.stamp{
  border:1.5px solid var(--text-on-paper); border-radius:3px; padding:1.1rem 1.4rem;
  min-width:9.5rem; text-align:center;
}
.band-ink .stamp{ border-color:var(--text-on-ink); }
.stamp .big{ font-family:var(--font-display); font-size:1.7rem; }
.stamp .cap{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-on-paper-muted); margin-top:0.35rem; }
.band-ink .stamp .cap{ color:var(--text-on-ink-muted); }

.scope-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.85rem; }
.scope-list li{ padding-left:1.4rem; position:relative; font-size:0.96rem; }
.scope-list li::before{ content:""; position:absolute; left:0; top:0.55em; width:0.55rem; height:2px; background:var(--amber); }
.scope-list.off li::before{ background:var(--text-on-paper-muted); }
.scope-list.off li{ color:var(--text-on-paper-muted); }

/* ============ solution / case card (home) ============ */
.case-card{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--ink-line); border-radius:4px; overflow:hidden;
  background:var(--ink-2); color:var(--text-on-ink);
}
@media (max-width:860px){ .case-card{ grid-template-columns:1fr; } }
.case-card .cc-body{ padding:2.5rem; display:flex; flex-direction:column; justify-content:center; }
.case-card .cc-status{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--teal-ink); margin-bottom:0.9rem; display:flex; align-items:center; gap:0.5em;
}
.case-card .cc-status .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal-ink); }
.case-card h3{ font-size:1.6rem; color:var(--text-on-ink); margin-bottom:0.85rem; }
.case-card p{ color:var(--text-on-ink-muted); font-size:0.98rem; margin-bottom:1.5rem; max-width:32rem; }
.case-card .cc-stats{ display:flex; gap:2rem; margin-bottom:1.75rem; flex-wrap:wrap; }
.case-card .cc-stats .n{ font-family:var(--font-display); font-size:1.3rem; color:var(--text-on-ink); }
.case-card .cc-stats .l{ font-size:0.76rem; color:var(--text-on-ink-muted); margin-top:0.2rem; }
.case-card .cc-visual{
  background:var(--ink); position:relative; min-height:220px; overflow:hidden;
}
.case-card .cc-visual canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:0.6; }

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:860px){ .pillars{ grid-template-columns:1fr; } }
.pillar .pk{ font-family:var(--font-mono); font-size:0.72rem; color:var(--amber); letter-spacing:0.06em; text-transform:uppercase; display:block; margin-bottom:0.75rem; }
.pillar h3{ font-size:1.1rem; margin-bottom:0.6rem; }
.pillar p{ color:var(--text-on-paper-muted); font-size:0.94rem; }

/* ============ CTA / contact ============ */
.contact-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:3.5rem; align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:2.5rem; } }
.ask-list{ list-style:none; margin:1.75rem 0 0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.ask-list li{ display:flex; gap:0.9rem; align-items:flex-start; font-size:0.97rem; }
.ask-list .n{ font-family:var(--font-mono); font-size:0.78rem; color:var(--amber-ink); flex:none; padding-top:0.2rem; }
.contact-card{ background:var(--ink-2); border:1px solid var(--ink-line); padding:2rem; border-radius:3px; color:var(--text-on-ink); }
.contact-card .label{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-on-ink-muted); margin-bottom:0.35rem; }
.contact-card .name{ font-family:var(--font-display); font-size:1.25rem; margin-bottom:1.5rem; color:var(--text-on-ink); }
.contact-card .row{ display:flex; justify-content:space-between; align-items:center; padding:0.75rem 0; border-top:1px solid var(--ink-line); font-size:0.88rem; }
.contact-card .row a{ color:var(--text-on-ink); text-decoration:none; }
.contact-card .row a:hover{ color:var(--amber-ink); }

/* ============ footer ============ */
footer{ background:var(--ink); color:var(--text-on-ink-muted); padding-block:2.75rem; border-top:1px solid var(--ink-line); font-size:0.85rem; }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
footer .fbrand{ color:var(--text-on-ink); font-family:var(--font-mono); font-size:0.82rem; }
footer a{ text-decoration:none; }
footer a:hover{ color:var(--text-on-ink); }