/* BITLINK IT — gobitlink.com */
:root{
  --paper:#F1F2F3;
  --white:#FFFFFF;
  --ink:#141618;
  --mute:#5A6168;
  --rule:#CDD1D5;
  --black:#000000;
  --soft:#A8C8EC;   /* soft blue: fills, buttons, markers */
  --softer:#E4EEF9; /* soft blue tint: quiet backgrounds */
  --blue:#2B5E98;   /* soft blue, deepened for readable links */
  --wide:"Archivo",system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --max:1240px;
  --gut:clamp(20px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.125rem;line-height:1.62;font-optical-sizing:auto}
img{display:block;max-width:100%;height:auto}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--white);padding:8px 12px;z-index:10}

h1,h2,h3{font-family:var(--wide);font-stretch:112%;font-weight:700;line-height:1.05;letter-spacing:-.012em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.2vw,4.25rem)}
h2{font-size:clamp(1.75rem,3.2vw,2.6rem)}
h3{font-size:1.3rem;line-height:1.2}
p{margin:0 0 1em;max-width:62ch}
.lede{font-size:clamp(1.15rem,1.6vw,1.32rem);line-height:1.55;color:var(--ink)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* header */
.top{background:var(--white);position:sticky;top:0;z-index:20;box-shadow:0 1px 0 var(--rule)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:76px;flex-wrap:wrap}
.brand{display:block;margin-right:auto;padding:14px 0}
.brand img{height:28px;width:auto}
.nav{display:flex;gap:4px 26px;align-items:center;font-family:var(--wide);font-size:.98rem;font-weight:500}
.nav a{color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--rule)}
.nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.callbtn{font-family:var(--wide);font-weight:600;font-size:.98rem;background:var(--soft);color:var(--black);text-decoration:none;padding:10px 16px;border-radius:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.callbtn:hover{background:#8FB6E2}

/* the line: one motion moment */
.cables{height:5px;background:var(--white)}
.cables span{display:block;height:100%;background:var(--soft);transform-origin:left;animation:run 1.1s cubic-bezier(.2,.7,.2,1) .1s both}
.cables span + span{display:none}
@keyframes run{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.cables span{animation:none}}

/* bands */
.band{padding:clamp(56px,8vw,104px) 0}
.band--white{background:var(--white)}
.band--ink{background:var(--black);color:#E9ECEE}
.band--ink a{color:var(--soft)}
.band + .band--rule{border-top:1px solid var(--rule)}

/* home hero */
.hero{padding:clamp(40px,6vw,80px) 0 0;background:var(--white)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:end}
.hero-copy{padding-bottom:clamp(40px,6vw,80px)}
.hero h1{margin-bottom:.45em;max-width:14ch}
.hero .lede{max-width:52ch}
.hero-photo{align-self:stretch;min-height:420px;position:relative}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.phone{margin-top:28px}
.phone-label{font-family:var(--wide);font-size:1rem;font-weight:500;color:var(--mute);margin:0 0 2px}
.phone-num{display:inline-block;font-family:var(--wide);font-stretch:108%;font-weight:600;font-size:clamp(2.4rem,4.9vw,4.6rem);line-height:1;letter-spacing:-.02em;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.phone-num:hover{color:var(--blue)}
.phone-alt{font-family:var(--wide);font-size:1.05rem;margin:14px 0 0}

/* split: heading column + content column */
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,6vw,96px)}
.split h2{margin-bottom:.5em}
.split .side p{color:var(--mute)}

/* plain list with terms */
.terms{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.terms li{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:8px 32px;padding:18px 0;border-bottom:1px solid var(--rule)}
.terms b{font-family:var(--wide);font-weight:600;font-size:1.05rem;line-height:1.35}
.terms span{color:var(--ink)}

/* audience tiles */
.who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:44px}
.who a{color:inherit;text-decoration:none;display:block}
.who img{aspect-ratio:4/5;width:100%;object-fit:cover}
.who .bar{height:5px}
.who h3{margin:16px 0 6px}
.who p{font-size:1rem;color:var(--mute);margin:0}
.who a:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.who .bar{background:var(--soft)}

/* story band */
.story .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,6vw,96px);align-items:center}
.story img{width:100%;aspect-ratio:4/5;object-fit:cover}
.story p{font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.5;max-width:44ch}
.story .sig{font-family:var(--wide);font-size:1rem;color:#AEB6BD;margin-top:28px}

/* contact band */
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.contact h2{margin-bottom:.4em}
.contact dl{margin:0;font-family:var(--wide);display:grid;grid-template-columns:auto auto;gap:6px 22px;font-size:1.1rem}
.contact dt{color:var(--mute)}
.contact dd{margin:0;font-weight:600}
.contact dd a{color:var(--ink)}

/* page header for inner pages */
.pagehead{background:var(--white);padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px)}
.pagehead h1{margin-bottom:.4em;max-width:18ch}

