/* ============================================================
AGSL Technology Consulting — Careers stylesheet
Brand: Exo (headings), Outfit (body)
Palette: Coral #F9603D · Gold #FFC33E · Sky #49B8E8 · Black #0A0A0A · Off-white #F1F1F1
============================================================ */
:root{
--coral:#F9603D;
--coral-deep:#D6431D; /* WCAG AA on white for text-bearing fills */
--gold:#FFC33E;
--sky:#49B8E8;
--black:#0A0A0A;
--ink:#141414;
--offwhite:#F1F1F1;
--white:#FFFFFF;
--muted:#6b6b6b;
--line:rgba(0,0,0,.08);
--line-dark:rgba(255,255,255,.09);
--radius:6px;
--radius-lg:10px;
--maxw:1180px;
--nav-h:78px;
--font-head:'Exo',system-ui,sans-serif;
--font-body:'Outfit',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--font-body);
background:var(--offwhite);
color:var(--ink);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:800;line-height:1.12;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* skip link */
.skip{position:absolute;left:-999px;top:0;background:var(--coral-deep);color:#fff;padding:.6rem 1rem;z-index:999;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}
/* ---------- NAV ---------- */
.nav{
background:var(--black);
height:var(--nav-h);
position:sticky;top:0;z-index:100;
border-bottom:1px solid var(--line-dark);
}
.nav-inner{max-width:var(--maxw);margin:0 auto;height:100%;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.nav-logo .mark{height:46px;width:auto}
.nav-logo .word{height:44px;width:auto}
.nav-logo img.solo{height:38px;width:auto}
.nav-links{display:flex;align-items:center;gap:1.75rem;list-style:none}
.nav-links a{color:rgba(255,255,255,.62);font-size:.82rem;text-decoration:none;letter-spacing:.03em;transition:color .15s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff}
.nav-cta{background:var(--coral-deep);color:#fff!important;padding:.55rem .95rem;border-radius:var(--radius);font-weight:600;font-size:.8rem;letter-spacing:.03em}
.nav-cta:hover{background:#b83614}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer}
/* ---------- PAGE HERO (dark band) ---------- */
.hero{background:var(--black);color:#fff;padding:3.25rem 0 2.75rem;position:relative;overflow:hidden}
.hero.skyline{background-image:linear-gradient(90deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.82) 40%,rgba(10,10,10,.5) 70%,rgba(10,10,10,.7) 100%),url('careers-skyline.jpg');background-size:cover;background-position:center bottom}
.hero.skyline .wrap{position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--coral)}
.eyebrow span{font-family:var(--font-head);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--coral)}
.hero h1{font-size:clamp(1.9rem,4.5vw,3rem);font-weight:900;max-width:16ch}
.hero h1 em{color:var(--gold);font-style:normal}
.hero p.lede{margin-top:1rem;color:rgba(255,255,255,.62);max-width:56ch;font-size:1.02rem}
.hero-stats{display:flex;gap:2.5rem;margin-top:2.25rem;padding-top:2rem;border-top:1px solid var(--line-dark);flex-wrap:wrap}
.hero-stats .num{font-family:var(--font-head);font-size:1.7rem;font-weight:900;color:var(--gold)}
.hero-stats .lbl{font-size:.72rem;color:rgba(255,255,255,.4);letter-spacing:.06em;margin-top:.15rem;text-transform:uppercase}
/* ---------- EVP STRIP ---------- */
.evp{background:var(--white);border-bottom:1px solid var(--line)}
.evp-inner{max-width:var(--maxw);margin:0 auto;padding:1rem 1.5rem;display:flex;gap:2rem;flex-wrap:wrap;justify-content:center}
.evp-item{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--muted)}
.evp-item svg{width:18px;height:18px;stroke:var(--coral);flex-shrink:0}
/* ---------- SEARCH BAR ---------- */
.searchbar{background:var(--white);border-bottom:1px solid var(--line)}
.searchbar-inner{max-width:var(--maxw);margin:0 auto;padding:.9rem 1.5rem;display:flex;gap:.65rem;flex-wrap:wrap}
.searchbar input[type=text]{flex:1;min-width:180px}
.field{padding:.6rem .7rem;border:1px solid rgba(0,0,0,.14);border-radius:var(--radius);font-family:inherit;font-size:.88rem;color:var(--ink);background:#fff;outline:none;transition:border-color .12s,box-shadow .12s}
.field:focus{border-color:var(--coral-deep);box-shadow:0 0 0 3px rgba(214,67,29,.12)}
.btn{cursor:pointer;font-family:var(--font-head);font-weight:700;border-radius:var(--radius);border:1px solid transparent;font-size:.85rem;letter-spacing:.03em;transition:background .13s,color .13s,border-color .13s;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;justify-content:center}
.btn-primary{background:var(--coral-deep);color:#fff;padding:.65rem 1.2rem}
.btn-primary:hover{background:#b83614}
.btn-outline{background:transparent;color:var(--coral-deep);border-color:var(--coral-deep);padding:.6rem 1.1rem}
.btn-outline:hover{background:var(--coral-deep);color:#fff}
.btn-ghost-dark{background:transparent;color:rgba(255,255,255,.65);border-color:rgba(255,255,255,.22);padding:.62rem 1rem}
.btn-ghost-dark:hover{border-color:#fff;color:#fff}
/* ---------- LISTINGS LAYOUT ---------- */
.listings{max-width:var(--maxw);margin:0 auto;padding:1.75rem 1.5rem 3rem;display:grid;grid-template-columns:230px 1fr;gap:2rem}
.filters h2{font-family:var(--font-head);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#999;margin-bottom:.7rem}
.filter-group{margin-bottom:1.6rem}
.filter-item{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.filter-item input{accent-color:var(--coral-deep);width:15px;height:15px;cursor:pointer}
.filter-item label{font-size:.88rem;cursor:pointer;flex:1}
.filter-item .cnt{font-size:.72rem;color:#aaa;background:var(--offwhite);padding:.05rem .45rem;border-radius:10px}
.filter-divider{height:1px;background:var(--line);margin:1.2rem 0}
.list-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.list-count{font-size:.88rem;color:var(--muted)}
.list-count strong{color:var(--ink)}
/* ---------- JOB CARD ---------- */
.jobcard{display:block;background:#fff;border:1px solid var(--line);border-left:3px solid transparent;border-radius:var(--radius-lg);padding:1.25rem 1.4rem;margin-bottom:.85rem;text-decoration:none;color:inherit;transition:border-color .14s,box-shadow .14s}
.jobcard:hover{border-color:var(--coral);box-shadow:0 3px 16px rgba(249,96,61,.11)}
.jobcard.pinned{border-left-color:var(--coral-deep)}
.badge{display:inline-block;font-family:var(--font-head);font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.2rem .55rem;border-radius:4px}
.badge-client{background:#EBF4FA;color:#0B557A;margin-bottom:.55rem}
.badge-new{background:#FFF0E8;color:#B84500}
.jobcard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.6rem}
.jobcard-head h3{font-size:1.12rem;font-weight:800}
.jobcard-meta{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin-bottom:.7rem}
.metaitem{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--muted)}
.metaitem svg{width:15px;height:15px;stroke:var(--coral)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.8rem}
.tag{font-size:.72rem;padding:.15rem .5rem;background:var(--offwhite);border:1px solid var(--line);border-radius:4px;color:#666}
.jobcard-foot{display:flex;justify-content:space-between;align-items:center;padding-top:.75rem;border-top:1px solid var(--line)}
.deadline{font-size:.76rem;color:#999}
.deadline strong{color:#B84500}
.callout{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem;text-align:center;margin-top:1.25rem}
.callout p{font-size:.9rem;color:var(--muted);margin-bottom:.85rem;max-width:60ch;margin-inline:auto}
/* ---------- JOB DETAIL ---------- */
.crumb{background:#fff;border-bottom:1px solid var(--line)}
.crumb-inner{max-width:var(--maxw);margin:0 auto;padding:.7rem 1.5rem;font-size:.8rem;color:#999}
.crumb-inner a{color:var(--coral-deep);text-decoration:none}
.crumb-inner a:hover{text-decoration:underline}
.detail-hero{background:var(--black);color:#fff;padding:2.5rem 0}
.detail-hero .meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.1rem}
.detail-hero .meta .metaitem{color:rgba(255,255,255,.6)}
.detail-hero .meta .metaitem svg{stroke:var(--gold)}
.detail-actions{margin-top:1.5rem;display:flex;gap:.75rem;flex-wrap:wrap}
.detail-body{max-width:var(--maxw);margin:0 auto;padding:2rem 1.5rem 3rem;display:grid;grid-template-columns:1fr 300px;gap:2.5rem}
.section{margin-bottom:1.9rem}
.section h2{font-family:var(--font-head);font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#999;margin-bottom:.85rem;padding-bottom:.55rem;border-bottom:1px solid var(--line)}
.section p{color:#333}
.section ul{padding-left:1.2rem;color:#3a3a3a}
.section ul li{margin-bottom:.35rem}
.techcloud{display:flex;flex-wrap:wrap;gap:.4rem}
.ttech{font-size:.76rem;padding:.2rem .6rem;background:#EAF2FA;color:#0B4A7A;border-radius:4px;font-weight:500}
.note{font-size:.82rem;color:#8a8a8a;font-style:italic;margin-top:.6rem}
.aside-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1rem}
.aside-card h3{font-family:var(--font-head);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#999;margin-bottom:.85rem}
.inforow{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.5rem;font-size:.84rem}
.inforow .k{color:var(--muted)}
.inforow .v{font-weight:600;text-align:right}
.apply-dark{background:var(--black);color:#fff;border-radius:var(--radius-lg);padding:1.25rem;text-align:center}
.apply-dark p{font-size:.82rem;color:rgba(255,255,255,.5);margin-bottom:.9rem;line-height:1.55}
.apply-dark .btn-primary{width:100%}
.apply-dark .email{margin-top:.75rem;font-size:.72rem;color:rgba(255,255,255,.4)}
.apply-dark .email a{color:var(--gold)}
.apply-dark .dl{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--line-dark);font-size:.7rem;color:rgba(255,255,255,.3)}
/* ---------- APPLY FORM ---------- */
.form-hero{background:var(--black);color:#fff;padding:1.75rem 0}
.form-hero .lbl{font-family:var(--font-head);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);font-weight:700;margin-bottom:.35rem}
.form-hero h1{font-size:1.4rem;font-weight:900}
.form-hero .sub{font-size:.82rem;color:rgba(255,255,255,.45);margin-top:.4rem}
.form-body{max-width:var(--maxw);margin:0 auto;padding:2rem 1.5rem 3rem;display:grid;grid-template-columns:1fr 260px;gap:2.5rem}
.steps{display:flex;align-items:center;gap:.5rem;margin-bottom:1.75rem;list-style:none;padding:0}
.steps li{list-style:none}
.step{display:flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:600}
.step .dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:.72rem;font-weight:700;background:rgba(0,0,0,.1);color:#999}
.step.active .dot{background:var(--coral-deep);color:#fff}
.step.pending{color:#bbb}
.step-line{flex:1;height:1px;background:var(--line)}
fieldset{border:0;margin-bottom:1.5rem}
legend{font-family:var(--font-head);font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#999;margin-bottom:1rem;padding-bottom:.55rem;border-bottom:1px solid var(--line);width:100%}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.form-grid.one{grid-template-columns:1fr}
.formfield{display:flex;flex-direction:column;gap:.35rem}
.formfield label{font-size:.8rem;font-weight:600;color:#555}
.formfield label .req{color:var(--coral-deep)}
.formfield input,.formfield select,.formfield textarea{width:100%;padding:.6rem .7rem;border:1px solid rgba(0,0,0,.14);border-radius:var(--radius);font-family:inherit;font-size:.9rem;color:var(--ink);background:#fff;outline:none;transition:border-color .12s,box-shadow .12s}
.formfield input:focus,.formfield select:focus,.formfield textarea:focus{border-color:var(--coral-deep);box-shadow:0 0 0 3px rgba(214,67,29,.12)}
.formfield textarea{resize:vertical;min-height:96px;line-height:1.5}
.upload{border:1.6px dashed rgba(0,0,0,.2);border-radius:var(--radius);padding:1.5rem;text-align:center;cursor:pointer;transition:border-color .13s,background .13s;display:block}
.upload:hover{border-color:var(--coral-deep);background:#FFF6F3}
.upload svg{width:28px;height:28px;stroke:#bbb;margin:0 auto .5rem}
.upload .u-main{font-size:.88rem;color:#666}
.upload .u-main strong{color:var(--coral-deep)}
.upload .u-types{font-size:.74rem;color:#aaa;margin-top:.3rem}
.upload input[type=file]{display:none}
.upload .u-file{display:none;margin-top:.5rem;font-size:.82rem;color:var(--coral-deep);font-weight:600}
.consent{background:var(--offwhite);border-radius:var(--radius);padding:1.1rem;margin-top:1rem}
.consent .c-item{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.7rem}
.consent .c-item:last-child{margin-bottom:0}
.consent input[type=checkbox]{margin-top:.2rem;width:15px;height:15px;accent-color:var(--coral-deep);flex-shrink:0;cursor:pointer}
.consent label{font-size:.8rem;color:#555;line-height:1.55;cursor:pointer}
.consent label a{color:var(--coral-deep)}
.submit-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line);flex-wrap:wrap}
.submit-note{font-size:.76rem;color:#999;max-width:44ch}
.submit-note .req{color:var(--coral-deep)}
.err{color:var(--coral-deep);font-size:.78rem;margin-top:.3rem;display:none}
.formfield.invalid input,.formfield.invalid select{border-color:var(--coral-deep)}
.formfield.invalid .err{display:block}
.form-aside .aside-card p{font-size:.82rem;color:var(--muted);line-height:1.55}
.form-aside .fsc-row{display:flex;gap:.5rem;font-size:.8rem;margin-bottom:.4rem;color:#444}
.form-aside .fsc-row svg{width:15px;height:15px;stroke:var(--coral);flex-shrink:0;margin-top:.15rem}
/* ---------- SUCCESS ---------- */
.success{max-width:560px;margin:0 auto;text-align:center;padding:3.5rem 1.5rem}
.success .ic{width:64px;height:64px;background:#E8F5EC;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem}
.success .ic svg{width:30px;height:30px;stroke:#2A7A3B}
.success h1{font-size:1.4rem;font-weight:900;margin-bottom:.6rem}
.success p{color:var(--muted);margin-bottom:1.2rem}
/* ---------- FOOTER ---------- */
.footer{background:var(--black);color:rgba(255,255,255,.55);padding:2.5rem 0 1.5rem;font-size:.82rem}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2rem}
.footer img{height:26px;margin-bottom:.85rem}
.footer h4{font-family:var(--font-head);color:#fff;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.85rem;font-weight:700}
.footer a{color:rgba(255,255,255,.55);text-decoration:none;display:block;margin-bottom:.45rem}
.footer a:hover{color:#fff}
.footer .legal{max-width:var(--maxw);margin:2rem auto 0;padding:1.25rem 1.5rem 0;border-top:1px solid var(--line-dark);font-size:.74rem;color:rgba(255,255,255,.35);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
.listings{grid-template-columns:1fr}
.filters{order:2}
.detail-body,.form-body{grid-template-columns:1fr}
.footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
.nav-links{display:none;position:absolute;top:var(--nav-h);left:0;right:0;background:var(--black);flex-direction:column;gap:0;padding:.5rem 0;border-bottom:1px solid var(--line-dark)}
.nav-links.open{display:flex}
.nav-links li{width:100%}
.nav-links a{display:block;padding:.85rem 1.5rem}
.nav-cta{margin:.5rem 1.5rem;display:inline-block}
.nav-toggle{display:block}
.form-grid{grid-template-columns:1fr}
.footer-inner{grid-template-columns:1fr}
.steps .step span{display:none}
}
/* ============================================================
HOMEPAGE
============================================================ */
/* ---------- HERO ---------- */
.home-hero{position:relative;background:var(--black);color:#fff;overflow:hidden;min-height:560px;display:flex;align-items:center}
/* split hero: text left, image right (home + inner pages) */
.home-hero.split{min-height:auto;display:block}
.hero.split{padding:0}
.hero-split{display:grid;grid-template-columns:1.02fr .98fr;gap:2.5rem;align-items:center;padding:2.25rem 1.5rem}
.hero-media img{width:100%;height:auto;display:block;border-radius:12px}
.hero-text{max-width:100%}
.hero.split .eyebrow{margin-bottom:.75rem}
.hero.split h1{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.hero.split .lede{margin-top:.85rem}
.hero.split .detail-actions{margin-top:1.1rem}
.home-hero .bg{position:absolute;inset:0;background-image:url('hero-skyline.jpg');background-size:cover;background-position:center right;z-index:0}
/* left-to-right scrim for headline legibility (locked decision) */
.home-hero .scrim{position:absolute;inset:0;z-index:1;
background:linear-gradient(90deg,rgba(10,10,10,.96) 0%,rgba(10,10,10,.9) 30%,rgba(10,10,10,.55) 55%,rgba(10,10,10,.25) 80%,rgba(10,10,10,.4) 100%);}
.home-hero .scrim-top{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,0) 40%,rgba(10,10,10,.5))}
.home-hero .wrap{position:relative;z-index:2;padding:4rem 1.5rem;width:100%;text-align:left}
.home-hero .tagline{font-family:var(--font-head);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin-bottom:1.1rem}
.home-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:900;max-width:15ch;line-height:1.08}
.home-hero h1 .warm{color:#fff}
.home-hero h1 .accent{color:var(--gold)}
.home-hero p.lede{margin-top:1.25rem;color:rgba(255,255,255,.72);max-width:46ch;font-size:1.05rem;line-height:1.6}
.home-hero .cta-row{margin-top:1.75rem;display:flex;gap:.85rem;flex-wrap:wrap}
.btn-lg{padding:.8rem 1.4rem;font-size:.92rem}
/* ---------- CREDIBILITY BAR ---------- */
.cred{background:#0d0d0d;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.cred-inner{max-width:var(--maxw);margin:0 auto;padding:1rem 1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:center}
.cred-item{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:rgba(255,255,255,.72);white-space:nowrap}
.cred-item svg{width:17px;height:17px;stroke:var(--coral);flex-shrink:0}
.cred-item strong{color:#fff;font-weight:600}
/* ---------- SECTION SCAFFOLD ---------- */
.section-band{padding:3.25rem 0}
.band-light{background:var(--offwhite)}
.band-white{background:#fff}
.band-dark{background:var(--black);color:#fff}
.sec-eyebrow{font-family:var(--font-head);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin-bottom:.85rem}
.sec-head{display:grid;grid-template-columns:1.15fr 1fr;gap:2rem;align-items:end;margin-bottom:2rem}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;max-width:18ch}
.band-dark .sec-head h2{color:#fff}
.sec-head p{color:var(--muted);font-size:.98rem;line-height:1.6}
.band-dark .sec-head p{color:rgba(255,255,255,.6)}
/* ---------- TECHTILE GRID (CSS rebuild of raster tiles) ---------- */
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.techtile{position:relative;background:linear-gradient(160deg,#181818 0%,#0e0e0e 100%);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-lg);padding:1.5rem 1.35rem;overflow:hidden;transition:transform .16s,border-color .16s;text-decoration:none;color:#fff;display:block}
/* coral->gold bottom edge glow echoing the raster tiles */
.techtile::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:2px;border-radius:2px;
background:linear-gradient(90deg,transparent,var(--coral),var(--gold),transparent);opacity:.55;transition:opacity .16s}
/* faint circuit texture */
.techtile::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
background:
radial-gradient(circle at 90% 10%,rgba(73,184,232,.06),transparent 40%),
radial-gradient(circle at 10% 90%,rgba(249,96,61,.06),transparent 40%);}
.techtile:hover{transform:translateY(-3px);border-color:rgba(249,96,61,.4)}
.techtile:hover::after{opacity:1}
.techtile .ico{width:34px;height:34px;margin-bottom:1rem;position:relative;z-index:1}
.techtile .ico svg{width:34px;height:34px;stroke:var(--coral);stroke-width:1.6;fill:none}
.techtile h3{font-family:var(--font-head);font-size:1.02rem;font-weight:700;margin-bottom:.5rem;position:relative;z-index:1;line-height:1.2}
.techtile p{font-size:.84rem;color:rgba(255,255,255,.6);line-height:1.55;position:relative;z-index:1}
.techtile .arrow{margin-top:.9rem;color:var(--coral);position:relative;z-index:1;display:inline-block}
/* ---------- PARTNERS (procurement strength) ---------- */
.partner-split{display:grid;grid-template-columns:.9fr 1.4fr;gap:2.5rem;align-items:center}
.partner-panel{background:#111;border:1px solid var(--line-dark);border-radius:var(--radius-lg);padding:1.75rem}
.partner-label{font-family:var(--font-head);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:1rem}
.partner-row{display:flex;flex-wrap:wrap;gap:1.75rem;align-items:center;margin-bottom:1.5rem}
.partner-row:last-child{margin-bottom:0}
.pwordmark{font-family:var(--font-head);font-weight:800;font-size:1.15rem;color:rgba(255,255,255,.85);letter-spacing:.01em}
.pwordmark.dell{letter-spacing:.18em}
.pwordmark small{font-size:.6rem;display:block;letter-spacing:.1em;color:rgba(255,255,255,.4);font-weight:600}
/* ---------- SOLUTION PACKAGES ---------- */
.pkg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.pkg{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.35rem 1.15rem;transition:box-shadow .16s,transform .16s;text-decoration:none;color:inherit;display:block}
.pkg:hover{box-shadow:0 6px 22px rgba(0,0,0,.08);transform:translateY(-3px)}
.pkg .ico{width:30px;height:30px;margin-bottom:.85rem}
.pkg .ico svg{width:30px;height:30px;stroke:var(--coral);stroke-width:1.6;fill:none}
.pkg h3{font-family:var(--font-head);font-size:.92rem;font-weight:700;margin-bottom:.5rem;line-height:1.25}
.pkg p{font-size:.8rem;color:var(--muted);line-height:1.5}
.pkg .arrow{margin-top:.75rem;color:var(--coral);display:inline-block}
/* ---------- WHO WE SERVE ---------- */
.serve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.serve-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem 1.3rem;border-top:3px solid var(--coral)}
.serve-card h3{font-family:var(--font-head);font-size:1rem;font-weight:700;margin-bottom:.5rem;display:flex;align-items:center;gap:.55rem}
.serve-card h3 svg{width:20px;height:20px;stroke:var(--coral);stroke-width:1.7;fill:none;flex-shrink:0}
.serve-card p{font-size:.85rem;color:var(--muted);line-height:1.55}
/* ---------- FINAL CTA ---------- */
.final-cta{background:var(--black);color:#fff;padding:3rem 0}
.final-cta-inner{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:center}
.final-cta h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:900}
.final-cta p{color:rgba(255,255,255,.6);margin-top:.6rem;max-width:46ch}
.final-cta .cta-row{display:flex;gap:.85rem;flex-wrap:wrap;justify-content:flex-end}
.btn-dark-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);padding:.8rem 1.4rem}
.btn-dark-outline:hover{border-color:#fff;background:rgba(255,255,255,.06)}
/* ---------- RESPONSIVE (homepage) ---------- */
@media (max-width:1000px){
.hero-split{grid-template-columns:1fr;gap:1.75rem}
.hero-media{order:-1}
.tile-grid{grid-template-columns:repeat(2,1fr)}
.pkg-grid{grid-template-columns:repeat(3,1fr)}
.serve-grid{grid-template-columns:repeat(2,1fr)}
.partner-split{grid-template-columns:1fr}
.sec-head{grid-template-columns:1fr}
.final-cta-inner{grid-template-columns:1fr}
.final-cta .cta-row{justify-content:flex-start}
}
@media (max-width:640px){
.tile-grid{grid-template-columns:1fr 1fr}
.pkg-grid{grid-template-columns:1fr}
.serve-grid{grid-template-columns:1fr}
.home-hero .scrim{background:linear-gradient(180deg,rgba(10,10,10,.75),rgba(10,10,10,.92))}
.cred-inner{justify-content:flex-start}
}
/* ============================================================
INNER PAGES — shared components
============================================================ */
/* process rail (delivery model / cyber pillars) */
.proc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.proc-step{background:rgba(255,255,255,.03);border:1px solid var(--line-dark);border-radius:var(--radius-lg);padding:1.35rem 1.2rem;position:relative}
.proc-step .proc-num{font-family:var(--font-head);font-weight:900;font-size:1.5rem;color:var(--coral);opacity:.9;margin-bottom:.6rem;line-height:1}
.proc-step h3{font-family:var(--font-head);font-size:1rem;font-weight:700;color:#fff;margin-bottom:.5rem;line-height:1.2}
.proc-step p{font-size:.84rem;color:rgba(255,255,255,.6);line-height:1.55}
/* when only 3 pillars */
.proc-grid.three{grid-template-columns:repeat(3,1fr)}
/* matrix table (who we serve use-cases) */
.table-wrap{overflow-x:auto;border:1px solid var(--line-dark);border-radius:var(--radius-lg)}
table.matrix{width:100%;border-collapse:collapse;font-size:.88rem;min-width:640px}
table.matrix th[scope=col]{text-align:left;font-family:var(--font-head);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding:.9rem 1.1rem;border-bottom:1px solid var(--line-dark)}
table.matrix th[scope=row]{text-align:left;font-weight:700;color:#fff;padding:.9rem 1.1rem;vertical-align:top;width:22%}
table.matrix td{color:rgba(255,255,255,.65);padding:.9rem 1.1rem;vertical-align:top;line-height:1.5}
table.matrix tbody tr{border-bottom:1px solid rgba(255,255,255,.05)}
table.matrix tbody tr:last-child{border-bottom:0}
/* split feature (AGSL + Protexxa, procurement intro reuse) */
.split-feature{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center}
.feature-list ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.feature-list.wide ul{grid-template-columns:1fr 1fr}
.feature-list li{position:relative;padding-left:1.6rem;font-size:.9rem;line-height:1.5}
.band-light .feature-list li{color:#333}
.band-dark .feature-list li{color:rgba(255,255,255,.75)}
.feature-list li::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:2px;background:linear-gradient(135deg,var(--coral),var(--gold))}
/* ecosystem centerpiece (what we do) */
.eco-centerpiece{max-width:920px;margin:0 auto;border-radius:14px;overflow:hidden;border:1px solid var(--line-dark)}
.eco-centerpiece img{width:100%;display:block}
/* contact */
.contact-split{display:grid;grid-template-columns:1.4fr .9fr;gap:2.5rem;align-items:start}
.contact-form fieldset{border:0}
.contact-aside .aside-card p{font-size:.88rem;color:var(--muted);line-height:1.5}
.contact-aside .aside-card p strong{color:var(--ink)}
.contact-aside .fsc-row{display:flex;gap:.5rem;align-items:center;font-size:.85rem;margin-bottom:.5rem}
.contact-aside .fsc-row svg{width:16px;height:16px;stroke:var(--coral);flex-shrink:0}
@media (max-width:1000px){
.proc-grid,.proc-grid.three{grid-template-columns:1fr 1fr}
.split-feature{grid-template-columns:1fr}
.contact-split{grid-template-columns:1fr}
.feature-list.wide ul{grid-template-columns:1fr}
}
@media (max-width:640px){
.proc-grid,.proc-grid.three{grid-template-columns:1fr}
}
/* ============================================================
PARTNER LOGO MARQUEE
Wordmark placeholders in swap-ready cells.
To use official assets: replace … inside
each .logo-cell with 
============================================================ */
.logobar{background:#0d0d0d;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:1.5rem 0}
.logobar-label{font-family:var(--font-head);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);text-align:center;margin-bottom:1.15rem}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee-scroll 38s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-cell{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:190px;height:64px;margin:0 .6rem;padding:0 1.4rem;
background:linear-gradient(160deg,#181818,#0e0e0e);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-lg)}
/* swap target: official logos go here as .logo-img (max-height keeps them aligned) */
.logo-cell .logo-img{max-height:34px;max-width:150px;width:auto;object-fit:contain;filter:none}
/* brand-colored wordmark placeholders */
.pw{font-family:var(--font-head);font-weight:800;font-size:1.25rem;letter-spacing:.02em;line-height:1;white-space:nowrap;color:#fff}
.pw[data-brand="dell"]{color:#0085C3;letter-spacing:.22em}
.pw[data-brand="lenovo"]{color:#fff;background:#E2231A;padding:.28em .5em;border-radius:3px;font-weight:800}
.pw[data-brand="ibm"]{color:#1F70C1;letter-spacing:.08em}
.pw[data-brand="microsoft"]{color:#e6e6e6;font-weight:600}
.pw[data-brand="fortinet"]{color:#DA291C;letter-spacing:.05em}
.pw[data-brand="ingram"]{color:#0033A0}
.pw[data-brand="tdsynnex"]{color:#00A9CE;letter-spacing:.04em}
.pw[data-brand="dh"]{color:#fff;background:#E4002B;padding:.28em .55em;border-radius:3px}
@media (max-width:640px){
.logo-cell{min-width:150px;height:56px;padding:0 1rem}
.pw{font-size:1.05rem}
.marquee-track{animation-duration:28s}
}
@media (prefers-reduced-motion:reduce){
.marquee-track{animation:none;flex-wrap:nowrap;transform:none}
.marquee{overflow-x:auto}
}
/* ============================================================
HERO CIRCUIT CURRENT FX (homepage ecosystem overlay)
============================================================ */
.hero-media{position:relative}
.circuit-fx{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;
mix-blend-mode:screen;pointer-events:none;z-index:1}
/* flowing current: a stream of short dashes travelling the trace direction */
.circuit-fx .pulse{stroke-width:3;stroke-dasharray:3 19;opacity:1;
animation:current-flow 2.6s linear infinite}
.circuit-fx .pulse.b{stroke-width:2.6;opacity:.9}
/* staggered speeds/delays per direction so it reads organic, not mechanical */
.circuit-fx .d1{animation-duration:2.8s;animation-delay:-.2s}
.circuit-fx .d2{animation-duration:2.3s;animation-delay:-1.1s}
.circuit-fx .d3{animation-duration:3.1s;animation-delay:-.6s}
.circuit-fx .d4{animation-duration:2.9s;animation-delay:-1.6s}
.circuit-fx .d5{animation-duration:3.4s;animation-delay:-.9s}
.circuit-fx .d6{animation-duration:2.6s;animation-delay:-2.0s}
.circuit-fx .d7{animation-duration:2.2s;animation-delay:-.4s}
.circuit-fx .d8{animation-duration:3.0s;animation-delay:-1.3s}
/* one dash "period" is 22 units (2 on + 20 off) at pathLength 100 -> loop by 22 */
@keyframes current-flow{
from{stroke-dashoffset:22}
to{stroke-dashoffset:0}
}
.circuit-fx .core-glow{transform-box:fill-box;transform-origin:center;
animation:core-breathe 4.2s ease-in-out infinite}
@keyframes core-breathe{
0%,100%{opacity:.45;transform:scale(.92)}
50%{opacity:.85;transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
.circuit-fx .pulse{animation:none;opacity:.35;stroke-dasharray:none}
.circuit-fx .core-glow{animation:none;opacity:.5}
}