/* =========================================================
   ION AI LABS — site stylesheet
   One file, plain CSS, no build step. Search for a comment
   heading below to find the section you want to change.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:            #0b0d10;
  --bg-raised:     #12151a;
  --bg-card:       #171b21;
  --border:        #262b33;
  --text:          #e8eaed;
  --text-dim:      #e8eaed;
  --accent:        #ff6a2b;
  --accent-dim:    #7a3a1c;
  --accent-soft:   rgba(255,106,43,0.12);
  --font-head: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-body: 'Inter', system-ui, sans-serif;
  --radius: 4px;
  --maxw: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-head); margin:0 0 .5em; line-height:1.15; font-weight:600; }
p{ margin:0 0 1em; color:var(--text-dim); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex; align-items:center; gap:.5em;
  margin-bottom:1em;
}
.eyebrow::before{ content:'§'; }
section{ padding:88px 0; border-bottom:1px solid var(--border); }
section:last-of-type{ border-bottom:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-mono);
  font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.9em 1.6em;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:all .15s ease;
}
.btn-primary{ background:var(--accent); color:#120a05; font-weight:600; }
.btn-primary:hover{ background:#ff8248; }
.btn-outline{ border-color:var(--border); color:var(--text); background:transparent; }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:1.75em; }

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(11,13,16,0.98);
  border-bottom:1px solid var(--border);
}
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{ font-family:var(--font-head); font-weight:700; font-size:1.1rem; letter-spacing:.02em; }
.logo span{ color:var(--accent); }

/* Desktop nav bar, inside the header. Hidden below 900px — the mobile
   panel (further down this file, .mobile-nav) takes over instead. */
nav.main{ display:flex; align-items:center; gap:32px; }
nav.main a{
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-dim);
}
nav.main a:hover, nav.main a.active{ color:var(--accent); }
.header-actions{ display:flex; align-items:center; gap:18px; }
.header-phone{ font-family:var(--font-mono); font-size:.85rem; color:var(--text-dim); display:none; }
.nav-toggle{ display:none; background:none; border:1px solid var(--border); color:var(--text); padding:.5em .7em; border-radius:var(--radius); }

@media(min-width:720px){ .header-phone{ display:inline; } }
@media(max-width:900px){
  nav.main{ display:none; }
  .nav-toggle{ display:inline-block; }
}

/* ---------- mobile nav panel ---------- */
/* Lives as a sibling of <header> in the markup, not nested inside it —
   see the comment in includes/header.php for why (a Safari-only bug with
   position:fixed nested inside position:sticky). Only relevant at
   900px and below; the "open" class (toggled by assets/js/main.js) fades
   and slides it in. */
.mobile-nav{ display:none; }
@media(max-width:900px){
  .mobile-nav{
    display:flex; flex-direction:column; align-items:flex-start;
    position:fixed; inset:72px 0 0 0; background:#000;
    padding:32px 24px; gap:22px; transform:translateY(-8px);
    opacity:0; pointer-events:none; transition:.18s ease; z-index:60;
  }
  .mobile-nav a{
    font-family:var(--font-mono); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase;
    color:var(--text-dim);
  }
  .mobile-nav a:hover, .mobile-nav a.active{ color:var(--accent); }
  .mobile-nav.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
}

/* ---------- hero ---------- */
.hero{ padding:120px 0 80px; border-bottom:1px solid var(--border); }
/* Homepage hero only — background photo with a dark overlay so text stays readable
   regardless of what's in the image. Swap assets/images/hero.png for a different
   photo any time; no other change needed. */
.hero-photo{
  background:
    linear-gradient(180deg, rgba(11,13,16,.55) 0%, rgba(11,13,16,.94) 100%),
    url('../images/hero.png') center/cover no-repeat;
}
.hero h1{ font-size:clamp(2.1rem,5vw,3.4rem); max-width:16ch; }
.hero p.lead{ font-size:1.1rem; max-width:52ch; }

/* ---------- marquee ticker ---------- */
.marquee{
  border-bottom:1px solid var(--border);
  background:var(--bg-raised);
  overflow:hidden;
  padding:18px 0;
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 30s linear infinite;
}
.marquee-item{
  display:flex;
  align-items:center;
  flex-shrink:0;
  white-space:nowrap;
}
.marquee-item span.label{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--text);
  padding:0 28px;
}
.marquee-item span.dot{
  width:7px; height:7px;
  background:var(--accent);
  display:inline-block;
  transform:rotate(45deg);
  flex-shrink:0;
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- deployed-across logo wall + quote ---------- */
.deployed{ padding:64px 0; border-bottom:1px solid var(--border); }
.deployed-head{ display:flex; align-items:center; justify-content:center; gap:18px; }
.deployed-head .rule{ height:1px; flex:1 1 auto; max-width:200px; background:var(--accent); }
.deployed-head .label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-dim); white-space:nowrap; text-align:center;
}

.logo-marquee{ position:relative; height:60px; overflow:hidden; margin-top:40px; }
.logo-marquee::before, .logo-marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none;
}
.logo-marquee::before{ left:0; background:linear-gradient(90deg, var(--bg) 0%, transparent 100%); }
.logo-marquee::after{ right:0; background:linear-gradient(270deg, var(--bg) 0%, transparent 100%); }
.logo-marquee-track{
  display:flex; align-items:center; height:100%; width:max-content;
  animation:marquee-slow 90s linear infinite;
}
.logo-item{ position:relative; margin:0 36px; display:flex; align-items:center; height:100%; }
.logo-item .name{
  font-family:var(--font-head); font-size:1.3rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text); opacity:.55; white-space:nowrap; transition:opacity .2s ease;
}
.logo-item:hover .name{ opacity:1; }
.logo-item .underline{
  position:absolute; left:50%; bottom:-4px; height:1px; width:0; background:var(--accent);
  transform:translateX(-50%); transition:width .25s ease;
}
.logo-item:hover .underline{ width:100%; }
@media (prefers-reduced-motion: reduce){
  .logo-marquee-track{ animation:none; }
}
@keyframes marquee-slow{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.deployed-quote{ margin-top:40px; text-align:center; }
.deployed-quote p.quote{
  font-family:var(--font-body); font-style:italic; font-size:1.1rem; color:var(--text);
  max-width:640px; margin:0 auto 14px; line-height:1.5;
}
.deployed-quote p.attribution{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim);
}

