/* Automation Republic — main site
   Layout: "technical paper" — a 48px drafting grid under everything, hairline rules
   between bands, mono labels as drawing annotations, signal orange used only for
   action and emphasis. Same system as careers.klaregroup.com. */
:root{
  --bg:#f6f5f1; --ink:#16171b; --ink-2:#5d5e65; --rule:#dedcd4; --rule-2:#cbc9c0;
  --surface:#efede7; --surface-2:#e8e5dd; --paper:#ffffff;
  --signal:#ff5a1f; --signal-ink:#c63d0a; --signal-soft:rgba(255,90,31,.12);
  --on-signal:#ffffff; --safe:#2e9e57; --todo:#fff1b8; --todo-ink:#6b4f00;
  --topbar:rgba(246,245,241,.88); --scrim:rgba(18,19,23,.86); --img-tile:#ffffff;
  --display:"Big Shoulders Display","Arial Narrow","Helvetica Neue",sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121317; --ink:#f3f2ec; --ink-2:#9a9faa; --rule:#262931; --rule-2:#373b44;
    --surface:#191b21; --surface-2:#212530; --paper:#1b1d23;
    --signal:#ff6a32; --signal-ink:#ff8a5c; --signal-soft:rgba(255,106,50,.18);
    --on-signal:#ffffff; --safe:#36b368; --todo:#4a3b07; --todo-ink:#ffe08a;
    --topbar:rgba(18,19,23,.84); --scrim:rgba(0,0,0,.9); --img-tile:#f4f3ee;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121317; --ink:#f3f2ec; --ink-2:#9a9faa; --rule:#262931; --rule-2:#373b44;
  --surface:#191b21; --surface-2:#212530; --paper:#1b1d23;
  --signal:#ff6a32; --signal-ink:#ff8a5c; --signal-soft:rgba(255,106,50,.18);
  --on-signal:#ffffff; --safe:#36b368; --todo:#4a3b07; --todo-ink:#ffe08a;
  --topbar:rgba(18,19,23,.84); --scrim:rgba(0,0,0,.9); --img-tile:#f4f3ee;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background-color:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:48px 48px;background-position:center top;
  position:relative;overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0;background:var(--bg);opacity:.86;z-index:-1;pointer-events:none}
a{color:inherit;text-decoration:none}
::selection{background:var(--signal);color:var(--on-signal)}
img,video{max-width:100%;display:block}
h1,h2,h3,h4{text-wrap:balance}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

.wrap{max-width:1160px;margin:0 auto;padding-inline:28px}
@media(max-width:600px){.wrap{padding-inline:18px}}
.label,.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.label a:hover{color:var(--signal-ink)}
em.s,.s{font-style:normal;color:var(--signal)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal);display:inline-block;margin-right:8px;vertical-align:middle;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
mark.todo{background:var(--todo);color:var(--todo-ink);padding:0 4px;font-family:var(--mono);font-size:.82em}

