/* ==========================================================================
   folderol — shared chrome for the concept-faithful pages
   (Approach / Tools / Case Studies). Helper classes ported verbatim from the
   concept .dc.html <style> blocks, plus responsive + reduced-motion + nav.
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:#10131E}
::selection{background:#6499FF;color:#fff}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Bricolage Grotesque',system-ui,sans-serif}

@keyframes revealUp{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:translateY(0)}}
@supports (animation-timeline: view()){[data-reveal]{animation:revealUp linear both;animation-timeline:view();animation-range:entry 2% cover 32%}}

.hl-brush{padding:.06em .28em .12em; color:#fff; -webkit-box-decoration-break:clone; box-decoration-break:clone; background-repeat:no-repeat; background-position:center 54%; background-size:100% 100%; background-image:url("../assets/img/brush.png");}
.navlink{transition:color .18s}
.navlink:hover{color:#fff}
.btn-grad{transition:transform .18s, box-shadow .18s}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(191,88,187,.6)}
.tool-tab{transition:all .16s; cursor:pointer}
.tool-tab:hover{background:rgba(255,255,255,.04)!important}
.bar-fill{transition:width .8s cubic-bezier(.22,1,.36,1)}
.cs-card{transition:transform .2s, box-shadow .2s, border-color .2s}
.cs-card:hover{transform:translateY(-5px);box-shadow:0 30px 56px -28px rgba(76,107,255,.5);border-color:rgba(100,153,255,.4)!important}
.filt{transition:all .16s; cursor:pointer}
input,textarea{font-family:'JetBrains Mono',monospace}
input:focus,textarea:focus{border-color:#6499FF!important}
input[type=range]{accent-color:#6499FF; -webkit-appearance:none; height:6px; border-radius:3px; background:rgba(100,153,255,.2);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,#E95667,#6499FF); cursor:pointer;}
:focus-visible{outline:2px solid #6499FF; outline-offset:3px; border-radius:6px}

/* ---- mobile nav (hamburger) ---- */
.nav-burger{display:none; align-items:center; justify-content:center; width:44px; height:44px; background:transparent; border:1px solid rgba(255,255,255,.2); border-radius:10px; color:#fff; cursor:pointer; font-size:18px;}
@media (max-width:860px){
  .nav-links-row{display:none!important}
  .nav-burger{display:inline-flex!important}
  .nav-links-row.is-open{display:flex!important; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch!important; gap:0!important; background:#0f1320; border-bottom:1px solid rgba(100,153,255,.16); padding:8px 24px 22px;}
  .nav-links-row.is-open a{padding:14px 0; border-bottom:1px solid rgba(100,153,255,.1);}
  .m-stack{grid-template-columns:1fr!important}
  /* let single-column grid items shrink below their min-content (prevents overflow/clipping) */
  .m-stack>*{min-width:0!important}
}
/* ---- responsive scaling ---- */
@media (max-width:760px){
  .ph-h1{font-size:44px!important}
  .sec-h2{font-size:34px!important}
  .serif-h2{font-size:40px!important}
  .m-stack-760{grid-template-columns:1fr!important}
  .m-stack-760>*{min-width:0!important}
  .m-pad{padding-top:60px!important;padding-bottom:60px!important}
  .m-wrap{flex-wrap:wrap!important;gap:22px!important}
  .stage-row{grid-template-columns:1fr!important;gap:18px!important}
  .stage-num{display:none!important}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{animation:none!important;opacity:1!important;transform:none!important}
  .bar-fill{transition:none!important}
  *{transition:none!important}
}

/* ---- lead form (Pricing) ---- */
.lead-form{display:grid; gap:16px;}
.lead-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:560px){ .lead-row{grid-template-columns:1fr;} }
.lead-field{display:grid; gap:6px;}
.lead-field label{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6);}
.lead-form input[type=text],.lead-form input[type=email]{width:100%; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(100,153,255,.25); color:#fff; font-size:15px; font-family:'Manrope',system-ui,sans-serif; outline:none;}
.lead-form input::placeholder{color:rgba(255,255,255,.35);}
.lead-form input:focus{border-color:#6499FF;}
.lead-toggle{display:inline-flex; gap:6px; background:rgba(255,255,255,.04); border:1px solid rgba(100,153,255,.2); border-radius:12px; padding:5px; justify-self:start;}
.lead-toggle label{padding:9px 22px; border-radius:9px; cursor:pointer; font-size:14px; font-weight:600; color:rgba(255,255,255,.65); transition:background .15s, color .15s;}
.lead-toggle input{position:absolute; opacity:0; width:0; height:0;}
.lead-toggle label:has(input:checked){background:linear-gradient(95deg,#E95667,#5C59D4 70%,#6499FF); color:#fff;}
.lead-note{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em; color:rgba(255,255,255,.4); margin:0;}
.lead-success{display:none; padding:22px 24px; border-radius:16px; background:rgba(100,153,255,.1); border:1px solid rgba(100,153,255,.3); color:#fff; font-size:16px;}
.lead-success.is-visible{display:block;}