/* Greenstar Production Technology. Deliberately NOT the letter-page look (white, Lora, slate):
   a dark, image-led page in IBM Plex, self-hosted like every Greenstar page. */
@font-face { font-family:'Plex'; font-weight:400; font-display:swap; src:url('fonts/IBMPlexSans-Regular.woff2') format('woff2'); }
@font-face { font-family:'Plex'; font-weight:600; font-display:swap; src:url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'Plex Mono'; font-weight:400; font-display:swap; src:url('fonts/IBMPlexMono-Regular.woff2') format('woff2'); }
@font-face { font-family:'Lora'; font-weight:600; font-display:swap; src:url('fonts/Lora-SemiBold.woff2') format('woff2'); }

:root {
  --bg:#07090d; --bg2:#0d1117; --ink:#f1f3f6; --body:#b7bfca; --mut:#6c7787; --line:#1d242e;
  --accent:#5ee0c6;            /* scan-line cyan-green: the one colour, used for state and emphasis */
  --warm:#f0a35b;
  --mono:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--body); font:17px/1.65 'Plex',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
       -webkit-font-smoothing:antialiased; }
a { color:inherit; }
h1, h2, h3 { color:var(--ink); font-weight:600; letter-spacing:-.02em; margin:0; }
img { display:block; max-width:100%; }

/* ---------------------------------------------------------------- header */
.top { position:fixed; inset:0 0 auto; z-index:20; display:flex; justify-content:space-between; align-items:center;
       padding:1.1rem 2rem; transition:background .3s, border-color .3s; border-bottom:1px solid transparent; }
