/* Figure Information Technology - shared stylesheet
   Edit colours, type and spacing HERE ONCE and every page updates. */

:root{
  --ink:#1B1224;
  --ink-2:#2A1E36;
  --paper:#120B18;
  --paper-2:#190F21;
  --panel:#1A1121;
  --line:rgba(255,255,255,.1);
  --text:#ECE4F0;
  --muted:#A99BB4;
  --pink:#FF6BAE;
  --magenta:#E0148C;
  --coral:#F0555E;
  --amber:#F6A23A;
  --grad:linear-gradient(115deg,var(--magenta) 0%,var(--coral) 55%,var(--amber) 100%);
  --icon-grad:linear-gradient(135deg,#FF5DAA,#F6A23A);
  --edge:linear-gradient(140deg,rgba(224,20,140,.55),rgba(255,255,255,.07) 35%,rgba(255,255,255,.07) 65%,rgba(246,162,58,.45));
  --glow:0 0 26px -4px rgba(224,20,140,.55);
  --display:"Exo 2",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --w:1120px;
  --header-h:68px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--text);background:var(--paper);line-height:1.6;font-size:17px}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:700}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em;max-width:62ch}
a{color:inherit}
img,svg{max-width:100%}
.wrap{width:min(var(--w),calc(100% - 3rem));margin:0 auto}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
[id]{scroll-margin-top:calc(var(--header-h) + 1.5rem)}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:.7rem 1rem;z-index:60}
.skip:focus{left:1rem;top:.5rem}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:20;background:var(--ink);color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
.brand .mark{width:30px;height:38px}
.brand .word{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:.06em;line-height:1}
.brand .word small{display:block;font-weight:500;font-size:.58rem;letter-spacing:.18em;opacity:.8;margin-top:3px}
#primary-nav ul{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0}
#primary-nav a{text-decoration:none;font-size:.95rem;opacity:.8}
#primary-nav a:hover{opacity:1}
#primary-nav a[aria-current="page"]{opacity:1;font-weight:600;box-shadow:inset 0 -2px 0 var(--amber)}
.navtoggle{display:none;background:none;border:1.5px solid rgba(255,255,255,.3);border-radius:6px;color:#fff;padding:.45rem .6rem;cursor:pointer;line-height:0}
.navtoggle svg{width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round}
.btn{display:inline-block;padding:.75rem 1.3rem;border-radius:8px;font-weight:600;text-decoration:none;font-family:var(--display);font-size:1rem;border:2px solid transparent;cursor:pointer}
.btn-grad{background:var(--grad);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-line{border-color:var(--ink);color:var(--ink)}
.nav .btn{flex:0 0 auto;font-size:.95rem;padding:.6rem 1rem}

@media(max-width:900px){
  .js .navtoggle{display:block;order:3}
  .js #primary-nav{position:absolute;top:var(--header-h);left:0;right:0;background:var(--ink);border-top:1px solid rgba(255,255,255,.12);box-shadow:0 18px 30px rgba(0,0,0,.35)}
  .js #primary-nav[hidden]{display:none}
  .js #primary-nav ul{flex-direction:column;gap:0;padding:.25rem 0}
  .js #primary-nav li{border-bottom:1px solid rgba(255,255,255,.08)}
  .js #primary-nav li:last-child{border-bottom:0}
  .js #primary-nav a{display:block;padding:.95rem 1.5rem;font-size:1.05rem;width:min(var(--w),calc(100% - 3rem));margin:0 auto}
  /* nav is out of flow once it becomes the dropdown, so group the CTA
     and the menu button together on the right instead of letting
     space-between strand the CTA in the middle of the header. */
  .js .nav .btn{order:2;margin-left:auto;margin-right:.6rem}
  #primary-nav ul{gap:1rem;font-size:.9rem}
}
@media(max-width:700px){
  .brand .word{font-size:1rem}
  .brand .word small{font-size:.5rem}
  .nav .btn{padding:.55rem .8rem;font-size:.85rem}
}
/* On phones the header CTA would crowd the menu button off the edge.
   Drop it: Contact is in the menu and the hero CTA is right below the fold. */
@media(max-width:560px){
  .nav .btn{display:none}
  .brand .word small{letter-spacing:.12em}
}

/* ---------- hero (home) ---------- */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;padding:5rem 0 6rem}
.hero h1,.pagehero h1{margin-bottom:1.1rem}
.hero p{color:rgba(255,255,255,.78);font-size:1.15rem}
.hero .actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
.tag{font-family:var(--display);font-weight:500;letter-spacing:.14em;font-size:.8rem;color:var(--amber);margin-bottom:1.2rem;text-transform:uppercase}
.bigmark{width:100%;max-width:380px;justify-self:center;opacity:0;transform:translateY(24px)}
@media(prefers-reduced-motion:no-preference){
  .bigmark{animation:rise .9s cubic-bezier(.2,.7,.2,1) .15s forwards}
  .bigmark .b1{animation:sweep .7s ease .3s both}
  .bigmark .b2{animation:sweep .7s ease .45s both}
  .bigmark .b3{animation:sweep .7s ease .6s both}
}
@media(prefers-reduced-motion:reduce){.bigmark{opacity:1;transform:none}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes sweep{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
.hero-line{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--grad)}
@media(max-width:860px){.hero{padding:0}.hero .wrap{grid-template-columns:1fr;gap:1.5rem;padding:2.5rem 0 4rem}.bigmark{max-width:88px;order:-1;justify-self:start}}

/* ---------- page hero (inner pages) ---------- */
.pagehero{background:var(--ink);color:#fff;position:relative;padding:3.5rem 0 4rem}
.pagehero p{color:rgba(255,255,255,.78);font-size:1.12rem;max-width:60ch}

/* ---------- sections ---------- */
section{padding:5rem 0}
section.tight{padding:3.5rem 0}
.lead{font-size:1.15rem;color:var(--muted);max-width:56ch}
/* Section header: title left, intro right, both starting at the top so
   the title is read first. */
.head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;margin-bottom:3rem}
.alt{background:var(--paper-2)}
@media(max-width:860px){.head{grid-template-columns:1fr;gap:.8rem}section{padding:3.5rem 0}}

/* ---------- text links ---------- */
.more{font-family:var(--display);font-weight:600;color:var(--magenta);text-decoration:none}
.more::after{content:" \2192"}
.more:hover{text-decoration:underline}
.more-wrap{margin:1.8rem 0 0}

/* ---------- gradient-bar headings ---------- */
.layer h3,.layers-compact h3,.svc h3{position:relative;padding-left:1.1rem}
.layer h3::before,.layers-compact h3::before,.svc h3::before{content:"";position:absolute;left:0;top:.35em;width:5px;height:.85em;background:var(--grad);border-radius:2px}

/* ---------- layers (defense in depth, security page) ---------- */
.layers{border-top:2px solid var(--ink)}
.layer{display:grid;grid-template-columns:200px 1fr;gap:2rem;padding:1.6rem 0;border-bottom:1px solid var(--line);align-items:start}
.layer p{margin:0;color:var(--muted);font-size:1.02rem;max-width:66ch}
@media(max-width:860px){.layer{grid-template-columns:1fr;gap:.6rem}}

/* ---------- layers, compact (home) ---------- */
.layers-compact{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 2rem;border-top:2px solid var(--ink);padding-top:1.6rem}
.layers-compact h3{font-size:1.05rem;margin-bottom:.4rem}
.layers-compact p{margin:0;color:var(--muted);font-size:.95rem}
@media(max-width:640px){.layers-compact{grid-template-columns:1fr;gap:1.1rem}}

/* ---------- capability grid (services) ---------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 2.4rem}
.cap{border-top:2px solid var(--line);padding-top:1.1rem}
.cap h3{font-size:1.08rem;margin-bottom:.45rem}
.cap p{font-size:.95rem;color:var(--muted);margin:0 0 .6rem}
.cap ul{list-style:none;margin:0;padding:0;font-size:.9rem;color:var(--muted)}
.cap li{position:relative;padding-left:.9rem;margin:.28rem 0}
.cap li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:1px;background:var(--grad)}
@media(max-width:940px){.caps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.caps{grid-template-columns:1fr;gap:1.6rem}}
/* the two core capabilities get more room and the brand rule */
.caps.core{grid-template-columns:repeat(3,1fr);gap:2.5rem 2.6rem}
.caps.core .cap{border-top:3px solid;border-image:var(--grad) 1;padding-top:1.3rem}
.caps.core .cap h3{font-size:1.3rem}
.caps.core .cap p{font-size:1.02rem}
.caps.core .cap ul{font-size:.95rem}
.caps.core.two-up{grid-template-columns:repeat(2,1fr)}
@media(max-width:940px){.caps.core{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.caps.core,.caps.core.two-up{grid-template-columns:1fr;gap:2rem}}
.addon{font-style:normal;display:inline-block;vertical-align:middle;margin-left:.4rem;padding:.12rem .5rem;border:1px solid var(--magenta);border-radius:999px;font-family:var(--display);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta);position:relative;top:-.12em}

/* ---------- service rows (services: the seven around the core) ---------- */
.svcs{border-top:2px solid var(--ink)}
.svc{display:grid;grid-template-columns:280px 1fr;gap:2rem;padding:1.5rem 0;border-bottom:1px solid var(--line);align-items:start}
.svc h3{font-size:1.1rem}
.svc p{margin:0 0 .6rem;color:var(--muted);font-size:1rem;max-width:66ch}
.svc p a{display:block;margin-top:.3rem;color:var(--magenta);font-weight:600;text-decoration:none}
.svc p a:hover{text-decoration:underline}
.svc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem 1.6rem;align-items:start;font-size:.9rem;color:var(--muted)}
.svc li{position:relative;padding-left:.9rem}
.svc li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:1px;background:var(--grad)}
@media(max-width:860px){.svc{grid-template-columns:1fr;gap:.6rem}}
@media(max-width:640px){.svc ul{grid-template-columns:1fr}}

