/* =========================================================================
   A-Lit Digital — main stylesheet
   Palette, typography, layout, and component styles for the whole site.
   ========================================================================= */

:root {
  --cyan: #00E5FF;
  --blue: #2979FF;
  --indigo: #1A237E;
  --ink: #0A0A1A;
  --ink-2: #12122A;
  --line: rgba(0, 229, 255, 0.14);
  --muted: rgba(255, 255, 255, 0.65);
  --white: #ffffff;
  --grad: linear-gradient(135deg, #00E5FF 0%, #2979FF 60%, #1A237E 100%);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--ink);
  color: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, .display {
  font-family: 'Poppins', system-ui, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 0.5em;
}
p { margin: 0 0 1em; color: rgba(255, 255, 255, 0.82); }
a { color: var(--cyan); text-decoration: none; }
img, svg { max-width: 100%; display: block; }

.container { width: min(1200px, 92%); margin: 0 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ===== NAV ===== */
header.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(10, 10, 26, 0.72);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; gap: 24px;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px;
  color: var(--white);
}
.logo-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--grad);
  display: grid; place-items: center;
  font-weight: 800; color: var(--ink);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.35);
  font-family: 'Poppins', sans-serif; font-size: 16px;
}
nav.primary ul {
  display: flex; gap: 28px; list-style: none; padding: 0; margin: 0;
  font-size: 14px; font-weight: 500;
}
nav.primary a { color: rgba(255, 255, 255, 0.78); transition: color 0.2s; }
nav.primary a:hover,
nav.primary a[aria-current="page"] { color: var(--cyan); }

.nav-right { display: flex; align-items: center; gap: 14px; }

.nav-socials {
  display: flex; align-items: center; gap: 4px;
  padding-right: 12px;
  border-right: 1px solid var(--line);
  margin-right: 2px;
}
.nav-socials a {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.nav-socials a:hover {
  color: var(--cyan);
  background: rgba(0, 229, 255, 0.06);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none; background: transparent; border: 0; padding: 8px; cursor: pointer;
  color: var(--white);
}
.nav-toggle svg { width: 24px; height: 24px; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px;
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
  cursor: pointer; border: 0; text-decoration: none; line-height: 1;
}
.btn-primary {
  background: var(--grad);
  color: var(--ink);
  box-shadow: 0 6px 22px rgba(0, 229, 255, 0.28);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 229, 255, 0.38);
}
.btn-ghost {
  background: transparent; color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

/* ===== HERO ===== */
.hero {
  position: relative;
  padding: 120px 0 110px;
  overflow: hidden;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(41, 121, 255, 0.30), transparent 60%),
    radial-gradient(700px 400px at 10% 20%, rgba(0, 229, 255, 0.20), transparent 60%),
    var(--ink);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 20%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 20%, transparent 80%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 60px; align-items: center;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.30);
  font-size: 13px; color: var(--cyan); font-weight: 500;
  font-family: 'Montserrat', sans-serif;
}
.chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

h1.display {
  font-size: clamp(42px, 5.6vw, 78px);
  font-weight: 700;
  margin: 20px 0 20px;
}
.grad-text {
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede { font-size: 19px; max-width: 560px; color: rgba(255, 255, 255, 0.80); }
.hero-cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

.hero-proof {
  margin-top: 44px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 560px;
}
.hero-proof .kpi { border-left: 2px solid var(--cyan); padding: 4px 0 4px 14px; }
.hero-proof .num { font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 700; color: var(--white); }
.hero-proof .lbl { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }

.hero-art { position: relative; height: 480px; }
.orb { position: absolute; inset: 0; display: grid; place-items: center; }
.orb svg { width: 100%; max-width: 500px; filter: drop-shadow(0 0 40px rgba(0, 229, 255, 0.25)); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.rotate-slow { animation: spin 40s linear infinite; transform-origin: center; }
.rotate-rev { animation: spin 60s linear infinite reverse; transform-origin: center; }

/* Subtle page hero (non-homepage) */
.page-hero {
  position: relative; padding: 120px 0 70px; overflow: hidden;
  background:
    radial-gradient(700px 300px at 80% -10%, rgba(41, 121, 255, 0.25), transparent 60%),
    radial-gradient(500px 250px at 10% 20%, rgba(0, 229, 255, 0.16), transparent 60%),
    var(--ink);
  border-bottom: 1px solid var(--line);
}
.page-hero .eyebrow { color: var(--cyan); }
.page-hero h1 { font-size: clamp(38px, 4.6vw, 64px); margin: 14px 0 18px; }
.page-hero p.lede { font-size: 18px; max-width: 680px; color: rgba(255, 255, 255, 0.80); }

/* ===== MARQUEE ===== */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 22px 0; overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.marquee-label {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; text-align: center;
}
.marquee-track {
  display: flex; gap: 48px; white-space: nowrap;
  animation: slide 45s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
  color: rgba(255, 255, 255, 0.55); flex: none;
}
.marquee-track span::before {
  content: '◆'; color: var(--cyan); margin-right: 14px; opacity: 0.6;
}
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== SECTION BASE ===== */
section { padding: 110px 0; position: relative; }
.eyebrow {
  display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 18px;
}
h2.section-title {
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 700; max-width: 800px;
}
.section-head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 40px; margin-bottom: 50px; flex-wrap: wrap;
}
.section-head p { max-width: 420px; margin: 0; }

/* ===== CONCESSION / POSITIONING ===== */
.concession {
  background: linear-gradient(180deg, transparent 0%, rgba(26, 35, 126, 0.22) 100%);
  border-top: 1px solid var(--line);
}
.concession-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.concession .claim {
  font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 500; line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
}
.concession .claim em { color: var(--cyan); font-style: normal; font-weight: 600; }
.proof-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.proof-bullets li {
  display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
  padding: 20px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
}
.proof-bullets .bignum {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 22px;
  color: var(--cyan); line-height: 1;
}
.proof-bullets h4 {
  font-size: 15px; font-weight: 600; margin: 0 0 6px;
  font-family: 'Montserrat', sans-serif; letter-spacing: 0.02em;
}
.proof-bullets p { font-size: 14px; margin: 0; color: var(--muted); }

/* ===== CARDS / SERVICES ===== */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.card {
  position: relative; padding: 32px 28px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
  overflow: hidden; color: inherit; display: block;
}
.card:hover { transform: translateY(-3px); border-color: rgba(0, 229, 255, 0.45); }
.card .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(0, 229, 255, 0.10); border: 1px solid rgba(0, 229, 255, 0.30);
  display: grid; place-items: center; margin-bottom: 22px;
}
.card h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.card .pill {
  display: inline-block; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 229, 255, 0.10); color: var(--cyan); margin-bottom: 16px;
}
.card ul { padding: 0 0 0 18px; margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.card ul li { margin: 6px 0; }
.card .arrow {
  position: absolute; top: 28px; right: 28px;
  opacity: 0.4; transition: opacity 0.2s, transform 0.2s;
  color: var(--cyan);
}
.card:hover .arrow { opacity: 1; transform: translate(4px, -4px); }

/* Service card with image — image banner at the top, body below */
.card.card-with-image { padding: 0; overflow: hidden; }
.card.card-with-image .card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.06), rgba(26, 35, 126, 0.18));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.card.card-with-image .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.card.card-with-image:hover .card-image img { transform: scale(1.04); }
.card.card-with-image .card-body { padding: 28px; }
.card.card-with-image .arrow { top: auto; bottom: 28px; right: 28px; }
@supports not (aspect-ratio: 16 / 10) {
  .card.card-with-image .card-image { height: 220px; }
}