/* ---- top bar ---- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--topbar);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px}
.brand{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.brand img{height:30px;width:auto}
:root[data-theme="dark"] .brand img{background:var(--img-tile);border-radius:6px;padding:3px 6px;height:34px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand img{background:var(--img-tile);border-radius:6px;padding:3px 6px;height:34px}}
nav.primary{display:flex;align-items:center;gap:24px}
nav.primary a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);transition:color .2s;padding:6px 0;border-bottom:1px solid transparent}
nav.primary a:hover{color:var(--ink)}
nav.primary a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--signal)}
nav.primary a.navcta{color:var(--on-signal);background:var(--signal);padding:8px 14px;border:0}
nav.primary a.navcta:hover{background:var(--ink);color:var(--bg)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--rule-2);background:none;color:var(--ink-2);cursor:pointer;padding:0;transition:color .2s,border-color .2s}
.iconbtn:hover{color:var(--ink);border-color:var(--ink)}
.iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle .ic-sun{display:block}:root:not([data-theme="light"]) .theme-toggle .ic-moon{display:none}}
.menu-btn{display:none}
.tools{display:flex;gap:10px;align-items:center}
@media(max-width:900px){
  .menu-btn{display:inline-flex}
  nav.primary{display:none;position:absolute;left:0;right:0;top:66px;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--rule);padding:8px 18px 18px}
  nav.primary.open{display:flex}
  nav.primary a{padding:14px 0;border-bottom:1px solid var(--rule);font-size:13px}
  nav.primary a.navcta{margin-top:14px;text-align:center;padding:14px}
}

/* ---- buttons ---- */
.cta{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s;cursor:pointer;background:none;color:var(--ink)}
.cta:hover{background:var(--ink);color:var(--bg)}
.cta.sig{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.cta.sig:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.cta.lg{padding:16px 30px;font-size:12px;letter-spacing:.16em}
.cta .arr{transition:transform .2s}
.cta:hover .arr{transform:translateX(3px)}
.actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---- page hero ---- */
.hero{padding:76px 0 56px;position:relative;overflow:hidden}
.hero .glow{position:absolute;inset:0;background:radial-gradient(ellipse at 80% 20%,var(--signal-soft) 0%,transparent 55%);pointer-events:none}
.hero .wrap{position:relative}
.hero .label{margin-bottom:20px}
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(46px,8.4vw,112px);line-height:.9;letter-spacing:-.02em;margin:0 0 24px;max-width:15ch;text-transform:none}
.hero h1 em{font-style:normal;color:var(--signal)}
.hero .sub{font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,32px);line-height:1.05;margin:-8px 0 20px;color:var(--ink-2)}
.hero p.lead{font-size:clamp(17px,1.9vw,20px);max-width:62ch;color:var(--ink-2);margin:0 0 30px}
.page-hero{padding:60px 0 40px}
.page-hero h1{font-size:clamp(42px,7vw,92px);max-width:18ch}
.hero-img{position:relative;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--surface)}
.hero-img img{width:100%;height:clamp(180px,30vw,380px);object-fit:cover}
.hero-img::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}

/* ---- bands ---- */
section.band{border-top:1px solid var(--rule);padding:64px 0}
section.band.tight{padding:44px 0}
section.band.alt{background:var(--surface)}
.section-head{margin-bottom:36px;display:grid;gap:12px}
.section-head h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,60px);line-height:.95;letter-spacing:-.01em;margin:0;max-width:20ch}
.section-head h2 em{font-style:normal;color:var(--signal)}
.section-head p{margin:0;color:var(--ink-2);max-width:62ch;font-size:17px}

/* ---- prose ---- */
.prose{max-width:780px;min-width:0}
.prose.wide{max-width:none}
.prose > *:first-child{margin-top:0}
.prose h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.2vw,48px);line-height:.98;letter-spacing:-.01em;margin:44px 0 16px}
.prose h3{font-family:var(--display);font-weight:700;font-size:clamp(23px,2.8vw,30px);line-height:1.05;margin:34px 0 10px}
.prose h4{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-ink);margin:28px 0 10px}
.prose p{margin:0 0 16px;color:var(--ink-2);max-width:68ch}
.prose p strong,.prose li strong{color:var(--ink);font-weight:600}
.prose p.pt{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:26px 0 8px}
.prose ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:8px;max-width:68ch}
.prose ul li{position:relative;padding-left:24px;color:var(--ink-2)}
.prose ul li::before{content:"";position:absolute;left:2px;top:.72em;width:10px;height:1px;background:var(--signal)}
.prose figure{margin:26px 0;border:1px solid var(--rule);background:var(--paper)}
.prose figure img,.prose figure video{width:100%;height:auto}
.prose .cta{margin:8px 12px 16px 0}

/* brief / did / platform / result spec sheet */
.spec{display:grid;grid-template-columns:180px minmax(0,1fr);border-top:1px solid var(--rule);margin:20px 0 26px;max-width:880px}
.spec dt,.spec dd{border-bottom:1px solid var(--rule);padding:18px 0;margin:0}
.spec dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-ink);padding-right:20px}
.spec dd{color:var(--ink-2)}
@media(max-width:640px){.spec{grid-template-columns:1fr}.spec dt{border-bottom:0;padding-bottom:0}}
.closing{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,28px);line-height:1.15;color:var(--ink);max-width:36ch;margin:6px 0 20px}

/* split image + text */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;align-items:start}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.rev .media{order:2}
.split .media{border:1px solid var(--rule);background:var(--paper);position:sticky;top:96px}
.split .media img{width:100%;height:auto}
@media(max-width:820px){.split,.split.rev{grid-template-columns:1fr;gap:26px}.split.rev .media{order:0}.split .media{position:static}}