/* services */
.group{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,6vw,96px);padding:36px 0}
.group + .group{border-top:1px solid var(--rule)}
.group h2{font-size:clamp(1.4rem,2.2vw,1.8rem)}
.group .note{color:var(--mute);font-size:1rem;margin-top:10px}
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:16px;padding:20px 0;border-top:1px solid var(--rule)}
.steps li::before{content:counter(s);font-family:var(--wide);font-stretch:118%;font-weight:600;font-size:1.25rem;line-height:1;color:var(--black);background:var(--soft);width:2.4rem;height:2.4rem;display:grid;place-items:center;font-size:1.25rem}
.steps b{font-family:var(--wide);font-weight:600;display:block;margin-bottom:4px}
.steps p{margin:0}
.media-wide{margin-top:clamp(40px,6vw,72px)}
.media-wide img{width:100%;aspect-ratio:21/8;object-fit:cover}
.outside{columns:2;column-gap:40px;padding-left:1.1em;margin:0}
.outside li{margin-bottom:8px;break-inside:avoid}

/* who we serve page */
.jump{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:28px;font-family:var(--wide);font-weight:600}
.jump a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.jump a::before{content:"";width:22px;height:5px;background:var(--soft)}
.jump a:hover{text-decoration:underline}
.seg{scroll-margin-top:84px;padding:clamp(56px,8vw,104px) 0;scroll-margin-top:12px}
.seg:nth-of-type(even){background:var(--white)}
.seg .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:start}
.seg.flip .media{order:2}
.seg .media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.seg .media .bar{height:5px;background:var(--soft)}
.seg .media .inset{width:46%;aspect-ratio:1;margin:-18% 0 0 auto;position:relative;border:8px solid var(--paper)}
.seg:nth-of-type(even) .media .inset{border-color:var(--white)}
.seg h2{margin-bottom:.45em}
.seg .kind{font-family:var(--wide);color:var(--mute);font-size:1rem;margin-bottom:18px}
.seg h3{margin:30px 0 4px;font-size:1.1rem}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{padding:12px 0 12px 26px;border-bottom:1px solid var(--rule);position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:1.1em;width:12px;height:5px;background:var(--soft)}
.ticks b{font-family:var(--wide);font-weight:600}

/* about */
.about-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,6vw,96px)}
.about-body .prose p{max-width:60ch}
.about-body figure{margin:0}
.about-body figcaption{font-size:.95rem;color:var(--mute);margin-top:10px}
.promises{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px);margin-top:28px}
.promises div{padding:22px 0;border-top:1px solid var(--rule)}
.promises h3{margin-bottom:8px}
.promises p{margin:0}
.facts{font-family:var(--wide);display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0}
.facts dt{color:var(--mute)}
.facts dd{margin:0;font-weight:600}