/* Service detail page — hero with side-by-side image */
.page-hero-with-image { padding-bottom: 90px; }
.page-hero.page-hero-with-image .page-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}
.page-hero-art img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.04), rgba(26, 35, 126, 0.10));
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.35));
}
@media (max-width: 900px) {
  .page-hero.page-hero-with-image .page-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ===== CASE STUDY BLOCK ===== */
.case {
  background:
    radial-gradient(500px 300px at 110% 50%, rgba(41, 121, 255, 0.18), transparent 60%),
    var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.case-tag {
  color: var(--cyan); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 14px;
}
.case h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; }
.case-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 28px 0 30px; }
.case-metrics .m {
  padding: 18px; border-radius: var(--radius-md);
  background: rgba(0, 229, 255, 0.06); border: 1px solid rgba(0, 229, 255, 0.20);
}
.case-metrics .m .big {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 32px; color: var(--cyan);
  line-height: 1;
}
.case-metrics .m .sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.case-visual {
  padding: 30px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line);
  position: relative; min-height: 380px; overflow: hidden;
}

/* ===== CLIENT LOGOS WALL ===== */
.clients {
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(0, 229, 255, 0.06), transparent 70%),
    var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.client-logo {
  background: rgba(255, 255, 255, 0.02);
  aspect-ratio: 5 / 3;
  display: grid;
  place-items: center;
  padding: 18px 20px;
  transition: background 0.25s ease, transform 0.25s ease;
}
.client-logo:hover {
  background: rgba(0, 229, 255, 0.05);
  transform: scale(1.02);
}
.client-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);                /* logos render white-mono */
  opacity: 0.62;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.client-logo:hover img {
  opacity: 1;
  filter: none;                                   /* full colour on hover */
}
@supports not (aspect-ratio: 5 / 3) {
  .client-logo { height: 86px; }
}
@media (max-width: 560px) {
  .client-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .client-logo { padding: 12px 14px; }
}

/* ===== INDUSTRIES ===== */
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ind {
  padding: 28px 24px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: border-color 0.2s, background 0.2s;
  color: inherit;
}
.ind:hover { border-color: rgba(0, 229, 255, 0.45); background: rgba(0, 229, 255, 0.04); }
.ind-with-icon { gap: 16px; }
.ind-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.22);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ind-icon img { display: block; }
.ind:hover .ind-icon { background: rgba(0, 229, 255, 0.14); border-color: rgba(0, 229, 255, 0.45); }

/* ===== INDUSTRY FEATURE CARDS (large hero illustrations on /industries/) ===== */
.industry-feature-grid {
  display: grid;
  gap: 28px;
}
.industry-feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: center;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line);
  scroll-margin-top: 90px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.industry-feature:hover { border-color: rgba(0, 229, 255, 0.45); }
