@font-face {
  font-family:Manrope;
  src:url('assets/manrope-400.ttf') format('truetype');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Manrope;
  src:url('assets/manrope-600.ttf') format('truetype');
  font-weight:500 700;
  font-display:swap
}
@font-face {
  font-family:Manrope;
  src:url('assets/manrope-800.ttf') format('truetype');
  font-weight:750 900;
  font-display:swap
}
/* Design: native CSS, variance 6 / motion 5 / density 3. Layers: header 20, mobile navigation 21. */ :root {
  --bg:#fff;
  --ink:#18243d;
  --muted:#626c7e;
  --accent:#2c58df;
  --accent-hover:#2146bd;
  --tint:#f4f7fd;
  --line:#e3e8f0;
  --soft-blue:#eaf0ff;
  --diagram-label:#fff;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  color-scheme:light
}
:root[data-theme=dark] {
  --bg:#101721;
  --ink:#edf2ff;
  --muted:#a9b5ca;
  --accent:#93b2ff;
  --accent-hover:#b5caff;
  --tint:#161f2d;
  --line:#2c384b;
  --soft-blue:#202e48;
  --diagram-label:#202d43;
  color-scheme:dark
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme=light]) {
    --bg:#101721;
    --ink:#edf2ff;
    --muted:#a9b5ca;
    --accent:#93b2ff;
    --accent-hover:#b5caff;
    --tint:#161f2d;
    --line:#2c384b;
    --soft-blue:#202e48;
    --diagram-label:#202d43;
    color-scheme:dark
  }
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 15px/1.7 Manrope,Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}
button,input,select,textarea {
  font:inherit
}
a {
  color:inherit;
  text-decoration:none
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:default
}
button {
  color:inherit
}
img,svg {
  display:block;
  max-width:100%
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}
::selection {
  background:var(--accent);
  color:var(--bg)
}
p {
  margin:0;
  color:var(--muted)
}
h1,h2,h3 {
  margin:0;
  font-weight:800;
  line-height:1.2
}
h1 {
  font-size:clamp(44px,4.75vw,70px);
  letter-spacing:-3.8px;
  line-height:1.13
}
h2 {
  font-size:clamp(32px,3.1vw,46px);
  letter-spacing:-2px;
  line-height:1.22
}
h3 {
  font-size:20px;
  letter-spacing:-.5px
}
.container {
  width:calc(100% - 112px);
  max-width:1280px;
  margin-inline:auto
}
.icon {
  width:22px;
  height:22px;
  flex-shrink:0;
  stroke-width:1.6
}
.site-header {
  height:94px;
  position:relative;
  z-index:20;
  border-bottom:1px solid var(--line)
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
  gap:30px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  font-size:30px;
  font-weight:800;
  letter-spacing:-1.5px;
  line-height:1
}
.brand img {
  object-fit:contain
}
.brand-period {
  color:var(--accent)
}
nav {
  display:flex;
  gap:30px;
  align-items:center
}
nav a {
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  transition:color 180ms ease;
  position:relative
}
nav a[aria-current] {
  color:var(--ink)
}
nav a[aria-current]:after {
  content:'';
  height:3px;
  width:3px;
  border-radius:50%;
  background:var(--accent);
  position:absolute;
  left:50%;
  bottom:-12px
}
.header-actions {
  display:flex;
  align-items:center;
  gap:16px
}
.button {
  background:#2c58df;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  border:1px solid transparent;
  border-radius:6px;
  padding:17px 23px;
  font-weight:600;
  font-size:13px;
  line-height:1.4;
  white-space:nowrap;
  transition:background 180ms ease,transform 160ms var(--ease-out)
}
.button-small {
  padding:12px 17px;
  gap:18px
}
.button .icon {
  width:18px;
  height:18px
}
.icon-button {
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:5px
}
.theme-toggle .icon {
  width:18px;
  height:18px
}
.theme-toggle .icon:last-child,.menu-toggle .icon:last-child {
  display:none
}
.theme-toggle.is-dark .icon:first-child {
  display:none
}
.theme-toggle.is-dark .icon:last-child {
  display:block
}
.menu-toggle {
  display:none
}
.hero {
  display:grid;
  grid-template-columns:1.04fr 1fr;
  gap:0;
  align-items:center;
  padding-block:30px;
  min-height:0
}
.hero-copy {
  position:relative;
  z-index:1
}
.eyebrow {
  font-size:10px;
  letter-spacing:1.9px;
  font-weight:700;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:25px
}
.eyebrow-line {
  width:23px;
  height:1px;
  background:var(--accent)
}
.hero h1 {
  white-space:nowrap
}
.hero h1 span,.about-hero h1 span {
  color:var(--accent)
}
.hero-description {
  font-size:16px;
  line-height:1.85;
  max-width:400px;
  margin-block:25px 32px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:26px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  font-weight:700;
  transition:color 180ms ease
}
.text-link .icon {
  width:17px;
  height:17px
}
.hero-visual {
  position:relative;
  margin-left:-8px;
  align-self:stretch;
  display:flex;
  justify-content:center;
  flex-direction:column
}
.hero-visual>svg {
  width:100%;
  overflow:visible
}
.diagram-heading {
  position:absolute;
  top:8px;
  left:56px;
  right:5px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--muted)
}
.diagram-caption {
  font-size:8px;
  letter-spacing:1.5px
}
.diagram-symbol {
  font-size:23px;
  color:var(--accent)
}
.diagram-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-inline:60px 8px;
  margin-top:-15px;
  font-size:10px;
  color:var(--muted)
}
.diagram-footer .icon-button {
  width:25px;
  height:25px;
  border:1px solid var(--line)
}
.diagram-footer .icon {
  width:12px;
  height:12px
}
.motion-toggle .icon:last-child {
  display:none
}
.motion-toggle[aria-pressed=true] .icon:first-child {
  display:none
}
.motion-toggle[aria-pressed=true] .icon:last-child {
  display:block
}
.proof-strip {
  border-block:1px solid var(--line);
  background:var(--tint)
}
.proof-inner {
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr 1fr;
  align-items:center;
  padding-block:30px
}
.proof-inner>p {
  font-size:13px;
  line-height:1.8
}
.proof-inner>p strong {
  font-weight:600;
  color:var(--ink)
}
.proof-inner>div {
  border-left:1px solid var(--line);
  padding-left:44px;
  display:flex;
  flex-direction:column;
  gap:3px
}
.proof-inner>div>strong {
  font-size:31px;
  font-weight:600;
  letter-spacing:-1.5px;
  line-height:1.4
}
.proof-inner>div>span {
  font-size:10px;
  color:var(--muted)
}
.section {
  padding-block:60px
}
.section-heading {
  margin-bottom:28px;
  max-width:600px
}
.section-heading .eyebrow {
  margin-bottom:18px
}
.section-heading>p:last-child {
  font-size:14px;
  max-width:440px;
  margin-top:19px;
  line-height:1.85
}
.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.service-card {
  display:flex;
  flex-direction:column;
  padding:24px;
  border:1px solid var(--line);
  border-radius:8px;
  transition:border-color 180ms ease,background 180ms ease,transform 220ms var(--ease-out);
  min-height:235px;
  background:var(--bg)
}
.service-card.featured {
  background:var(--tint)
}
.service-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px
}
.service-icon {
  color:var(--accent)
}
.service-icon .icon {
  width:28px;
  height:28px;
  stroke-width:1.4
}
.service-card-top>.icon {
  width:18px;
  height:18px;
  color:var(--muted)
}
.service-card h3 {
  font-size:18px;
  margin-bottom:13px
}
.service-card>p {
  font-size:12px;
  line-height:1.85;
  max-width:320px
}
.service-tags {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:18px
}
.service-tags span {
  font-size:9px;
  line-height:1.4;
  padding:5px 9px;
  border-radius:4px;
  background:var(--tint);
  color:var(--muted)
}
.featured .service-tags span {
  background:var(--bg)
}
.approach-section {
  background:var(--tint);
  border-block:1px solid var(--line)
}
.approach-intro {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  align-items:end;
  gap:90px
}
.approach-intro>p {
  max-width:340px;
  font-size:13px;
  line-height:1.9;
  padding-bottom:6px
}
.approach-intro .eyebrow {
  margin-bottom:18px
}
.flow {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:35px;
  margin-top:36px
}
.flow-track {
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  margin-bottom:27px
}
.flow-track:after {
  content:'';
  position:absolute;
  height:1px;
  background:var(--line);
  left:60px;
  right:32px
}
.flow-number {
  font-size:12px;
  border:1px solid var(--line);
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--accent);
  position:relative;
  isolation:isolate
}
.flow-number:after {
  content:'';
  position:absolute;
  inset:-1px;
  border:1px solid var(--accent);
  border-radius:50%;
  opacity:0
}
.flow-track>.icon {
  width:17px;
  color:var(--muted)
}
.flow-step h3 {
  font-size:18px;
  margin-bottom:14px
}
.flow-step>p {
  font-size:12px;
  line-height:1.85;
  max-width:225px
}
.industries {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center
}
.industries-copy>p {
  max-width:360px;
  font-size:14px;
  line-height:1.9;
  margin-block:23px 29px
}
.industry-row {
  display:flex;
  align-items:center;
  gap:20px;
  padding-block:23px;
  border-bottom:1px solid var(--line)
}
.industry-row:first-child {
  padding-top:0
}
.industry-row:last-child {
  border-bottom:0;
  padding-bottom:0
}
.industry-row>.icon:first-child {
  width:25px;
  height:25px;
  color:var(--accent)
}
.industry-row>.icon:last-child {
  width:16px;
  height:16px;
  margin-left:auto;
  color:var(--muted)
}
.industry-row h3 {
  font-size:14px;
  letter-spacing:-.2px;
  font-weight:600;
  margin-bottom:4px
}
.industry-row p {
  font-size:11px
}
.why-section {
  border-block:1px solid var(--line);
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:60px;
  padding-block:40px
}
.small-mark {
  display:inline-flex;
  color:var(--accent);
  margin-bottom:20px
}
.small-mark .icon {
  width:34px;
  height:34px
}
.why-title h2 {
  font-size:35px
}
.why-points>div {
  margin-bottom:27px
}
.why-points h3 {
  font-size:15px;
  font-weight:700;
  margin-bottom:10px
}
.why-points p {
  font-size:12px;
  line-height:1.9;
  max-width:360px
}
.contact-band {
  margin-block:42px;
  padding:35px 48px;
  background:var(--tint);
  border:1px solid var(--line);
  border-radius:10px;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  align-items:center;
  gap:40px;
  overflow:hidden
}
.contact-band>div:last-child>p:not(.eyebrow) {
  font-size:13px;
  margin-block:17px 27px;
  max-width:340px
}
.contact-band .eyebrow {
  margin-bottom:17px
}
.contact-band h2 {
  font-size:43px
}
.contact-orbit {
  width:160px;
  height:160px;
  position:relative;
  display:grid;
  place-items:center;
  justify-self:center
}
.contact-orbit span {
  position:absolute;
  border:1px solid var(--line);
  border-radius:50%;
  inset:0
}
.contact-orbit span:nth-child(2) {
  inset:35px
}
.contact-orbit span:nth-child(3) {
  inset:70px;
  border-color:var(--accent);
  opacity:.3
}
.contact-orbit>.icon {
  width:38px;
  height:38px;
  color:var(--accent)
}
.contact-orbit span:first-child:after {
  content:'';
  width:14px;
  height:14px;
  background:var(--accent);
  border:4px solid var(--tint);
  border-radius:50%;
  position:absolute;
  top:18px;
  left:43px
}
.site-footer {
  border-top:1px solid var(--line);
  padding-top:35px
}
.footer-top {
  display:grid;
  grid-template-columns:1.5fr .8fr .9fr 1.2fr;
  gap:50px;
  padding-bottom:30px
}
.footer-top .brand {
  font-size:29px
}
.footer-top>div:first-child>p {
  font-size:12px;
  margin-top:18px
}
.footer-top h3 {
  font-size:11px;
  font-weight:700;
  margin:2px 0 20px;
  letter-spacing:0
}
.footer-top>div>a:not(.brand) {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--muted);
  margin-bottom:9px;
  width:fit-content
}
.footer-top>div>a>.icon {
  width:12px;
  height:12px
}
.footer-top>div>p {
  font-size:11px;
  line-height:1.9;
  margin-bottom:12px
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding-block:23px;
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:var(--muted)
}
.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  transform:translateY(-150%);
  padding:10px;
  background:var(--bg);
  z-index:30
}
.skip-link:focus {
  transform:none
}
.detail-hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:50px;
  padding-block:30px
}
.detail-hero h1 {
  font-size:clamp(44px,4.6vw,67px)
}
.detail-hero .hero-description {
  max-width:480px
}
.detail-visual {
  position:relative
}
.detail-service-icon {
  position:absolute;
  right:10%;
  top:5%;
  padding:16px;
  background:var(--soft-blue);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--accent)
}
.detail-service-icon .icon {
  width:32px;
  height:32px
}
.capability-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px 50px
}
.capability {
  border-top:1px solid var(--line);
  padding-top:18px;
  scroll-margin-top:40px
}
.capability-number {
  font-size:11px;
  color:var(--accent)
}
.capability h3 {
  margin-block:18px 15px
}
.capability>p {
  font-size:14px;
  max-width:480px;
  margin-bottom:24px
}
.about-hero {
  padding-block:45px 35px
}
.about-hero h1 {
  font-size:clamp(38px,4.6vw,67px)
}
.about-hero>p:last-child {
  max-width:620px;
  font-size:17px;
  line-height:1.85;
  margin-top:30px
}
.about-statement {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  padding-bottom:45px
}
.about-statement h2 {
  font-size:36px;
  margin-bottom:25px
}
.about-statement p {
  font-size:14px;
  margin-top:18px
}
.contact-page {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  padding-block:45px 60px
}
.contact-page h1 {
  font-size:clamp(40px,4.1vw,60px);
  letter-spacing:-3px
}
.contact-page .hero-description {
  font-size:15px
}
.contact-methods {
  margin-top:50px;
  display:grid;
  gap:30px
}
.contact-methods>a,.contact-methods>div {
  display:flex;
  align-items:center;
  gap:18px;
  font-size:14px
}
.contact-methods .icon {
  color:var(--accent);
  width:21px
}
.contact-methods small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:4px
}
.contact-methods>a>.icon:last-child {
  margin-left:auto;
  max-width:17px
}
.contact-form-panel {
  padding:35px;
  background:var(--tint);
  border:1px solid var(--line);
  border-radius:8px
}
.contact-form-panel h2 {
  font-size:24px;
  letter-spacing:-.8px
}
.contact-form-panel>p {
  font-size:12px;
  margin-block:12px 28px
}
form {
  display:grid;
  gap:19px
}
label {
  font-size:11px;
  font-weight:600;
  display:flex;
  flex-direction:column;
  gap:8px
}
input,select,textarea {
  min-width:0;
  width:100%;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  border-radius:5px;
  padding:12px;
  font-size:12px;
  font-weight:400
}
textarea {
  resize:vertical;
  min-height:110px
}
::placeholder {
  color:var(--muted);
  opacity:1
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
form .button {
  justify-self:start
}
.form-note {
  font-size:10px
}
#form-result {
  font-size:12px;
  border-top:1px solid var(--line);
  padding-top:16px
}
#form-result p {
  margin-bottom:12px
}
#form-result a {
  text-decoration:underline
}
.not-found {
  padding-block:130px;
  min-height:60vh
}
.not-found p:not(.eyebrow) {
  margin-block:25px
}
.not-found h1 {
  font-size:60px
}
@media(hover:hover) and (pointer:fine) {
  nav a:hover,.text-link:hover,.footer-top a:hover {
    color:var(--accent)
  }
  .button:hover {
    background:#2146bd;
    transform:translateY(-2px)
  }
  .service-card:hover {
    border-color:var(--accent);
    background:var(--tint);
    transform:translateY(-4px)
  }
  .icon-button:hover {
    background:var(--soft-blue)
  }
}
.button:active {
  transform:translateY(0)
}
@media(prefers-reduced-motion:no-preference) {
  .data-stream {
    animation:data-flow 8s linear infinite
  }
  .flow.is-visible .flow-step:nth-child(1) .flow-number:after {
    animation:step-focus 12s linear infinite
  }
  .flow.is-visible .flow-step:nth-child(2) .flow-number:after {
    animation:step-focus 12s 3s linear infinite
  }
  .flow.is-visible .flow-step:nth-child(3) .flow-number:after {
    animation:step-focus 12s 6s linear infinite
  }
  .flow.is-visible .flow-step:nth-child(4) .flow-number:after {
    animation:step-focus 12s 9s linear infinite
  }
  .reveal.is-pending {
    opacity:0;
    transform:translateY(18px)
  }
  .reveal {
    transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)
  }
  .hero-copy {
    animation:enter 800ms var(--ease-out) both
  }
  .hero-visual {
    animation:enter 800ms 100ms var(--ease-out) both
  }
  .contact-orbit span:first-child {
    animation:orbit 30s linear infinite
  }
}
@keyframes data-flow {
  to {
    stroke-dashoffset:-568
  }
}
@keyframes step-focus {
  0%,24% {
    opacity:1
  }
  26%,100% {
    opacity:0
  }
}
@keyframes enter {
  from {
    opacity:0;
    transform:translateY(15px)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes orbit {
  to {
    transform:rotate(360deg)
  }
}
body.motion-paused .data-stream,body.motion-paused .flow-number:after,body.motion-paused .contact-orbit span {
  animation-play-state:paused!important
}
body.motion-paused .reveal {
  transition:none
}
.diagram-offscreen .data-stream {
  animation-play-state:paused
}
@media(min-width:1500px) {
  .hero {
    min-height:0
  }
  .hero h1 {
    font-size:74px
  }
  .hero-visual {
    margin-left:0
  }
}
@media(max-width:1150px) {
  .container {
    width:calc(100% - 72px)
  }
  nav {
    gap:20px
  }
  .header-inner {
    gap:20px
  }
  .header-actions {
    gap:8px
  }
  .brand {
    font-size:27px
  }
  .hero {
    min-height:0;
    padding-block:40px
  }
  .hero h1 {
    font-size:55px;
    letter-spacing:-3px
  }
  .hero-actions {
    gap:18px
  }
  .hero-actions .text-link {
    font-size:11px
  }
  .button {
    padding:16px 18px;
    gap:18px
  }
  .button-small {
    padding:12px 15px
  }
  .proof-inner>div {
    padding-left:28px
  }
  .service-card {
    padding:26px 23px
  }
  .industries {
    gap:60px
  }
  .why-section {
    gap:60px
  }
  .contact-band {
    gap:40px;
    padding:35px
  }
  .contact-page {
    gap:45px
  }
  .contact-page h1 {
    font-size:47px
  }
  .footer-top {
    gap:30px
  }
  .diagram-heading {
    left:30px
  }
  .diagram-footer {
    padding-left:30px
  }
}
@media(max-width:960px) {
  nav {
    gap:16px
  }
  .header-actions>.button {
    display:none
  }
  .hero h1 {
    font-size:47px;
    letter-spacing:-2.7px
  }
  .hero-description {
    font-size:14px;
    max-width:340px
  }
  .hero-actions {
    align-items:start;
    flex-direction:column;
    gap:18px
  }
  .hero {
    min-height:0
  }
  .hero-visual {
    margin-left:-15px
  }
  .diagram-caption {
    font-size:7px;
    letter-spacing:1px
  }
  .proof-inner>div {
    padding-left:22px
  }
  .proof-inner>div>span {
    font-size:9px
  }
  .proof-inner>p {
    font-size:11px
  }
  .section {
    padding-block:50px
  }
  .services-grid {
    gap:13px
  }
  .service-card {
    padding:24px 20px
  }
  .service-card h3 {
    font-size:16px
  }
  .service-tags {
    gap:5px
  }
  .service-tags span {
    font-size:8px
  }
  .approach-intro {
    gap:40px
  }
  .flow {
    gap:24px
  }
  .flow-step>p {
    font-size:11px
  }
  .contact-band h2 {
    font-size:36px
  }
  .contact-band {
    gap:30px
  }
  .contact-orbit {
    width:200px;
    height:200px
  }
  .why-title h2 {
    font-size:30px
  }
  .why-section {
    gap:40px
  }
  .footer-top {
    grid-template-columns:1.3fr .8fr .9fr 1.2fr;
    gap:20px
  }
  .footer-top .brand {
    font-size:24px
  }
  .contact-page {
    gap:30px
  }
  .contact-form-panel {
    padding:25px
  }
  .contact-page h1 {
    font-size:40px;
    letter-spacing:-2px
  }
  .form-row {
    grid-template-columns:1fr
  }
  .detail-hero {
    gap:15px
  }
  .detail-hero h1 {
    font-size:49px
  }
  .about-statement {
    gap:40px
  }
}
@media(max-width:767px) {
  .container {
    width:calc(100% - 40px)
  }
  .site-header {
    height:77px
  }
  .brand {
    font-size:27px
  }
  .brand img {
    width:30px;
    height:30px
  }
  .header-actions {
    gap:10px
  }
  .menu-toggle {
    display:grid
  }
  .header-actions>.button {
    display:inline-flex;
    padding:10px 12px;
    font-size:11px;
    gap:10px
  }
  .header-actions>.button>.icon {
    width:14px
  }
  .header-inner {
    gap:10px
  }
  nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:76px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    padding:22px 26px;
    box-shadow:0 20px 25px #00000009;
    z-index:21
  }
  nav.is-open {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0
  }
  nav a {
    padding:14px;
    font-size:14px
  }
  nav a[aria-current]:after {
    left:0;
    bottom:24px
  }
  .menu-toggle[aria-expanded=true] .icon:first-child {
    display:none
  }
  .menu-toggle[aria-expanded=true] .icon:last-child {
    display:block
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:28px 22px;
    min-height:0;
    gap:35px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.5px;
    margin-bottom:23px
  }
  .hero h1 {
    font-size:clamp(42px,8.4vw,62px);
    letter-spacing:-2.7px
  }
  .hero-description {
    font-size:14px;
    max-width:440px;
    margin-block:22px 25px
  }
  .hero-actions {
    flex-direction:row;
    align-items:center;
    gap:20px
  }
  .hero-actions .button {
    font-size:11px;
    gap:18px;
    padding:15px
  }
  .hero-actions .text-link {
    font-size:10px;
    gap:8px
  }
  .hero-actions .icon {
    width:15px;
    height:15px
  }
  .hero-visual {
    margin-left:0;
    width:min(100%,500px);
    justify-self:center;
    aspect-ratio:1.15
  }
  .diagram-heading {
    top:0;
    left:20px;
    right:15px
  }
  .diagram-footer {
    margin-top:-12px;
    padding-inline:20px 15px
  }
  .diagram-caption {
    font-size:7px
  }
  .hero-visual>svg {
    max-height:400px
  }
  .proof-inner {
    grid-template-columns:1fr 1fr;
    gap:26px 20px;
    padding-block:28px
  }
  .proof-inner>div {
    border:0;
    padding:0
  }
  .proof-inner>p {
    font-size:12px
  }
  .proof-inner>div>strong {
    font-size:29px
  }
  .proof-inner>div>span {
    font-size:10px
  }
  .proof-inner>div:nth-child(2n) {
    border-left:1px solid var(--line);
    padding-left:22px
  }
  .section {
    padding-block:42px
  }
  h2 {
    font-size:33px;
    letter-spacing:-1.6px
  }
  .section-heading {
    margin-bottom:31px
  }
  .section-heading>p:last-child {
    font-size:13px
  }
  .services-grid {
    grid-template-columns:1fr 1fr;
    gap:13px
  }
  .service-card {
    min-height:160px;
    padding:22px 19px
  }
  .service-card h3 {
    font-size:16px
  }
  .service-card-top {
    margin-bottom:25px
  }
  .service-card>p {
    font-size:11px
  }
  .service-tags {
    padding-top:20px
  }
  .service-tags span {
    font-size:8px
  }
  .approach-intro {
    grid-template-columns:1fr;
    gap:22px
  }
  .approach-intro>p {
    max-width:460px;
    font-size:13px
  }
  .flow {
    grid-template-columns:1fr 1fr;
    gap:38px 30px;
    margin-top:40px
  }
  .flow-step>p {
    font-size:12px
  }
  .flow-track {
    margin-bottom:18px
  }
  .industries {
    grid-template-columns:1fr;
    gap:40px
  }
  .industries-copy>p {
    max-width:440px
  }
  .industry-row {
    padding-block:20px
  }
  .industry-row h3 {
    font-size:14px
  }
  .industry-row p {
    font-size:12px
  }
  .why-section {
    grid-template-columns:1fr;
    gap:32px;
    padding-block:45px
  }
  .why-title h2 {
    font-size:32px
  }
  .why-points>div {
    margin-bottom:24px
  }
  .why-points p {
    max-width:100%;
    font-size:13px
  }
  .contact-band {
    grid-template-columns:1fr;
    margin-block:32px;
    padding:32px;
    gap:20px
  }
  .contact-orbit {
    width:130px;
    height:130px;
    justify-self:start;
    margin:0 0 10px
  }
  .contact-orbit span:nth-child(2) {
    inset:20px
  }
  .contact-orbit span:nth-child(3) {
    inset:40px
  }
  .contact-orbit>.icon {
    width:25px;
    height:25px
  }
  .contact-orbit span:first-child:after {
    width:12px;
    height:12px;
    top:0;
    left:30px
  }
  .contact-band h2 {
    font-size:35px
  }
  .contact-band .eyebrow {
    font-size:8px
  }
  .footer-top {
    grid-template-columns:1fr 1fr;
    gap:35px 25px;
    padding-bottom:35px
  }
  .site-footer {
    padding-top:38px
  }
  .footer-top>div:first-child {
    grid-column:1/-1
  }
  .footer-top>div:last-child {
    grid-column:1/-1
  }
  .footer-top h3 {
    margin-bottom:15px
  }
  .footer-top>div>a:not(.brand) {
    font-size:12px
  }
  .footer-top>div>p {
    font-size:12px
  }
  .footer-bottom {
    font-size:9px;
    flex-wrap:wrap;
    gap:12px
  }
  .footer-bottom>span:nth-child(2) {
    display:none
  }
  .detail-hero {
    grid-template-columns:1fr;
    padding-block:28px 16px;
    gap:25px
  }
  .detail-hero h1 {
    font-size:48px
  }
  .detail-visual {
    max-width:450px;
    margin-inline:auto
  }
  .capability-grid {
    gap:35px;
    grid-template-columns:1fr 1fr
  }
  .capability h3 {
    font-size:18px
  }
  .capability>p {
    font-size:12px
  }
  .capability .text-link {
    font-size:11px
  }
  .about-hero {
    padding-block:35px 25px
  }
  .about-hero h1 {
    font-size:38px;
    letter-spacing:-2px
  }
  .about-hero>p:last-child {
    font-size:15px
  }
  .about-statement {
    grid-template-columns:1fr;
    gap:25px;
    padding-bottom:30px
  }
  .about-graphic {
    max-width:450px;
    margin-inline:auto
  }
  .about-statement h2 {
    font-size:32px
  }
  .contact-page {
    grid-template-columns:1fr;
    gap:45px;
    padding-block:32px 45px
  }
  .contact-page h1 {
    font-size:45px;
    letter-spacing:-2.5px
  }
  .contact-methods {
    margin-top:35px;
    gap:24px
  }
  .contact-methods>a {
    font-size:13px
  }
  .contact-methods>a>.icon:last-child {
    margin-left:0
  }
  .contact-form-panel {
    padding:26px
  }
  .form-row {
    grid-template-columns:1fr 1fr
  }
  .not-found {
    padding-block:50px
  }
  .not-found h1 {
    font-size:43px;
    letter-spacing:-2px
  }
}
@media(max-width:420px) {
  .container {
    width:calc(100% - 36px)
  }
  .brand {
    font-size:24px;
    gap:6px
  }
  .brand img {
    width:26px;
    height:26px
  }
  .header-actions {
    gap:5px
  }
  .theme-toggle {
    width:27px
  }
  .header-actions>.button {
    font-size:10px;
    padding:10px;
    gap:7px
  }
  .hero h1 {
    font-size:42px
  }
  .hero-actions {
    gap:16px
  }
  .hero-actions .button {
    font-size:10px;
    padding:14px 12px;
    gap:10px
  }
  .hero-actions .text-link {
    font-size:9px;
    gap:6px
  }
  .services-grid {
    grid-template-columns:1fr
  }
  .service-card {
    min-height:0;
    padding:25px
  }
  .service-card-top {
    margin-bottom:25px
  }
  .service-card h3 {
    font-size:19px
  }
  .service-card>p {
    font-size:13px;
    max-width:100%
  }
  .service-tags span {
    font-size:9px
  }
  .capability-grid {
    grid-template-columns:1fr;
    gap:33px
  }
  .capability>p {
    font-size:13px
  }
  .contact-band {
    padding:27px
  }
  .contact-band h2 {
    font-size:31px
  }
  .form-row {
    grid-template-columns:1fr
  }
  .contact-form-panel {
    padding:23px
  }
  .contact-form-panel h2 {
    font-size:23px
  }
  .contact-page h1 {
    font-size:40px
  }
  .about-hero h1 {
    font-size:33px
  }
  .detail-hero h1 {
    font-size:43px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition-duration:0ms!important
  }
  .reveal.is-pending {
    opacity:1;
    transform:none
  }
}

/* Compact layouts and service-specific explanatory illustrations. */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.hero .typing-title {
  font-size:clamp(36px,4.1vw,60px);
  letter-spacing:-2.8px;
}
.hero h1>.typing-headline { color:var(--ink); }
.typed-wrap { display:inline-block; width:8ch; }
.typing-cursor { display:inline-block; font-weight:400; margin-left:1px; }
.hero-visual { margin-left:0; align-self:center; gap:8px; }
.hero-visual .diagram-heading { position:static; padding-inline:10px; }
.hero-visual>.service-diagram { width:100%; }
.diagram-footer { padding-inline:10px; margin-top:3px; gap:16px; }
.detail-visual .diagram-footer { margin-top:8px; }
.service-diagram {
  --diagram-bg:var(--tint);
  --diagram-card:var(--bg);
  --diagram-blue:var(--accent);
  --diagram-edge:color-mix(in srgb,var(--accent) 68%,var(--line));
  width:100%;
  overflow:visible;
  font-family:Manrope,Arial,sans-serif;
}
.diagram-surface { fill:var(--diagram-bg); stroke:var(--diagram-edge); }
.diagram-grid { stroke:var(--ink); stroke-opacity:.045; stroke-width:.8; }
.diagram-node { fill:var(--diagram-card); stroke:var(--diagram-edge); stroke-width:1.7px; }
.diagram-hub { fill:var(--soft-blue); stroke:var(--accent); stroke-width:2.2px; }
.diagram-label { fill:var(--ink); font-size:13px; font-weight:600; }
.diagram-small { fill:var(--muted); font-size:11px; }
.diagram-caption-text { fill:var(--muted); font-size:11px; }
.diagram-hub-name { fill:var(--ink); font-size:25px; font-weight:800; letter-spacing:-1px; }
.diagram-glyph { color:var(--accent); stroke-width:2; }
.diagram-route { stroke:var(--accent); stroke-opacity:.65; stroke-width:1.8px; }
.diagram-flow { stroke:var(--accent); stroke-width:3px; stroke-linecap:round; stroke-dasharray:10 170; }
.diagram-halo { stroke:var(--accent); stroke-opacity:.25; stroke-dasharray:3 6; }
.diagram-halo-outer { stroke-opacity:.12; }
.diagram-rack { fill:var(--tint); stroke:var(--diagram-edge); stroke-width:1.3px; }
.diagram-rack-slot { stroke:var(--muted); stroke-opacity:.85; stroke-width:1.6px; }
.diagram-led,.diagram-solid { fill:var(--accent); }
.wifi-wave { stroke:var(--accent); stroke-width:2.4px; stroke-linecap:round; transform-box:fill-box; transform-origin:center bottom; }
.security-boundary { stroke:var(--accent); stroke-opacity:.75; stroke-width:1.8px; stroke-dasharray:4 7; }
.security-shield { fill:var(--soft-blue); stroke:var(--accent); stroke-width:2.4px; }
.security-inner { stroke:var(--accent); stroke-opacity:.6; stroke-width:1.5px; }
.security-check-path { stroke:var(--accent); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.diagram-warning { fill:var(--bg); stroke:var(--muted); stroke-width:1.8px; }
.diagram-warning-line { stroke:var(--muted); stroke-width:1.8px; stroke-linecap:round; }
.threat-flow { stroke:var(--muted); stroke-width:2.6px; stroke-dasharray:6 114; }
.contact-orbit span:nth-child(2) { inset:24px; }
.contact-orbit span:nth-child(3) { inset:48px; }
.contact-band { grid-template-columns:.55fr 1.45fr; }
.contact-band h2 { font-size:37px; }
@media (prefers-reduced-motion:no-preference) {
  .diagram-flow { animation:diagram-transmit 4s linear infinite; }
  .diagram-led { animation:rack-activity 3s linear infinite; }
  .wifi-outer { animation:wifi-signal 3s var(--ease-out) infinite; }
  .wifi-inner { animation:wifi-signal 3s .35s var(--ease-out) infinite; }
  .threat-flow { animation:threat-arrival 3s linear infinite; }
  .threat-block { animation:threat-filter 3s linear infinite; }
  .typing-cursor { animation:cursor-blink 1s step-end infinite; }
}
/* Keep meaningful strokes readable when diagrams scale into compact cards or phones. */
.diagram-node,.diagram-hub,.diagram-route,.diagram-flow,.diagram-rack,
.diagram-rack-slot,.wifi-wave,.security-boundary,.security-shield,.security-inner,
.diagram-warning,.diagram-warning-line,.threat-flow {
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.diagram-glyph>:is(path,circle,rect,line,polyline,polygon,ellipse) {
  vector-effect:non-scaling-stroke;
  stroke-width:1.7px;
}
.infrastructure-diagram :is(path[stroke],g[stroke]>path,rect[stroke]) {
  vector-effect:non-scaling-stroke;
  stroke-width:1.7px;
}
.infrastructure-diagram .data-stream path { stroke-width:3px; }
.infrastructure-diagram path[stroke="white"] { stroke-width:2px; }
@keyframes diagram-transmit { to { stroke-dashoffset:-360; } }
@keyframes rack-activity { 0%,40%,100% { opacity:1; } 50%,70% { opacity:.25; } }
@keyframes wifi-signal { 0%,100% { opacity:.25; transform:scale(.93); } 45% { opacity:1; transform:scale(1); } }
@keyframes threat-arrival { 0% { stroke-dashoffset:120; } 65%,100% { stroke-dashoffset:0; } }
@keyframes threat-filter { 0%,50%,100% { opacity:.45; } 65%,85% { opacity:1; } }
@keyframes cursor-blink { 50% { opacity:0; } }
body.motion-paused .diagram-flow,
body.motion-paused .diagram-led,
body.motion-paused .wifi-wave,
body.motion-paused .threat-flow,
body.motion-paused .threat-block { animation-play-state:paused; }
body.motion-paused .typing-cursor { visibility:hidden; animation:none; }
.diagram-offscreen .diagram-flow,
.diagram-offscreen .diagram-led,
.diagram-offscreen .wifi-wave,
.diagram-offscreen .threat-flow,
.diagram-offscreen .threat-block { animation-play-state:paused; }
@media (min-width:1500px) {
  .hero .typing-title { font-size:60px; }
}
@media (min-width:768px) and (max-width:1150px) {
  .hero .typing-title { font-size:clamp(33px,4vw,46px); letter-spacing:-2px; }
  .hero { padding-block:28px; }
  .hero-actions { gap:16px; }
  .hero-visual { margin-left:0; }
}
@media (max-width:767px) {
  .hero { gap:20px; }
  .hero .typing-title { font-size:clamp(34px,10vw,43px); letter-spacing:-2px; line-height:1.12; }
  .typed-wrap { display:inline-block; width:7ch; }
  .typing-headline>br { display:initial; }
  .hero-description { margin-block:16px 20px; }
  .hero-visual { width:min(100%,480px); aspect-ratio:auto; }
  .hero-visual>.service-diagram { max-height:270px; }
  .hero-visual .diagram-heading { padding-inline:5px; }
  .diagram-footer { padding-inline:5px; font-size:9px; }
  .detail-hero { gap:20px; }
  .detail-visual { width:100%; max-width:480px; }
  .service-diagram .diagram-label { font-size:14px; }
  .service-diagram .diagram-caption-text { font-size:12px; }
  .service-card-top { margin-bottom:20px; }
  .service-tags { padding-top:16px; }
  .industries { gap:28px; }
  .contact-band { grid-template-columns:1fr; gap:14px; padding:26px; }
  .contact-orbit { display:none; }
  .contact-band h2 { font-size:32px; }
  .contact-band h2 br { display:none; }
  .contact-band>div:last-child>p:not(.eyebrow) { margin-block:14px 20px; }
  .footer-top { gap:25px; }
}
@media (max-width:420px) {
  .hero .typing-title { font-size:clamp(34px,10vw,40px); }
  .hero-visual>.service-diagram { max-height:220px; }
  .service-card { padding:21px; }
}
@media (prefers-reduced-motion:reduce) {
  .typing-cursor { display:none; }
}

.detail-hero+.section>.section-heading { max-width:none; margin-bottom:26px; }
.detail-hero+.section>.section-heading>p:last-child { max-width:760px; }

/* Service detail and illustrations use the space alongside the copy. */
.section { padding-block:42px; }
.services-intro { display:grid; grid-template-columns:1.15fr 1fr; gap:55px; align-items:center; margin-bottom:26px; }
.services-intro .section-heading { margin:0; }
.services-intro .section-heading>p:last-child { max-width:530px; }
.services-intro-note { display:grid; grid-template-columns:130px 1fr; gap:8px 18px; align-items:center; padding:20px; border-left:2px solid var(--accent); background:var(--tint); border-radius:0 7px 7px 0; }
.services-intro-note>div { grid-row:span 2; }
.services-intro-note h3 { font-size:16px; letter-spacing:-.3px; align-self:end; }
.services-intro-note>p { font-size:12px; line-height:1.8; align-self:start; }
.mini-graphic { --diagram-card:var(--bg); --diagram-edge:color-mix(in srgb,var(--accent) 68%,var(--line)); width:100%; max-height:128px; }
.mini-surface { fill:var(--tint); }
.service-visual { position:relative; margin-bottom:18px; }
.service-link-arrow { position:absolute; top:9px; right:9px; color:var(--accent); }
.service-link-arrow .icon { width:17px; height:17px; }
.service-card { padding:20px; min-height:0; }
.service-card>p { max-width:none; line-height:1.8; }
.service-tags { padding-top:16px; }
.service-tags span { font-size:9px; }
.service-card.featured .mini-surface { fill:var(--soft-blue); }
.capability-grid { gap:25px 30px; }
.capability { display:grid; grid-template-columns:130px minmax(0,1fr); gap:20px; padding-top:22px; }
.capability-visual { align-self:start; margin-top:3px; }
.capability-visual .mini-graphic { border:1px solid var(--line); border-radius:7px; }
.capability-copy h3 { font-size:19px; margin:0 0 12px; }
.capability-copy>p { font-size:12px; line-height:1.85; margin-bottom:15px; }
.capability-points,.content-checks { padding:0; margin:0 0 20px; list-style:none; display:grid; gap:9px; }
.capability-points li,.content-checks li { display:flex; gap:9px; align-items:flex-start; font-size:11px; color:var(--muted); line-height:1.6; }
.capability-points .icon,.content-checks .icon { width:14px; height:14px; margin-top:2px; color:var(--accent); }
.capability-copy .text-link { font-size:11px; }
.service-spotlight,.support-section { background:var(--tint); border-block:1px solid var(--line); padding-block:42px; }
.spotlight-layout,.support-layout,.industry-layout { display:grid; grid-template-columns:1fr 1.05fr; gap:45px; align-items:center; }
.spotlight-copy>p,.support-layout>div>p,.industry-layout>div>p:not(.eyebrow) { font-size:13px; margin-block:17px 20px; line-height:1.85; }
.editorial-graphic { min-width:0; }
.editorial-graphic .service-diagram { max-height:390px; }
.diagram-support-number { fill:var(--accent); font-size:40px; font-weight:800; letter-spacing:-2px; }
.feature-descriptions { margin:0 0 20px; display:grid; gap:16px; }
.feature-descriptions>div { margin:0; }
.feature-descriptions dt { display:flex; gap:8px; align-items:center; font-size:13px; font-weight:700; }
.feature-descriptions dt .icon { color:var(--accent); width:17px; height:17px; }
.feature-descriptions dd { margin:6px 0 0 25px; color:var(--muted); font-size:12px; line-height:1.8; }
.industry-sectors { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; border-top:1px solid var(--line); padding-top:25px; margin-top:30px; }
.industry-sectors .icon { width:25px; height:25px; color:var(--accent); margin-bottom:12px; }
.industry-sectors h3 { font-size:12px; font-weight:700; letter-spacing:-.2px; margin-bottom:7px; }
.industry-sectors p { font-size:10px; line-height:1.7; }
.contact-band { grid-template-columns:.65fr 1.35fr; gap:35px; margin-block:32px; padding:30px 36px; }
.contact-illustration { min-width:0; text-align:center; }
.contact-illustration .mini-graphic { max-height:160px; }
.contact-illustration>p { font-size:12px; font-weight:600; letter-spacing:.2px; }
.contact-band-actions { display:flex; gap:23px; align-items:center; flex-wrap:wrap; }
.contact-band-actions>.text-link { color:var(--accent); font-size:12px; }
.brand-slogan { letter-spacing:.35px; font-weight:600; }
.footer-top>div>p strong { color:var(--ink); font-weight:600; }
.footer-bottom { padding-right:130px; }
.whatsapp-float { position:fixed; bottom:22px; right:24px; z-index:19; display:flex; align-items:center; gap:9px; padding:13px 17px; border-radius:28px; color:#fff; background:#2c58df; border:1px solid #ffffff30; box-shadow:0 4px 18px #172e6629; font-size:12px; font-weight:600; transition:background 180ms ease; }
.whatsapp-float .icon { width:21px; height:21px; }
@media (hover:hover) and (pointer:fine) { .whatsapp-float:hover { background:#2146bd; } }
@media (max-width:1150px) {
  .services-intro { gap:30px; }
  .services-intro-note { grid-template-columns:1fr; padding:18px; }
  .services-intro-note>div { display:none; }
  .capability { grid-template-columns:100px minmax(0,1fr); gap:15px; }
  .spotlight-layout,.support-layout,.industry-layout { gap:30px; }
  .industry-sectors { gap:17px; }
}
@media (max-width:960px) {
  .capability-grid { grid-template-columns:1fr; }
  .capability { grid-template-columns:180px minmax(0,1fr); gap:25px; }
  .capability-copy>p { font-size:13px; }
  .capability-points li { font-size:12px; }
  .spotlight-layout,.support-layout,.industry-layout { grid-template-columns:1fr 1fr; gap:25px; }
  .industry-sectors { grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
  .contact-band { grid-template-columns:.65fr 1.35fr; padding:28px; gap:22px; }
  .contact-band-actions { gap:18px; }
}
@media (max-width:767px) {
  .section,.service-spotlight,.support-section { padding-block:32px; }
  .services-intro { grid-template-columns:1fr; gap:20px; margin-bottom:22px; }
  .services-intro-note { padding:15px 18px; }
  .services-intro-note>p { font-size:12px; }
  .services-grid { gap:13px; }
  .service-card { padding:17px; }
  .service-visual { margin-bottom:15px; }
  .service-visual .mini-graphic { max-height:110px; }
  .service-card>p { font-size:12px; }
  .service-tags { gap:5px; }
  .service-tags span { font-size:8px; }
  .capability { grid-template-columns:135px minmax(0,1fr); gap:20px; }
  .capability-copy h3 { font-size:18px; }
  .spotlight-layout,.support-layout,.industry-layout { grid-template-columns:1fr; gap:25px; }
  .editorial-graphic { width:100%; max-width:560px; margin-inline:auto; }
  .editorial-graphic .service-diagram { max-height:340px; }
  .industry-sectors { gap:25px 15px; padding-top:22px; margin-top:22px; }
  .industry-sectors h3 { font-size:11px; }
  .industry-sectors p { font-size:10px; }
  .feature-descriptions dd { font-size:12px; }
  .contact-band { grid-template-columns:1fr; padding:24px; gap:16px; }
  .contact-illustration { display:grid; grid-template-columns:100px 1fr; align-items:center; text-align:left; gap:10px; }
  .contact-illustration .mini-graphic { max-height:55px; }
  .contact-illustration>p { font-size:10px; }
  .contact-band h2 { font-size:30px; }
  .footer-bottom { padding-right:45px; gap:10px; }
  .whatsapp-float { right:16px; bottom:16px; padding:13px; }
  .whatsapp-float>span { display:none; }
}
@media (max-width:540px) {
  .capability { grid-template-columns:1fr; gap:17px; }
  .capability-visual { width:100%; }
  .capability-visual .mini-graphic { max-height:105px; }
  .capability-copy>p { font-size:13px; }
  .capability-points li { font-size:12px; }
  .services-grid { grid-template-columns:1fr; }
  .service-card { display:grid; grid-template-columns:95px minmax(0,1fr); gap:0 15px; padding:17px; }
  .service-visual { grid-row:span 3; align-self:start; margin-bottom:0; }
  .service-visual .mini-graphic { height:95px; }
  .service-link-arrow { display:none; }
  .service-card h3 { font-size:16px; margin-bottom:10px; }
  .service-card>p { font-size:11px; }
  .service-tags { margin-top:0; padding-top:12px; }
  .service-tags span { font-size:8px; }
  .contact-band-actions { align-items:start; flex-direction:column; }
}