/* Shared Graphite palette and the approved homepage treatment. */

:root {
  --paper:#141B20; --paper-2:#1C262D; --paper-card:#26323A;
  --ink:#F1F7F5; --ink-soft:#C0CED1; --ink-deep:#F1F7F5;
  --muted:#A2B6BE; --line:rgba(170, 201, 214, .22); --edge:#667D86;
  --solid-ink:#18272F; --solid-deep:#0F171D; --on-dark:#EFF7F3;
  --fluency:#A6F0C8; --fluency-2:#A6F0C8; --fluency-3:#80C89A;
  --highlight:#A6F0C8; --forest:#A6F0C8; --marker:#E7A8AE;
  --tape:rgba(194,211,225,.5);
}
body { background-color:var(--paper); background-image:none; }
body::before { display:none; }
nav { background:#B5F0D0; box-shadow:none; border-bottom:1px solid rgba(24,45,39,.18); }
nav .logo, nav .logo-mark, nav .logo-words small, nav .nav-links a,
nav .nav-cta { color:#142922; }
nav .nav-cta { border-color:#234936; }
nav .nav-cta:hover { background:#142922; color:#B5F0D0; }
.nav-hamburger span { background:#142922; }
.hero-peek-card, .sticky { border-color:var(--edge); }
.hero .sticky .s-tape { background:var(--tape); border-color:var(--line); }
.logos-row { background:var(--paper-card); }
.logos-track { color:var(--ink-soft); }
.hero h1 .hi { color:var(--ink); }
.cf-field input::placeholder, .cf-field textarea::placeholder { color:var(--muted); opacity:.85; }
.cf-submit[disabled] { opacity:.8; cursor:default; }
.folder-tab:nth-child(3) .tab-sector { color:var(--forest); }

body { color-scheme:dark; background-image:linear-gradient(rgba(166,240,200,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(166,240,200,.035) 1px,transparent 1px); background-size:40px 40px; }
nav { background:#111A1F; border-bottom-color:rgba(166,240,200,.25); }
nav .logo, nav .logo-mark, nav .logo-words small, nav .nav-links a { color:#EDF8F2; }
nav .logo-mark em, nav .logo-words small { color:#A6F0C8; }
nav .nav-cta { color:#14221B; background:#A6F0C8; border-color:#A6F0C8; }
nav .nav-cta:hover { background:#C3FFDC; color:#14221B; }
.nav-hamburger span { background:#A6F0C8; }
.hero h1 .hi { color:#A6F0C8; background:linear-gradient(180deg,transparent 0 91%,rgba(166,240,200,.32) 91% 95%,transparent 95%); }
.popup-title em, .contact-title em, .cases h2 em { color:#A6F0C8; background:linear-gradient(180deg,transparent 0 91%,rgba(166,240,200,.32) 91% 95%,transparent 95%); }
.btn-chunky { background:#A6F0C8; color:#12221B; border-color:#A6F0C8; box-shadow:5px 5px 0 #39624D; }
.btn-chunky .arrow { color:#163C2A; }
.hero-peek-card, .sticky { box-shadow:4px 4px 0 #0D1216,8px 8px 0 #6EAA87; }
.cc-buyer { background:#2C3D46; }
.cc-buyer::after { border-left-color:#2C3D46; }
.counter-chat-header { background:#23323B; }
.dl-check { background:#A6F0C8; color:#14221B; border-color:#A6F0C8; }
.dl-stamp { background:#111B20; }
.outcomes { background:#0B1217; }
.lf-cell-front { background:#172229; }
.lf-card-front, .lfm-card-lit, .lfm-grid-lit .lfm-tile { background:#25343D; }
.lf-card-back, .lf-box-back, .lfm-card-flu, .lfm-tile-flu { color:#F1F7F5; }
.pin { background:#25313A; }
.cf-field input, .cf-field textarea { background:#131F26; border-color:#677F8A; }
.cf-field input:focus, .cf-field textarea:focus { border-color:#A6F0C8; }
.cf-field label { color:#D2E1E2; }
.pf-book, .book-pages { background:#25323A; }
.pov-bullet { color:#D5E3E2; }
.folder-body, .case-panel, .case-narrative .case-body { background:#25323A; }
.case-panel .case-eyebrow .sector { color:#E7A8AE; }
.folder-tab.active { background:#25323A; }
.folder-tab.active .tab-sector { color:#A6F0C8; }
footer.site { border-top:1px solid rgba(166,240,200,.2); }

/* Graphite 02: calm surfaces, electric accents, familiar characters. */
:root {
  --signal: #BFFF6F;
  --signal-hover: #DAFFA9;
  --on-signal: #102019;
  --space: #050810;
  --space-exit: #0B1217;
}

/* The graphics have specific places; the reading surfaces stay quiet. */
body { background:var(--paper); }
.counter-chat-thread, .folder-body::before, #case1 .screen-body,
#case2 .screen-body, .how .wp-card, .wp-terminal::after,
.p-arcade::before { background-image:none; }
.lf-grid-bg { gap:0; }
.lf-cell-front { background:#141B20; }
.lf-cell-back { background:#182B25; }
.lf-section { border-top:1px solid rgba(166,240,200,.14); }
.tear { height:0; background:none; }
.hero { background:#141B20; }
.hero::after {
  content:''; position:absolute; width:6px; height:6px; left:7%; top:24%;
  background:var(--signal); opacity:.65; pointer-events:none;
  box-shadow:14px 0 0 -1px rgba(191,255,111,.4),0 14px 0 -1px rgba(191,255,111,.25);
}
.hero h1 .hi, .popup-title em, .contact-title em, .cases h2 em {
  color:var(--signal); background:none;
}
.dl-title-mark, .dl-title-mark em, .mobile-gate .mg-title em {
  color:var(--signal); background:none;
}
.flu-emph { color:#B9F5D3; background:none; text-shadow:none; }
.hero .sticky { background:#213029; border-color:#6B9679; }
.hero .sticky.s-yellow { box-shadow:4px 4px 0 #0D1513,8px 8px 0 var(--signal); }
.hero .sticky.s-mint { box-shadow:4px 4px 0 #0D1513,8px 8px 0 #68CAA0; }
.hero .sticky .s-tape { background:rgba(182,215,193,.32); border-color:rgba(209,241,220,.2); }
.hero .sticky del { color:#C5D1CA; opacity:.76; }
.hero .sticky em { color:var(--signal); }
.logos-row { background:#111C1A; border-top-color:rgba(166,240,200,.2); }
.logos-label { color:#B0C5BA !important; }
.logos-track { color:#C5D7CF; }

/* Explicit text/background pairs also cover the more specific closing CTA. */
.btn-chunky, .hero .btn-chunky, .cta .btn-chunky,
nav .nav-cta, .nav-drawer .nav-drawer-cta {
  background:var(--signal); color:var(--on-signal); border-color:var(--signal);
  text-shadow:none;
}
.btn-chunky, .hero .btn-chunky, .cta .btn-chunky {
  box-shadow:5px 5px 0 #3D6338;
}
.btn-chunky .arrow, .cta .btn-chunky .arrow { color:var(--on-signal); }
.btn-chunky:hover, .hero .btn-chunky:hover, .cta .btn-chunky:hover,
nav .nav-cta:hover, .nav-drawer .nav-drawer-cta:hover {
  background:var(--signal-hover); color:var(--on-signal); border-color:var(--signal-hover);
  text-shadow:none;
}
.btn-chunky:focus-visible, nav a:focus-visible, .nav-drawer a:focus-visible,
.cf-field input:focus-visible, .cf-field textarea:focus-visible {
  outline:3px solid #EDF9F1; outline-offset:5px;
}
.progress { background:var(--signal); }
.section-label, .dl-stamp-value, .outcome-num { color:var(--signal); }
.section-label::before { background:var(--signal); }
.dl-stamp { border-color:var(--signal); box-shadow:4px 4px 0 #101A15; }
.outcome-box { background:#15231F; border-color:#39574A; }
.outcome-box:hover { background:#1B3027; border-color:var(--signal); }
.outcome-icon { color:var(--signal); opacity:.85; }
.outcome-box p { color:#C5D5CC; }
.outcome-box h3 { color:#F1F7F5; }
.folder-tab.active { box-shadow:inset 0 3px 0 var(--signal); }
.folder-tab.active .tab-sector { color:var(--signal); }
.cf-field label, .cf-note, footer.site { color:#C0D1C7; }
.cf-note { opacity:1; }
footer.site a { color:#C5D7CF; }
footer.site a:hover { color:var(--signal); }
.cf-modal-title em { background:none; color:var(--signal); }
.cf-modal-close { background:var(--signal); color:var(--on-signal); border-color:var(--signal); }
.scr-save-btn, #case1 .scr-save-btn, .scr-toggle-btn.on, #case2 .scr-toggle-btn.on {
  background:var(--signal); color:var(--on-signal); border-color:var(--signal);
}
.cf-peek-alien rect[fill="#73956F"] { fill:var(--signal); }
.cf-peek-alien rect[fill="#95D7AE"] { fill:#DFFFAD; }
.cf-peek-alien rect[fill="#F6F0E1"] { fill:#F1FFF3; }

/* Replace both old SVG ramps, including their tan / mauve intermediate stops.
   Exact endpoint colors match the adjoining sections on every viewport. */
.how { background-color:var(--space); box-shadow:none; }
.how-dither { display:none; }
.g-space-edge {
  position:absolute; left:0; width:100%; height:128px; z-index:4;
  pointer-events:none; background-repeat:repeat-x; background-size:1280px 128px;
  background-position:center; image-rendering:pixelated;
}
.g-space-entry { top:0; background-image:url('../assets/graphite-entry.svg'); }
.g-space-exit { bottom:0; background-image:url('../assets/graphite-exit.svg'); }
.outcomes { background:var(--space-exit); }

/* The last desktop UFO lands below the map when the destination copy wraps.
   Let it use the section's existing bottom padding without changing the path
   geometry. The outer .how still clips the scene; mobile keeps its own layout. */
@media (min-width:961px) {
  .how .hm-map { overflow:visible; }
}

/* A small cast drawn from the existing PODLET, SPROUT and BLINK sprites. */
.g-only { display:block; }
.g-hero-visitor { position:absolute; right:5.8%; bottom:83px; width:120px; height:132px; z-index:2; pointer-events:none; }
.g-hero-visitor img { display:block; width:100%; height:auto; image-rendering:pixelated; filter:drop-shadow(0 10px 0 #0C1310); }
.g-pixel { position:absolute; width:7px; height:7px; background:var(--signal); }
.g-pixel.p1 { left:-32px; top:40px; }
.g-pixel.p2 { right:-25px; top:1px; width:4px; height:4px; opacity:.5; }
.g-pixel.p3 { left:-16px; top:58px; width:4px; height:4px; opacity:.3; }
.cta { background:#101C18; padding:90px 0 100px; border-top:1px solid #365345; }
.cta::before { background-image:none; }
.cta h2 { color:#F1F7F5; }
.cta h2 em { color:var(--signal); text-shadow:none; }
.cta p { color:#B9CDC1; }
.cta .btn-chunky { margin-top:36px; }
.g-cta-crew { display:flex; justify-content:center; align-items:flex-end; gap:20px; margin:0 auto 38px; }
.g-cta-crew img { display:block; image-rendering:pixelated; filter:drop-shadow(0 8px 0 #08130D); }
.g-cta-crew img:first-child { transform:rotate(-8deg); }
.g-cta-crew img:last-child { transform:rotate(8deg); }
footer.site { background:#0D1612; border-top-color:#294532; }

@media (max-width:1100px) {
  .g-hero-visitor { right:5%; width:96px; height:106px; bottom:90px; }
}
@media (max-width:960px) {
  .g-hero-visitor { display:none; }
}
@media (max-width:500px) {
  .hero::after { top:22px; left:auto; right:28px; }
  .how { box-shadow:none; }
  .cta { padding:56px 0 64px; }
  .cta p { font-size:15px; line-height:1.6; max-width:30ch; margin-top:24px; }
  .g-cta-crew { gap:12px; margin-bottom:28px; }
  .g-cta-crew img { width:56px; height:auto; }
  .g-cta-crew img:nth-child(2) { width:80px; }
  .cta .btn-chunky { max-width:100%; font-size:10px; padding:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero .btn-chunky, .cta .btn-chunky, .outcome-box { transition:none; }
}

/* The current develop homepage replaces case studies with Perspectives. */
::selection { background:var(--signal); color:var(--on-signal); }
.persp-section { position:relative; background:#141F1D; border-block:1px solid rgba(166,240,200,.16); }
.persp-intro h2 em { color:var(--signal); background:none; }
.persp-all a { color:var(--ink); border-bottom-color:var(--signal); }
.persp-all a:hover { color:var(--signal); }
.persp-section .pf-book { background:#21322B; border-color:#658373; box-shadow:6px 6px 0 #0C1611,10px 10px 0 #BFFF6F; }
.persp-section .book-title { color:var(--ink); }
.persp-section .book-title em { color:var(--signal); }
.persp-section .book-toc { color:#C5D7CF; }
.persp-section .book-toc li span { color:var(--signal); }
.persp-section .book-pages { background:#32453B; }
.persp-section .book-tape { background:rgba(182,215,193,.32); border-color:rgba(209,241,220,.2); }
.persp-intro::after {
  content:''; display:block; width:72px; height:80px; margin-top:40px;
  background:url('../assets/graphite-sprout.svg') center / contain no-repeat;
  image-rendering:pixelated; filter:drop-shadow(0 6px 0 #0A1511);
}
.about .founder { border-color:rgba(166,240,200,.25); }
.about .section-label { color:var(--signal); }
@media (max-width:900px) {
  .persp-intro { position:relative; }
  .persp-intro::after { position:absolute; right:0; bottom:0; width:52px; height:58px; margin:0; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}