.industry-feature:nth-child(even) { grid-template-columns: 1fr 1.1fr; }
.industry-feature:nth-child(even) .industry-feature-image { order: 2; }
.industry-feature:nth-child(even) .industry-feature-body  { order: 1; }
.industry-feature-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.04), rgba(26, 35, 126, 0.10));
}
.industry-feature-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.industry-feature:hover .industry-feature-image img { transform: scale(1.03); }
.industry-feature-body h3 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 700;
  margin: 8px 0 14px;
}
.industry-feature-body p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 18px;
}
@supports not (aspect-ratio: 8 / 5) {
  .industry-feature-image img { height: 280px; }
}
@media (max-width: 900px) {
  .industry-feature,
  .industry-feature:nth-child(even) { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
  .industry-feature:nth-child(even) .industry-feature-image { order: 0; }
  .industry-feature:nth-child(even) .industry-feature-body  { order: 0; }
}

/* ===== PROCESS PHASE FEATURE SECTIONS ===== */
.phase-feature-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
.phase-feature-grid.phase-feature-reverse .phase-feature-image   { order: 2; }
.phase-feature-grid.phase-feature-reverse .phase-feature-content { order: 1; }
.phase-feature-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.04), rgba(26, 35, 126, 0.10));
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.30);
}
.phase-feature-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.phase-feature-image:hover img { transform: scale(1.02); }
.phase-feature-content .section-title { font-size: clamp(28px, 3.2vw, 42px); }
.phase-feature-content .claim { max-width: 540px; }
.phase-deliverables {
  margin-top: 28px;
  padding: 24px 28px !important;
}
@supports not (aspect-ratio: 8 / 5) {
  .phase-feature-image img { height: 340px; }
}
@media (max-width: 900px) {
  .phase-feature-grid,
  .phase-feature-grid.phase-feature-reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .phase-feature-grid.phase-feature-reverse .phase-feature-image,
  .phase-feature-grid.phase-feature-reverse .phase-feature-content { order: 0; }
}

/* ===== ABOUT PAGE — beautified ============================================ */

/* By-the-numbers callout */
.about-stats {
  background:
    radial-gradient(700px 240px at 50% 50%, rgba(0, 229, 255, 0.10), transparent 65%),
    var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.stat-cell { text-align: center; padding: 8px 4px; }
.stat-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1;
  background: linear-gradient(180deg, #00E5FF 0%, #2979FF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}
.stat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
}
.stat-divider {
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent, rgba(0, 229, 255, 0.35), transparent);
}

/* Timeline illustration container */
.about-timeline {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.04), rgba(26, 35, 126, 0.10));
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.30);
}
.about-timeline img { display: block; width: 100%; height: auto; }

/* Built-in-Nairobi full-bleed banner */
.about-location {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}
.about-location img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: cover;
}

/* Manifesto card container */
.about-manifesto {
  border-radius: var(--radius-lg);
  overflow: hidden;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.45));
}
.about-manifesto img { display: block; width: 100%; height: auto; }

/* Value cards (icon + headline + description) */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.value-card {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.value-card:hover { transform: translateY(-3px); border-color: rgba(0, 229, 255, 0.45); }
.value-icon {
  width: 64px; height: 64px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.value-card:hover .value-icon { background: rgba(0, 229, 255, 0.14); border-color: rgba(0, 229, 255, 0.45); }
.value-icon img { width: 100%; height: 100%; display: block; }
.value-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 10px;
}
.value-card p {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .value-grid { grid-template-columns: 1fr 1fr; }
  .stat-row {
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px;
  }
  .stat-divider { display: none; }
}
@media (max-width: 560px) {
  .value-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
  .about-location img { max-height: 320px; }
}

.ind .ind-inner { display: flex; flex-direction: column; gap: 4px; }
.ind strong { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--white); }
.ind span.sub { font-size: 13px; color: var(--muted); }
.ind .arrow { color: var(--cyan); }

/* ===== PROCESS ===== */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; }
.step {
  position: relative; padding: 28px 22px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02);
}
.step .n {
  display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: 14px; padding: 4px 12px; border-radius: 999px;
  background: var(--grad); color: var(--ink); margin-bottom: 16px;
}
.step h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.step p { font-size: 14px; margin: 0; color: var(--muted); }

/* ===== TESTIMONIAL ===== */
.quote-wrap {
  max-width: 820px; margin: 0 auto; text-align: center;
  padding: 60px 40px; border-radius: var(--radius-xl);
  background:
    radial-gradient(400px 200px at 50% 0%, rgba(0, 229, 255, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line);
}
.quote-wrap .quote-mark {
  font-family: 'Poppins', sans-serif; font-size: 70px; line-height: 0.6;
  color: var(--cyan); opacity: 0.6;
}
.quote-wrap blockquote {
  font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4; margin: 24px 0; color: rgba(255, 255, 255, 0.92);
}
.quote-wrap .cite { font-size: 14px; color: var(--muted); }
.quote-wrap .cite strong { color: var(--white); }
.stars { color: var(--cyan); letter-spacing: 2px; font-size: 14px; }

/* Testimonial grid (for About/Work pages) */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.t-card {
  padding: 26px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
}
.t-card blockquote {
  font-size: 15px; line-height: 1.55; margin: 10px 0 16px;
  color: rgba(255, 255, 255, 0.88);
}
.t-card .cite { font-size: 13px; color: var(--muted); }
.t-card .cite strong { color: var(--white); }

/* ===== CTA BLOCK ===== */
.cta {
  text-align: center;
  background:
    radial-gradient(700px 360px at 50% 50%, rgba(41, 121, 255, 0.30), transparent 70%),
    var(--ink);
  border-top: 1px solid var(--line);
}
.cta h2 { font-size: clamp(34px, 4.4vw, 58px); max-width: 820px; margin: 0 auto 20px; }
.cta p { font-size: 18px; max-width: 560px; margin: 0 auto 34px; }
.cta .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ===== FORMS ===== */
.form {
  display: grid; gap: 18px;
  padding: 32px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
}
.form-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan); font-weight: 600;
}
.field input,
.field select,
.field textarea {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--white);
  padding: 14px 16px; border-radius: 10px;
  font: inherit; font-size: 15px;
  width: 100%;
  /* Forces the browser to use dark UI chrome for native widgets
     (option dropdown popup, calendar picker, time picker, spin buttons,
     scrollbar inside textarea, etc.) */
  color-scheme: dark;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(255, 255, 255, 0.42);
  opacity: 1;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(0, 229, 255, 0.06);
  /* Slightly brighter glow for screen-readers / power users navigating with Tab */
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.18);
}
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.field textarea { min-height: 140px; resize: vertical; }

