/* Chainlabs Consulting - site styles.
   Values are transcribed from the approved design (Main.dc.html / Contact.dc.html).
   Accent #1F4BFF, ink #0D1014, paper #F3F4F1. Box sizing is left at the browser
   default (content-box) on purpose: every width and padding in the design assumes it. */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-tight-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-tight-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-tight-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}

/* ---------- Base ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#F3F4F1;color:#0D1014;font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.6}
a{color:#0D1014}
a:hover{color:#1F4BFF}
:focus-visible{outline:2px solid #1F4BFF;outline-offset:3px}
.keep{white-space:nowrap}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.skip-link{position:absolute;left:16px;top:-80px;z-index:10;padding:10px 16px;background:#0D1014;color:#F3F4F1;border-radius:6px;font-size:15px;font-weight:500;text-decoration:none}
.skip-link:hover{color:#F3F4F1}
.skip-link:focus{top:12px}

/* Shared type */
.eyebrow{margin:0;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:#1F4BFF}
.eyebrow--muted{color:#A7ADB8}
.lead{margin:0;font-size:20px;line-height:1.55;color:#3D4350;max-width:34em}
.h2{margin:0;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:clamp(32px, 3.6vw, 48px);line-height:1.1;letter-spacing:-0.02em}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;text-decoration:none;font-weight:500;font-size:16px;border-radius:6px}
.btn--primary,.btn--primary:hover{background:#0D1014;color:#F3F4F1}
.btn--secondary,.btn--secondary:hover{border:1px solid #B9BDB4;color:#0D1014}

/* ---------- Header ---------- */
.site-header{border-bottom:1px solid #D9DCD5}
.site-header__inner{max-width:1200px;margin:0 auto;padding:18px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.brand,.brand:hover{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:#0D1014}
.brand__mark{display:block;height:32px;width:auto}
.brand__name{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:24px;letter-spacing:-0.01em;white-space:nowrap}
.brand__sub{color:#5A6170;font-weight:500}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-size:15px;font-weight:500}
.site-nav__link{text-decoration:none;padding:10px 0}
.site-nav__cta,.site-nav__cta:hover{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid #0D1014;border-radius:6px;text-decoration:none;color:#0D1014}
.site-nav__cta[aria-current="page"],.site-nav__cta[aria-current="page"]:hover{background:#0D1014;color:#F3F4F1}

/* ---------- Hero ---------- */
.hero{max-width:1200px;margin:0 auto;padding:clamp(56px, 8vw, 104px) 24px clamp(64px, 8vw, 96px);display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.hero__copy{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:28px}
.hero__title{margin:0;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:clamp(42px, 5.6vw, 78px);line-height:1.03;letter-spacing:-0.03em;max-width:14ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}
.hero__visual{flex:1 1 420px;min-width:0;display:flex;justify-content:center}
.hero-art{position:relative;width:100%;max-width:480px;padding-bottom:132px}

/* Chart card */
.chart{background:#FFFFFF;border:1px solid #D9DCD5;border-radius:16px;box-shadow:0 1px 2px rgba(13,16,20,0.04),0 28px 56px -28px rgba(13,16,20,0.22);padding:6px 20px 20px;display:flex;flex-direction:column;gap:14px}
.chart__tabs{display:flex;flex-wrap:wrap;gap:0 22px;border-bottom:1px solid #ECEEEA}
.chart__tab{background:none;border:0;padding:0;min-height:44px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:color 0.2s ease,box-shadow 0.2s ease;color:#5A6170;box-shadow:inset 0 -2px 0 transparent}
.chart__tab[aria-pressed="true"]{color:#0D1014;box-shadow:inset 0 -2px 0 #1F4BFF}
.chart__tab:focus-visible{outline-offset:2px}
.chart__caption{margin:0;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.5;color:#5A6170}
.chart__svg{width:100%;height:auto;display:block;overflow:visible}
.chart__tag-text{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:0.06em}
@keyframes chart-pulse{0%{transform:scale(1);opacity:.5}80%,100%{transform:scale(3.4);opacity:0}}
.chart__pulse{transform-box:fill-box;transform-origin:center;animation:chart-pulse 2.2s cubic-bezier(.2,.6,.3,1) infinite}
.hero-art.is-offscreen .chart__pulse{animation-play-state:paused}
.chart__bars{display:flex;align-items:flex-end;gap:5px;height:44px;padding-right:12.5%;border-bottom:1px solid #E4E6E1}
.chart__bar{flex:1 1 0;min-width:0;border-radius:2px 2px 0 0;background:#CDD1D6}
.chart__bar--up{background:#1F4BFF;opacity:0.9}
/* Bar heights for the finished AI view (what renders without JavaScript). */
.chart__bar:nth-child(1){height:8.6px}.chart__bar:nth-child(2){height:26.3px}.chart__bar:nth-child(3){height:20.8px}
.chart__bar:nth-child(4){height:31.1px}.chart__bar:nth-child(5){height:17.9px}.chart__bar:nth-child(6){height:5.8px}
.chart__bar:nth-child(7){height:14.6px}.chart__bar:nth-child(8){height:15.9px}.chart__bar:nth-child(9){height:35.8px}
.chart__bar:nth-child(10){height:30.7px}.chart__bar:nth-child(11){height:11.7px}.chart__bar:nth-child(12){height:17.8px}
.chart__bar:nth-child(13){height:10.2px}.chart__bar:nth-child(14){height:19.8px}.chart__bar:nth-child(15){height:23.3px}
.chart__bar:nth-child(16){height:14.2px}.chart__bar:nth-child(17){height:30.7px}.chart__bar:nth-child(18){height:19.9px}
.chart__bar:nth-child(19){height:23.5px}.chart__bar:nth-child(20){height:14.7px}.chart__bar:nth-child(21){height:8.2px}
.chart__bar:nth-child(22){height:23.5px}.chart__bar:nth-child(23){height:23.7px}.chart__bar:nth-child(24){height:17.8px}

/* Engagement card */
.float{position:absolute;left:-20px;bottom:0;width:236px;background:#FFFFFF;border:1px solid #D9DCD5;border-radius:14px;box-shadow:0 1px 2px rgba(13,16,20,0.04),0 24px 48px -20px rgba(13,16,20,0.24);padding:16px;display:flex;flex-direction:column;gap:12px}
.float__label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#5A6170}
.stage{display:flex;flex-direction:column;gap:6px}
.stage__head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:500;line-height:1.3}
.stage__dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px #B9BDB4}
.stage__dot.is-done{background:#1F4BFF;box-shadow:none}
.stage__track{height:4px;border-radius:2px;background:#ECEEEA;overflow:hidden}
.stage__fill{height:100%;border-radius:2px;background:#1F4BFF;width:100%}

/* Ownership chip */
.chip{position:absolute;top:-18px;right:-12px;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;background:#FFFFFF;border:1px solid #D9DCD5;border-radius:999px;box-shadow:0 1px 2px rgba(13,16,20,0.04),0 16px 32px -16px rgba(13,16,20,0.24);font-size:13px;font-weight:500;white-space:nowrap}
.chip__icon{width:22px;height:22px;border-radius:50%;background:#1F4BFF;display:flex;align-items:center;justify-content:center;flex:none}

/* Before the script takes over (JS on, motion allowed) the chart waits undrawn,
   so it can play when scrolled into view. Without JS it stays fully drawn.
   The waiting state is held by a 5 s step animation rather than plain rules: if the
   script never arrives (blocked or failed download), the chart falls back to its
   fully drawn state instead of staying empty. site.js adds .is-live straight away. */
@keyframes chart-wait-line{from{stroke-dashoffset:1px}}
@keyframes chart-wait-hide{from{opacity:0}}
@keyframes chart-wait-bar{from{height:1px}}
@keyframes chart-wait-fill{from{width:0}}
@keyframes chart-wait-dot{from{background-color:transparent;box-shadow:inset 0 0 0 1.5px #B9BDB4}}
@keyframes chart-wait-float{from{opacity:0;transform:translate3d(0,12px,0)}}
@keyframes chart-wait-chip{from{opacity:0;transform:translate3d(0,-8px,0)}}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference){
  .hero-art:not(.is-live) .chart__line{animation:chart-wait-line 5s step-end both}
  .hero-art:not(.is-live) .chart__area,
  .hero-art:not(.is-live) .chart__end{animation:chart-wait-hide 5s step-end both}
  .hero-art:not(.is-live) .chart__bar{animation:chart-wait-bar 5s step-end both}
  .hero-art:not(.is-live) .stage__fill{animation:chart-wait-fill 5s step-end both}
  .hero-art:not(.is-live) .stage__dot{animation:chart-wait-dot 5s step-end both}
  .hero-art:not(.is-live) .float{animation:chart-wait-float 5s step-end both}
  .hero-art:not(.is-live) .chip{animation:chart-wait-chip 5s step-end both}
}
@media (prefers-reduced-motion: reduce){
  .chart__pulse{animation:none;opacity:0}
}

/* ---------- Sections ---------- */
.section-head{display:flex;flex-direction:column;gap:16px;max-width:760px}

.services{border-top:1px solid #D9DCD5}
.services__inner{max-width:1200px;margin:0 auto;padding:clamp(72px, 9vw, 96px) 24px;display:flex;flex-direction:column;gap:56px}
.cards{display:flex;flex-wrap:wrap;gap:24px}
.card{flex:1 1 300px;min-width:0;background:#FFFFFF;border:1px solid #D9DCD5;border-radius:10px;padding:32px;display:flex;flex-direction:column;gap:18px}
.card__num{font-family:'JetBrains Mono',monospace;font-size:13px;color:#1F4BFF}
.card__title{margin:0;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:24px;line-height:1.2;letter-spacing:-0.01em}
.card__text{margin:0;color:#3D4350}
.card__list{margin:auto 0 0;padding:18px 0 0;list-style:none;display:flex;flex-direction:column;gap:8px;border-top:1px solid #E4E6E1;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.5;color:#4A5160}
.card__list li{display:flex;gap:10px;align-items:center}
.card__list li::before{content:"";width:6px;height:6px;background:#1F4BFF;flex:none}

.approach{background:#0D1014;color:#F3F4F1}
.approach__inner{max-width:1200px;margin:0 auto;padding:clamp(72px, 9vw, 104px) 24px;display:flex;flex-direction:column;gap:64px}
.steps{display:flex;flex-wrap:wrap;gap:40px}
.step{flex:1 1 280px;min-width:0;border-top:1px solid #343A45;padding-top:28px;display:flex;flex-direction:column;gap:14px}
.step__num{font-family:'JetBrains Mono',monospace;font-size:13px;color:#A7ADB8}
.step__title{margin:0;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:22px;line-height:1.25}
.step__text{margin:0;color:#C9CDD4}

.section--rule{border-top:1px solid #D9DCD5}
.split{max-width:1200px;margin:0 auto;padding:clamp(72px, 9vw, 104px) 24px;display:flex;flex-wrap:wrap;gap:48px 72px}
.split__head{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:16px}
.split__body{flex:999 1 480px;min-width:0;display:flex;flex-direction:column;gap:20px;padding-top:8px}
.split__lead{margin:0;font-size:20px;line-height:1.55;color:#1E232B}
.split__text{margin:0;color:#3D4350}

.cta{padding:0 24px clamp(72px, 9vw, 104px)}
.cta__card{max-width:1200px;margin:0 auto;background:#FFFFFF;border:1px solid #D9DCD5;border-radius:14px;padding:clamp(40px, 6vw, 80px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:40px}
.cta__text{flex:999 1 480px;min-width:0;display:flex;flex-direction:column;gap:16px}
.cta__title{margin:0;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:clamp(34px, 4.4vw, 60px);line-height:1.05;letter-spacing:-0.03em}
.cta__sub{margin:0;font-size:19px;color:#3D4350}
.cta__actions{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cta__email{font-family:'JetBrains Mono',monospace;font-size:15px}

/* ---------- Footer ---------- */
.site-footer{background:#0D1014;color:#F3F4F1}
.site-footer :focus-visible{outline-color:#F3F4F1}
.site-footer__inner{max-width:1200px;margin:0 auto;padding:64px 24px 48px;display:flex;flex-direction:column;gap:40px}
.site-footer__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.brand--footer,.brand--footer:hover{color:#F3F4F1}
.brand--footer .brand__sub{color:#A7ADB8}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:15px}
.footer-nav a,.footer-nav a:hover{color:#C9CDD4;text-decoration:none;padding:10px 0}
.legal{border-top:1px solid #343A45;padding-top:32px;display:flex;flex-direction:column;gap:10px;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7;color:#A7ADB8}
.legal p{margin:0}
.legal .legal__entity{color:#E2E5EA}
.legal .legal__copy{margin:8px 0 0}
.legal a,.legal a:hover{color:#E2E5EA}

/* ---------- Contact page ---------- */
.contact{max-width:1200px;margin:0 auto;padding:clamp(56px, 8vw, 96px) 24px clamp(72px, 9vw, 112px);display:flex;flex-wrap:wrap;gap:56px 80px}
.contact__intro{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:28px}
.page-title{margin:0;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:clamp(42px, 5vw, 68px);line-height:1.03;letter-spacing:-0.03em}
.contact__lead{max-width:28em}
.contact__email-block{border-top:1px solid #D9DCD5;padding-top:28px;display:flex;flex-direction:column;gap:8px}
.label-mono{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:#5A6170}
.contact__email{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:clamp(20px, 2vw, 26px);line-height:1.3;letter-spacing:-0.01em}

.form{flex:1 1 520px;min-width:0;background:#FFFFFF;border:1px solid #D9DCD5;border-radius:14px;padding:clamp(28px, 4vw, 48px);display:flex;flex-direction:column;gap:22px}
.form__row{display:flex;flex-wrap:wrap;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.form__row .field{flex:1 1 220px;min-width:0}
.field__label{font-size:14px;font-weight:500}
.field__input,.field__textarea{-webkit-appearance:none;appearance:none;border:1px solid #B9BDB4;border-radius:6px;background:#FFFFFF;font:inherit;font-size:16px;color:#0D1014;margin:0}
.field__input{min-height:48px;padding:0 14px}
.field__textarea{padding:12px 14px;line-height:1.5;resize:vertical}
.field__input:focus-visible,.field__textarea:focus-visible{outline:2px solid #1F4BFF;outline-offset:1px;border-color:#1F4BFF}
.field__input:user-invalid,.field__textarea:user-invalid{border-color:#B42318}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:6px}
.form__note{margin:0;flex:1 1 260px;font-size:14px;line-height:1.5;color:#5A6170}
.form__submit{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;background:#0D1014;color:#F3F4F1;border:none;border-radius:6px;font:inherit;font-weight:500;font-size:16px;cursor:pointer}
.form__submit:disabled{opacity:0.6;cursor:progress}
.form__trap{display:none}

/* Status (aria-live). Out of flow while empty so it adds no gap. */
.form__status:empty{position:absolute}
.form__status:focus{outline:none}
.form__status--error{padding:12px 14px;border-left:3px solid #B42318;border-radius:0 6px 6px 0;background:#FBEFEE;font-size:15px;line-height:1.5;color:#0D1014}
.form__status--success{display:flex;align-items:center;gap:20px;font-size:clamp(24px, 2.6vw, 32px);line-height:1.45;color:#0D1014}
.form__status-text{margin:0}
.form__status-icon{width:48px;height:48px;border-radius:50%;background:#1F4BFF;display:flex;align-items:center;justify-content:center;flex:none}
.form.is-sent{justify-content:center}
.form.is-sent > :not(.form__status){display:none}

/* ---------- Text pages (privacy, 404) ---------- */
.page{max-width:1200px;margin:0 auto;padding:clamp(56px, 8vw, 96px) 24px clamp(72px, 9vw, 112px)}
.page__head{display:flex;flex-direction:column;gap:28px;max-width:70ch}
.page__meta{margin:0;font-family:'JetBrains Mono',monospace;font-size:13px;color:#5A6170}
.page__actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}

.prose{max-width:70ch;margin-top:48px;padding-top:8px;border-top:1px solid #D9DCD5;color:#3D4350}
.prose h2{margin:48px 0 16px;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:clamp(24px, 2.4vw, 30px);line-height:1.2;letter-spacing:-0.01em;color:#0D1014}
.prose p{margin:0 0 16px}
.prose strong{font-weight:600;color:#0D1014}
.prose ul{margin:0 0 16px;padding:0;list-style:none}
.prose li{position:relative;margin:0 0 8px;padding-left:22px}
.prose li::before{content:"";position:absolute;left:2px;top:0.72em;width:6px;height:6px;background:#1F4BFF}
.table-wrap{margin:8px 0 24px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#FFFFFF;border:1px solid #D9DCD5;border-radius:10px}
.table-wrap:focus-visible{outline-offset:2px}
.table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.table--2{min-width:420px}
.table--3{min-width:560px}
.table--4{min-width:640px}
.table th{padding:14px 16px;text-align:left;vertical-align:bottom;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:#5A6170;border-bottom:1px solid #D9DCD5}
.table td{padding:14px 16px;vertical-align:top;color:#3D4350;border-top:1px solid #ECEEEA}
.table tr:first-child td{border-top:0}
.table td:first-child{font-weight:500;color:#0D1014}

/* ---------- Small screens (same breakpoints as the design) ---------- */
@media (max-width: 640px){
  .site-nav__link{display:none}
  .site-header .brand__mark{height:28px}
  .site-header .brand__name{font-size:20px}
  .site-nav__cta,.site-nav__cta:hover{padding:0 14px}
  .hero-art{padding-bottom:0}
  .float{position:static;width:auto;transform:none !important;margin-top:16px}
  .h2-break{display:none}
}
@media (max-width: 400px){
  .legal{font-size:12px}
}