/* OTIS LLC site stylesheet. Black and red circuit-trace theme (design 130, Neon Traces). */
:root{
  --black:#000;
  --board:#05060a;
  --pad:#0b0d14;
  --edge:#1e2230;
  --cyan:#ff2a2a;   /* bright trace red (named cyan in the original design) */
  --mag:#d0003f;    /* logo crimson */
  --silk:#8a93a6;
  --ink:#eef3fb;
  --mute:#a7b0c2;
  --crimson:#d0003f;
  --mag-text:#ff3b5c; /* crimson lifted for small text so it passes WCAG AA on black */
  --head:"Oxanium","Bahnschrift","Segoe UI",system-ui,sans-serif;
  --body:"Titillium Web","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#000}
body{margin:0;background:var(--black);color:var(--ink);font:400 17.5px/1.6 var(--body);overflow-x:hidden}
img{max-width:100%}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--mag);outline-offset:3px;box-shadow:0 0 14px var(--mag)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:var(--mag);color:#fff;padding:6px 10px}
.wrap{max-width:1220px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--head);margin:0;line-height:1.05}
h2{font-size:clamp(2rem,3.8vw,3rem);font-weight:700}
p{margin:0 0 1em}
.neon-c{color:var(--cyan);text-shadow:0 0 12px rgba(255,42,42,.6)}

/* placeholders the owner still has to supply: subtle dotted underline only */
.ph{text-decoration:underline dotted;text-decoration-color:rgba(167,176,194,.55);text-decoration-thickness:1px;text-underline-offset:.22em}