/* --- Custom <select> appearance ----------------------------------------
   `appearance: none` strips the default OS dropdown arrow; we draw our own
   as a background-image so it stays on-brand and visible against the dark
   field. Padding-right reserves room for it. */
.field select {
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2300E5FF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
  padding-right: 44px;
  cursor: pointer;
}
/* The popup options. Native <option> styling is browser-limited but these
   properties are widely supported and fix the white-popup-on-dark-theme issue
   the user reported. */
.field select option,
.field select optgroup {
  background-color: #0E1430;
  color: #ffffff;
  font: inherit;
}
.field select option:checked,
.field select option:hover {
  background-color: rgba(0, 229, 255, 0.20);
  color: #ffffff;
}

/* Native input[type=date] / time / month — calendar icon visibility on dark */
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator,
.field input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.85);
  opacity: 0.85;
  cursor: pointer;
}

/* Native checkbox / radio inherit color-scheme; force the accent so the tick
   matches the brand cyan in all modern browsers. */
.field input[type="checkbox"],
.field input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--cyan);
  width: auto;
}

.field .hint { font-size: 12px; color: rgba(255, 255, 255, 0.62); }
.field.check {
  flex-direction: row; align-items: center; gap: 10px;
}
.field.check label { color: rgba(255, 255, 255, 0.78); letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 13px; }

.form-note { font-size: 13px; color: rgba(255, 255, 255, 0.62); margin: 0; }
.honeypot { position: absolute; left: -5000px; opacity: 0; }

/* ===== CONTACT PAGE LAYOUT =====
   Two-column on desktop, single-column on mobile. Bottom padding on mobile
   pushes the last card above the floating WhatsApp button (52px + 18px). */
.contact-section { padding-top: 40px; padding-bottom: 80px; }

.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
}
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact-card { padding: 28px; }
.contact-card-title {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 16px;
}
.contact-channels {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  font-size: 15px;
}
.contact-channels strong { color: var(--white); }
.contact-steps {
  padding-left: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}
.contact-quote-text { font-size: 14px; margin: 10px 0 0; color: rgba(255,255,255,0.85); }
.contact-quote-attr { font-size: 12px; color: var(--muted); margin: 10px 0 0; }

@media (max-width: 900px) {
  .contact-section { padding-top: 24px; padding-bottom: 110px; }
  .contact-layout { grid-template-columns: 1fr; gap: 24px; }
  .contact-card { padding: 22px; }
  .contact-card-title { margin-bottom: 12px; font-size: 13px; }
  .contact-channels { font-size: 14px; gap: 10px; }
  /* Stop "20-minute call to" wrapping in the middle of the phrase */
  .contact-steps { line-height: 1.65; padding-left: 22px; }
  .contact-steps li { padding-left: 4px; }
  /* The form section's input field labels were a touch tight on small screens */
  .form { padding: 22px; gap: 16px; }
  .form-row { gap: 14px; }
  /* Bigger tap targets for selects on mobile (44px min via padding) */
  .field input,
  .field select,
  .field textarea { padding: 13px 14px; font-size: 16px; /* prevents iOS zoom on focus */ }
  .field label { font-size: 11px; letter-spacing: 0.1em; }
}

/* Below 480px, kill the side padding on the aside cards a touch more so the
   "Or reach us directly" panel doesn't crowd against the screen edge. */
@media (max-width: 480px) {
  .contact-aside { gap: 16px; }
  .contact-card { padding: 20px; }
}

/* ---- Universal focus-visible ring for accessibility ---------------------
   Browser default focus ring is invisible on this dark theme. This adds a
   bright cyan ring on keyboard focus only (not on click) so power users +
   screen-reader users can always see where they are. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Disabled / busy button state */
.btn:disabled,
.btn[aria-disabled="true"],
.btn[data-loading="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn[data-loading="true"]::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: btn-spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[data-loading="true"]::after { animation: none; }
}