/* footer */
.foot{background:var(--black);color:#C6CDD3;font-family:var(--wide);font-size:.98rem;padding:56px 0 36px}
.foot .wrap{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:32px}
.foot img{height:20px;width:auto;margin-bottom:16px}
.foot a{color:#E9ECEE;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot h2{font-size:1rem;font-stretch:100%;color:#8E98A1;font-weight:500;margin-bottom:10px}
.foot .fine{grid-column:1/-1;border-top:1px solid #2E3236;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.88rem;color:#8E98A1}
.foot .fine a{color:#8E98A1}

/* responsive */
@media (max-width:980px){
  .who{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.group,.about-body{grid-template-columns:1fr}
  .seg .wrap,.story .wrap{grid-template-columns:1fr}
  .story img{aspect-ratio:16/10}
  .seg.flip .media{order:0}
  .promises{grid-template-columns:1fr}
}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-copy{padding-bottom:0}
  .hero-photo{min-height:0}
  .hero-photo img{position:static;aspect-ratio:16/9}
  .contact .wrap{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .foot .wrap > div:first-child{grid-column:1/-1}
  .outside{columns:1}
}
@media (max-width:640px){
  .top .wrap{gap:0 18px;padding-bottom:10px}
  .nav{order:3;width:100%;overflow-x:auto;gap:22px;font-size:.95rem}
  .callbtn{padding:8px 12px;font-size:.9rem}
  .terms li{grid-template-columns:1fr;gap:2px}
  .who{grid-template-columns:1fr 1fr;gap:20px 14px}
  .who img{aspect-ratio:1}
  .who p{display:none}
  .contact dl{grid-template-columns:1fr}
  .contact dt{margin-top:8px}
}

/* added: buttons, pains, faq, services index, contact page */
.btn{display:inline-block;font-family:var(--wide);font-weight:600;font-size:1.02rem;text-decoration:none;padding:13px 20px;border-radius:3px;border:2px solid var(--black)}
.btn--solid{background:var(--black);color:var(--white)}
.btn--solid:hover{background:#2A2D30;border-color:#2A2D30}
.btn--line{color:var(--black);background:transparent}
.btn--line:hover{background:var(--softer)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px);margin-top:36px}
.pains div{padding:22px 0;border-top:2px solid var(--black)}
.pains h3{margin-bottom:8px}
.pains p{margin:0;color:var(--mute)}
.pains p b{color:var(--ink);font-weight:600}
.area{font-family:var(--wide);font-size:1rem;color:var(--mute);line-height:1.7;max-width:70ch}
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);border-top:1px solid var(--rule)}
.svc div{padding:22px 0;border-bottom:1px solid var(--rule)}
.svc h3{font-size:1.1rem;margin-bottom:6px}
.svc p{margin:0;font-size:1rem}
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{font-family:var(--wide);font-weight:600;font-size:1.12rem;padding:20px 40px 20px 0;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:1.5rem;font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:20px;margin:0}
.contact-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,6vw,96px)}
.bigline{font-family:var(--wide);font-stretch:108%;font-weight:600;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.1;color:var(--black);text-decoration:none;display:inline-block;margin:4px 0 22px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bigline:hover{color:var(--blue)}
.tint{background:var(--softer);padding:clamp(24px,3vw,36px)}
.tint h2{font-size:1.5rem;margin-bottom:12px}
.tint ul{margin:0;padding-left:1.1em}
.tint li{margin-bottom:6px}
@media (max-width:980px){.svc{grid-template-columns:1fr 1fr}.contact-grid{grid-template-columns:1fr}}
@media (max-width:640px){.svc,.pains{grid-template-columns:1fr}}

/* work-in-progress robots and banner */
.dust{background:var(--softer);border-bottom:1px solid var(--rule);background-image:repeating-linear-gradient(135deg,var(--black) 0 10px,var(--soft) 10px 20px);background-size:100% 6px;background-repeat:no-repeat;background-position:bottom}
.dust .wrap{display:flex;align-items:center;gap:14px;padding-top:8px;padding-bottom:14px}
.dust img{height:58px;width:auto;flex:none}
.dust p{margin:0;font-family:var(--wide);font-size:.98rem;max-width:none}
.dust a{color:var(--black);font-weight:600}
.bot{pointer-events:none;user-select:none;height:auto}
.hero-photo{position:relative}
.hero-photo .bot-level{position:absolute;inset:auto auto -2px -120px;width:190px;height:auto;z-index:2;object-fit:contain}
.bot-drill{width:150px;margin-top:28px}
.pagehead{position:relative;overflow:hidden}
.bot-swing{position:absolute;right:clamp(16px,7vw,120px);top:0;width:clamp(150px,18vw,230px);transform-origin:50% 0;animation:sway 3.6s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.bot-swing{animation:none}}
.contact{position:relative;overflow:hidden}
.contact .bot-broom{position:absolute;left:clamp(8px,3vw,40px);bottom:0;width:150px;opacity:1}
.contact .wrap{position:relative;z-index:1}
.foot .wrap{position:relative}
.foot .bot-hammer{position:absolute;right:var(--gut);bottom:50px;height:auto;width:80px;margin:0}
@media (min-width:821px){.contact{padding-bottom:clamp(120px,12vw,150px)}}
@media (max-width:1100px){.pagehead .wrap{padding-right:calc(var(--gut) + 180px)}}
@media (max-width:820px){
  .hero-photo .bot-level{inset:auto 8px -6px auto;width:140px}
  .bot-swing{width:120px;right:8px}
  .pagehead .wrap{padding-right:var(--gut)}
  .pagehead{padding-top:150px}
  .contact .bot-broom{display:none}
  .foot .bot-hammer{display:none}
}
@media (max-width:640px){.dust img{height:46px}.dust p{font-size:.9rem}}