/* ============================================================
   Append Automation — dark retro-industrial theme
   Palette derived from the logo's amber → orange → red → maroon
   ============================================================ */

:root{
  /* brand */
  --gold:#FFC50C;
  --amber:#FFDB69;
  --orange:#F6891F;
  --red:#CE2635;
  --maroon:#8B0417;
  --grad: linear-gradient(100deg, var(--amber) 0%, var(--gold) 18%, var(--orange) 48%, var(--red) 76%, var(--maroon) 100%);

  /* surfaces */
  --bg:#0A090C;
  --bg-2:#100D12;
  --panel:#15111A;
  --panel-2:#1B1620;
  --line:rgba(246,137,31,.16);
  --line-soft:rgba(255,255,255,.07);

  /* type */
  --text:#F4EEE5;
  --muted:#C6B9AC;   /* body-weight secondary text: ticker, cards, nav, footer links */
  --dim:#9E9184;     /* small mono labels: section tags, form labels, captions */
  --term-dim:#C9BCAD;/* terminal output lines - sit beside 15:1 command text, so lifted */

  --f-display:"Chakra Petch",  "Arial Narrow", system-ui, sans-serif;
  --f-body:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap:1180px;
  --r:4px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:16.5px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--orange); color:#120c05}

/* ---------- global retro texture ---------- */
body::before{ /* scanlines */
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.24) 0 1px, transparent 1px 3px);
  opacity:.42; mix-blend-mode:multiply;
}
body::after{ /* vignette + warm bloom */
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, rgba(246,137,31,.10), transparent 60%),
             radial-gradient(100% 100% at 50% 100%, rgba(139,4,23,.16), transparent 65%);
}

.wrap{width:min(100% - 44px, var(--wrap)); margin-inline:auto}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-display); font-weight:700; letter-spacing:-.01em; line-height:1.08; margin:0}
h2{font-size:clamp(1.9rem, 3.6vw, 3rem); text-transform:uppercase; letter-spacing:.005em}
h3{font-size:1.16rem; letter-spacing:.02em; text-transform:uppercase}
p{margin:0 0 1em}
.lead{font-size:1.09rem; color:#CFC3B6; max-width:62ch}
.muted{color:var(--muted)}

.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* section label:  // 02 — SERVICES */
.tag{
  font-family:var(--f-mono); font-size:.735rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--orange); display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem;
}
.tag::before{content:""; width:26px; height:1px; background:var(--grad)}
.tag b{color:var(--dim); font-weight:400}