/* ===== POSTS / INSIGHTS ===== */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  color: inherit; transition: border-color 0.2s, transform 0.2s;
}
.post-card:hover { border-color: rgba(0, 229, 255, 0.45); transform: translateY(-2px); }
.post-card.post-card-with-image { padding: 0; overflow: hidden; }
.post-card.post-card-with-image .post-card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.06), rgba(26, 35, 126, 0.18));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.post-card.post-card-with-image .post-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.post-card.post-card-with-image:hover .post-card-image img { transform: scale(1.04); }
.post-card.post-card-with-image > *:not(.post-card-image) { padding-left: 24px; padding-right: 24px; }
.post-card.post-card-with-image > *:not(.post-card-image):first-of-type { padding-top: 20px; }
.post-card.post-card-with-image > *:not(.post-card-image):last-child { padding-bottom: 24px; }
@supports not (aspect-ratio: 16 / 10) {
  .post-card.post-card-with-image .post-card-image { height: 200px; }
}

/* Process step icon */
.step-with-icon { padding-top: 24px; }
.step-with-icon .step-icon {
  width: 64px; height: 64px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  overflow: hidden;
}
.step-with-icon .step-icon img { width: 100%; height: 100%; display: block; }
.post-card .meta { font-size: 12px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.post-card h3 { font-size: 19px; margin: 0; color: var(--white); }
.post-card p { font-size: 14px; color: rgba(255, 255, 255, 0.78); margin: 0; }
.post-card .read { font-size: 13px; color: var(--cyan); font-weight: 600; }

/* Article / prose */
.prose { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.7; }
.prose h2 { font-size: clamp(26px, 2.6vw, 34px); margin-top: 2em; }
.prose h3 { font-size: 22px; margin-top: 1.6em; }
.prose p, .prose li { color: rgba(255, 255, 255, 0.88); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose blockquote {
  border-left: 3px solid var(--cyan);
  padding: 8px 0 8px 20px; margin: 1.5em 0;
  color: rgba(255, 255, 255, 0.92); font-style: italic;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0, 229, 255, 0.10);
  padding: 2px 6px; border-radius: 4px; font-size: 0.9em;
}
.prose pre {
  background: var(--ink-2); border: 1px solid var(--line);
  padding: 16px; border-radius: var(--radius-sm); overflow: auto;
}
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* ===== FOOTER ===== */
footer.site-footer {
  padding: 60px 0 30px;
  border-top: 1px solid var(--line);
  background: var(--ink);
}
.foot-grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px; margin-bottom: 40px;
}
.foot-grid h5 {
  font-family: 'Poppins', sans-serif; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 16px;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid ul li { margin: 8px 0; font-size: 14px; }
.foot-grid ul a { color: rgba(255, 255, 255, 0.7); }
.foot-grid ul a:hover { color: var(--cyan); }
.foot-tag {
  color: rgba(255, 255, 255, 0.55); font-size: 14px;
  margin-top: 16px; max-width: 320px;
}
.foot-bottom {
  display: flex; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px; flex-wrap: wrap; gap: 14px;
}
.socials { display: flex; gap: 12px; }
.socials a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line); color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s, border-color 0.2s;
}
.socials a:hover { color: var(--cyan); border-color: var(--cyan); }

/* Newsletter inline */
.newsletter {
  display: flex; gap: 10px; margin-top: 12px; max-width: 360px;
}
.newsletter input {
  flex: 1; min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  padding: 10px 14px; border-radius: 999px;
  color: var(--white); font: inherit; font-size: 14px;
}
.newsletter input:focus { outline: none; border-color: var(--cyan); }
.newsletter button {
  background: var(--grad); color: var(--ink); border: 0;
  padding: 10px 18px; border-radius: 999px;
  font: inherit; font-weight: 600; cursor: pointer;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .hero-inner,
  .concession-grid,
  .case-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { height: 320px; }
  .services-grid,
  .ind-grid,
  .testimonial-grid,
  .post-grid { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }

  nav.primary ul {
    display: none;
    position: absolute; top: 100%; right: 4%; left: 4%;
    flex-direction: column; gap: 14px;
    padding: 20px; background: rgba(10, 10, 26, 0.98);
    border: 1px solid var(--line); border-radius: var(--radius-md);
    margin-top: 8px;
  }
  nav.primary[data-open="true"] ul { display: flex; }
  .nav-toggle { display: inline-flex; }
  /* Hide nav social icons on mobile — already in the footer + mobile menu */
  .nav-socials { display: none; }

  section { padding: 80px 0; }
  .hero { padding: 80px 0 70px; }
  .page-hero { padding: 90px 0 50px; }
  .quote-wrap { padding: 40px 24px; }
  .form-row { grid-template-columns: 1fr; }
}

/* On narrow desktops where space is tight, drop a couple of less-essential
   icons before the breakpoint above kicks in. Keeps the nav from wrapping. */
@media (max-width: 1100px) and (min-width: 901px) {
  .nav-socials a:nth-child(n+5) { display: none; }
}

@media (max-width: 560px) {
  .services-grid,
  .ind-grid,
  .process-grid,
  .hero-proof,
  .foot-grid,
  .case-metrics,
  .testimonial-grid,
  .post-grid { grid-template-columns: 1fr; }
  h1.display { font-size: 40px; }
  .form { padding: 22px; }
}

/* ===== HOMEPAGE PRACTICES SLIDER ==========================================
   Single-track scroll-snap carousel. Each slide is full-width inside the
   container, with image left + body right. JS handles auto-advance and
   dot navigation; touch swipe works out of the box via scroll-snap.
*/
.practices-slider-section { padding: 110px 0; }