/* header */
header{position:sticky;top:0;z-index:30;background:rgba(0,0,0,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:2px solid var(--cyan);box-shadow:0 0 18px rgba(255,42,42,.25)}
.bar{display:flex;align-items:center;gap:22px;height:74px}
.bar .logo img{height:52px;width:auto;display:block}
#nav ul{display:flex;list-style:none;margin:0;padding:0;gap:2px}
#nav a{display:block;color:var(--ink);text-decoration:none;font:600 1rem var(--head);padding:8px 12px;border:1px solid transparent}
#nav a:hover{border-color:var(--mag);color:var(--mag);text-shadow:0 0 10px var(--mag)}
#nav a[aria-current="page"]{border-color:var(--cyan);color:var(--cyan);text-shadow:0 0 10px rgba(255,42,42,.6);box-shadow:inset 0 0 10px rgba(255,42,42,.15)}
.ctas{margin-left:auto;display:flex;gap:10px}
.btn{display:inline-block;font:700 1rem var(--head);text-decoration:none;color:var(--ink);padding:11px 20px;border:2px solid var(--cyan);box-shadow:0 0 12px rgba(255,42,42,.35),inset 0 0 10px rgba(255,42,42,.15);background:transparent;cursor:pointer;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn:hover{background:rgba(255,42,42,.12)}
.btn.m{border-color:var(--mag);background:var(--mag);color:#fff;box-shadow:0 0 16px rgba(208,0,63,.5)}
.btn.m:hover{background:#e3104e;border-color:#e3104e}
.btn .ph{text-decoration-color:rgba(255,255,255,.5)}
.menu{display:none;margin-left:auto;background:none;border:2px solid var(--cyan);color:var(--ink);font:700 .95rem var(--head);padding:8px 14px;cursor:pointer}
#nav .mc{display:none}
@media (max-width:1020px){
  .menu{display:block}.ctas{display:none}
  #nav{display:none;position:absolute;top:74px;left:0;right:0;background:#000;border-bottom:2px solid var(--mag)}
  #nav.open{display:block}#nav ul{flex-direction:column;padding:10px 18px 16px}#nav .mc{display:block}
}

/* home hero */
.hero{position:relative;overflow:hidden;min-height:720px;display:flex;align-items:center;border-bottom:1px solid var(--edge);padding:0}
.board{position:absolute;inset:0;width:100%;height:100%}
.pz{stroke-dasharray:6 94;animation:zip 3s linear infinite;stroke-linecap:round}
@keyframes zip{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero .txt{max-width:600px;background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,.6) 70%,transparent);padding:30px 30px 30px 0}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.6rem);font-weight:800;letter-spacing:-.01em}
.hero h1 .l2{display:block;color:var(--mag);text-shadow:0 0 18px rgba(208,0,63,.55)}
.hero .sub{color:var(--mute);font-size:1.15rem;margin:22px 0 0;max-width:46ch}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero .angle{margin-top:26px;font:600 1rem var(--head);color:var(--cyan)}

/* inner-page hero: same board, shorter */
.hero.inner{min-height:420px}
.hero.inner h1{font-size:clamp(2.4rem,4.6vw,3.9rem)}
.hero.inner .sub{margin-top:18px}

/* silkscreen designators */
.silk{font:500 .8rem var(--head);color:var(--silk);letter-spacing:.04em}
section{padding:92px 0;scroll-margin-top:74px;position:relative}
section.alt{background:var(--board);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.head{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.head p{color:var(--mute);max-width:56ch;margin:12px 0 0}
.lede{color:var(--mute);max-width:62ch;font-size:1.08rem}

/* footprint cards */
.parts{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative}
.part{position:relative;background:var(--pad);border:2px solid var(--cyan);padding:26px 24px 22px;box-shadow:0 0 16px rgba(255,42,42,.22),inset 0 0 22px rgba(255,42,42,.05)}
.part:nth-child(even){border-color:var(--mag);box-shadow:0 0 16px rgba(208,0,63,.22),inset 0 0 22px rgba(208,0,63,.05)}
.part::before,.part::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;background:#000;color:var(--cyan)}
.part:nth-child(even)::before,.part:nth-child(even)::after{color:var(--mag)}
.part::before{top:-9px;left:-9px}.part::after{bottom:-9px;right:-9px}
.part .silk{position:absolute;top:8px;right:12px}
.part h3{font-size:1.3rem;font-weight:700;margin-bottom:8px;padding-right:28px}
.part p{color:var(--mute);margin:0 0 14px;font-size:1rem}
.part ul{color:var(--mute);margin:0 0 14px;padding-left:1.1em;font-size:1rem}
.part ul li::marker{color:var(--cyan)}
.part:nth-child(even) ul li::marker{color:var(--mag)}
.part .pr{font:600 .95rem var(--head);color:var(--cyan)}
.part:nth-child(even) .pr{color:var(--mag-text)}
.part.wide{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.part.wide p{margin:0}
.diag{margin-top:26px;color:var(--mute)}
.diag b{color:var(--ink)}

/* how: test points */
.tps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.tps::before{content:"";position:absolute;top:22px;left:22px;right:22px;height:3px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.tps li{position:relative;padding:62px 24px 0 0}
.tps li::before{content:"";position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;background:#000;border:3px solid var(--cyan);box-shadow:0 0 14px var(--cyan)}
.tps li:last-child::before{border-color:var(--mag);box-shadow:0 0 16px var(--mag)}
.tps .silk{display:block;margin-bottom:4px}
.tps h3{font-size:1.35rem;margin-bottom:6px}
.tps p{color:var(--mute);font-size:1rem}
.tps.two{grid-template-columns:repeat(2,1fr);max-width:820px}

/* business bus */
.busgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
.bus{list-style:none;margin:0;padding:0 0 0 46px;position:relative}
.bus::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;border-left:3px solid var(--mag);border-right:3px solid var(--mag);box-shadow:0 0 12px rgba(208,0,63,.55),inset 0 0 8px rgba(208,0,63,.4)}
.bus li{position:relative;padding:12px 0 12px 18px}
.bus li::before{content:"";position:absolute;left:-32px;top:25px;width:26px;height:3px;background:var(--mag);box-shadow:0 0 8px var(--mag)}
.bus li::after{content:"";position:absolute;left:-8px;top:19px;width:10px;height:10px;border-radius:50%;border:3px solid var(--mag);background:#000}
.bus b{font:700 1.12rem var(--head);display:block}
.bus span{color:var(--mute);font-size:.98rem}
.bus.c::before{border-color:var(--cyan);box-shadow:0 0 12px rgba(255,42,42,.5),inset 0 0 8px rgba(255,42,42,.35)}
.bus.c li::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.bus.c li::after{border-color:var(--cyan)}
.sticky{position:sticky;top:110px}
.sticky p{color:var(--mute)}

/* business groups (Business IT page) */
.groups{display:grid;grid-template-columns:1fr 1fr;gap:56px 60px}
.group h3{font-size:1.55rem;margin-bottom:6px}
.group > p{color:var(--mute);margin:0 0 18px;max-width:46ch}
.group .silk{display:block;margin-bottom:6px}

/* builds: chips */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:46px}
.chip{position:relative;background:#07070a;border:2px solid #2b2f3a;border-radius:4px;padding:30px 24px 24px;margin:14px}
.chip::before,.chip::after{content:"";position:absolute;left:18px;right:18px;height:12px;background:repeating-linear-gradient(90deg,#9aa4b4 0 8px,transparent 8px 22px)}
.chip::before{top:-14px}.chip::after{bottom:-14px}
.chip .dot{position:absolute;top:10px;left:10px;width:10px;height:10px;border-radius:50%;background:#1b1e27}
.chip h3{font-size:1.4rem;color:var(--cyan);text-shadow:0 0 10px rgba(255,42,42,.5);margin-bottom:8px}
.chip:nth-child(2) h3{color:var(--mag);text-shadow:0 0 10px rgba(208,0,63,.5)}
.chip p{color:var(--mute);margin:0 0 10px}
.chip ul{color:var(--mute);margin:0 0 12px;padding-left:1.1em}
.chip .pr{font:600 .95rem var(--head);color:var(--cyan);text-shadow:0 0 12px rgba(255,42,42,.6)}
.chip:nth-child(2) .pr{color:var(--mag-text);text-shadow:none}
.chip .silk{position:absolute;bottom:-38px;left:0}

/* pinout */
.pinout{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:center;margin-top:10px}
.pins{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pins li{display:flex;align-items:center;gap:12px;font-size:1rem}
.pins.l li{justify-content:flex-end;text-align:right}
.pins li::after,.pins.l li::after{content:"";flex:0 0 44px;height:3px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.pins.l li::after{order:2}
.pins.r li::after{order:-1;background:var(--mag);box-shadow:0 0 8px var(--mag)}
.ic{background:#07070a;border:2px solid #2b2f3a;padding:34px 30px;text-align:center;min-width:250px;position:relative}
.ic::before{content:"";position:absolute;top:12px;left:12px;width:12px;height:12px;border-radius:50%;background:#1b1e27}
.ic img{height:90px;width:auto;display:block;margin:0 auto 12px}
.ic b{display:block;font:700 1.2rem var(--head)}
.ic span{color:var(--silk);font:500 .9rem var(--head)}
.angle-big{font:700 clamp(1.5rem,3vw,2.3rem)/1.15 var(--head);max-width:28ch;margin:0 0 40px}

/* about: story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.story p{color:var(--mute)}
.story p.big{color:var(--ink);font:600 1.3rem/1.4 var(--head)}

/* call-to-action strip */
.cta-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--pad);border:2px solid var(--mag);padding:30px 32px;position:relative;box-shadow:0 0 18px rgba(208,0,63,.2)}
.cta-strip::before,.cta-strip::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid var(--mag);background:#000}
.cta-strip::before{top:-9px;left:-9px}.cta-strip::after{bottom:-9px;right:-9px}
.cta-strip h2{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.cta-strip p{color:var(--mute);margin:8px 0 0}
.cta-strip .acts{display:flex;gap:12px;flex-wrap:wrap}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:56px}
dl{display:grid;grid-template-columns:90px 1fr;gap:12px 16px;margin:20px 0 0;align-content:start}
dt{font:600 .95rem var(--head);color:var(--cyan)}dd{margin:0}
form{display:grid;gap:16px;background:var(--pad);border:2px solid var(--mag);padding:28px;box-shadow:0 0 18px rgba(208,0,63,.2);position:relative}
.header-pins{position:absolute;top:-8px;left:26px;width:140px;height:12px;background:repeating-linear-gradient(90deg,#9aa4b4 0 8px,transparent 8px 18px)}
.demo{font:700 1rem var(--head);color:var(--mag-text);margin:0}
label{display:grid;gap:6px;font:600 .95rem var(--head)}
input,select,textarea{font:inherit;color:var(--ink);background:#000;border:1px solid #2b3040;padding:11px 12px;width:100%;border-radius:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 12px rgba(255,42,42,.45)}
textarea{min-height:110px}
.mapbox{position:relative;margin-top:32px;min-height:260px;display:grid;place-items:center;text-align:center;background:var(--pad);border:2px dashed #3a4052;color:var(--mute);overflow:hidden;
  background-image:linear-gradient(rgba(255,42,42,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,42,42,.07) 1px,transparent 1px);background-size:32px 32px}
.mapbox b{display:block;font:700 1.1rem var(--head);color:var(--ink)}
.mapbox .pin{display:block;width:18px;height:18px;border-radius:50%;border:3px solid var(--mag);background:#000;box-shadow:0 0 14px var(--mag);margin:0 auto 12px}

/* 404 */
.notfound .links{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* footer */
footer{border-top:2px solid var(--cyan);box-shadow:0 0 18px rgba(255,42,42,.2);padding:40px 0 48px;color:var(--mute);font-size:.92rem;position:relative}
footer::before,footer::after{content:"";position:absolute;top:-8px;width:12px;height:12px;border-radius:50%;border:2px solid var(--cyan);background:#000}
footer::before{left:18px}footer::after{right:18px}
.foot{display:grid;grid-template-columns:auto 1fr auto;gap:28px 40px;align-items:start}
.foot img{height:56px;width:auto;display:block}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.foot ul a{color:var(--ink);text-decoration:none;font:600 .95rem var(--head)}
.foot ul a:hover{color:var(--mag)}
.foot address{font-style:normal;line-height:1.7}
.foot address a{color:var(--ink)}
.legal{grid-column:1/-1;margin:6px 0 0;padding-top:18px;border-top:1px solid var(--edge)}

@media (max-width:1020px){
  .parts{grid-template-columns:1fr 1fr}
  .busgrid,.contact,.story{grid-template-columns:1fr}
  .groups{grid-template-columns:1fr}
  .sticky{position:static}
  .chips{grid-template-columns:1fr;max-width:520px}
  .tps{grid-template-columns:1fr 1fr;row-gap:30px}
  .tps::before{display:none}
  .pinout{grid-template-columns:1fr;gap:26px}
  .pins.l li{justify-content:flex-start;text-align:left}
  .pins.l li::after{order:-1}
  .ic{order:-1;justify-self:start}
  .foot{grid-template-columns:1fr 1fr}
  .foot .logo{grid-column:1/-1}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .hero{min-height:0;display:block;padding:30px 0 40px}
  .hero .txt{padding:10px 0 0;background:none}
  .board{position:relative;width:190%;height:auto;margin-left:-88%;display:block;margin-top:-10px}
  .hero.inner{min-height:0;padding:34px 0 40px}
  .hero.inner .board{width:240%;margin-left:-135%;margin-top:0}
  .parts{grid-template-columns:1fr}
  .tps,.tps.two{grid-template-columns:1fr}
  section{padding:66px 0}
  .ic{min-width:0;width:100%}
  form{padding:20px}
  .bus{padding-left:40px}
  .cta-strip{padding:24px 20px}
  .foot{grid-template-columns:1fr}
  dl{grid-template-columns:76px 1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pz{animation:none;display:none}}

/* social links (TODO: real URLs) */
.social{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.social a{display:inline-block;padding:7px 14px;border:1px solid var(--cyan);color:var(--ink);text-decoration:none;font-weight:600;font-size:.85rem;box-shadow:0 0 10px rgba(255,42,42,.2)}
.social a:hover,.social a:focus-visible{background:rgba(255,42,42,.12)}

/* about: founder intro */
.meet{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:48px;align-items:start}
.meet-photo{position:relative;border:2px solid var(--cyan);padding:10px;background:var(--pad);box-shadow:0 0 18px rgba(255,42,42,.25)}
.meet-photo::before,.meet-photo::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid var(--cyan);background:#000}
.meet-photo::before{left:-8px;top:-8px}.meet-photo::after{right:-8px;bottom:-8px}
.meet-photo img{display:block;width:100%;height:auto}
.meet h2{margin:6px 0 12px}.meet-h{margin:26px 0 8px;font-size:1.25rem}
.meet p{color:var(--mute);margin:0 0 14px}.meet p.big{color:var(--ink)}
.meet .sig{color:var(--ink);font-weight:600;margin-top:20px}
/* about: flip cards */
.flips{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.flips.fam{grid-template-columns:repeat(3,minmax(0,1fr))}
.flips.pets{grid-template-columns:repeat(4,minmax(0,1fr))}
.flip{perspective:1200px}
.flip-in{position:relative;display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;background:none;cursor:pointer;color:inherit;font:inherit;transform-style:preserve-3d;transition:transform .6s}
.flip.on .flip-in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid var(--cyan);background:var(--pad);box-shadow:0 0 14px rgba(255,42,42,.22);overflow:hidden;display:flex;flex-direction:column}
.flip:nth-child(even) .face{border-color:var(--mag)}
.front img{flex:1;width:100%;min-height:0;object-fit:cover;display:block}
.front .cap{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-top:1px solid var(--edge)}
.front .cap b{font-size:1.1rem}.front .ico{color:var(--cyan);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
.back{transform:rotateY(180deg);justify-content:center;align-items:center;text-align:center;padding:24px;gap:16px}
.back .msg{font-size:1.15rem;color:var(--ink);line-height:1.45}.back b{color:var(--cyan)}
.flip.mem .face{border-color:#8a93a6;box-shadow:0 0 14px rgba(138,147,166,.2)}
.flip{position:relative}
.hint{position:absolute;left:0;right:0;bottom:-26px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-align:center}
.flip{margin-bottom:28px}
.flip-in:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
@media (prefers-reduced-motion:reduce){.flip-in{transition:none}}
@media (max-width:960px){.flips.pets{grid-template-columns:repeat(3,minmax(0,1fr))}.meet{grid-template-columns:1fr}.meet-photo{max-width:360px}}
@media (max-width:640px){.flips.fam,.flips.pets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.back{padding:12px;gap:8px}.back .msg{font-size:.9rem;line-height:1.35}.back .silk{font-size:.62rem}.back b{font-size:.9rem}}