/* galleries */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:22px 0}
.gallery.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){.gallery.two{grid-template-columns:1fr}}
.gallery figure{margin:0;background:var(--paper);display:flex;flex-direction:column}
.gallery button{all:unset;cursor:zoom-in;display:block}
.gallery button:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery.two img{aspect-ratio:auto}
.gallery figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:12px 14px;border-top:1px solid var(--rule)}

/* cards (feature grid) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.card{background:var(--bg);display:flex;flex-direction:column;transition:background .2s;min-width:0}
a.card:hover{background:var(--paper)}
.card .ph{overflow:hidden;border-bottom:1px solid var(--rule);background:var(--surface)}
.card .ph img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s ease}
a.card:hover .ph img{transform:scale(1.04)}
.card .tx{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-family:var(--display);font-weight:700;font-size:25px;line-height:1.02;margin:0;letter-spacing:-.005em}
.card p{margin:0;color:var(--ink-2);font-size:15px}
.card .go{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal-ink)}

/* call-to-action band (orange) */
.cta-band{background:var(--signal);color:var(--on-signal);border-top:0}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-block:46px}
.cta-band h2{font-family:var(--display);font-weight:900;font-size:clamp(32px,5vw,58px);line-height:.92;margin:0 0 8px;letter-spacing:-.01em}
.cta-band p{margin:0;max-width:56ch;opacity:.94}
.cta-band .cta{border-color:var(--on-signal);color:var(--on-signal)}
.cta-band .cta:hover{background:var(--on-signal);color:var(--signal-ink)}

/* featured case study */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);border:1px solid var(--rule);background:var(--paper)}
.feature .ph{border-right:1px solid var(--rule);background:var(--surface)}
.feature .ph img{width:100%;height:100%;object-fit:cover;min-height:220px;max-height:420px}
.feature .tx{padding:32px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.feature h3{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,40px);line-height:.98;margin:0}
@media(max-width:760px){.feature{grid-template-columns:1fr}.feature .ph{border-right:0;border-bottom:1px solid var(--rule)}}

.strip-head{font-family:var(--display);font-weight:900;font-size:clamp(44px,8vw,110px);line-height:.88;letter-spacing:-.02em;margin:0;color:var(--ink)}
.strip-head::after{content:"";display:block;width:72px;height:6px;background:var(--signal);margin-top:18px}

/* video + external embeds */
.vid{margin:24px 0;border:1px solid var(--rule);background:#000}
.vid video{width:100%;height:auto;max-height:560px;margin:0 auto}
.extlink{display:flex;align-items:center;gap:18px;border:1px solid var(--rule);background:var(--paper);padding:20px 22px;margin:22px 0;transition:border-color .2s}
.extlink:hover{border-color:var(--signal)}
.extlink .play{flex:0 0 52px;height:52px;border-radius:50%;background:var(--signal);display:grid;place-items:center}
.extlink .play svg{width:18px;height:18px;fill:var(--on-signal);margin-left:3px}
.extlink b{display:block;font-family:var(--display);font-size:22px;font-weight:700;line-height:1.1}
.extlink span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}

/* stats / pillars */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--bg)}
.stats > div{padding:26px 24px;border-right:1px solid var(--rule);min-width:0}
.stats > div:last-child{border-right:0}
.stats .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal-ink);margin-bottom:10px}
.stats .n{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.3vw,28px);line-height:1.05}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats > div:nth-child(2){border-right:0}.stats > div:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
@media(max-width:480px){.stats{grid-template-columns:1fr}.stats > div{border-right:0;border-bottom:1px solid var(--rule)}}

/* industry chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule-2);padding:9px 14px;color:var(--ink-2);background:var(--bg);transition:all .2s}
.chips a:hover{border-color:var(--signal);color:var(--ink);background:var(--paper)}

/* brands */
.logo-tile{background:var(--img-tile);display:grid;place-items:center;padding:22px;border-bottom:1px solid var(--rule)}
.logo-tile img{max-height:64px;width:auto;object-fit:contain}
.brand-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.brand-row a{background:var(--img-tile);display:grid;place-items:center;padding:18px 14px;transition:opacity .2s}
.brand-row a img{max-height:44px;width:auto;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
.brand-row a:hover img{filter:none;opacity:1}
@media(max-width:900px){.brand-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:460px){.brand-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.brandbox{display:grid;grid-template-columns:260px minmax(0,1fr);border:1px solid var(--rule);background:var(--paper)}
.brandbox .logo-tile{border-bottom:0;border-right:1px solid var(--rule);height:100%}
.brandbox .tx{padding:26px 28px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.brandbox p{margin:0;color:var(--ink-2);font-size:17px}
@media(max-width:700px){.brandbox{grid-template-columns:1fr}.brandbox .logo-tile{border-right:0;border-bottom:1px solid var(--rule)}}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 22px}
.tags span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--rule-2);padding:7px 12px;color:var(--ink-2)}