.slider {
  position: relative;
  margin-top: 36px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.04), rgba(26, 35, 126, 0.10));
  border: 1px solid var(--line);
  overflow: hidden;
}
.slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;            /* Firefox */
}
.slider-track::-webkit-scrollbar { display: none; }   /* WebKit */

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  padding: 40px;
  align-items: center;
}
.slide-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.20);
}
.slide-image img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
@supports not (aspect-ratio: 8 / 5) { .slide-image img { height: 320px; } }

.slide-body .pill {
  display: inline-block;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(0, 229, 255, 0.10);
  color: var(--cyan);
  margin-bottom: 16px;
}
.slide-body h3 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  margin: 0 0 14px;
}
.slide-body p { color: rgba(255, 255, 255, 0.85); font-size: 16px; margin: 0 0 16px; }
.slide-body ul {
  padding: 0 0 0 20px;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}
.slide-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* prev / next buttons */
.slider-prev, .slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(10, 10, 26, 0.78);
  border: 1px solid var(--line);
  color: var(--white);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 3;
  backdrop-filter: blur(6px);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.slider-prev:hover, .slider-next:hover {
  background: rgba(0, 229, 255, 0.10);
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-50%) scale(1.05);
}
.slider-prev { left: 14px; }
.slider-next { right: 14px; }
.slider-prev svg, .slider-next svg { width: 22px; height: 22px; }

/* dots */
.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}
.slider-dots button {
  /* Visual size remains 10x10 (or 32x10 when active) via background-clip;
     touch hit area is expanded to 28x28 via padding so PSI's 24x24 minimum
     is met. */
  width: 28px; height: 28px;
  padding: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25) content-box;
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, transform 0.18s ease, width 0.18s ease;
}
.slider-dots button:hover { background: rgba(255, 255, 255, 0.55) content-box; }
.slider-dots button[aria-current="true"] {
  background: var(--cyan) content-box;
  width: 50px;
  padding: 9px 9px 9px 9px;
  border-radius: 14px;
}
.slider-dots button[aria-current="true"]::after {
  content: "";
}

/* mini-grid below the slider — compact card per practice */
.services-mini {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.mini-card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  color: inherit;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.mini-card:hover {
  border-color: rgba(0, 229, 255, 0.45);
  background: rgba(0, 229, 255, 0.04);
  transform: translateY(-1px);
}
.mini-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(0, 229, 255, 0.10);
  border: 1px solid rgba(0, 229, 255, 0.30);
  display: grid; place-items: center;
}
.mini-card strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}
.mini-card span { font-size: 11px; letter-spacing: 0.06em; color: var(--cyan); }
.mini-card .arrow { color: var(--cyan); }

@media (max-width: 900px) {
  .slide {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }
  .slider-prev, .slider-next { width: 38px; height: 38px; }
  .slider-prev { left: 8px; }
  .slider-next { right: 8px; }
  .slider-dots { bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .slider-track { scroll-behavior: auto; }
  .mini-card:hover { transform: none; }
}

/* ===== CYBERSECURITY TRAINING SPOTLIGHT ==================================== */
.cyber-spotlight {
  background:
    radial-gradient(700px 320px at 80% 20%, rgba(0, 229, 255, 0.10), transparent 65%),
    radial-gradient(500px 240px at 20% 80%, rgba(41, 121, 255, 0.10), transparent 65%),
    var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cyber-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.cyber-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.04), rgba(26, 35, 126, 0.10));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.cyber-image img { display: block; width: 100%; height: auto; }
.cyber-checks {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  gap: 12px;
}
.cyber-checks li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.55;
}
.cyber-checks .check {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(46, 204, 113, 0.15);
  color: #2ECC71;
  font-weight: 800;
  font-size: 13px;
}
@media (max-width: 900px) { .cyber-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ===== AI TRANSFORMING INDUSTRIES =========================================
   Three side-by-side cards showing how AI changes each sector.
*/
.ai-industries { background: var(--ink); }
.ai-industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
.ai-industry-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.ai-industry-card:hover { transform: translateY(-3px); border-color: rgba(0, 229, 255, 0.45); }
.ai-industry-image {
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.20);
  overflow: hidden;
}
.ai-industry-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ai-industry-card:hover .ai-industry-image img { transform: scale(1.04); }
.ai-industry-body { padding: 24px 26px 28px; }
.ai-industry-body h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px;
}
.ai-industry-body p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 14px;
}
.ai-industry-body .read {
  font-size: 13px;
  color: var(--cyan);
  font-weight: 600;
  text-decoration: none;
}
.ai-industry-body .read:hover { text-decoration: underline; }
@media (max-width: 900px) { .ai-industries-grid { grid-template-columns: 1fr; } }