/* ---------- stat strip ---------- */
.stats{ padding:48px 0; background:var(--bg-raised); border-bottom:1px solid var(--border); }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:24px; }
.stat{ text-align:left; }
.stat .num{ font-family:var(--font-head); font-size:2rem; font-weight:700; color:var(--accent); }
.stat .label{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }

/* ---------- cards / grids ---------- */
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:860px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px;
}
.card .idx{ font-family:var(--font-mono); color:var(--accent); font-size:.8rem; margin-bottom:.75em; display:block; }
.card h3{ font-size:1.05rem; }
.card p{ font-size:.94rem; margin-bottom:0; }

.section-head{ max-width:60ch; margin-bottom:44px; }
.section-head h2{ font-size:clamp(1.6rem,3vw,2.2rem); }

/* ---------- fleet inventory table ---------- */
.fleet-list{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.fleet-row{ display:flex; justify-content:space-between; align-items:center; background:var(--bg-card); padding:18px 24px; }
.fleet-row .name{ font-weight:500; }
.fleet-row .count{ font-family:var(--font-mono); color:var(--accent); font-size:1.1rem; }

/* ---------- steps ---------- */
.steps{ counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:860px){ .steps{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:8px; }
.step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--font-mono); color:var(--accent-dim); font-size:2.2rem; font-weight:700;
  display:block; margin-bottom:.4em;
}

/* ---------- team ---------- */
.team-card{ text-align:left; }
.team-avatar{
  width:56px; height:56px; border-radius:50%; background:var(--accent-soft);
  color:var(--accent); font-family:var(--font-head); font-weight:700; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.team-card .role{ font-family:var(--font-mono); font-size:.75rem; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5em; display:block; }

/* ---------- forms ---------- */
form.intake{ display:grid; gap:18px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:640px){ .form-row{ grid-template-columns:1fr; } }
label{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); display:block; margin-bottom:.5em; }
input[type=text], input[type=email], input[type=tel], select, textarea{
  width:100%; background:var(--bg-raised); border:1px solid var(--border); color:var(--text);
  padding:.85em 1em; border-radius:var(--radius); font-family:var(--font-body); font-size:.95rem;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); }
textarea{ min-height:120px; resize:vertical; }
.checkbox-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:640px){ .checkbox-grid{ grid-template-columns:1fr; } }
.checkbox-item{ display:flex; align-items:center; gap:.6em; font-size:.92rem; color:var(--text); }
.checkbox-item input{ width:auto; }
.opt-in{ display:flex; align-items:flex-start; gap:.6em; font-size:.85rem; color:var(--text-dim); }
.opt-in input{ width:auto; margin-top:.25em; }
.form-note{ font-size:.85rem; }
.form-success, .form-error{ padding:16px 20px; border-radius:var(--radius); font-size:.92rem; margin-bottom:24px; }
.form-success{ background:rgba(60,180,110,.12); border:1px solid rgba(60,180,110,.35); color:#8fe3b0; }
.form-error{ background:rgba(220,80,80,.12); border:1px solid rgba(220,80,80,.35); color:#f2a8a8; }
/* honeypot field — kept off-screen, real visitors never see it */
.hp-field{ position:absolute; left:-9999px; top:-9999px; }

/* ---------- map ---------- */
.map-frame{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; height:320px; }
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.4) invert(.92) contrast(.9); }

/* ---------- blog ---------- */
.post-card{ display:block; }
.post-card .meta{ font-family:var(--font-mono); font-size:.75rem; color:var(--text-dim); margin-bottom:.5em; }
.post-card h3{ font-size:1.15rem; }
.post-card:hover h3{ color:var(--accent); }
article.post{ max-width:72ch; margin:0 auto; }
article.post h1{ font-size:clamp(1.8rem,4vw,2.6rem); }
article.post .meta{ font-family:var(--font-mono); color:var(--text-dim); font-size:.82rem; margin-bottom:2em; }
article.post p{ color:var(--text); font-size:1.02rem; }
article.post h2{ margin-top:1.6em; font-size:1.3rem; }

/* ---------- footer ---------- */
footer.site{ background:var(--bg-raised); padding:64px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:48px; }
@media(max-width:720px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }
footer.site h4{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin-bottom:1em; }
footer.site .links{ display:flex; flex-direction:column; gap:.6em; }
footer.site .links a{ color:var(--text-dim); font-size:.92rem; }
footer.site .links a:hover{ color:var(--accent); }
.status-line{ font-family:var(--font-mono); font-size:.8rem; color:#8fe3b0; display:flex; align-items:center; gap:.5em; margin-top:1em; }
.status-dot{ width:8px; height:8px; border-radius:50%; background:#3cb46e; box-shadow:0 0 8px #3cb46e; }
.footer-bottom{ border-top:1px solid var(--border); padding-top:24px; font-size:.82rem; color:var(--text-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* ---------- misc ---------- */
.bg-raised{ background:var(--bg-raised); }
.center{ text-align:center; }