/* forms */
.form{display:grid;gap:18px;max-width:760px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.form .row{grid-template-columns:1fr}}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.field label .req{color:var(--signal)}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;background:var(--paper);border:1px solid var(--rule-2);font-family:var(--body);font-size:15px;color:var(--ink);border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px var(--signal-soft)}
.field textarea{resize:vertical;min-height:130px}
.form-note{font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:14px 16px;border-left:3px solid var(--signal);background:var(--signal-soft);color:var(--ink)}
.form-note[hidden]{display:none}
.quote{border:1px solid var(--rule);background:var(--paper);padding:30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:34px}
.quote h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,46px);line-height:.95;margin:0 0 10px}
.quote p{margin:0;color:var(--ink-2)}
@media(max-width:820px){.quote{grid-template-columns:1fr;padding:22px}}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.contact-grid > div{background:var(--bg);padding:24px;min-width:0}
.contact-grid h3{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-ink);margin:0 0 14px}
.contact-grid .v{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--display);font-weight:700;font-size:22px;line-height:1.2;margin-bottom:8px;overflow-wrap:anywhere}
.contact-grid .v.small{font-family:var(--body);font-weight:500;font-size:16px;line-height:1.5}
.copy{flex:0 0 auto;border:1px solid var(--rule-2);background:none;color:var(--ink-2);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;cursor:pointer}
.copy:hover{border-color:var(--ink);color:var(--ink)}
@media(max-width:900px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.contact-grid{grid-template-columns:1fr}}

/* legal */
.legal{max-width:860px}
.legal h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,36px);letter-spacing:-.01em;margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--rule)}
.legal h3{font-family:var(--body);font-weight:600;font-size:18px;color:var(--ink);margin:26px 0 8px}
.legal p,.legal li{font-size:15px;line-height:1.75;color:var(--ink-2)}
.legal ul{padding-left:20px}
.toc{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 10px;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.toc a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.toc a:hover{color:var(--signal-ink)}

/* sitemap */
.smap{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:34px}
.smap h3{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-ink);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.smap ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.smap a{color:var(--ink-2)}
.smap a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:3px}