/* ===== SPLASH SCREEN =====================================================
   Site-wide loading overlay shown on every page load. Uses the uploaded
   logo from site.json (branding.logo) when set, otherwise falls back to
   the gradient "A" mark. Hidden by JS once the page has finished loading.
   The overlay starts visible by default — that's intentional, so it shows
   even if JavaScript fails or hasn't parsed yet. The failsafe in main.js
   guarantees it never sticks around longer than ~3.5 seconds.
*/
.splash {
  position: fixed;
  inset: 0;
  z-index: 200;            /* above sticky nav (50) and WA float (60) */
  background:
    radial-gradient(800px 400px at 50% 30%, rgba(41, 121, 255, 0.20), transparent 60%),
    radial-gradient(600px 300px at 50% 70%, rgba(0, 229, 255, 0.14), transparent 60%),
    var(--ink);
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 0.45s ease-out, visibility 0s linear 0.45s;
  pointer-events: auto;
}
.splash.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  animation: splash-pop 0.55s ease-out;
}
@keyframes splash-pop {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

.splash-logo {
  max-width: 220px;
  max-height: 100px;
  width: auto;
  height: auto;
  filter: drop-shadow(0 0 24px rgba(0, 229, 255, 0.35));
  animation: splash-glow 1.8s ease-in-out infinite alternate;
}

.splash-mark {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: var(--grad);
  display: grid;
  place-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: var(--ink);
  font-size: 42px;
  line-height: 1;
  box-shadow: 0 0 40px rgba(0, 229, 255, 0.45);
  animation: splash-glow 1.8s ease-in-out infinite alternate;
}

.splash-wordmark {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--white);
  letter-spacing: -0.01em;
}

@keyframes splash-glow {
  from { filter: drop-shadow(0 0 24px rgba(0, 229, 255, 0.25)); transform: translateY(0); }
  to   { filter: drop-shadow(0 0 40px rgba(0, 229, 255, 0.55)); transform: translateY(-2px); }
}

.splash-bar {
  width: 220px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.splash-bar span {
  display: block;
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  border-radius: 999px;
  animation: splash-bar 1.2s linear infinite;
}
@keyframes splash-bar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

/* Hide splash entirely if JS has had a chance to remove it from the DOM */
.splash[hidden] { display: none !important; }

/* Mobile: smaller logo + bar */
@media (max-width: 560px) {
  .splash-logo { max-width: 170px; max-height: 80px; }
  .splash-mark { width: 72px; height: 72px; font-size: 36px; }
  .splash-bar  { width: 170px; }
}

/* Reduced motion: cut animations but keep the visual state */
@media (prefers-reduced-motion: reduce) {
  .splash-inner,
  .splash-logo,
  .splash-mark,
  .splash-bar span { animation: none; }
}

/* ===== FLOATING WHATSAPP BUTTON ===== */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;          /* WhatsApp brand green */
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0.6);
  transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease;
  animation: wa-pulse 2.4s ease-out infinite;
  text-decoration: none;
}
.wa-float:hover {
  transform: translateY(-2px) scale(1.05);
  background: #1FBA59;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}
.wa-float:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
.wa-float svg { display: block; }

.wa-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: rgba(10, 10, 26, 0.96);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.wa-tooltip::after {
  content: '';
  position: absolute;
  top: 50%; right: -5px;
  transform: translateY(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: rgba(10, 10, 26, 0.96);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.wa-float:hover .wa-tooltip,
.wa-float:focus-visible .wa-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@keyframes wa-pulse {
  0%   { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 0 0    rgba(37, 211, 102, 0.55); }
  70%  { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 0 0    rgba(37, 211, 102, 0); }
}

/* Smaller on phones; hide tooltip but keep the icon */
@media (max-width: 560px) {
  .wa-float { width: 52px; height: 52px; bottom: 18px; right: 18px; }
  .wa-float svg { width: 26px; height: 26px; }
  .wa-tooltip { display: none; }
}

/* Footer social row — slightly larger hover state to make icons feel clickable */
.socials a {
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.socials a:hover { transform: translateY(-1px); }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rotate-slow, .rotate-rev, .marquee-track, .chip .dot, .wa-float { animation: none; }
  .wa-float:hover, .socials a:hover { transform: none; }
  * { scroll-behavior: auto; }
}

/* ===== /videos — YouTube channel feed ===================================
   Channel banner up top, then a grid of recent uploads. Click → modal
   player. Mirrors the YouTube Feed Pro layout pattern.
*/
.videos-hero .videos-stats {
  display: flex;
  gap: 26px;
  list-style: none;
  padding: 0;
  margin: 18px 0 6px;
  flex-wrap: wrap;
}
.videos-hero .videos-stats li {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.videos-hero .videos-stats strong {
  display: block;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--white);
  font-weight: 800;
  margin-bottom: 2px;
  text-transform: none;
}
.videos-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  align-items: center;
}

.videos-section { padding: 60px 0 80px; }
.videos-empty {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: rgba(0, 229, 255, 0.02);
}
.videos-empty h2 { margin: 0 0 12px; font-size: 20px; }
.videos-empty p  { margin: 0 0 8px; color: var(--muted); }

.videos-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 22px;
  gap: 16px;
  flex-wrap: wrap;
}
.videos-header h2 {
  font-size: 22px;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.videos-header .hint { color: var(--muted); font-size: 13px; }
.videos-all {
  font-size: 13px;
  color: var(--cyan);
  text-decoration: none;
  font-weight: 600;
}
.videos-all:hover { text-decoration: underline; }

.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

/* Each card */
.video-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.video-card:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(0, 229, 255, 0.35);
}
.video-card.video-card-short {
  /* Subtle accent for Shorts */
  border-top: 2px solid #ff4081;
}

.video-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: 0;
}
.video-card-short .video-thumb {
  /* Shorts are vertical — clamp to 9:16 inside the card for a more accurate preview */
  aspect-ratio: 16 / 9;
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, opacity 0.2s;
}
.video-card:hover .video-thumb img { transform: scale(1.04); opacity: 0.9; }