/* ---------- service index (home) ---------- */
.svc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 2.4rem;border-top:2px solid var(--ink)}
.svc-list a{display:block;padding:1rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.svc-list b{display:block;font-family:var(--display);font-weight:600;font-size:1.02rem;margin-bottom:.2rem}
.svc-list span{display:block;color:var(--muted);font-size:.92rem;line-height:1.5}
.svc-list a:hover b{color:var(--magenta)}
@media(max-width:860px){.svc-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-list{grid-template-columns:1fr}}

/* ---------- risk list (AI security) ---------- */
.risks{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 2rem;margin:0;padding:0;list-style:none;counter-reset:r}
.risks li{counter-increment:r;position:relative;padding-left:2.4rem;font-size:.97rem}
.risks li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:.05em;font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.04em;color:var(--magenta)}
.risks b{font-weight:600;display:block}
.risks span{color:var(--muted);font-size:.89rem}
@media(max-width:760px){.risks{grid-template-columns:1fr}}

/* ---------- proof strip ---------- */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;border-left:3px solid;border-image:var(--grad) 1;padding-left:1.6rem}
.proof h3{font-size:1rem;margin-bottom:.35rem}
.proof p{font-size:.93rem;color:var(--muted);margin:0}
.proof.four{grid-template-columns:repeat(2,1fr);gap:2rem 3rem}
.proof.two-up{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.proof,.proof.four,.proof.two-up{grid-template-columns:1fr;gap:1.4rem}}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.cards.four{grid-template-columns:repeat(4,1fr);gap:1.3rem}
.cards.four .card{padding:1.4rem}
.cards.four h3{font-size:1.1rem}
@media(max-width:1000px){.cards.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards.four{grid-template-columns:1fr}}
/* two big cards (home: the two ways in) */
.cards.two{grid-template-columns:repeat(2,1fr);gap:2rem}
.cards.two .card{padding:2rem 2.2rem}
.cards.two h3{font-size:1.45rem}
.cards.two p{font-size:1.02rem}
@media(max-width:700px){.cards.two{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.6rem;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card::before{content:"";display:block;height:4px;width:44px;background:var(--grad);border-radius:2px;margin-bottom:1.1rem}
.card h3{margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.97rem;margin-bottom:1.1rem}
.card .go{margin-top:auto;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--magenta)}
.card .go::after{content:" \2192";transition:margin .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(27,18,36,.1);border-color:#C9BCC6}
.card:hover .go::after{margin-left:.25rem}
@media(prefers-reduced-motion:reduce){.card,.card .go::after{transition:none}.card:hover{transform:none}}
@media(max-width:860px){.cards{grid-template-columns:1fr}}

/* ---------- engagement paths ---------- */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.path{border-top:4px solid var(--ink);padding-top:1.2rem;display:flex;flex-direction:column}
.path.hot{border-image:var(--grad) 1}
.path ul{padding-left:1.1rem;margin:.8rem 0 1.4rem;color:var(--muted);font-size:.95rem}
.path li{margin:.3rem 0}
.path .btn{margin-top:auto;align-self:flex-start}
.path .path-more{margin-top:auto;padding-bottom:1rem;font-size:.92rem;align-self:flex-start}
.path .path-more + .btn{margin-top:0}
#prepaid{scroll-margin-top:calc(var(--header-h) + 1rem)}
@media(max-width:860px){.paths{grid-template-columns:1fr;gap:2rem}}

/* ---------- steps ---------- */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.steps li{counter-increment:s;position:relative;padding-top:2.6rem}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;font-family:var(--display);font-weight:700;font-size:1.5rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps h3{font-size:1.05rem;margin-bottom:.4rem}
.steps p{font-size:.95rem;color:var(--muted);margin:0}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- mini funnel track (inline 1-2-3) ---------- */
.track{list-style:none;counter-reset:t;margin:1.4rem 0 .2rem;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-family:var(--display);font-weight:600;font-size:.95rem}
.track li{counter-increment:t;position:relative;padding-left:1.7rem}
.track li::before{content:counter(t);position:absolute;left:0;top:.1em;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--grad);color:#fff;font-size:.72rem;display:grid;place-items:center}

/* ---------- compact "how it starts" (services, under the buying paths) ---------- */
.starts{margin:3rem 0 0;padding-top:1.6rem;border-top:1px solid var(--line)}
.starts h3{font-size:1.1rem}
.starts p{margin:1rem 0 0;color:var(--muted);font-size:.98rem;max-width:none}
.starts p b{color:var(--text);font-family:var(--display);font-weight:600}

/* ---------- callout card ---------- */
.callout{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.6rem 1.8rem}
.callout h3{margin-bottom:.6rem}
.callout p{color:var(--muted);font-size:.98rem}

/* ---------- about ---------- */
.about{background:var(--ink);color:#fff}
.about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.about p{color:rgba(255,255,255,.8)}
.about .ticks li{color:rgba(255,255,255,.82)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2rem;border-left:3px solid;border-image:var(--grad) 1;padding-left:1.5rem}
.stat b{display:block;font-family:var(--display);font-size:2.2rem;font-weight:700;line-height:1}
.stat span{font-size:.92rem;color:rgba(255,255,255,.7)}
@media(max-width:860px){.about .wrap{grid-template-columns:1fr;gap:2.5rem}}
/* about: centered statement (AI page) */
.about.statement .wrap{display:block;max-width:760px;margin:0 auto;text-align:center}
.about.statement .rule{width:56px;height:3px;background:var(--grad);margin:0 auto 1.6rem;border-radius:2px}
.about.statement h2{font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.15;margin:0 0 1.2rem}
.about.statement p{font-size:1.1rem;line-height:1.6;margin:0 auto;max-width:58ch}

/* ---------- two column plain ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:2rem}}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:1.6rem;margin:.5rem 0;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--grad)}

/* ---------- CTA band ---------- */
.cta{background:var(--grad);color:#fff;padding:3.2rem 0}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta h2{font-size:clamp(1.5rem,2.6vw,2.1rem);max-width:36ch}
.cta p{margin:.5rem 0 0;color:rgba(255,255,255,.92);max-width:46ch}
.cta .btn{background:#fff;color:var(--ink);flex:0 0 auto}

/* ---------- contact ---------- */
form{display:grid;gap:.9rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.6rem}
label{font-size:.9rem;font-weight:600;display:block;margin-bottom:.3rem}
input,textarea,select{width:100%;padding:.75rem .9rem;border:1.5px solid var(--line);border-radius:6px;font:inherit;background:#fff}
input:focus,textarea:focus,select:focus{border-color:var(--magenta);outline:none}
.hp{position:absolute;left:-9999px}
.formnote{font-size:.85rem;color:var(--muted);margin:0}

/* ---------- footer ---------- */
footer{background:var(--ink-2);color:rgba(255,255,255,.7);padding:2.5rem 0;font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center}
footer a{color:rgba(255,255,255,.7);text-decoration:none}
footer .fnav{display:flex;gap:1.2rem;flex-wrap:wrap}
footer a:hover{color:#fff}

/* ---------- partner credential ---------- */
.hero .partner{display:inline-grid;grid-template-columns:auto auto;column-gap:.7rem;row-gap:.15rem;align-items:center;margin:1.8rem 0 0;padding:.6rem 1.1rem .6rem .85rem;border:1px solid rgba(255,255,255,.22);border-radius:14px;font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.88);max-width:none}
.hero .partner svg{grid-row:span 2;width:22px;height:22px;fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero .partner .lbl{font-size:.68rem;color:var(--amber)}
.hero .partner .names{white-space:nowrap}
.hero .partner .sep{opacity:.45;margin:0 .45rem}
@media(max-width:560px){.hero .partner{font-size:.7rem;letter-spacing:.06em;white-space:nowrap}}
.steps-note{margin:2.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--muted);font-size:.98rem;max-width:none}
.steps-note b{color:var(--text);font-family:var(--display);font-weight:600}

/* ---------- contact (friendly) ---------- */
.talk-hero{padding-bottom:6.5rem}
.talk{padding:0 0 5rem}
.reach{display:grid;grid-template-columns:repeat(2,1fr);max-width:820px;margin-left:auto;margin-right:auto;gap:1.3rem;margin-top:-3.6rem;position:relative;z-index:2}
.reach-card{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.5rem 1.5rem 1.4rem;text-decoration:none;color:inherit;box-shadow:0 12px 30px rgba(27,18,36,.08);transition:transform .18s ease,box-shadow .18s ease}
a.reach-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(27,18,36,.13)}
.reach-card .ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--grad);margin-bottom:.8rem}
.reach-card .ico svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reach-card .k{font-size:.9rem;color:var(--muted)}
.reach-card .v{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--ink);overflow-wrap:anywhere}
.reach-card .v.small{font-size:1rem;font-weight:500}
a.reach-card .v{color:var(--magenta)}
/* location card: one centered line, same pink as the phone and email */
.reach-card.place{align-items:center;justify-content:center;text-align:center}
.reach-card.place .v{color:var(--magenta);text-wrap:balance}
.note-wrap{max-width:760px;margin:4rem auto 0}
.note-head{text-align:center;margin-bottom:1.6rem}
.note-head h2{margin-bottom:.5rem}
.note-head p{color:var(--muted);margin:0 auto}
.talk-form{gap:1.1rem;padding:2rem;border-radius:16px;box-shadow:0 12px 30px rgba(27,18,36,.06)}
.talk-form .pair{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.talk-form .opt{font-weight:400;color:var(--muted)}
.chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips legend{font-size:.9rem;font-weight:600;margin-bottom:.55rem;padding:0}
.chips label{margin:0;font-weight:500;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;padding:.5rem .95rem;border:1.5px solid var(--line);border-radius:999px;font-size:.92rem;background:#fff;transition:border-color .15s ease,background .15s ease,color .15s ease}
.chips label:hover span{border-color:var(--coral)}
.chips input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.chips input:focus-visible+span{outline:3px solid var(--amber);outline-offset:2px}
.send{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:.3rem}
.send .formnote{margin:0}
.clientnote{text-align:center;font-size:.92rem;color:var(--muted);margin:1.4rem auto 0}
@media(max-width:860px){.reach{grid-template-columns:1fr;gap:.8rem;margin-top:-3rem}.reach-card{display:grid;grid-template-columns:46px 1fr;column-gap:1rem;row-gap:0;align-items:center;padding:1rem 1.2rem}.reach-card .ico{grid-row:span 2;margin:0}.reach-card.place{text-align:left}.reach-card.place .ico{grid-row:auto}}
@media(max-width:640px){.talk-form{padding:1.4rem}.talk-form .pair{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.reach-card{transition:none}a.reach-card:hover{transform:none}}

/* ---------- home: industries (an even grid of icon tiles, then the IT-provider callout) ---------- */
.industries{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem;margin:0;padding:0;list-style:none}
.industries li{display:flex;align-items:center;gap:.75rem;min-width:0;padding:.9rem 1rem;border:1px solid var(--line);border-radius:14px;font-family:var(--display);font-weight:500;font-size:.98rem;line-height:1.2;color:var(--text)}
.industries li::before{content:"";flex:0 0 22px;height:22px;background:var(--grad);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.itnote{position:relative;margin:1.4rem 0 0;max-width:none;padding:1.1rem 1.4rem 1.1rem 4.6rem;border:1px solid var(--line);border-radius:16px;font-size:1rem;color:var(--muted)}
.itnote::before{content:"";position:absolute;left:1.1rem;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:13px}
.itnote::after{content:"";position:absolute;left:calc(1.1rem + 11px);top:50%;width:22px;height:22px;margin-top:-11px;background:var(--grad);-webkit-mask:var(--ic-network) center/contain no-repeat;mask:var(--ic-network) center/contain no-repeat}
.itnote b{color:var(--text);font-family:var(--display);font-weight:600}
@media(max-width:1100px){.industries{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.industries{gap:.55rem}.industries li{flex-direction:column;justify-content:center;text-align:center;gap:.5rem;padding:1rem .15rem;font-size:clamp(.64rem,3.2vw,.8rem);hyphens:auto;overflow-wrap:anywhere}.industries li::before{flex:0 0 26px;width:26px}.itnote{padding:1rem 1.1rem 1rem 4.2rem;font-size:.95rem}.itnote::before{left:.9rem}.itnote::after{left:calc(.9rem + 11px)}}

/* ---------- rates ---------- */
/* rates: price cards */
.rate-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.rate{border-top:4px solid var(--ink);padding-top:1.2rem;display:flex;flex-direction:column}
.rate.hot{border-image:var(--grad) 1}
.rate h3{font-size:1.2rem;margin:0 0 1rem}
.rate .price{font-family:var(--display);font-weight:700;font-size:2.1rem;line-height:1;color:var(--ink);margin:0}
.rate .price small{display:block;font-size:.85rem;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-top:.35rem}
.rate ul{padding-left:1.1rem;margin:1.2rem 0 1.4rem;color:var(--muted);font-size:.95rem}
.rate li{margin:.3rem 0}
.rate .btn{margin-top:auto;align-self:flex-start}
@media(max-width:860px){.rate-paths{grid-template-columns:1fr;gap:2rem}}

/* rates: prepaid tiers */
.tiers{width:100%;border-collapse:separate;border-spacing:0;margin-top:1.6rem;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:.97rem}
.tiers th,.tiers td{padding:1rem 1.2rem;text-align:left;vertical-align:top}
.tiers thead th{font-family:var(--display);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);background:#FAF7F9}
.tiers tbody th{font-family:var(--display);font-weight:600;color:var(--text);width:30%}
.tiers tbody th small{display:block;font-family:var(--body);font-weight:400;color:var(--muted);font-size:.86rem;margin-top:.15rem}
.tiers tbody tr+tr th,.tiers tbody tr+tr td{border-top:1px solid var(--line)}
.tiers td b{font-family:var(--display);font-size:1.35rem;color:var(--ink);line-height:1}
.tiers td b::after{content:"/hr";font-size:.8rem;color:var(--muted);font-weight:500;margin-left:.15rem}
.tiers td em{display:block;font-style:normal;margin-top:.35rem;font-size:.72rem;font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--magenta)}
@media(max-width:700px){.tiers thead{display:none}.tiers,.tiers tbody,.tiers tr,.tiers th,.tiers td{display:block;width:auto}.tiers tbody th{width:auto}.tiers tbody th{padding-bottom:.3rem}.tiers td{padding-top:.4rem;padding-bottom:.4rem}.tiers td::before{content:attr(data-tier);display:block;font-size:.78rem;color:var(--muted);margin-bottom:.15rem}.tiers tbody tr+tr th{border-top:1px solid var(--line)}.tiers tbody tr+tr td{border-top:0}.tiers tbody tr td:last-child{padding-bottom:1rem}}

/* rates: add-on rows */
.rrow{display:grid;grid-template-columns:1fr 2fr 200px;gap:2rem;padding:1.3rem 0;border-bottom:1px solid var(--line);align-items:start}
.rrow h3{font-size:1.05rem;margin:0}
.rrow p{margin:0;color:var(--muted);font-size:.97rem}
.rrow .rp{font-family:var(--display);font-weight:700;color:var(--ink);text-align:right;font-size:1.05rem}
.rrow .rp small{display:block;font-weight:500;color:var(--muted);font-size:.82rem}
@media(max-width:860px){.rrow{grid-template-columns:1fr;gap:.4rem}.rrow .rp{text-align:left}}

/* rates: terms */
.terms{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 3rem;margin:0;padding:0;list-style:none}
.terms li{padding-left:1.4rem;position:relative;font-size:.97rem;color:var(--muted)}
.terms li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:50%;background:var(--grad)}
.terms b{color:var(--text);font-family:var(--display);font-weight:600}
@media(max-width:700px){.terms{grid-template-columns:1fr}}

/* ======================================================================
   MIDNIGHT LOOK (live 2026-10-06): dark glass panels, gradient hairlines,
   glowing icons and a live network behind each hero (canvas in site.js).
   These rules sit on top of the component rules above and override them.
   ====================================================================== */

:root{
  /* line icons, used as masks (the background colors them) */
  --ic-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z'/%3E%3Cpath d='M8.6 12.2l2.3 2.3 4.5-4.7'/%3E%3C/svg%3E");
  --ic-server:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='6.5' rx='1.6'/%3E%3Crect x='4' y='13.5' width='16' height='6.5' rx='1.6'/%3E%3Cpath d='M7.8 7.25h.01M7.8 16.75h.01M11 7.25h5M11 16.75h5'/%3E%3C/svg%3E");
  --ic-clip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4.5' width='14' height='16.5' rx='2'/%3E%3Cpath d='M9 4.5V3h6v1.5'/%3E%3Cpath d='M8.8 11.5l1.6 1.6 3-3.1M8.8 17h6.4'/%3E%3C/svg%3E");
  --ic-key:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15.5' r='4'/%3E%3Cpath d='M10.9 12.6L20 3.5M16.5 7l2.6 2.6M14.2 9.3l2 2'/%3E%3C/svg%3E");
  --ic-laptop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.6'/%3E%3Cpath d='M2 19.5h20'/%3E%3C/svg%3E");
  --ic-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 7.2l8.5 6 8.5-6'/%3E%3C/svg%3E");
  --ic-network:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2.2'/%3E%3Ccircle cx='5' cy='19' r='2.2'/%3E%3Ccircle cx='19' cy='19' r='2.2'/%3E%3Cpath d='M12 7.2V12M12 12l-5.4 5.4M12 12l5.4 5.4'/%3E%3C/svg%3E");
  --ic-backup:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6'/%3E%3C/svg%3E");
  --ic-ai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 3.5l1.9 5.1 5.1 1.9-5.1 1.9-1.9 5.1-1.9-5.1-5.1-1.9 5.1-1.9z'/%3E%3Cpath d='M18.5 14.5l.8 1.9 1.9.8-1.9.8-.8 1.9-.8-1.9-1.9-.8 1.9-.8z'/%3E%3C/svg%3E");
  --ic-eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --ic-bolt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5L4.5 13.5H11l-1 8 8.5-11H12z'/%3E%3C/svg%3E");
  --ic-wrench:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 3.5a4.5 4.5 0 0 0-4.2 6.1l-6.7 6.7a1.8 1.8 0 0 0 2.6 2.6l6.7-6.7a4.5 4.5 0 0 0 6.1-4.2l-2.8 2.8-2.6-.7-.7-2.6z'/%3E%3C/svg%3E");
  --ic-target:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3'/%3E%3C/svg%3E");
  --ic-headset:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.5V12a8 8 0 0 1 16 0v2.5'/%3E%3Crect x='3' y='14' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='14' width='4' height='6' rx='1.5'/%3E%3Cpath d='M19 20c0 1.2-1.8 2-4 2h-2'/%3E%3C/svg%3E");
  --ic-cube:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l8 4.5v9.4l-8 4.5-8-4.5V7.3z'/%3E%3Cpath d='M4.2 7.4L12 12l7.8-4.6M12 12v9'/%3E%3C/svg%3E");
  --ic-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --ic-auto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10l1.5-3.6A2 2 0 0 1 8.3 5h7.4a2 2 0 0 1 1.8 1.4L19 10'/%3E%3Cpath d='M5 10h14a2 2 0 0 1 2 2v3.5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V12a2 2 0 0 1 2-2z'/%3E%3Cpath d='M6.5 16.5V19M17.5 16.5V19'/%3E%3Cpath d='M7 13.2h.01M17 13.2h.01'/%3E%3C/svg%3E");
  --ic-build:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20h17'/%3E%3Cpath d='M5.5 20L9.8 4.5h4.4L18.5 20'/%3E%3Cpath d='M8.2 10.3h7.6M6.9 14.8h10.2'/%3E%3C/svg%3E");
  --ic-edu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.5L12 5l9.5 4.5L12 14z'/%3E%3Cpath d='M6.5 11.6v4.2c0 1.4 2.5 2.7 5.5 2.7s5.5-1.3 5.5-2.7v-4.2'/%3E%3Cpath d='M21.5 9.5V14'/%3E%3C/svg%3E");
  --ic-eng:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v1.8'/%3E%3Cpath d='M14.2 7a2.2 2.2 0 1 1-4.4 0a2.2 2.2 0 1 1 4.4 0z'/%3E%3Cpath d='M11 9.1L6.4 20.5M13 9.1l4.6 11.4'/%3E%3Cpath d='M8 16.3a9.5 9.5 0 0 0 8 0'/%3E%3C/svg%3E");
  --ic-ent:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3Cpath d='M10 9.3v5.4l4.5-2.7z'/%3E%3C/svg%3E");
  --ic-fin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9L12 4l9 5z'/%3E%3Cpath d='M5.5 11.5v5.5M10 11.5v5.5M14 11.5v5.5M18.5 11.5v5.5'/%3E%3Cpath d='M4 19.5h16'/%3E%3C/svg%3E");
  --ic-food:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v5.5a2.5 2.5 0 0 0 5 0V3'/%3E%3Cpath d='M8.5 3v18'/%3E%3Cpath d='M17.5 21V3.2c-2.2 1.4-3.3 3.9-3.3 7.3 0 1.6.9 2.6 2.3 2.9h1'/%3E%3C/svg%3E");
  --ic-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.2L12 4l8.5 7.2'/%3E%3Cpath d='M5.8 9.5V20h12.4V9.5'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E");
  --ic-hosp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19h18'/%3E%3Cpath d='M5 16.5a7 7 0 0 1 14 0z'/%3E%3Cpath d='M12 9.5V7.3M10.3 7.3h3.4'/%3E%3C/svg%3E");
  --ic-ind:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.5v-10l5 3v-3l5 3v-3l5 3V4.5h3v16z'/%3E%3Cpath d='M7 17h2M12 17h2'/%3E%3C/svg%3E");
  --ic-legal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M8 20h8M5 7h14'/%3E%3Cpath d='M5 7l-2.6 6.2a2.6 2.6 0 0 0 5.2 0z'/%3E%3Cpath d='M19 7l-2.6 6.2a2.6 2.6 0 0 0 5.2 0z'/%3E%3C/svg%3E");
  --ic-mfg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.92 10.40L21.33 10.85L21.33 13.15L18.92 13.60L18.02 15.76L19.41 17.79L17.79 19.41L15.76 18.02L13.60 18.92L13.15 21.33L10.85 21.33L10.40 18.92L8.24 18.02L6.21 19.41L4.59 17.79L5.98 15.76L5.08 13.60L2.67 13.15L2.67 10.85L5.08 10.40L5.98 8.24L4.59 6.21L6.21 4.59L8.24 5.98L10.40 5.08L10.85 2.67L13.15 2.67L13.60 5.08L15.76 5.98L17.79 4.59L19.41 6.21L18.02 8.24z'/%3E%3Cpath d='M14.8 12a2.8 2.8 0 1 1-5.6 0a2.8 2.8 0 1 1 5.6 0z'/%3E%3C/svg%3E");
  --ic-med:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3.5h5v6h6v5h-6v6h-5v-6h-6v-5h6z'/%3E%3C/svg%3E");
  --ic-retail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 8h13.6l-1.1 12.5H6.3z'/%3E%3Cpath d='M9 10.5V7a3 3 0 0 1 6 0v3.5'/%3E%3C/svg%3E");
  --ic-staff:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.2 8.3a3.2 3.2 0 1 1-6.4 0a3.2 3.2 0 1 1 6.4 0z'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Cpath d='M15.5 5.3a3.2 3.2 0 0 1 0 6.2'/%3E%3Cpath d='M17.5 14.6a6 6 0 0 1 3.5 5.4'/%3E%3C/svg%3E");
}

/* which icon goes where */
.cards .card:nth-child(1),.rate-paths .rate:nth-child(1){--ic:var(--ic-shield)}
.cards .card:nth-child(2),.rate-paths .rate:nth-child(2){--ic:var(--ic-server)}
.cards .card:nth-child(3),.rate-paths .rate:nth-child(3){--ic:var(--ic-clip)}
.layer:nth-child(1) h3,#identity h3{--ic:var(--ic-key)}
.layer:nth-child(2) h3{--ic:var(--ic-laptop)}
.layer:nth-child(3) h3{--ic:var(--ic-mail)}
.layer:nth-child(4) h3,#network h3{--ic:var(--ic-network)}
.layer:nth-child(5) h3,#backup h3{--ic:var(--ic-backup)}
.layer:nth-child(6) h3,#ai h3{--ic:var(--ic-ai)}
#secops{--ic:var(--ic-eye)}
#incident-response{--ic:var(--ic-bolt)}
#security-engineering{--ic:var(--ic-wrench)}
#proactive-security{--ic:var(--ic-target)}
#helpdesk h3{--ic:var(--ic-headset)}
#assessments h3{--ic:var(--ic-clip)}
#projects h3{--ic:var(--ic-cube)}
#prepaid-time h3{--ic:var(--ic-clock)}
.ind-auto{--ic:var(--ic-auto)}
.ind-build{--ic:var(--ic-build)}
.ind-edu{--ic:var(--ic-edu)}
.ind-eng{--ic:var(--ic-eng)}
.ind-ent{--ic:var(--ic-ent)}
.ind-fin{--ic:var(--ic-fin)}
.ind-food{--ic:var(--ic-food)}
.ind-home{--ic:var(--ic-home)}
.ind-hosp{--ic:var(--ic-hosp)}
.ind-ind{--ic:var(--ic-ind)}
.ind-legal{--ic:var(--ic-legal)}
.ind-mfg{--ic:var(--ic-mfg)}
.ind-med{--ic:var(--ic-med)}
.ind-retail{--ic:var(--ic-retail)}
.ind-staff{--ic:var(--ic-staff)}

/* ---------- type ---------- */
:is(h1,h2,h3){text-wrap:balance}
p{text-wrap:pretty}
.head h2,.note-head h2{color:#fff}
:is(.more,.card .go,.svc p a){color:var(--pink)}

/* ---------- header ---------- */
header{background:rgba(18,11,24,.72);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
#primary-nav a[aria-current="page"]{box-shadow:none;background:linear-gradient(90deg,var(--magenta),var(--amber)) left bottom/100% 2px no-repeat}

/* ---------- heroes: live network behind, glowing mark, headline warming to amber ---------- */
.hero,.pagehero{background:radial-gradient(60% 80% at 78% 45%,rgba(224,20,140,.16),transparent 65%),#120B18;overflow:hidden}
:is(.hero,.pagehero) > .wrap{position:relative;z-index:1}
.fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx .net{display:block;position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.28),#000 62%);mask-image:linear-gradient(90deg,rgba(0,0,0,.28),#000 62%)}
.fx .ghost{position:absolute;right:-60px;top:50%;height:150%;width:auto;aspect-ratio:106/130;transform:translateY(-50%) rotate(-5deg);opacity:.16;filter:drop-shadow(0 0 30px rgba(224,20,140,.8))}
.hero-line{z-index:2;height:1px;background:linear-gradient(90deg,transparent,var(--magenta) 20%,var(--amber) 80%,transparent);box-shadow:0 0 22px 1px rgba(240,85,94,.55)}
:is(.hero,.pagehero) h1{width:fit-content;max-width:100%;background:linear-gradient(105deg,#fff 0%,#fff 46%,#FFD0B0 76%,#F6A23A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.bigmark{filter:drop-shadow(0 0 26px rgba(224,20,140,.55)) drop-shadow(0 0 70px rgba(246,162,58,.22))}
/* the logo drifts on three motions with unrelated periods (8.3 s, 12.7 s, 15.1 s), so it never visibly repeats */
@media(prefers-reduced-motion:no-preference){
  .bigmark{animation:rise .9s cubic-bezier(.2,.7,.2,1) .15s forwards,mn-bob 8.3s ease-in-out 1.2s infinite,mn-breathe 12.7s ease-in-out 1.2s infinite,mn-tilt 15.1s linear 1.2s infinite}
}
@keyframes mn-bob{50%{translate:0 -12px}}
@keyframes mn-breathe{50%{scale:1.02}}
@keyframes mn-tilt{0%{rotate:0deg;animation-timing-function:cubic-bezier(.61,1,.88,1)}25%{rotate:1deg;animation-timing-function:cubic-bezier(.12,0,.39,0)}50%{rotate:0deg;animation-timing-function:cubic-bezier(.61,1,.88,1)}75%{rotate:-1deg;animation-timing-function:cubic-bezier(.12,0,.39,0)}100%{rotate:0deg}}
.hero .partner{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ---------- buttons ---------- */
.btn{border-radius:12px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease}
.btn-grad{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 34px -10px rgba(224,20,140,.85)}
.btn-grad:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 14px 44px -10px rgba(240,85,94,.95)}
.btn-ghost{background-color:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.btn-ghost:hover{background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.btn-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.btn-dark:hover{background:var(--grad);border-color:transparent;transform:translateY(-2px);box-shadow:0 12px 34px -12px rgba(224,20,140,.85)}

/* ---------- sections ---------- */
.alt{background:radial-gradient(55% 70% at 50% 0%,rgba(224,20,140,.09),transparent 70%),var(--paper-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(255,255,255,.05)}
.steps-note b,.terms b,.itnote b{color:#fff}
.addon{border-color:var(--pink);color:var(--pink)}

/* ---------- icon tiles (offering cards, capability cards, rate cards) ---------- */
.card,.cap,.rate{position:relative;--tile:64px;--icon:34px}
.card::before,.caps.core .cap::before,.rate::before{content:"";display:block;flex:0 0 auto;width:var(--tile);height:var(--tile);border-radius:18px;margin-bottom:1.3rem;background:rgba(224,20,140,.14);box-shadow:inset 0 0 0 1px rgba(240,85,94,.4),var(--glow)}
.card::after,.caps.core .cap::after,.rate::after{content:"";position:absolute;top:calc(var(--pt) + (var(--tile) - var(--icon)) / 2);left:calc(var(--pl) + (var(--tile) - var(--icon)) / 2);width:var(--icon);height:var(--icon);background:var(--icon-grad);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.card{--pt:1.6rem;--pl:1.6rem}
.caps.core .cap{--pt:1.8rem;--pl:1.7rem}
.rate{--pt:1.8rem;--pl:1.7rem}

/* glass card with a gradient hairline edge */
.card,.rate,.reach-card{border:1px solid transparent;border-radius:20px;background:radial-gradient(420px circle at 0% 0%,rgba(224,20,140,.12),transparent 55%) padding-box,linear-gradient(var(--panel),var(--panel)) padding-box,var(--edge) border-box;box-shadow:0 24px 50px -30px rgba(0,0,0,.8)}
.card:hover,a.reach-card:hover{background:radial-gradient(420px circle at 0% 0%,rgba(224,20,140,.18),transparent 55%) padding-box,linear-gradient(#1C1224,#1C1224) padding-box,var(--grad) border-box;box-shadow:0 0 0 1px rgba(240,85,94,.15),0 26px 60px -24px rgba(224,20,140,.55);transform:translateY(-4px)}
.card p{color:var(--muted)}

/* glass panel with a glowing accent (proof points, capabilities, AI columns) */
.proof{border-left:0;padding-left:0;gap:1.5rem}
.proof > div,.caps.core .cap,.two > div{position:relative;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.proof > div,.two > div{padding:1.7rem 1.6rem}
.proof > div::before,.two > div::before{content:"";position:absolute;left:1.6rem;top:-1px;width:44px;height:2px;background:var(--grad);box-shadow:0 0 14px rgba(240,85,94,.8)}
.caps.core .cap{border-image:none;padding:1.8rem 1.7rem 1.7rem}
.caps.core{gap:1.5rem}

/* ---------- ruled lists with icons (security layers, service rows) ---------- */
.layers,.svcs{border-top:1px solid;border-image:linear-gradient(90deg,var(--magenta),var(--amber) 40%,transparent) 1}
.layer h3,.svc h3{display:flex;align-items:center;min-height:40px;padding-left:54px}
.layer h3::before,.svc h3::before{left:0;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:12px;background:rgba(224,20,140,.12);box-shadow:inset 0 0 0 1px rgba(240,85,94,.35),0 0 22px -6px rgba(224,20,140,.6)}
.layer h3::after,.svc h3::after{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:20px;height:20px;background:var(--icon-grad);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
@media(min-width:861px){.layer p,.svc > div{padding-top:.4rem}}
.risks li::before{color:var(--pink);text-shadow:0 0 14px rgba(224,20,140,.7)}

/* ---------- home: industries ---------- */
.industries li{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.industries li::before{background:var(--icon-grad)}
.itnote{border-color:transparent;background:radial-gradient(520px circle at 0% 50%,rgba(224,20,140,.14),transparent 60%) padding-box,linear-gradient(var(--panel),var(--panel)) padding-box,var(--edge) border-box;box-shadow:0 24px 50px -30px rgba(0,0,0,.8)}
.itnote::before{background:rgba(224,20,140,.14);box-shadow:inset 0 0 0 1px rgba(240,85,94,.4),var(--glow)}
.itnote::after{background:var(--icon-grad)}

/* ---------- rates ---------- */
.rate{padding:1.8rem 1.7rem}
.rate.hot{border-image:none}
.rate .price{width:fit-content;background:linear-gradient(100deg,#fff 10%,#FFD0B0 55%,#F6A23A 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rate .price small{color:var(--muted)}

/* ---------- contact ---------- */
.reach-card .ico{box-shadow:0 0 26px -4px rgba(224,20,140,.75)}
.reach-card .v{color:#fff}
a.reach-card .v,.reach-card.place .v{color:var(--pink)}
.talk-form{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -30px rgba(0,0,0,.8)}
input,textarea,select{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:var(--text);border-radius:10px}
input:focus,textarea:focus,select:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,107,174,.18)}
input:-webkit-autofill,textarea:-webkit-autofill{-webkit-text-fill-color:var(--text);box-shadow:0 0 0 100px #21182A inset;caret-color:var(--text)}
.chips span{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:var(--text)}
.chips label:hover span{border-color:var(--coral)}
.chips input:checked+span{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 24px -10px rgba(224,20,140,.8)}

/* ---------- CTA band + footer ---------- */
.cta{background:radial-gradient(50% 160% at 88% 110%,rgba(246,162,58,.35),transparent 60%),radial-gradient(55% 170% at 8% -30%,rgba(224,20,140,.45),transparent 62%),#190F21;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.cta .btn{background:var(--grad);color:#fff;box-shadow:0 10px 34px -10px rgba(224,20,140,.85)}
.cta .btn:hover{transform:translateY(-2px)}
footer{background:#0D0812}

/* ---------- motion off on request ---------- */
@media(prefers-reduced-motion:reduce){.card,.btn,.reach-card{transition:none}.card:hover,a.reach-card:hover,.btn:hover{transform:none}}

/* ---------- contact: sent state ---------- */
.sent-note{max-width:640px;margin:0 auto 1.6rem;padding:1.4rem 1.6rem;border-radius:16px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(240,85,94,.45);box-shadow:0 0 0 1px rgba(224,20,140,.12),0 26px 60px -24px rgba(224,20,140,.45)}
.sent-note h3{margin:0 0 .5rem;color:#fff}
.sent-note p{margin:0;color:var(--muted)}
.sent-note a{color:var(--pink)}
.talk-form.is-sent{display:none}

/* contact: symmetrical top (2026-10-08) */
.talk-hero .wrap{text-align:center}
.talk-hero h1{margin-left:auto;margin-right:auto}
.talk-hero .tag{margin-left:auto;margin-right:auto}
.reach-card .v{color:var(--pink)}
/* contact: email is the only card, centered at every width */
.reach{grid-template-columns:1fr;max-width:420px}
.reach-card{display:flex;align-items:center;text-align:center}
.reach-card .ico{margin:0 auto .8rem}