/* next/prev in a section */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.pager a{background:var(--bg);padding:22px 24px;display:grid;gap:6px;transition:background .2s}
.pager a:hover{background:var(--paper)}
.pager a.next{text-align:right}
.pager b{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.05}
@media(max-width:560px){.pager{grid-template-columns:1fr}.pager a.next{text-align:left}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:var(--scrim);display:grid;place-items:center;padding:24px}
.lb img{max-width:min(1200px,100%);max-height:82vh;width:auto;height:auto;border:1px solid var(--rule-2);background:var(--img-tile)}
.lb p{color:#f3f2ec;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-align:center;margin:14px 0 0}
.lb button{position:absolute;top:16px;right:16px;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;width:42px;height:42px;font-size:22px;cursor:pointer}

/* ---- live line machines (from careers) ---- */
.line-band{border-top:1px solid var(--rule);background-color:var(--surface);background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:32px 32px}
.line-band .wrap{padding-block:34px 44px}
.line-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.line-head h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,44px);margin:0;letter-spacing:-.01em}
.line-head h2 em{font-style:normal;color:var(--signal)}
.machines{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(max-width:1000px){.machines{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.machines{grid-template-columns:1fr}}
.machine{background:var(--bg);padding:18px 18px 16px;display:flex;flex-direction:column;min-width:0}
.machine svg{display:block;width:100%;height:122px}
.machine .cap{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px}
.machine .cap b{font-family:var(--display);font-weight:700;font-size:17px}
.machine .cap .st{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-ink);white-space:nowrap}
.machine .cap .st::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--signal);margin-right:6px;vertical-align:middle;animation:pulse 1.6s infinite}
.mc-l{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mc-thin{fill:none;stroke:var(--ink-2);stroke-width:1.4;stroke-linecap:round}
.mc-f{fill:var(--ink)}
.mc-bg{fill:var(--surface-2)}
.mc-a{stroke:var(--signal)}
.mc-af{fill:var(--signal)}
.mc-g{fill:var(--ink-2)}
.imm-move{animation:immClamp 5s ease-in-out infinite}
@keyframes immClamp{0%,12%{transform:translateX(0)}24%,68%{transform:translateX(28px)}82%,100%{transform:translateX(0)}}
.imm-shot{transform-box:fill-box;transform-origin:right center;opacity:0;animation:immShot 5s ease-in-out infinite}
@keyframes immShot{0%,26%{opacity:0;transform:scaleX(.05)}32%{opacity:1}40%{opacity:1;transform:scaleX(1)}48%,100%{opacity:0;transform:scaleX(1)}}
.imm-glow{opacity:0;animation:immGlow 5s ease-in-out infinite}
@keyframes immGlow{0%,30%{opacity:0}38%,60%{opacity:.9}70%,100%{opacity:0}}
.imm-part{opacity:0;animation:immPart 5s ease-in-out infinite}
@keyframes immPart{0%,80%{opacity:0;transform:translateY(0)}82%{opacity:1}92%{opacity:1;transform:translateY(26px)}96%,100%{opacity:0;transform:translateY(26px)}}
.wb-roll{transform-box:view-box;animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wb-feed{stroke-dasharray:7 7;animation:wbFeed 1.1s linear infinite}
@keyframes wbFeed{to{stroke-dashoffset:-28}}
.wb-wire{stroke-dasharray:180;stroke-dashoffset:180;animation:wbForm 4.5s ease-in-out infinite}
@keyframes wbForm{0%,8%{stroke-dashoffset:180}46%{stroke-dashoffset:0}74%{stroke-dashoffset:0}90%,100%{stroke-dashoffset:180}}
.wb-head{transform-box:view-box;animation:wbHead 4.5s ease-in-out infinite}
@keyframes wbHead{0%,10%{transform:rotate(0deg)}30%{transform:rotate(-42deg)}48%{transform:rotate(0deg)}66%{transform:rotate(-42deg)}82%,100%{transform:rotate(0deg)}}
.mc-arm{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round}
.rb-upper{transform-box:view-box;transform-origin:130px 82px;animation:rbUpper 5s ease-in-out infinite}
@keyframes rbUpper{0%,12%{transform:rotate(0deg)}32%{transform:rotate(108deg)}52%,66%{transform:rotate(144deg)}86%{transform:rotate(108deg)}100%{transform:rotate(0deg)}}
.rb-fore{transform-box:view-box;transform-origin:98px 70px;animation:rbFore 5s ease-in-out infinite}
@keyframes rbFore{0%,12%{transform:rotate(0deg)}32%{transform:rotate(20deg)}52%,66%{transform:rotate(116deg)}86%{transform:rotate(20deg)}100%{transform:rotate(0deg)}}
.rb-wrist{transform-box:view-box;transform-origin:74px 92px;animation:rbWrist 5s ease-in-out infinite}
@keyframes rbWrist{0%,12%{transform:rotate(0deg)}32%{transform:rotate(-116deg)}52%,66%{transform:rotate(40deg)}86%{transform:rotate(-116deg)}100%{transform:rotate(0deg)}}
.rb-hold{opacity:0;animation:rbHold 5s ease-in-out infinite}
@keyframes rbHold{0%,12%{opacity:0}16%,56%{opacity:1}60%,100%{opacity:0}}
.rb-src{opacity:1;animation:rbSrc 5s ease-in-out infinite}
@keyframes rbSrc{0%,10%{opacity:1}14%,100%{opacity:0}}
.rb-dst{opacity:0;animation:rbDst 5s ease-in-out infinite}
@keyframes rbDst{0%,58%{opacity:0}62%,100%{opacity:1}}
.ga-x{animation:gaX 5s ease-in-out infinite}
@keyframes gaX{0%,30%{transform:translateX(0)}50%{transform:translateX(116px)}74%{transform:translateX(116px)}95%,100%{transform:translateX(0)}}
.ga-z{animation:gaZ 5s ease-in-out infinite}
@keyframes gaZ{0%,6%{transform:translateY(0)}16%,24%{transform:translateY(40px)}32%,50%{transform:translateY(0)}60%,66%{transform:translateY(40px)}74%,100%{transform:translateY(0)}}
.ga-src{animation:gaSrc 5s ease-in-out infinite}
@keyframes gaSrc{0%,18%{opacity:1}22%,100%{opacity:0}}
.ga-hold{opacity:0;animation:gaHold 5s ease-in-out infinite}
@keyframes gaHold{0%,20%{opacity:0}24%,60%{opacity:1}64%,100%{opacity:0}}
.ga-dst{opacity:0;animation:gaDst 5s ease-in-out infinite}
@keyframes gaDst{0%,64%{opacity:0}68%,100%{opacity:1}}
.cv-roll{transform-box:view-box;animation:spin 1.5s linear infinite}
.cv-belt{stroke-dasharray:8 7;animation:cvBelt 1s linear infinite}
@keyframes cvBelt{to{stroke-dashoffset:-26}}
.cv-box{animation:cvBox 3s linear infinite}
@keyframes cvBox{0%{transform:translateX(0);opacity:0}7%{opacity:1}92%{opacity:1}100%{transform:translateX(168px);opacity:0}}
.sc-trend{animation:scScroll 3s linear infinite}
@keyframes scScroll{from{transform:translateX(0)}to{transform:translateX(-60px)}}
.sc-bar{transform-box:fill-box;transform-origin:center bottom;animation:scBar 2.4s ease-in-out infinite}
.sc-bar.b2{animation-delay:-.8s}.sc-bar.b3{animation-delay:-1.5s}
@keyframes scBar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.sc-led{animation:pulse 1.3s infinite}
.sd-line{opacity:0;animation:sdLine 4.5s ease-in-out infinite}
@keyframes sdLine{0%,4%{opacity:0}9%,93%{opacity:1}100%{opacity:0}}
.sd-cursor{animation:sdBlink 1s steps(1) infinite}
@keyframes sdBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.sd-bar{transform-box:fill-box;transform-origin:left center;animation:sdBar 4.5s ease-in-out infinite}
@keyframes sdBar{0%,8%{transform:scaleX(0)}82%,100%{transform:scaleX(1)}}
.rt-table{transform-box:view-box;animation:rtIndex 2s ease-in-out infinite}
@keyframes rtIndex{0%,10%{transform:rotate(0deg)}34%,100%{transform:rotate(45deg)}}
.lb-tamp{animation:lbTamp 2s ease-in-out infinite}
@keyframes lbTamp{0%,46%{transform:translateX(0)}62%{transform:translateX(-9px)}78%,100%{transform:translateX(0)}}
.lm-beam{animation:pulse .5s infinite}
.lm-mark{stroke-dasharray:120;stroke-dashoffset:120;animation:lmMark 3.2s ease-in-out infinite}
@keyframes lmMark{0%,8%{stroke-dashoffset:120}58%{stroke-dashoffset:0}80%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:120}}
.lm-dot{animation:lmDot 3.2s ease-in-out infinite}
@keyframes lmDot{0%,8%{transform:translateX(0);opacity:0}12%{opacity:1}58%{transform:translateX(56px);opacity:1}66%,100%{opacity:0}}
.vf-prod{animation:vfProd 3.4s ease-in infinite}
@keyframes vfProd{0%{transform:translateY(-16px);opacity:0}9%{opacity:1}30%{transform:translateY(24px);opacity:1}40%,100%{opacity:0}}
.vf-jaw-l{animation:vfJawL 3.4s ease-in-out infinite}
@keyframes vfJawL{0%,40%{transform:translateX(0)}50%,64%{transform:translateX(13px)}74%,100%{transform:translateX(0)}}
.vf-jaw-r{animation:vfJawR 3.4s ease-in-out infinite}
@keyframes vfJawR{0%,40%{transform:translateX(0)}50%,64%{transform:translateX(-13px)}74%,100%{transform:translateX(0)}}
.vf-bag{opacity:0;animation:vfBag 3.4s ease-in infinite}
@keyframes vfBag{0%,64%{transform:translateY(0);opacity:0}70%{opacity:1}94%{transform:translateY(32px);opacity:0}100%{opacity:0}}
.vf-film{stroke-dasharray:6 6;animation:vfFilm 1s linear infinite}
@keyframes vfFilm{to{stroke-dashoffset:28}}

/* ---- footer ---- */
.site-footer{background:var(--signal);color:var(--on-signal);padding:56px 0 30px}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}
.foot-cols h4{font-family:var(--display);font-weight:700;font-size:23px;margin:0 0 14px}
.foot-cols p{font-size:14.5px;line-height:1.6;opacity:.94;margin:0 0 10px}
.foot-cols a{text-decoration:underline;text-underline-offset:2px}
.foot-cols a:hover{opacity:.75}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14.5px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.3)}
.foot-bottom .copyr{font-family:var(--mono);font-size:11px;letter-spacing:.03em;opacity:.94;line-height:1.8}
.foot-bottom .copyr a:hover{text-decoration:underline}
.socials{display:flex;gap:18px}
.socials a{display:inline-flex;opacity:.9;transition:opacity .2s,transform .2s}
.socials a:hover{opacity:1;transform:translateY(-2px)}
.socials svg{width:21px;height:21px;fill:currentColor}
@media(max-width:860px){.foot-cols{grid-template-columns:1fr 1fr}.foot-bottom{flex-direction:column;align-items:flex-start}}
@media(max-width:480px){.foot-cols{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .imm-move{transform:translateX(28px)}.wb-wire{stroke-dashoffset:0}.sd-line{opacity:1}.rb-src,.ga-src{opacity:1}
}
.feature .tx p{margin:0;color:var(--ink-2);font-size:16px}
.card .label{font-size:10px}

/* ---- interactive demos ---- */
a.machine{transition:background .2s}
a.machine:hover{background:var(--paper)}
a.machine:hover .cap b{color:var(--signal-ink)}
.demo-badge{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;background:var(--signal);color:var(--on-signal);padding:2px 6px;margin-left:6px;vertical-align:middle;font-weight:500}
.demo-art{display:block;background-color:var(--surface);background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:24px 24px;padding:18px}
.demo-art svg{display:block;width:100%;height:150px}
.demo-frame{border:1px solid var(--rule);background:var(--surface);aspect-ratio:16/9;max-height:78vh;width:100%;position:relative;overflow:hidden}
.demo-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0d0e11}
@media(max-width:700px){.demo-frame{aspect-ratio:3/4}}
.demo-launch{all:unset;box-sizing:border-box;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;cursor:pointer;padding:24px;text-align:center}
.demo-launch .demo-art{width:min(460px,90%);background:transparent;padding:0}
.demo-launch .demo-art svg{height:auto;aspect-ratio:260/150}
.demo-launch:focus-visible{outline:2px solid var(--signal);outline-offset:-4px}
.demo-launch:hover .cta{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.demo-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.demo-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}
.demo-wait .demo-art{width:min(420px,80%);background:transparent;padding:0}
.demo-wait .demo-art svg{height:auto;aspect-ratio:260/150}
.demo-frame.ready .demo-wait{display:none}
.demo-sec{scroll-margin-top:80px}
.demo-sec .section-head h2{max-width:none}
.demo-notes{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:40px;margin-top:30px}
.demo-notes h3{margin-top:0}
.demo-rel{display:grid;gap:10px}
.demo-rel a{font-family:var(--display);font-weight:700;font-size:21px;border-bottom:1px solid var(--rule);padding-bottom:10px;transition:color .2s}
.demo-rel a:hover{color:var(--signal-ink)}
.hero .chips{margin-top:6px}
@media(max-width:760px){.demo-notes{grid-template-columns:1fr;gap:10px}}

