:root {
	/* Ticker sizing: make ticker cover ~85% width and increase height for readability */
	/* increased height (10% larger) */
	/* reduce ticker height by another 30% */
	--ticker-height: 5.544rem;
	/* vertical gap between banner and ticker */
	--ticker-gap: 1in;
	/* keep a separate base banner height for logo sizing so increasing the
	   ticker doesn't scale the logo. --top-banner-height includes ticker */
	/* increased by 20% as requested (was 210px) */
	--banner-base-height: 252px;
	--top-banner-height: calc(var(--banner-base-height) + var(--ticker-height));
  --bg: #f5f8f6;
  --surface: #ffffff;
  --surface-2: #edf3ef;
  --text: #15231c;
  --muted: #637168;
  --line: #d9e2dc;
  --green: #146c43;
  --green-dark: #0a4d2e;
  --green-soft: #dff2e7;
  --accent: #8fc7a6;
  --danger: #9e3838;
  --shadow: 0 18px 55px rgba(15, 54, 34, .10);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* After making banner content part of normal flow we remove the top padding that
   previously offset fixed header + ticker. The decorative banner background will
   be visually locked with background-attachment: fixed while content scrolls. */
body { margin: 0; padding-top: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 40; background: transparent; border-bottom: 0; backdrop-filter: none; margin-top: -2px; }

/* Top banner (fixed) */
.top-banner {
  /* Keep the banner in the normal flow so its content scrolls. Lock only the
	 background image visually using background-attachment: fixed. */
  position: relative;
  height: var(--banner-base-height);
  z-index: 10;
  /* Decorative background is handled by a fixed pseudo-element so the
	 banner section stays in the normal flow while the decorative image
	 remains visually locked. Keep top-banner itself transparent. */
  background: transparent;
  background-color: var(--surface-2); /* fallback if image missing */
  min-height: 140px;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
	/* Provide comfortable vertical padding for the inner row. Increase top padding
	 so logo and nav sit slightly lower inside the banner at page load. Remove bottom padding so header sits flush against the banner. */
  padding-top: calc(var(--banner-base-height) * 0.10);
  padding-bottom: 0;
}

/* Fixed decorative background behind the banner area only. This element is
   non-interactive (pointer-events:none) and sits below interactive elements. */
.top-banner::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
	/* Slightly extend the decorative background to avoid a 1-2px gap under some layouts */
  height: calc(var(--banner-base-height) + 2px);
  z-index: 6; /* below header area which uses z-index:40/60 */
  background-image: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url('images/gp_banner.png');
  background-repeat: repeat-x;
  background-position: calc(100% + 60px) center, right center;
  background-size: auto 130%, cover;
  pointer-events: none;
}
.top-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.banner-contact a { color: var(--green-dark); font-weight: 700; margin-right: 6px; }
.banner-contact {
  font-size: 1.11rem; /* increased by ~2 points from 0.95rem */
  color: var(--green-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.banner-sep { color: var(--muted); }
/* legacy .banner-logo (no longer used) kept for reference */
.banner-logo { display: flex; align-items: center; }

/* header logo sizing: smaller, aligned with the header strip */
.header-logo { display: flex; align-items: flex-end; margin-right: 12px; overflow: visible; }
.header-logo .top-logo { height: 96px; object-fit: contain; display: block; max-height: none; }

/* large banner logo fallback (unused when logo moved to header) */
.top-logo { height: calc(var(--banner-base-height) * 0.875); object-fit: contain; display: block; }
/* Let banner inner layout determine vertical position; removed absolute/top offsets so
   logo, nav and contact scroll naturally with the page. */
.top-banner .banner-nav { /* keep nav vertically aligned with the row */ }

/* keep contact font at original size so it stays on the same line as banner buttons */
.banner-contact { font-size: 0.95rem; }

/* Scrolling ticker strip below banner */
.ticker { width: 100%; overflow: hidden; background: #ffffff; color: var(--text); height: var(--ticker-height); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: center; position: relative; z-index: 8; }
/* viewport: visible area centered and clipped to a larger width (increased per request) */
.ticker-viewport { width: 95vw; max-width: 1400px; height: 100%; overflow: hidden; }
/* inner track container (wide) */
.ticker-inner { display: flex; align-items: center; height: 100%; width: max-content; padding-top: 0.414rem; padding-bottom: 2.079rem; }
.ticker-track { display: flex; gap: 48px; padding: 8px 0; white-space: nowrap; box-sizing: content-box; }
.ticker-track span { display: inline-block; padding: 0 12px; font-weight: 700; color: #000 !important; line-height: 1; font-size: clamp(2rem, 3.4vw, 3.35rem); }

/* Animate the whole inner wrapper (which contains two tracks) for a seamless loop */
.ticker-inner { animation: ticker-scroll 56s linear infinite; animation-play-state: running; }
/* keyframes kept for future use */
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 900px) {
  .ticker-track span { font-size: clamp(1.25rem, 3.2vw, 2rem); padding: 0 8px; }
  .ticker { background: #ffffff; }
  .ticker-inner { width: 92vw; }
}

/* When the header becomes pinned, apply a subtle background and shadow for readability */
.site-header.sticky {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(8, 30, 18, 0.08);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
/* Force header to a fixed layer when JavaScript determines it should be pinned.
   This guarantees 'sticking' behavior across browsers. We still keep position: sticky
   as the base behavior for browsers without JS. */
.site-header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
}

/* Banner-specific nav (placed between logo and contact) */
.nav.banner-nav { display: flex; gap: 28px; align-items: center; margin-left: 24px; }
.nav.banner-nav a { color: #405047; font-weight: 650; }
.nav.banner-nav a.nav-demo { padding: 9px 15px; background: var(--green-soft); color: var(--green-dark); border-radius: 999px; }

@media (max-width: 900px) {
  .nav.banner-nav { display: none; }
}

@media (max-width: 640px) {
	/* Mobile: set a practical mobile ticker height (reduced by 50%) and adjust top-banner height and base banner */
	:root { --ticker-height: 32px; --banner-base-height: 70px; }
  .top-banner-inner { gap: 8px; }
  .banner-contact { font-size: 0.85rem; }
  .top-logo { height: calc(var(--top-banner-height) - 12px); }

  /* background-attachment: fixed is problematic on some mobile browsers; use scroll there */
  .top-banner { background-attachment: scroll; }

  /* Stack header contact vertically on small screens so phone appears below email */
  .header-contact { flex-direction: column; align-items: flex-end; gap: 4px; font-weight: 700; }

	/* Speed up ticker animation on small screens for readability */
  .ticker-inner { animation: ticker-scroll 18s linear infinite; }
}
.nav-wrap { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header-marker { font-size: 0.95rem; color: var(--muted); margin-left: 8px; font-weight: 700; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.02em; font-size: 1.1rem; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--green); color: #fff; font-size: .82rem; letter-spacing: .04em; }
.nav { display: flex; gap: 28px; align-items: center; font-weight: 650; font-size: .95rem; }
.nav a { color: #405047; }
.nav a:hover { color: var(--green); }
.nav-demo { padding: 9px 15px; background: var(--green-soft); color: var(--green-dark) !important; border-radius: 999px; }
.nav-demo.active { background: var(--green); color: white !important; }
.nav-toggle { display: none; border: 0; background: transparent; font-size: 1.4rem; }

/* header contact block (moved from banner into the header strip) */
.header-contact { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--green-dark); }
.header-contact a { color: var(--green-dark); text-decoration: none; }

.hero { padding: 36px 0 84px; background: radial-gradient(circle at 85% 10%, #dff2e7 0, rgba(223,242,231,0) 34%), linear-gradient(180deg, #fff 0%, #f5f8f6 100%); }
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 65px; align-items: center; }
.eyebrow { margin: 0 0 10px; text-transform: uppercase; letter-spacing: .15em; font-weight: 800; font-size: .77rem; color: var(--green); }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.035em; margin-top: 0; }
h1 { font-size: clamp(2.65rem, 5vw, 5rem); margin-bottom: 22px; max-width: 850px; }
h2 { font-size: clamp(2rem, 3.4vw, 3.35rem); margin-bottom: 22px; }
h3 { font-size: 1.25rem; }
.hero-copy { font-size: 1.18rem; max-width: 700px; color: var(--muted); }
.hero-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 11px; padding: 12px 18px; font-weight: 750; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button.primary { background: var(--green); color: #fff; }
.button.secondary { background: #fff; border-color: var(--line); color: var(--text); }
.button.light { background: #fff; color: var(--green-dark); }
.hero-panel { background: #0f2f21; border-radius: 26px; padding: 30px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.signal-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 18px; color: #fff; display: grid; grid-template-columns: 52px 1fr; align-items: center; }
.signal-card span { grid-row: 1 / 3; color: #9ed6b5; font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.signal-card strong { font-size: 1.08rem; }
.signal-card small { color: #b8cbbf; }
.flow-arrow { text-align: center; color: #9ed6b5; font-size: 1.3rem; transform: rotate(90deg); }
.section { padding: 86px 0; }
.section.alt { background: var(--surface-2); }
.card-grid { display: grid; gap: 18px; margin-top: 35px; }
.card-grid.four { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: 0 8px 28px rgba(18, 65, 40, .04); }
.card p { color: var(--muted); margin-bottom: 0; }
.card-icon { display: inline-grid; place-items: center; min-width: 48px; height: 38px; padding: 0 9px; margin-bottom: 22px; border-radius: 9px; background: var(--green-soft); color: var(--green-dark); font-weight: 850; font-size: .72rem; letter-spacing: .06em; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.split > div:first-child p:last-child { color: var(--muted); font-size: 1.08rem; }
.capability-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.capability-list div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 19px 22px; border-bottom: 1px solid var(--line); }
.capability-list div:last-child { border-bottom: 0; }
.capability-list span { color: var(--muted); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; }
.steps > div { padding: 26px 24px; border-left: 2px solid var(--green-soft); }
.steps span { font-weight: 850; color: var(--green); font-size: .82rem; }
.steps h3 { margin: 8px 0 10px; }
.steps p { color: var(--muted); margin: 0; }
.demo-cta { background: var(--green-dark); color: #fff; }
.demo-cta .eyebrow { color: #a9dfbf; }
.demo-cta h2 { margin-bottom: 10px; }
.demo-cta p:last-child { color: #c7d9ce; }
.demo-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer { background: #0a2016; color: #d5e1da; padding: 34px 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; align-items: center; }
.footer span { color: #91a69a; }
.footer-contact { display: flex; gap: 20px; flex-wrap: wrap; }
.footer a:hover { color: #fff; }

.demo-body { background: #f2f6f3; }
.demo-hero { padding: 52px 0 36px; background: linear-gradient(135deg, #0a4d2e, #103b28); color: #fff; }
.demo-hero .eyebrow { color: #a7dab9; }
.demo-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 8px; }
.demo-hero p { color: #d0e1d7; margin: 0; }
.demo-title-row { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.connection-badge { display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; padding: 9px 14px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); white-space: nowrap; }
.connection-badge span { width: 9px; height: 9px; border-radius: 50%; background: #d67a7a; }
.connection-badge.connected span { background: #80d6a2; box-shadow: 0 0 0 4px rgba(128,214,162,.14); }
.demo-section { padding-top: 34px; }
.connection-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 22px 22px; margin-bottom: 28px; }
.connection-panel summary { cursor: pointer; padding: 18px 0; font-weight: 800; }
.connection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.connection-grid label { display: grid; gap: 7px; font-size: .82rem; font-weight: 750; color: #4e5d54; }
.connection-grid input { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; background: #fbfdfb; color: var(--text); }
.connection-grid input:focus { outline: 2px solid #b8dcc7; border-color: var(--green); }
.connection-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.security-note { font-size: .8rem; color: var(--muted); margin-left: 5px; }
.error-message { color: var(--danger); min-height: 1.5em; margin: 12px 0 0; }
.telemetry-header { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 14px; color: var(--muted); font-size: .88rem; }
.telemetry-header > div:first-child { display: flex; gap: 10px; align-items: center; }
.vehicle-label { font-size: .7rem; letter-spacing: .12em; font-weight: 850; color: var(--green); }
.telemetry-header strong { color: var(--text); }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric-card { min-height: 145px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 7px 23px rgba(20, 71, 44, .04); }
.metric-card > span { color: var(--muted); font-weight: 700; font-size: .86rem; }
.metric-card div strong { font-size: 2.1rem; letter-spacing: -.04em; }
.metric-card div small { color: var(--muted); margin-left: 5px; font-weight: 700; }
.hero-metric { grid-column: span 2; background: linear-gradient(135deg, #fff, #eef8f2); }
.hero-metric div strong { font-size: 3rem; }
.soc-track { height: 8px; background: #dce7e0; border-radius: 999px; overflow: hidden; }
.soc-track div { width: 0%; height: 100%; background: var(--green); transition: width .25s ease; }
.status-card strong { font-size: 1.45rem !important; }
.raw-panel { margin-top: 22px; background: #10271c; color: #d7e5dc; border-radius: 16px; padding: 21px; }
.raw-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.raw-header h2 { font-size: 1rem; margin: 0; letter-spacing: 0; }
.raw-header span { color: #90ab9b; font-size: .8rem; }
.raw-panel pre { overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: 15px 0 0; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #9ee0b8; }

@media (max-width: 900px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .card-grid.four, .steps { grid-template-columns: repeat(2, 1fr); }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .container { width: min(100% - 28px, 1160px); }
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: 67px; left: 14px; right: 14px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); flex-direction: column; align-items: stretch; gap: 6px; }
  .nav.open { display: flex; }
  .nav a { padding: 9px 10px; }
  .hero { padding-top: 58px; }
  .card-grid.four, .steps, .metric-grid, .connection-grid { grid-template-columns: 1fr; }
  .hero-metric { grid-column: auto; }
  .demo-title-row, .demo-cta-inner, .footer-inner, .telemetry-header { align-items: flex-start; flex-direction: column; }
  .footer-contact { flex-direction: column; gap: 4px; }
}


/* Green Prefer project portfolio */
.projects-section { background: #fff; }
.section-intro { max-width: 780px; color: var(--muted); font-size: 1.08rem; margin: -4px 0 36px; }

.project-list { display: grid; gap: 20px; margin-top: 30px; }
.project-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 28px;
  padding: 34px 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(18, 65, 40, .04);
}
.project-number {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 3px;
  color: var(--green);
  font-size: 1.7rem;
  font-weight: 850;
  letter-spacing: -.03em;
}
.project-content h3 { font-size: clamp(1.45rem, 2.2vw, 2rem); margin: 5px 0 12px; }
.project-content > p:not(.project-kicker) { color: var(--muted); max-width: 920px; margin-bottom: 18px; }
.project-kicker {
  margin: 0;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 850;
}
.project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; }
.project-tags span {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: .78rem;
  font-weight: 750;
}
.project-detail {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  color: var(--muted);
}
.project-detail strong { color: var(--text); }
.project-detail ul { margin: 8px 0 0 20px; padding: 0; }
.project-detail li { margin: 4px 0; }

@media (max-width: 900px) {
  .project-card { grid-template-columns: 60px 1fr; padding: 28px; gap: 18px; }
}

@media (max-width: 640px) {
  .project-card { grid-template-columns: 1fr; padding: 24px; gap: 6px; }
  .project-number { justify-content: flex-start; font-size: 1.25rem; }
  .project-detail ul { margin-left: 18px; }
}