.top.solid { background:rgba(7,9,13,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom-color:var(--line); }
/* The Greenstar mark: the star from greenstar-tech.net and the name in Lora, the brand's heading face. */
.mark { display:flex; align-items:center; gap:.65rem; text-decoration:none; color:#fff; }
.mark img { width:26px; height:26px; }
.wordmark { font-family:Lora,Georgia,serif; font-weight:600; font-size:1.02rem; letter-spacing:-.005em; }
.top nav a { text-decoration:none; font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
             color:#fff; margin-left:1.6rem; opacity:.75; }
.top nav a:hover { opacity:1; }

/* ---------------------------------------------------------------- hero */
.hero { position:relative; height:100vh; min-height:620px; overflow:hidden; background:#000; }
.hero canvas, .hero-fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero canvas { opacity:0; transition:opacity 1.2s ease; }
.hero.gl-on canvas { opacity:1; }
.hero-shade { position:absolute; inset:0; pointer-events:none;
              background:linear-gradient(90deg, rgba(4,6,10,.86) 0%, rgba(4,6,10,.55) 38%, rgba(4,6,10,0) 68%),
                         linear-gradient(0deg, rgba(4,6,10,.85) 0%, rgba(4,6,10,0) 30%); }
.hero-copy { position:absolute; left:clamp(1.25rem,5vw,5rem); bottom:clamp(6rem,16vh,10rem); max-width:40rem; }
.kicker { font-family:var(--mono); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 1.2rem; }
.hero h1 { font-size:clamp(2.6rem,6vw,5.2rem); line-height:1.02; letter-spacing:-.035em; }
.lede { font-size:clamp(1rem,1.4vw,1.2rem); color:#cfd5dd; margin:1.4rem 0 2rem; max-width:34rem; }
.cta { display:inline-block; text-decoration:none; font-family:var(--mono); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
       color:#06110e; background:var(--accent); padding:.9rem 1.4rem; border-radius:2px; transition:transform .2s, box-shadow .2s; }
.cta:hover { transform:translateY(-2px); box-shadow:0 10px 30px -10px var(--accent); }
.hero-index { position:absolute; right:clamp(1.25rem,4vw,4rem); bottom:2.2rem; display:flex; align-items:center; gap:1rem;
              font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; color:#fff; text-transform:uppercase; }
.hi-line { width:9rem; height:1px; background:rgba(255,255,255,.25); position:relative; overflow:hidden; }
.hi-line i { position:absolute; inset:0 auto 0 0; width:0; background:var(--accent); }

/* ---------------------------------------------------------------- intro */
.intro { padding:clamp(5rem,12vh,9rem) clamp(1.25rem,5vw,5rem); border-bottom:1px solid var(--line); }
.intro p { max-width:52rem; font-size:clamp(1.35rem,2.4vw,2.1rem); line-height:1.35; color:#dde2e8; margin:0; letter-spacing:-.01em; }
.intro strong { color:var(--accent); font-weight:600; }

.section-title { font-family:var(--mono); font-weight:400; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mut);
                 padding:4.5rem clamp(1.25rem,5vw,5rem) 2rem; }
.section-title span { color:var(--accent); margin-right:.8rem; }

/* ---------------------------------------------------------------- scenes */
.scene { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:center;
         padding:2.5rem clamp(1.25rem,5vw,5rem) 4.5rem; }
.scene.flip { grid-template-columns:minmax(0,1fr) minmax(0,1.45fr); }
.scene.flip figure { order:2; }
.scene figure { margin:0; position:relative; overflow:hidden; border-radius:3px; aspect-ratio:16/9; background:#0b0f14; }
.scene figure img { width:100%; height:112%; object-fit:cover; transform:translate3d(0,var(--py,0px),0) scale(1.02);
                    will-change:transform; transition:filter .6s; filter:saturate(.92); }
.scene figure::after { /* a scan line passes over each image once as it enters (site.js adds .seen) */
  content:""; position:absolute; top:0; bottom:0; left:-2%; width:2px; background:var(--accent);
  box-shadow:0 0 18px 4px rgba(94,224,198,.55); opacity:0; }
.scene.seen figure::after { animation:sweep 1.5s cubic-bezier(.6,.05,.25,1) .1s forwards; }
@keyframes sweep { 0% { left:-2%; opacity:1; } 92% { opacity:1; } 100% { left:102%; opacity:0; } }
.scene .txt { opacity:0; transform:translateY(24px); transition:opacity .9s ease .15s, transform .9s ease .15s; }
.scene.seen .txt { opacity:1; transform:none; }
.tag { font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 .8rem; }
.scene h3 { font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:1.12; margin:0 0 1rem; }
.scene ul { list-style:none; padding:0; margin:1.3rem 0 0; border-top:1px solid var(--line); }
.scene li { font-family:var(--mono); font-size:.82rem; color:#c9d0d9; padding:.6rem 0; border-bottom:1px solid var(--line); }
.scene li::before { content:"→"; color:var(--accent); margin-right:.7rem; }

/* ---------------------------------------------------------------- city: the chart sits in the scene grid */
.city { border-top:1px solid var(--line); padding-bottom:3rem; }
.scene.data { align-items:start; }
.scene.data figure.chart-card { aspect-ratio:auto; overflow:visible; background:var(--bg2); border:1px solid var(--line);
                                padding:1rem 1.1rem .8rem; }
.scene.data figure.chart-card::after { display:none; }
.chart-tools { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; margin-bottom:.7rem; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.seg button, .chips button { font:inherit; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
                             background:none; border:0; color:var(--mut); padding:.45rem .75rem; cursor:pointer; }
.seg button[aria-pressed="true"] { background:#16202b; color:var(--ink); }
.seg button + button { border-left:1px solid var(--line); }
.chips { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.6rem; }
.chips button { border:1px solid var(--line); border-radius:999px; padding:.3rem .7rem; display:inline-flex; align-items:center; gap:.45rem;
                color:#c9d0d9; transition:opacity .2s, border-color .2s; }
.chips button i { width:.6rem; height:.6rem; border-radius:50%; }
.chips button[aria-pressed="false"] { opacity:.35; }
.chips button:hover { border-color:#334; }
.chart-body { position:relative; }
#chart { width:100%; height:auto; display:block; overflow:visible; }
#chart text { font-family:var(--mono); font-size:10px; fill:var(--mut); }
#chart .col { cursor:pointer; }
#chart .col:hover .hit { fill:rgba(94,224,198,.06); }
#chart .col.dim { opacity:.25; transition:opacity .3s; }
.tip { position:absolute; pointer-events:none; z-index:3; background:rgba(7,9,13,.94); border:1px solid var(--line); border-radius:3px;
       padding:.5rem .7rem; font-family:var(--mono); font-size:.72rem; color:var(--body); white-space:nowrap; transform:translate(-50%,-110%); }
.tip b { color:var(--ink); }
/* The drill-in is a POPUP anchored beside the clicked month, floating over the chart (which stays visible
   around it) and free to extend past the card's edge. site.js sets left/top. */
.scene.data figure.chart-card { position:relative; }
.drill { position:absolute; z-index:6; width:21rem; max-width:calc(100vw - 2rem); background:rgba(9,13,18,.98);
         border:1px solid var(--accent); border-radius:6px; padding:1.1rem 1.2rem 1rem;
         box-shadow:0 24px 60px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.4);
         animation:drillin .28s cubic-bezier(.2,.8,.2,1); }
@keyframes drillin { from { transform:translateY(6px) scale(.98); opacity:0; } to { transform:none; opacity:1; } }
.drill-close { position:absolute; top:.4rem; right:.6rem; background:none; border:0; color:var(--mut); font-size:1.3rem; cursor:pointer; }
.drill-month { font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0; }
.drill-total { font-size:1.6rem; color:var(--ink); font-weight:600; margin:.2rem 0 .8rem; }
.drill-cols { display:grid; grid-template-columns:1fr; gap:.9rem; }
.drill-h { font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin:0 0 .4rem; }
.drill ul { list-style:none; margin:0; padding:0; }
.scene .drill ul { border-top:0; margin:0; }
.scene .drill li { display:grid; grid-template-columns:7rem 1fr 2.6rem; align-items:center; gap:.5rem; font-family:'Plex',sans-serif;
                   font-size:.8rem; color:#c9d0d9; padding:.18rem 0; border-bottom:0; }
.scene .drill li::before { content:none; }
.drill li span.b { height:6px; border-radius:3px; background:var(--accent); width:0; transition:width .6s cubic-bezier(.2,.8,.2,1); }
.drill li em { font-style:normal; font-family:var(--mono); font-size:.74rem; text-align:right; color:var(--ink); }
.chart-hint { font-family:var(--mono); font-size:.68rem; color:var(--mut); margin:.4rem 0 0; }
.stats li b { color:var(--ink); font-family:'Plex',sans-serif; font-size:1rem; font-weight:600; margin-right:.35rem; font-variant-numeric:tabular-nums; }
.source { font-size:.78rem; color:var(--mut); margin-top:1rem; }

/* ---------------------------------------------------------------- team, engage */
.team { border-top:1px solid var(--line); padding-bottom:4rem; }
.team-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:4rem; padding:0 clamp(1.25rem,5vw,5rem); }
.team h3 { font-size:clamp(1.6rem,3vw,2.6rem); margin-bottom:1.2rem; }
.facts { margin:0; border-top:1px solid var(--line); }
.facts div { padding:1rem 0; border-bottom:1px solid var(--line); }
.facts dt { font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.facts dd { margin:.3rem 0 0; color:#dde2e8; }
.schools { display:flex; flex-direction:column; gap:.7rem; }
.school { display:flex; align-items:flex-start; gap:.6rem; font-size:.88rem; color:var(--body); line-height:1.45; }
.school b { color:#dde2e8; font-weight:600; font-size:.98rem; }
.crest { width:28px; height:28px; object-fit:contain; }
.deg { flex-basis:100%; font-size:.86rem; color:var(--body); }
.engage { border-top:1px solid var(--line); background:var(--bg2); padding-bottom:5rem; }
.steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; margin:0; padding:0 clamp(1.25rem,5vw,5rem); counter-reset:s; }
.steps li { border-top:1px solid var(--accent); padding-top:1.2rem; counter-increment:s; }
.steps b { display:block; color:var(--ink); font-size:1.4rem; margin-bottom:.5rem; }
.steps b::before { content:"0" counter(s) "  "; font-family:var(--mono); font-weight:400; font-size:.8rem; color:var(--accent); }
.contact { padding:4.5rem clamp(1.25rem,5vw,5rem) 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:3rem; }
.contact-h { font-size:clamp(1.6rem,2.8vw,2.4rem); color:var(--ink); font-weight:600; letter-spacing:-.02em; margin:0 0 .6rem; line-height:1.15; }
.contact-copy p { margin:0 0 1.2rem; }
.phone { display:block; font-family:var(--mono); color:var(--body); text-decoration:none; letter-spacing:.06em; margin:.3rem 0; font-size:.85rem; }
.phone:hover { color:var(--accent); }
.cform { display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.2rem; }
.cform label { display:flex; flex-direction:column; gap:.4rem; }
.cform label span { font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
.cform label em { font-style:normal; opacity:.7; text-transform:none; letter-spacing:0; }
.cform input, .cform textarea { font:inherit; font-size:.95rem; color:var(--ink); background:#0a0e13; border:1px solid var(--line);
                                border-radius:3px; padding:.7rem .8rem; resize:vertical; transition:border-color .2s; }
.cform input:focus, .cform textarea:focus { outline:none; border-color:var(--accent); }
.cform input::placeholder, .cform textarea::placeholder { color:#4b5563; }
.cform .wide { grid-column:1 / -1; }
.cform .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cform button.cta { border:0; cursor:pointer; }
.cform button.cta:disabled { opacity:.6; cursor:default; }
.form-foot { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.form-msg { margin:0; font-size:.9rem; color:var(--body); }
.form-msg.ok { color:var(--accent); }
.form-msg a { color:var(--accent); }
.cform .bad { border-color:#e86f6f; }
.foot { border-top:1px solid var(--line); padding:2rem clamp(1.25rem,5vw,5rem) 3rem; font-size:.82rem; color:var(--mut); }
.foot .fine { max-width:46rem; }

/* ---------------------------------------------------------------- small screens, motion */
@media (max-width:820px) {
  .top nav { display:none; }
  .scene, .scene.flip { grid-template-columns:minmax(0,1fr); padding-bottom:3rem; }
  .scene.flip figure { order:0; }
  .team-grid { grid-template-columns:minmax(0,1fr); gap:2rem; }
  .drill { left:0 !important; right:0; width:auto; }
  .wordmark { font-size:.9rem; }
  .steps { grid-template-columns:minmax(0,1fr); }
  .contact, .cform { grid-template-columns:minmax(0,1fr); }
  .hero-index .hi-line { width:4rem; }
  .hero-shade { background:linear-gradient(0deg, rgba(4,6,10,.92) 0%, rgba(4,6,10,.4) 55%, rgba(4,6,10,.1) 100%); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .hero canvas { display:none; }
  .scene .txt, .scene figure img { transition:none; transform:none; opacity:1; }
  .scene figure::after { display:none; }
}