/* ---- scroll-driven demos ---- */
.demo-sec{border-top:1px solid var(--rule);padding:64px 0 48px;scroll-margin-top:66px}
.demo-intro{display:grid;gap:12px;margin-bottom:28px}
.demo-intro h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,60px);line-height:.95;margin:0}
.demo-intro p{margin:0;color:var(--ink-2);max-width:62ch;font-size:17px}
.scrolly{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,2fr);gap:0;max-width:1440px;margin:0 auto;padding-inline:28px;position:relative}
.steps{position:relative;z-index:2;padding-bottom:20vh}
.step{min-height:78vh;display:flex;align-items:center;padding-right:28px}
.step:first-child{min-height:60vh;align-items:flex-start;padding-top:8vh}
.step-card{border:1px solid var(--rule);border-left:3px solid var(--rule-2);background:var(--bg);padding:22px 24px;opacity:.45;transition:opacity .35s,border-color .35s,transform .35s;transform:translateX(-6px)}
.step.on .step-card{opacity:1;border-left-color:var(--signal);transform:none}
.step-card .mono{color:var(--signal-ink)}
.step-card h3{font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,36px);line-height:1;margin:10px 0 10px}
.step-card p{margin:0;color:var(--ink-2)}
.stage{position:sticky;top:calc(66px + env(safe-area-inset-top,0px));height:calc(100vh - 82px);align-self:start;display:flex;flex-direction:column;gap:10px;padding-block:8px}
.stage .demo-frame{flex:1;aspect-ratio:auto;max-height:none}
.stage .demo-frame iframe{pointer-events:none}
.scrolly.free .stage .demo-frame iframe{pointer-events:auto}
.scrolly.free .stage .demo-frame{outline:2px solid var(--signal);outline-offset:-2px}
.stage-bar{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.stage-bar .cta{padding:9px 14px}
.free-btn[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.demo-foot{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;margin-top:8px}
.demo-foot .demo-rel{display:flex;gap:10px 26px;flex-wrap:wrap}
.demo-foot .demo-rel a{border:0;padding:0;font-size:19px}
@media(max-width:860px){
  .scrolly{grid-template-columns:1fr;padding-inline:16px}
  .stage{order:-1;top:calc(66px + env(safe-area-inset-top,0px));height:52vh;z-index:1;background:var(--bg)}
  .steps{padding-bottom:10vh}
  .step,.step:first-child{min-height:62vh;padding:0;align-items:center}
  .step-card{transform:none}
}
@media(prefers-reduced-motion:reduce){.step-card{transition:none}}
/* phone: the pinned model sits above the cards scrolling underneath it, so its buttons stay tappable */
@media(max-width:860px){.stage{z-index:3;box-shadow:0 10px 18px -14px rgba(0,0,0,.35)}.steps{z-index:1}}
@media(max-width:860px){.step,.step:first-child{align-items:flex-start;padding-top:14px}}
@media(max-width:860px){.step,.step:first-child{min-height:40vh}}
/* phone: the active step's text rides in a caption pinned under the model; the cards in the flow become scroll spacers */
.stage-cap{display:none}
@media(max-width:860px){
  .stage{height:auto;gap:8px}
  .stage .demo-frame{flex:none;height:40vh}
  .stage-cap{display:block;border-left:3px solid var(--signal);padding:8px 12px;background:var(--bg);min-height:118px}
  .stage-cap .mono{color:var(--signal-ink);font-size:10px}
  .stage-cap h3{font-family:var(--display);font-weight:800;font-size:23px;line-height:1.05;margin:4px 0 4px}
  .stage-cap p{margin:0;font-size:14px;line-height:1.45;color:var(--ink-2)}
  .step,.step:first-child{min-height:48vh;padding:0}
  .step-card{visibility:hidden}
  .steps{padding-bottom:30vh}
}

/* ---- our latest creation (blog-style post page) ---- */
.post-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:-4px 0 18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.post-tag{background:var(--signal);color:var(--on-signal);padding:3px 8px}
.post-hero h1{max-width:20ch}
.post-site{border-top:1px solid var(--rule);background:#000;line-height:0}
.post-frame{display:block;width:100%;border:0;height:100vh;background:#000}
.latest-teaser .tx p{max-width:56ch}

/* ---- strobe beacon on "Latest": a double flash with a burst of light, then a dark pause ---- */
.strobe{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle;
  background:var(--signal);opacity:.28;animation:strobe 1.6s linear infinite}
.strobe::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--signal);opacity:0;animation:strobeRing 1.6s cubic-bezier(.1,.6,.3,1) infinite}
.strobe.on-signal{background:var(--on-signal)}
.strobe.on-signal::after{border-color:var(--on-signal)}
@keyframes strobe{
  0%{opacity:.28;box-shadow:none}
  1%,5%{opacity:1;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 10px 3px var(--signal),0 0 22px 8px var(--signal-soft)}
  7%{opacity:.28;box-shadow:none}
  11%,15%{opacity:1;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 10px 3px var(--signal),0 0 22px 8px var(--signal-soft)}
  17%,100%{opacity:.28;box-shadow:none}
}
@keyframes strobeRing{0%{opacity:0;transform:scale(.6)}1%{opacity:.9;transform:scale(1)}32%{opacity:0;transform:scale(3.2)}100%{opacity:0;transform:scale(3.2)}}
nav.primary a.nav-latest{display:inline-flex;align-items:center}
.post-tag{display:inline-flex;align-items:center}
.post-tag .strobe{margin-right:6px;width:7px;height:7px}
@media(prefers-reduced-motion:reduce){.strobe,.strobe::after{animation:none}.strobe{opacity:1}}