.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0.92;
  transition: opacity 0.2s, transform 0.2s;
}
.video-play svg { width: 64px; height: 64px; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.45)); }
.video-card:hover .video-play { opacity: 1; transform: scale(1.05); }

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.video-short-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ff4081;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 4px;
}

.video-meta {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.video-meta h3 {
  font-size: 14.5px;
  line-height: 1.4;
  margin: 0;
  color: var(--white);
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.8em;
}
.video-stats {
  display: flex;
  gap: 10px;
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  flex-wrap: wrap;
}
.video-stats span { display: inline-flex; gap: 4px; align-items: center; }
.video-stats span + span::before {
  content: "·";
  margin-right: 8px;
  color: var(--line);
}

.videos-footer {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .videos-grid { grid-template-columns: 1fr; }
  .videos-header { flex-direction: column; align-items: flex-start; }
  .videos-hero .videos-stats { gap: 20px; }
  .videos-hero .videos-stats strong { font-size: 18px; }
}

/* ===== Modal player ===== */
.video-modal[hidden] { display: none; }
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: video-modal-fade 0.18s ease-out;
}
@keyframes video-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 26, 0.86);
  backdrop-filter: blur(4px);
}
.video-modal-shell {
  position: relative;
  width: min(960px, 100%);
  background: var(--ink);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
}
.video-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.video-modal-head h2 {
  margin: 0;
  font-size: 14px;
  color: var(--white);
  font-weight: 600;
  letter-spacing: 0.01em;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-modal-close {
  background: none;
  border: 0;
  color: var(--white);
  font-size: 24px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: background 0.15s;
}
.video-modal-close:hover { background: rgba(255, 255, 255, 0.1); }
.video-modal-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  width: 100%;
}
.video-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 700px) {
  .video-modal { padding: 0; }
  .video-modal-shell { border-radius: 0; height: 100%; width: 100%; }
  .video-modal-head { padding: 10px 14px; }
}

/* ===== /portfolio — visual client wall, alternating cards =================== */
.portfolio-hero { padding-bottom: 30px; }
.portfolio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.portfolio-meta strong {
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-right: 6px;
}

.portfolio-section { padding: 60px 0 100px; }
.portfolio-grid {
  display: grid;
  gap: clamp(48px, 8vw, 96px);
}

/* Individual card — image one side, copy the other; flips on even rows */
.pf-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  animation: pf-rise 0.7s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes pf-rise {
  to { opacity: 1; transform: translateY(0); }
}
.pf-card-reverse .pf-shot { order: 2; }
.pf-card-reverse .pf-body { order: 1; }

/* Screenshot frame */
.pf-shot {
  display: block;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--indigo) 0%, var(--ink) 100%);
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 30px 60px -28px rgba(0, 0, 0, 0.55),
    0 12px 24px -16px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.pf-shot:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 40px 80px -32px rgba(0, 229, 255, 0.35),
    0 16px 32px -20px rgba(0, 0, 0, 0.5);
}
.pf-shot picture,
.pf-shot picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Branded placeholder when no screenshot is captured yet */
.pf-shot-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 14px;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(0, 229, 255, 0.18), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(41, 121, 255, 0.22), transparent 60%),
    linear-gradient(135deg, var(--indigo) 0%, var(--ink) 70%);
  grid-template-rows: auto auto;
  align-content: center;
}
.pf-shot-mark {
  display: grid;
  place-items: center;
  width: 96px; height: 96px;
  border-radius: 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 48px;
  color: var(--ink);
  background: var(--grad);
  box-shadow: 0 12px 28px -10px rgba(0, 229, 255, 0.45);
}
.pf-shot-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}

/* Card body — copy block */
.pf-body { min-width: 0; }
.pf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.pf-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--white);
}
.pf-year {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--cyan);
  font-weight: 600;
}
.pf-industry {
  margin: 0 0 22px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
}
.pf-industry em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 400;
}
.pf-industry .pf-sep { color: var(--line); margin: 0 4px; }
.pf-desc {
  margin: 0 0 24px;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.65;
}

/* Service + problem strips with cyan accent */
.pf-meta { display: grid; gap: 14px; margin: 0 0 28px; }
.pf-meta dt {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 700;
}
.pf-meta dd {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  padding-left: 14px;
  border-left: 2px solid var(--cyan);
  line-height: 1.55;
}
.pf-card-reverse .pf-meta dd { border-left-color: var(--blue); }

/* Actions row */
.pf-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pf-http {
  font-size: 11.5px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ffb347;
  border: 1px solid rgba(255, 179, 71, 0.35);
  background: rgba(255, 179, 71, 0.08);
  border-radius: 999px;
  padding: 5px 12px;
}

/* Mobile — collapse to single column, image first regardless of row index */
@media (max-width: 860px) {
  .pf-card,
  .pf-card-reverse {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .pf-card-reverse .pf-shot { order: 0; }
  .pf-card-reverse .pf-body { order: 1; }
  .pf-name { font-size: 1.4rem; }
}
@media (max-width: 480px) {
  .portfolio-meta { gap: 14px 22px; font-size: 12.5px; }
  .pf-shot-mark { width: 72px; height: 72px; font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-card { animation: none; opacity: 1; transform: none; }
  .pf-shot:hover { transform: none; }
}