/* =====================================================================
   KOA ICT Network and Business Solutions — v4 stylesheet
   One design system for every public page. Colours come from the logo.
   Layout rule: text blocks always sit in normal flow (grid/flex), never
   pulled over other text with negative margins or absolute positioning.
   ===================================================================== */

:root {
  --navy: #0B2566;
  --navy-900: #061437;
  --navy-800: #071A4A;
  --royal: #1552D6;
  --royal-600: #1247BD;
  --sky: #2E9BFF;
  --sky-200: #9FC3FF;
  --ink: #0B1533;
  --slate: #55627D;
  --mist: #F3F6FC;
  --line: #E1E7F2;
  --white: #FFFFFF;
  --green: #34D399;

  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(11,21,51,.05);
  --shadow: 0 1px 2px rgba(11,21,51,.04), 0 12px 32px -14px rgba(11,37,102,.22);
  --shadow-lg: 0 30px 60px -24px rgba(6,20,55,.45);

  --bs-body-font-family: var(--font);
  --bs-body-color: var(--ink);
  --bs-link-color: var(--royal);
  --bs-link-color-rgb: 21, 82, 214;
  --bs-link-hover-color: var(--navy);
  --bs-link-hover-color-rgb: 11, 37, 102;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { font-family: var(--font); color: var(--ink); font-size: 1.0625rem; line-height: 1.7; background: #fff; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 { font-family: var(--font); color: var(--navy); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
p { margin-bottom: 1rem; }
h1, h2, .section-title { text-wrap: balance; }
.hero-lead, .section-lead { text-wrap: pretty; }
a { text-underline-offset: 3px; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 4px; }

.skip-link { position: absolute; left: 1rem; top: -60px; z-index: 2000; background: var(--navy); color: #fff; padding: .6rem 1rem; border-radius: var(--r-sm); }
.skip-link:focus { top: 1rem; color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: .9rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--royal);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--sky); box-shadow: 5px -5px 0 -1px var(--royal); flex: none; }
.eyebrow-light { color: var(--sky-200); }
.eyebrow-light::before { display: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; animation: live 2.2s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

.icon-tile {
  flex: none; width: 46px; height: 46px; display: inline-grid; place-items: center;
  border-radius: 12px; background: #EAF1FE; color: var(--royal); font-size: 1.25rem;
}
.icon-tile-sm { width: 38px; height: 38px; border-radius: 10px; font-size: 1.05rem; }
.service-icon { flex: none; width: 46px; height: 46px; display: inline-grid; place-items: center; border-radius: 12px; background: #EAF1FE; color: var(--royal); font-size: 1.25rem; }

/* ---------- Buttons & links ---------- */
.btn { font-family: var(--font); font-weight: 600; border-radius: 10px; padding: .7rem 1.3rem; letter-spacing: -.005em; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-lg { padding: .9rem 1.6rem; font-size: 1rem; }
.btn-brand { background: var(--royal); color: #fff; border: 1px solid var(--royal); }
.btn-brand:hover, .btn-brand:focus-visible { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-light-brand { background: #fff; color: var(--navy); border: 1px solid #fff; }
.btn-light-brand:hover, .btn-light-brand:focus-visible { background: #E8EFFD; border-color: #E8EFFD; color: var(--navy); }
.btn-ghost-light, .btn-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn-ghost-light:hover, .btn-ghost-light:focus-visible, .btn-outline-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); color: #fff; }
.btn .bi-arrow-right { transition: transform .2s; }
.btn:hover .bi-arrow-right { transform: translateX(3px); }

.link-arrow, .link-strong { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--royal); text-decoration: none; }
.link-arrow:hover, .link-strong:hover { color: var(--navy); }
.link-arrow .bi { transition: transform .2s; }
.link-arrow:hover .bi { transform: translateX(3px); }
.link-strong::after { content: "\2192"; transition: transform .2s; }
.link-strong:hover::after { transform: translateX(3px); }

/* ---------- Top bar & header ---------- */
.topbar { background: var(--navy-900); color: #AFC0E3; font-size: .82rem; padding: .5rem 0; }
.topbar a { color: #C9D6F2; text-decoration: none; white-space: nowrap; }
.topbar a:hover { color: #fff; }
.topbar .bi { color: var(--sky); margin-right: .35rem; }

.site-header { background: rgba(255,255,255,.96); backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--line); z-index: 1030; }
.site-header .navbar { padding: .75rem 0; }
.navbar-brand img { height: 48px; width: auto; }
.navbar-toggler { border: 1px solid var(--line); border-radius: 10px; font-size: 1.5rem; color: var(--navy); padding: .25rem .6rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(46,155,255,.35); }
.nav-link { font-weight: 500; font-size: .98rem; color: var(--ink); padding: .5rem .95rem !important; position: relative; border-radius: 8px; }
.nav-link:hover { color: var(--royal); }
.nav-link.active { color: var(--royal); font-weight: 600; }
@media (min-width: 992px) {
  .nav-link.active::after { content: ""; position: absolute; left: .95rem; right: .95rem; bottom: -.82rem; height: 2px; background: var(--royal); border-radius: 2px; }
}
@media (max-width: 991.98px) {
  .navbar-collapse { padding: .75rem 0 .5rem; }
  .nav-link { padding: .65rem .25rem !important; }
}

/* ---------- Home hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #C9D6F2;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem);
  background:
    radial-gradient(ellipse at 85% 20%, rgba(46,155,255,.2), transparent 55%),
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.3px) 0 0 / 28px 28px,
    linear-gradient(135deg, var(--navy-800) 0%, var(--navy) 60%, #0F2F7A 100%);
}
.hero-layout { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 992px) { .hero-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 4.5rem; } }
.hero h1 { color: #fff; font-size: clamp(2.35rem, 4.4vw, 3.9rem); font-weight: 700; letter-spacing: -0.028em; line-height: 1.1; margin-bottom: 1.4rem; max-width: 16ch; }
.hero-lead { font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.7; color: #C9D6F2; max-width: 56ch; margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.hero-points { list-style: none; padding: 0; margin: 2.25rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; font-size: .93rem; color: #AFC0E3; }
.hero-points li { display: inline-flex; align-items: center; gap: .5rem; }
.hero-points .bi { color: var(--green); font-size: 1.05rem; }

.hero-media { position: relative; }
.hero-photo {
  position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5 / 4;
  background: var(--navy-800); box-shadow: var(--shadow-lg); outline: 1px solid rgba(159,195,255,.18); outline-offset: 8px;
}
@media (max-width: 767.98px) { .hero-photo { outline: 0; } }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,20,55,0) 50%, rgba(6,20,55,.45)); pointer-events: none; }
.cover-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-fallback { display: block; width: 100%; height: 100%; }
.photo-fallback[hidden] { display: none; }
.photo-fallback .illus { width: 100%; height: 100%; padding: 6% 5% 3%; }

.ops-card {
  position: relative; z-index: 2; margin: -2.75rem 1rem 0; padding: 1rem 1.1rem;
  background: rgba(10,28,78,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(159,195,255,.25); border-radius: var(--r); box-shadow: var(--shadow-lg); color: #DCE6FA;
}
@media (min-width: 992px) { .ops-card { position: absolute; left: -2.5rem; bottom: -2rem; width: 300px; margin: 0; } }
.ops-card-head { display: flex; align-items: center; gap: .55rem; font-weight: 600; color: #fff; font-size: .92rem; padding-bottom: .65rem; margin-bottom: .35rem; border-bottom: 1px solid rgba(159,195,255,.18); }
.ops-card ul { list-style: none; margin: 0; padding: 0; }
.ops-card li { display: flex; align-items: center; gap: .65rem; padding: .4rem 0; font-size: .88rem; }
.ops-icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; font-size: .95rem; }
.ops-label { flex: 1; min-width: 0; }
.ops-value { font-family: var(--mono); font-size: .75rem; white-space: nowrap; }
.tone-ok { background: rgba(52,211,153,.16); color: var(--green); }
.tone-info { background: rgba(46,155,255,.18); color: var(--sky); }
.tone-text-ok { color: var(--green); }
.tone-text-info { color: var(--sky); }

/* ---------- Capability band ---------- */
.capability-band { border-bottom: 1px solid var(--line); background: #fff; }
.capability-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 576px) { .capability-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .capability-list { grid-template-columns: repeat(4, 1fr); } }
.capability-list li { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 0; font-size: .92rem; color: var(--slate); line-height: 1.45; }
.capability-list li + li { border-top: 1px solid var(--line); }
@media (min-width: 576px) { .capability-list li { padding: 1.6rem 1.25rem; } .capability-list li:nth-child(odd) { padding-left: 0; } .capability-list li + li { border-top: 0; } .capability-list li:nth-child(n+3) { border-top: 1px solid var(--line); } .capability-list li:nth-child(even) { border-left: 1px solid var(--line); } }
@media (min-width: 992px) { .capability-list li:nth-child(n+3) { border-top: 0; } .capability-list li + li { border-left: 1px solid var(--line); } .capability-list li:first-child { padding-left: 0; } }
.capability-list strong { display: block; color: var(--navy); font-size: 1rem; font-weight: 700; }

/* ---------- Sections ---------- */
.section { padding: clamp(4.5rem, 8vw, 7rem) 0; }
.section-mist { background: var(--mist); }
.section-dark { background: radial-gradient(ellipse at 75% 50%, rgba(46,155,255,.16), transparent 60%), var(--navy-800); color: #C9D6F2; }
.section-dark .section-title { color: #fff; }
.section-dark .section-lead { color: #AFC0E3; }
.section-title { font-size: clamp(1.85rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 1rem; max-width: 22ch; }
.section-lead { color: var(--slate); font-size: 1.08rem; max-width: 58ch; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.25rem 3rem; margin-bottom: 3rem; }
.section-head > div { max-width: 640px; }
.section-head .section-title { margin-bottom: 0; }
.section-head .section-lead { margin: 0; max-width: 46ch; }

.split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 992px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5rem; } .split-network { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4rem; } }

/* ---------- Service cards ---------- */
.svc-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.svc-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card:hover, .svc-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #C9D7F2; color: inherit; }
.svc-visual { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.svc-visual .cover-photo { transition: transform .6s ease; }
.svc-card:hover .svc-visual .cover-photo { transform: scale(1.05); }
.svc-body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.35rem 1.4rem; }
.svc-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .7rem; }
.svc-title { font-weight: 700; font-size: 1.06rem; color: var(--navy); line-height: 1.3; }
.svc-summary { color: var(--slate); font-size: .94rem; line-height: 1.6; flex: 1; }
.svc-more { margin-top: 1.1rem; font-weight: 600; font-size: .92rem; color: var(--royal); display: inline-flex; align-items: center; gap: .4rem; }
.svc-more .bi { transition: transform .2s; }
.svc-card:hover .svc-more .bi { transform: translateX(3px); }

/* ---------- Photo stack & pillars ---------- */
.photo-stack { position: relative; padding: 0 14% 14% 0; }
.photo-main, .photo-inset { border-radius: var(--r-lg); overflow: hidden; background: var(--navy); }
.photo-main { aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.photo-inset { position: absolute; right: 0; bottom: 0; width: 42%; aspect-ratio: 1; border: 6px solid var(--mist); box-shadow: var(--shadow); border-radius: var(--r); }
.section:not(.section-mist) .photo-inset { border-color: #fff; }
.photo-badge {
  position: absolute; left: 1.25rem; bottom: calc(14% + 1.25rem); max-width: 55%;
  display: flex; flex-direction: column; gap: .35rem; background: #fff; border-radius: 12px;
  padding: .8rem 1rem; box-shadow: var(--shadow); font-size: .76rem; color: var(--slate);
}
.photo-badge img { width: 80px; height: auto; }
@media (max-width: 575.98px) { .photo-badge { display: none; } .photo-stack { padding: 0 8% 10% 0; } }

.pillar-list { display: grid; gap: 1.5rem; margin: 2.25rem 0; }
.pillar-item { display: flex; gap: 1rem; align-items: flex-start; }
.pillar-item h3 { font-size: 1.12rem; margin: .1rem 0 .3rem; }
.pillar-item p { color: var(--slate); margin: 0; font-size: .98rem; }

/* ---------- Checklists ---------- */
.check-list { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .85rem; }
.check-list li { position: relative; padding-left: 2rem; line-height: 1.55; }
.check-list li::before {
  content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .05em;
  width: 1.3rem; height: 1.3rem; display: grid; place-items: center; font-size: .8rem;
  border-radius: 50%; background: #EAF1FE; color: var(--royal);
}
.check-list-dark li { color: #DCE6FA; }
.check-list-dark li::before { background: rgba(46,155,255,.18); color: var(--sky-200); }
@media (min-width: 768px) { .check-list-2col { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }

/* ---------- Network map ---------- */
.netmap { position: relative; width: 100%; aspect-ratio: 800 / 380; }
@media (min-width: 768px) and (max-width: 1199.98px) { .netmap { aspect-ratio: 800 / 460; } }
.netmap-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.netmap-link { fill: none; stroke: rgba(159,195,255,.35); stroke-width: 1.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.netmap-packet { fill: #9FC3FF; filter: drop-shadow(0 0 4px var(--sky)); }
.netmap-node, .netmap-core { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.netmap-node { left: var(--x); background: rgba(15,40,110,.92); border: 1px solid rgba(159,195,255,.3); color: #fff; padding: .45rem .8rem .45rem .45rem; border-radius: 10px; font-size: .86rem; font-weight: 500; }
.netmap-node .bi { width: 28px; height: 28px; display: grid; place-items: center; background: rgba(46,155,255,.2); color: var(--sky); border-radius: 7px; }
.netmap-core {
  flex-direction: column; gap: .35rem; justify-content: center; width: 124px; height: 124px; border-radius: 50%;
  background: radial-gradient(circle, var(--royal) 0%, var(--navy) 72%); border: 2px solid rgba(159,195,255,.55);
  box-shadow: 0 0 0 10px rgba(46,155,255,.08), 0 0 50px rgba(46,155,255,.4); color: #DCE6FA; font-family: var(--mono); font-size: .72rem;
}
.netmap-core img { width: 62px; height: auto; }
@media (max-width: 767.98px) {
  .netmap { aspect-ratio: 1 / 1; }
  .netmap-lines { transform: scaleX(.6); }
  .netmap-node { left: calc(50% + (var(--x) - 50%) * .6); font-size: .7rem; padding: .3rem .5rem .3rem .3rem; gap: .35rem; }
  .netmap-node .bi { width: 22px; height: 22px; font-size: .78rem; }
  .netmap-core { width: 88px; height: 88px; font-size: .6rem; }
  .netmap-core img { width: 44px; }
}

/* ---------- Process ---------- */
.process { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .process { grid-template-columns: repeat(4, 1fr); } }
.process-step { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem; box-shadow: var(--shadow-sm); }
.process-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; }
.process-num { font-family: var(--mono); font-size: .9rem; color: #9AABCB; }
.process-step h3 { font-size: 1.2rem; margin-bottom: .45rem; }
.process-step p { color: var(--slate); margin: 0; font-size: .96rem; }

/* ---------- Projects ---------- */
.card-grid-3 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.project { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.project:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.project-visual { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.project-visual .cover-photo { transition: transform .6s ease; }
.project:hover .project-visual .cover-photo { transform: scale(1.05); }
.project-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.project-cat { align-self: flex-start; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--royal); background: #EAF1FE; padding: .25rem .6rem; border-radius: 999px; }
.project-title, .project h2, .project h3 { font-size: 1.2rem; margin: .85rem 0 .25rem; }
.project-client { color: var(--slate); font-size: .9rem; margin-bottom: .9rem; }
.project-body > p:not(.project-client):not(.project-outcome) { font-size: .96rem; color: #36415C; }
.project-outcome { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-weight: 600; font-size: .93rem; color: var(--navy); display: flex; gap: .5rem; }
.project-outcome .bi { color: var(--royal); }

.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.filter-btn { font-family: var(--font); font-weight: 600; font-size: .9rem; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: .5rem 1.05rem; border-radius: 999px; transition: all .2s; }
.filter-btn:hover { border-color: var(--royal); color: var(--royal); }
.filter-btn.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
[data-category].is-hidden { display: none; }

/* ---------- Testimonials ---------- */
.quote { position: relative; margin: 0; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 2rem; box-shadow: var(--shadow-sm); }
.quote-mark { font-size: 2.2rem; color: #C9D7F2; line-height: 1; }
.quote blockquote p { font-size: 1.05rem; color: var(--ink); margin: .75rem 0 1.25rem; }
.quote figcaption strong { display: block; color: var(--navy); }
.quote figcaption span { color: var(--slate); font-size: .9rem; }

/* ---------- Call to action ---------- */
.cta-section { padding: clamp(4.5rem, 8vw, 6.5rem) 0; }
.section:not(.section-mist):not(.section-dark) + .cta-section { padding-top: 0; }
.cta-card { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); background: var(--royal); color: #E3ECFF; box-shadow: var(--shadow); }
.cta-bg { position: absolute; inset: 0; z-index: -2; }
.cta-bg .photo-fallback { display: none; }
.cta-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(18,71,189,.97) 0%, rgba(21,82,214,.92) 50%, rgba(11,37,102,.85) 100%); }
.cta-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2.25rem, 5vw, 3.5rem); }
.cta-content h2 { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: .6rem; }
.cta-content p { margin: 0; max-width: 54ch; }
.cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.cta-phone { color: #fff; text-decoration: none; font-weight: 500; }
.cta-phone:hover { color: #fff; text-decoration: underline; }

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-800); color: #C9D6F2; padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.page-hero-bg { position: absolute; inset: 0; z-index: -2; }
.page-hero-bg .photo-fallback { display: none; }
.page-hero-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(6,20,55,.97) 0%, rgba(7,26,74,.9) 50%, rgba(11,37,102,.7) 100%); }
.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 4vw, 3.2rem); letter-spacing: -0.025em; margin-bottom: 1rem; max-width: 22ch; }
.page-hero .hero-lead { max-width: 60ch; }
.crumbs { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .88rem; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: rgba(201,214,242,.5); }
.crumbs a { color: var(--sky-200); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs span { color: #fff; }

/* ---------- Services page ---------- */
.service-detail-block { padding: 3.5rem 0; border-bottom: 1px solid var(--line); }
.service-detail-block:first-child { padding-top: 0; }
.service-detail-block:last-child { border-bottom: 0; padding-bottom: 0; }
.service-detail-block h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.visual-panel { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 11; background: var(--navy); box-shadow: var(--shadow); }
.visual-panel-wide { aspect-ratio: 16 / 8; }

/* ---------- Service detail ---------- */
.prose p { max-width: 68ch; font-size: 1.05rem; }
.prose strong { color: var(--navy); }
.side-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.75rem; box-shadow: var(--shadow-sm); }
.side-panel-navy { background: var(--navy); border-color: var(--navy); color: #C9D6F2; }
.side-panel-navy h2 { color: #fff; }
.side-phone { color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.side-phone:hover { color: var(--sky-200); }
.side-links { list-style: none; padding: 0; margin: 0; }
.side-links li + li { border-top: 1px solid var(--line); }
.side-links a { display: flex; gap: .75rem; align-items: center; padding: .75rem 0; color: var(--ink); text-decoration: none; font-weight: 500; }
.side-links a:hover { color: var(--royal); }
.side-links .bi { color: var(--royal); }
@media (min-width: 992px) { aside .side-panel:first-child { position: sticky; top: 110px; } }

/* ---------- About ---------- */
.commitment { display: flex; gap: 1.25rem; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.75rem; box-shadow: var(--shadow-sm); }
.commitment h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.commitment p { color: var(--slate); margin: 0; }
.sector-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sector-grid li { display: flex; gap: .85rem; align-items: center; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-weight: 500; }
.sector-grid .bi { color: var(--royal); font-size: 1.25rem; }

/* ---------- Contact ---------- */
.contact-form .form-label { font-weight: 600; font-size: .93rem; color: var(--navy); }
.contact-form .optional { color: var(--slate); font-weight: 400; }
.form-control, .form-select { border-color: #CBD5E6; border-radius: 10px; padding: .75rem .95rem; font-size: 1rem; }
.form-control:focus, .form-select:focus { border-color: var(--royal); box-shadow: 0 0 0 .2rem rgba(21,82,214,.15); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-label { display: block; font-size: .82rem; color: var(--slate); }
.contact-list a { color: var(--navy); font-weight: 600; text-decoration: none; word-break: break-word; }
.contact-list a:hover { color: var(--royal); }
.support-note { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--slate); display: flex; gap: .5rem; font-size: .93rem; }
.support-note .bi { color: var(--royal); }
.alert { border-radius: 12px; }

/* ---------- 404 / simple lists ---------- */
.service-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.service-rows li { border-bottom: 1px solid var(--line); }
.service-row { display: flex; align-items: center; gap: 1.25rem; padding: 1.1rem .75rem; text-decoration: none; color: inherit; }
.service-row:hover { background: var(--mist); color: inherit; }
.service-body { flex: 1; }
.service-title { font-weight: 600; color: var(--navy); }
.service-go { color: var(--royal); }
.empty-state { padding: 2rem; background: var(--mist); border-radius: var(--r); color: var(--slate); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #A9B8D8; padding: 5rem 0 2rem; font-size: .94rem; }
.footer-logo { width: 190px; height: auto; }
.footer-lead { max-width: 34ch; margin-top: 1.25rem; }
.footer-heading { color: #fff; font-size: .95rem; font-weight: 700; letter-spacing: 0; margin-bottom: 1.1rem; }
.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.site-footer a { color: #A9B8D8; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-contact li { display: flex; gap: .7rem; align-items: flex-start; }
.footer-contact .bi { color: var(--sky); margin-top: .15rem; }
.footer-contact a, .footer-contact span { word-break: break-word; }
.footer-social { display: flex; gap: .6rem; margin-top: 1.5rem; }
.footer-social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(169,184,216,.3); border-radius: 10px; }
.footer-social a:hover { background: var(--royal); border-color: var(--royal); color: #fff; }
.footer-bottom { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(169,184,216,.16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .85rem; }

/* ---------- Illustration animation (used by photo fallbacks) ---------- */
.illus { display: block; width: 100%; height: auto; }
.led { animation: led 2.6s steps(1, end) infinite; }
@keyframes led { 0%, 62% { opacity: 1; } 63%, 70% { opacity: .25; } 71%, 84% { opacity: 1; } 85%, 90% { opacity: .35; } 91% { opacity: 1; } }
.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.flow { animation: flow 1.2s linear infinite; }
.flow-rev { animation-direction: reverse; }
@keyframes flow { to { stroke-dashoffset: -18; } }
.spin { transform-origin: 200px 130px; animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.threat { animation: threat 3s ease-in infinite; }
@keyframes threat { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateX(90px); opacity: 1; } 85%, 100% { transform: translateX(96px); opacity: 0; } }
.swoosh { display: block; width: 100%; height: auto; }

/* ---------- Entrance motion (hero only, once) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { opacity: 0; transform: translateY(12px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .hero-copy > *:nth-child(2) { animation-delay: .08s; }
  .hero-copy > *:nth-child(3) { animation-delay: .16s; }
  .hero-copy > *:nth-child(4) { animation-delay: .24s; }
  .hero-copy > *:nth-child(5) { animation-delay: .32s; }
  .hero-media { opacity: 0; animation: rise .9s cubic-bezier(.2,.7,.2,1) .2s forwards; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .netmap-packet { display: none; }
}

/* KOA V5 — professional photography-led design */

:root{--navy:#102c4f;--navy-900:#061425;--navy-800:#0a1d33;--royal:#1364df;--royal-600:#0a51bf;--sky:#50c4ed;--sky-200:#99daf2;--ink:#132a43;--slate:#52677c;--mist:#f2f6fa;--line:#dce5ee;--r:16px;--r-lg:24px}
body{font-size:1rem;line-height:1.75}h1,h2,h3{letter-spacing:-.035em}.container{max-width:1320px}.topbar{background:#07192d;font-size:.8rem;padding:.55rem 0;color:#c5d4e4}.topbar a{color:#dce8f4}.site-header{background:rgba(255,255,255,.97);box-shadow:0 5px 25px #102c4f08;backdrop-filter:blur(16px)}.navbar{padding:1.05rem 0}.navbar-brand{display:flex;align-items:center;gap:18px}.navbar-brand img{width:110px;height:auto}.brand-descriptor{font-size:.64rem;line-height:1.5;letter-spacing:.09em;color:#536477;border-left:1px solid #d4dfe9;padding-left:18px;font-weight:700}.nav-link{font-size:.9rem;padding:.6rem 1rem!important}.navbar .btn-brand{padding:.75rem 1.15rem}.btn{border-radius:8px;font-weight:700;transition:background .2s,transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px)}.btn-brand{box-shadow:0 8px 22px #1364df20}.btn-light-brand{background:#fff;color:#103f79}.hero{padding:70px 0 76px;background:#081b30;isolation:isolate}.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 70% 15%,#17456c80,transparent 70%)}.hero-layout{grid-template-columns:1fr 1fr;gap:64px}.hero-copy{padding:18px 0}.hero .eyebrow{color:#a8d3e9;letter-spacing:.14em;font-size:.75rem}.hero-kicker-line{width:28px;height:2px;background:#50c4ed}.hero h1{font-size:clamp(2.8rem,4.75vw,4.5rem);font-weight:800;line-height:1.12;max-width:18ch;letter-spacing:-.047em;margin:1rem 0 1.65rem}.hero h1 span{color:#69d2f2}.hero-lead{color:#c4d2e0;font-size:1.05rem;line-height:1.8;max-width:50ch}.hero-actions{margin-top:2rem}.hero-points{font-size:.81rem;color:#b6c8db;gap:.6rem 1.2rem;margin-top:2rem}.hero-points .bi{color:#75c9ed}.hero-photo{aspect-ratio:1/1.06;border-radius:20px;outline:0;box-shadow:0 35px 70px #0005}.hero-photo .cover-photo{object-position:center}.hero-photo:after{background:linear-gradient(0deg,#061425cc,transparent 45%)}.hero-caption{position:relative;display:flex;align-items:center;gap:14px;margin:-82px 20px 0;padding:19px 20px;border:1px solid #ffffff32;border-radius:12px;background:#0b223cdd;backdrop-filter:blur(15px);color:#fff;min-height:100px}.hero-caption-icon{display:grid;place-items:center;flex:none;background:#49bdec20;border-radius:10px;width:44px;height:44px;color:#7ddbf4;font-size:1.4rem}.hero-caption strong{font-size:.95rem;display:block;line-height:1.5}.hero-caption small{font-size:.61rem;display:block;letter-spacing:.095em;color:#b9d1e5;margin-top:5px}.capability-band{background:#fff;box-shadow:0 10px 30px #0c234d05}.capability-list li{padding:1.9rem 1.5rem;font-size:.8rem}.capability-list strong{font-size:1rem;margin-bottom:3px}.icon-tile,.service-icon{background:#edf4fe;color:#1665d8;border-radius:12px}.section{padding:100px 0}.section-title{font-size:clamp(2rem,3.5vw,3.1rem);line-height:1.18;max-width:24ch}.section-head{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:55px;margin-bottom:42px}.section-lead{font-size:1rem}.section-head .section-lead{max-width:43ch;justify-self:end}.eyebrow{font-size:.73rem;letter-spacing:.16em}.eyebrow:before{width:22px;height:2px;box-shadow:none;border-radius:0}.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.svc-card{border-radius:16px;border-color:#e0e8ef;box-shadow:0 6px 24px #102c4f06}.svc-visual{aspect-ratio:16/10}.svc-body{padding:25px 26px 24px}.svc-head{gap:12px;margin-bottom:12px;align-items:flex-start}.svc-title{font-size:1.15rem;line-height:1.4}.svc-summary{font-size:.94rem;line-height:1.7}.svc-more{padding-top:17px;border-top:1px solid #e9edf3;font-size:.82rem;margin-top:20px;justify-content:space-between}.svc-card:hover{box-shadow:0 20px 45px #102c4f14;border-color:#9ec8f1}.section-mist{background:#f3f7fb}.photo-main{aspect-ratio:1/1.05;border-radius:20px}.photo-inset{width:46%;border-radius:16px;border-width:7px}.pillar-list{gap:1.25rem}.pillar-item h3{font-size:1.05rem}.pillar-item p{font-size:.94rem}.section-dark{background:#081b30}.netmap{border-radius:22px;background:#0e2842;box-shadow:0 24px 55px #0002;outline:1px solid #47678250}.netmap-node{background:#123350;border-color:#486d8d;color:#eef5fb}.netmap-core{background:#164a77;border-color:#6cbddd;box-shadow:0 0 0 10px #58bce810}.process{gap:25px}.process-step{border:0;border-top:2px solid #dbe6f0;border-radius:0;padding:24px 0;box-shadow:none}.process-num{font-size:1.5rem;font-weight:700;color:#93a8bf}.process-step h3{font-size:1.2rem}.process-top{margin-bottom:24px}.project{border-radius:18px;box-shadow:0 10px 26px #102c4f08}.project-visual{aspect-ratio:16/11}.project-body{padding:26px}.project-cat{font-size:.7rem}.quote{border-top:3px solid #247ae8}.cta-card{border-radius:22px;background:#102d50}.cta-card:before{background:linear-gradient(100deg,#102d50fa,#143c67eb 55%,#102d5090)}.cta-content{padding:54px}.cta-content h2{font-size:clamp(1.8rem,3vw,2.75rem);max-width:23ch;line-height:1.2}.cta-content p{color:#c3d6e9;max-width:50ch}.page-hero{padding:85px 0 90px;background:#0c2139}.page-hero-overlay{background:linear-gradient(90deg,#071a30f5,#0d2743da 55%,#0d274360)}.page-hero h1{font-size:clamp(2.3rem,4.5vw,4rem);font-weight:800;max-width:22ch}.page-hero .hero-lead{font-size:1.05rem;max-width:62ch}.page-hero-bg .cover-photo{object-position:50% 45%}.service-detail-block{padding:70px 0}.service-detail-block h2{font-size:clamp(1.8rem,3vw,2.5rem)}.visual-panel{border-radius:20px;box-shadow:0 20px 45px #0b254016}.side-panel{padding:30px;border-radius:16px;box-shadow:0 10px 30px #122f4b08}.side-panel-navy{background:#102c4f}.contact-form{padding:35px;background:#fff;border:1px solid #dce5ee;border-radius:20px;box-shadow:0 20px 50px #102c4f09;color:#18314d}.form-intro{margin-bottom:28px}.form-intro .eyebrow{margin-bottom:9px}.form-intro h2{font-size:1.8rem;margin-bottom:10px}.form-intro p:last-child{color:#52677c;font-size:.95rem}.form-control,.form-select{background-color:#f7fafd;border:1px solid #cad8e5;color:#18314d;padding:13px 14px}.form-control:focus,.form-select:focus{background-color:#fff}.form-control::placeholder{color:#697e91}.contact-form .form-label{color:#18314d}.contact-label{font-size:.78rem;margin-bottom:3px}.commitment{padding:28px;border-radius:16px}.sector-grid li{border-radius:12px;background:#f7fafd}.site-footer{background:#061425;padding-top:68px;color:#a9bed1}.site-footer a{color:#b7cadb}.footer-logo{width:175px}.footer-heading{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}.footer-bottom{margin-top:50px}.footer-social a{border-radius:50%}.cover-photo[hidden]{display:none!important}.netmap-node span{white-space:normal}.hero-copy>*{animation:none;opacity:1;transform:none}.hero-media{animation:none;opacity:1}
@media(min-width:1400px){.container{max-width:1280px}}
@media(max-width:1199.98px){.hero-layout{gap:35px}.hero h1{font-size:3.35rem}.hero-caption{padding:15px;margin-inline:12px}.brand-descriptor{display:none}.svc-grid{gap:20px}.svc-body{padding:23px}.section-head{gap:25px}.split{gap:40px}.hero-points{font-size:.76rem}.netmap-node{font-size:.78rem}}
@media(max-width:991.98px){.hero-layout{grid-template-columns:1fr;gap:35px}.hero{padding:54px 0}.hero h1{font-size:clamp(2.7rem,7vw,4.2rem);max-width:23ch}.hero-lead{max-width:60ch}.hero-media{max-width:680px;width:100%;justify-self:center}.hero-photo{aspect-ratio:16/10}.hero-caption{margin-top:-72px;min-height:85px}.section{padding:72px 0}.section-head{grid-template-columns:1fr;gap:20px}.section-head .section-lead{justify-self:start;max-width:58ch}.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-hero{padding:65px 0}.brand-descriptor{display:block}.photo-main{aspect-ratio:4/3}.split-network{gap:40px}}
@media(max-width:575.98px){.container{padding-left:22px;padding-right:22px}.navbar{padding:12px 0}.navbar-brand img{width:93px}.brand-descriptor{font-size:.56rem;padding-left:12px}.navbar-brand{gap:12px}.hero{padding:38px 0 48px}.hero h1{font-size:clamp(2.25rem,10vw,3.35rem);line-height:1.15}.hero .eyebrow{font-size:.65rem;letter-spacing:.1em}.hero-lead{font-size:.97rem}.hero-points{font-size:.8rem;display:grid;gap:8px}.hero-actions .btn{font-size:.87rem;padding:12px 16px}.hero-photo{aspect-ratio:4/3}.hero-caption{margin: -64px 10px 0;padding:13px;gap:10px}.hero-caption strong{font-size:.81rem}.hero-caption small{font-size:.55rem;letter-spacing:.025em}.hero-caption-icon{width:35px;height:35px}.capability-list{grid-template-columns:1fr 1fr}.capability-list li{padding:20px 10px!important;gap:10px;align-items:flex-start;font-size:.7rem}.capability-list li+li{border-top:0}.capability-list li:nth-child(n+3){border-top:1px solid #e1e8f0}.capability-list li:nth-child(even){border-left:1px solid #e1e8f0}.capability-list .icon-tile{width:30px;height:30px;border-radius:8px;font-size:1rem}.capability-list strong{font-size:.83rem}.section{padding:60px 0}.section-title{font-size:2rem}.svc-grid{grid-template-columns:1fr}.svc-visual{aspect-ratio:16/10}.svc-title{font-size:1.15rem}.section-head{margin-bottom:30px}.cta-content{padding:30px 24px}.cta-section{padding:55px 0}.page-hero{padding:45px 0 55px}.page-hero h1{font-size:2.5rem}.page-hero .hero-lead{font-size:1rem}.contact-form{padding:24px 20px}.side-panel{padding:24px}.netmap-node{font-size:.64rem;max-width:115px;line-height:1.4}.netmap-node .bi{flex:none}.netmap-core{font-size:.6rem}.service-detail-block{padding:45px 0}.footer-logo{width:150px}.topbar{display:none}.section-title,h1,h2,h3,.svc-title{overflow-wrap:anywhere}}