section{position:relative; padding:clamp(72px,8vw,124px) 0}
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:.86rem 1.5rem;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  border:1px solid var(--line); border-radius:var(--r); color:var(--text);
  background:rgba(255,255,255,.02); position:relative; overflow:hidden;
  transition:.25s ease; cursor:pointer;
}
.btn:hover{border-color:var(--orange); color:#fff; transform:translateY(-2px); box-shadow:0 8px 30px -12px rgba(246,137,31,.6)}
.btn--solid{background:linear-gradient(100deg, var(--amber) 0%, var(--gold) 38%, var(--orange) 100%); color:#150C02; border-color:transparent; font-weight:600}
.btn--solid:hover{filter:brightness(1.12); color:#150C02}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- header ---------- */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:900;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.hdr.stuck{background:rgba(10,9,12,.86); backdrop-filter:blur(14px); border-bottom-color:var(--line)}
.hdr .wrap{display:flex; align-items:center; gap:2rem; height:76px}
.brand img{height:34px; width:auto}
.nav{margin-left:auto; display:flex; gap:1.9rem; align-items:center}
/* :not(.btn) so these never outrank .btn--solid's own colour and hover */
.nav a:not(.btn){
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); position:relative; padding:.35rem 0; transition:color .2s;
}
.nav a:not(.btn)::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--grad); transition:width .25s}
.nav a:not(.btn):hover{color:var(--text)} .nav a:not(.btn):hover::after{width:100%}
.nav .btn{padding:.6rem 1.1rem}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:var(--r); padding:.55rem .7rem; cursor:pointer}
.burger span{display:block; width:20px; height:2px; background:var(--text); margin:4px 0; transition:.25s}
.burger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding:172px 0 90px; overflow:hidden}
.hero-grid{
  position:absolute; inset:0; z-index:-2;
  background-image:linear-gradient(var(--line-soft) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 60% 20%, #000 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 90% at 60% 20%, #000 10%, transparent 72%);
}
.hero-glow{
  position:absolute; z-index:-1; width:760px; height:760px; right:-180px; top:-260px; pointer-events:none;
  background:radial-gradient(circle, rgba(246,137,31,.20), rgba(206,38,53,.09) 45%, transparent 68%);
  filter:blur(10px);
}
.hero-inner{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.hero h1{font-size:clamp(2.5rem, 4.8vw, 3.9rem); text-transform:uppercase; margin:.4rem 0 1.3rem}
.hero h1 em{font-style:normal; display:block}
.kicker{
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.6rem; border:1px solid var(--line); border-radius:100px;
  padding:.4rem 1rem; background:rgba(246,137,31,.05);
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 0 rgba(255,197,12,.7); animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(255,197,12,0)}100%{box-shadow:0 0 0 0 rgba(255,197,12,0)}}
.hero-cta{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem}

/* terminal card */
.term{
  border:1px solid var(--line); border-radius:6px; background:linear-gradient(180deg, rgba(30,22,18,.82), rgba(12,10,14,.92));
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden; position:relative;
}
.term::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(246,137,31,.05) 0 1px, transparent 1px 4px)}
.term-bar{display:flex; align-items:center; gap:.55rem; padding:.6rem .9rem; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}
.term-bar i{width:9px;height:9px;border-radius:50%;display:block}
.term-bar i:nth-child(1){background:var(--maroon)} .term-bar i:nth-child(2){background:var(--orange)} .term-bar i:nth-child(3){background:var(--gold)}
.term-bar span{margin-left:.5rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; color:var(--term-dim);
  text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.term-body{padding:1.15rem 1.25rem 1.35rem; font-family:var(--f-mono); font-size:.795rem; line-height:1.95;
  /* 15 lines: holds the frame steady through the clear/cls wipe */
  /* content of 15 lines + the box's own padding, so a wipe never resizes it */
  min-height:calc(15 * 1.95em + 1.15rem + 1.35rem); overflow:hidden}
.term-body div{white-space:pre-wrap}
.term-body .ok{color:var(--gold)} .term-body .c{color:var(--term-dim)} .term-body .w{color:var(--orange)} .term-body .g{color:#7FCF6B}
.cursor{display:inline-block; width:8px; height:1em; background:var(--gold); vertical-align:-2px; animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* stats strip */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); margin-top:clamp(3rem,6vw,5rem); overflow:hidden}
.stats div{background:var(--bg-2); padding:1.5rem 1.4rem}
.stats b{display:block; font-family:var(--f-display); font-size:2.15rem; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.stats span{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted)}

/* ---------- ticker ---------- */
.ticker{border-block:1px solid var(--line); background:var(--bg-2); padding:.85rem 0; overflow:hidden; white-space:nowrap; position:relative}
.ticker::before,.ticker::after{content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2}
.ticker::before{left:0; background:linear-gradient(90deg,var(--bg-2),transparent)}
.ticker::after{right:0; background:linear-gradient(270deg,var(--bg-2),transparent)}
.ticker-track{display:inline-flex; gap:3rem; animation:scroll 38s linear infinite}
.ticker span{font-family:var(--f-mono); font-size:.775rem; letter-spacing:.19em; text-transform:uppercase; color:var(--muted)}
.ticker span::before{content:"◆"; color:var(--orange); margin-right:.85rem; font-size:.6rem; vertical-align:middle}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- generic section head ---------- */
.head{max-width:70ch; margin-bottom:clamp(2.4rem,4vw,3.6rem)}
.head h2 span{color:var(--dim)}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.card{background:var(--bg-2); padding:2rem 1.9rem 2.1rem; position:relative; transition:background .3s}
.card:hover{background:var(--panel)}
.card::before{content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--grad); transition:width .45s ease}
.card:hover::before{width:100%}
.card .n{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; color:var(--dim)}
.card h3{margin:.9rem 0 .8rem; color:var(--text)}
.card p{font-size:.94rem; color:var(--muted); margin:0}
.card ul{margin:.9rem 0 0; padding:0; list-style:none}
.card li{font-size:.885rem; color:var(--muted); padding-left:1.05rem; position:relative; line-height:1.6; margin-bottom:.35rem}
.card li::before{content:"▸"; position:absolute; left:0; color:var(--orange); font-size:.75rem}
.ico{width:38px; height:38px; stroke:url(#g1); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}

/* ---------- split (image + text) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.shot{position:relative; margin:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#000; aspect-ratio:3/2}
.shot img{filter:grayscale(.35) contrast(1.06) brightness(.62) sepia(.22); transition:.6s ease;
  width:100%; height:100%; object-fit:cover; object-position:center}
.shot:hover img{filter:grayscale(.1) contrast(1.05) brightness(.78) sepia(.08); transform:scale(1.02)}
.shot::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(246,137,31,.20), transparent 45%, rgba(139,4,23,.34)),
             repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px)}
/* ratio override: each frame can carry its source's own ratio (no crop) */
.shot--43{aspect-ratio:1098/829}
.shot--doc{aspect-ratio:1547/975}

/* technical drawings: shown as a drawing sheet, not a darkened photo.
   contain + matching ratio means nothing is cropped and nothing is stretched. */
.shot--doc{background:#EFEAE2; border-color:rgba(246,137,31,.3)}
.shot--doc img{filter:none; object-fit:contain; padding:10px; background:#fff}
.shot--doc:hover img{filter:none; transform:none}
.shot--doc::after{background:linear-gradient(160deg, rgba(246,137,31,.10), transparent 40%, rgba(139,4,23,.10)),
  repeating-linear-gradient(to bottom, rgba(0,0,0,.05) 0 1px, transparent 1px 3px)}

.shot .cap{position:absolute; left:0; bottom:0; z-index:3; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); background:rgba(10,9,12,.82); border-top:1px solid var(--line); border-right:1px solid var(--line); padding:.5rem .9rem}

/* corner brackets */
.brackets{position:relative}
.brackets::before,.brackets::after{content:""; position:absolute; width:16px; height:16px; border:1px solid var(--orange); opacity:.75}
.brackets::before{left:-1px; top:-1px; border-right:0; border-bottom:0}
.brackets::after{right:-1px; bottom:-1px; border-left:0; border-top:0}

/* ---------- chips / platforms ---------- */
.chipgroup{margin-bottom:1.9rem}
.chipgroup h4{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); font-weight:400; margin-bottom:.85rem}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{font-family:var(--f-mono); font-size:.775rem; letter-spacing:.05em; color:#CFC3B6; border:1px solid var(--line-soft);
  border-radius:100px; padding:.36rem .95rem; background:rgba(255,255,255,.02); transition:.22s}
.chip:hover{border-color:var(--orange); color:var(--text); background:rgba(246,137,31,.08)}

/* ---------- open source callout ---------- */
.oss{display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-top:clamp(2.5rem,5vw,4rem);
  padding:1.6rem 1.9rem; border:1px solid var(--line); background:var(--panel)}
.oss h4{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); font-weight:400; margin:0 0 .6rem}
.oss p{margin:0; color:var(--muted); max-width:62ch}
.oss .btn{flex-shrink:0}
.oss .btn svg{flex-shrink:0}

/* ---------- list rows (process / industries) ---------- */
.rows{border-top:1px solid var(--line)}
.rows div{display:flex; align-items:baseline; gap:1.1rem; padding:.95rem 0; border-bottom:1px solid var(--line-soft)}
.rows i{font-family:var(--f-mono); font-style:normal; font-size:.72rem; color:var(--orange); letter-spacing:.1em}
.rows p{margin:0; font-size:1rem}

/* ---------- team ---------- */
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem}
.person{border:1px solid var(--line); border-radius:var(--r); padding:1.8rem; background:linear-gradient(180deg,var(--bg-2),rgba(21,17,26,.5)); transition:.25s}
.person:hover{border-color:rgba(246,137,31,.45); transform:translateY(-3px)}
.avatar{width:54px;height:54px;border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:1.15rem;
  color:#150C02; background:var(--grad); margin-bottom:1.1rem}
.person h3{margin-bottom:.25rem}
.person .role{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:.9rem}
.person a{font-family:var(--f-mono); font-size:.84rem; color:var(--gold); border-bottom:1px solid rgba(255,197,12,.3)}
.person a:hover{border-color:var(--gold)}

/* ---------- contact ---------- */
.contact{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,4rem)}
form{display:grid; gap:1rem}
.field{display:grid; gap:.4rem}
label{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
input,textarea,select{
  font-family:var(--f-body); font-size:.95rem; color:var(--text); background:var(--bg-2);
  border:1px solid var(--line-soft); border-radius:var(--r); padding:.8rem .95rem; outline:none; transition:.2s; width:100%;
}
input:focus,textarea:focus,select:focus{border-color:var(--orange); box-shadow:0 0 0 3px rgba(246,137,31,.12)}
textarea{min-height:132px; resize:vertical}
.two{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.info{border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); padding:1.9rem}
.info dl{margin:0; display:grid; gap:1.35rem}
.info dt{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:.3rem}
.info dd{margin:0; font-size:1rem}
.info a{color:var(--gold)}
.info a:hover{text-decoration:underline}

/* ---------- CTA band ---------- */
.band{border:1px solid var(--line); border-radius:6px; padding:clamp(2.2rem,5vw,3.4rem); text-align:center;
  background:radial-gradient(120% 160% at 50% 0%, rgba(246,137,31,.13), transparent 60%), var(--bg-2); position:relative; overflow:hidden}
.band h2{margin-bottom:1rem}
.band p{margin-inline:auto}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); background:var(--bg-2); padding:3.2rem 0 2.2rem}
.f-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:2.6rem}
footer img{height:30px; width:auto; margin-bottom:1rem}
footer h5{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:0 0 1rem; font-weight:400}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
footer li a{font-size:.92rem; color:var(--muted)} footer li a:hover{color:var(--gold)}
.f-bot{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.6rem; border-top:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:var(--dim)}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .oss{flex-direction:column; align-items:flex-start}
  .hero-inner,.split,.contact{grid-template-columns:1fr}
  .hero{padding-top:140px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .f-top{grid-template-columns:1fr 1fr}
  .split .shot{order:-1}
  .nav{
    position:fixed; inset:76px 0 auto; flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:rgba(10,9,12,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
    padding:1rem 22px 1.6rem; display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:.9rem 0; border-bottom:1px solid var(--line-soft); font-size:.85rem}
  .nav .btn{margin-top:1rem; justify-content:center}
  .burger{display:block}
}
@media(max-width:560px){
  .term-body{font-size:.7rem}
  .stats{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none}
}