/* ================================================================
   TAN TECH (PTY) LTD — PREMIUM ENHANCEMENT LAYER  ·  index.html
   Loaded AFTER site.css. Purely additive overrides — STRICTLY the
   existing palette (teal #00B8A9 · teal-soft #1fd6c6 · gold #D4AF37
   · petrol #0f2429/#0b1b1f). No new hues introduced.
   All motion inherits site.css's prefers-reduced-motion kill-switch.
   ================================================================ */

/* Smooth premium easing on the interactive chrome (requested curve) */
.btn,
.nav-links a,
.foot-col a,
.ic-row .ic-v a,
.svc-tags span,
.case-kit span {
  transition: all .3s cubic-bezier(.25, .8, .25, 1);
}

/* ---------------------------------------------------------------
   1 · HERO — living aurora, deep-contrast vignette, glass copy card
   --------------------------------------------------------------- */
.hero-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(64px); opacity: .55; mix-blend-mode: screen; will-change: transform, opacity;
}
/* Each blob carries TWO composited animations: ttDriftN moves it (transform),
   auroraBreathN breathes its intensity (opacity ONLY — animating transform here
   too would override the drift, since same-property animations don't add). The
   three breathe cycles are long and mutually near-prime (34/41/37s) so the
   teal/gold balance slowly, never-repeatingly rebalances — a living gradient
   shift with no hue-rotation, so the brand colours never drift. */
.hero-aurora i:nth-child(1) { width: 540px; height: 540px; top: -150px; left: -90px;
  background: radial-gradient(circle, rgba(0,184,169,.34), transparent 68%);
  animation: ttDrift1 19s ease-in-out infinite, auroraBreath1 34s ease-in-out infinite; }
.hero-aurora i:nth-child(2) { width: 480px; height: 480px; top: 14%; right: -140px;
  background: radial-gradient(circle, rgba(212,175,55,.20), transparent 66%);
  animation: ttDrift2 23s ease-in-out infinite, auroraBreath2 41s ease-in-out infinite; }
.hero-aurora i:nth-child(3) { width: 400px; height: 400px; bottom: -180px; left: 34%;
  background: radial-gradient(circle, rgba(31,214,198,.16), transparent 70%);
  animation: ttDrift3 27s ease-in-out infinite, auroraBreath3 37s ease-in-out infinite; }
@keyframes ttDrift1 { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(66px,44px,0); } }
@keyframes ttDrift2 { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-54px,32px,0); } }
@keyframes ttDrift3 { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(34px,-46px,0); } }
/* teal peaks while gold dips (and vice-versa) → the composite gradient rebalances */
@keyframes auroraBreath1 { 0%,100% { opacity: .50; } 50% { opacity: .70; } }
@keyframes auroraBreath2 { 0%,100% { opacity: .60; } 50% { opacity: .34; } }
@keyframes auroraBreath3 { 0%,100% { opacity: .44; } 50% { opacity: .62; } }

/* deep-contrast vignette so hero text stays pin-sharp over the glow */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 90% at 50% -5%, transparent 42%, rgba(6,16,19,.55) 100%);
}

/* keep copy above aurora + subtle frosted card behind the headline block */
.hero-copy { position: relative; z-index: 1; }
.hero-copy::before {
  content: ""; position: absolute; inset: -26px -34px -20px -30px; z-index: -1; border-radius: 24px;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  -webkit-mask: linear-gradient(105deg, #000 58%, transparent 96%);
          mask: linear-gradient(105deg, #000 58%, transparent 96%);
}
.hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.45); }
.hero-tagline { text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.hero p.lead { text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.hero-visual { position: relative; z-index: 1; }

/* ---------------------------------------------------------------
   2 · GLASSMORPHISM + DEPTH — service & case cards become frosted
   --------------------------------------------------------------- */
.svc, .case {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.014));
  backdrop-filter: blur(12px) saturate(122%); -webkit-backdrop-filter: blur(12px) saturate(122%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 40px rgba(0,0,0,0.30);
  transition:
    opacity .6s var(--ease),
    transform .5s cubic-bezier(.25,.8,.25,1),
    box-shadow .35s cubic-bezier(.25,.8,.25,1),
    border-color .35s cubic-bezier(.25,.8,.25,1),
    background .35s cubic-bezier(.25,.8,.25,1);
}
/* thin gold accent line that ignites along the top on hover */
.svc::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--gold-soft), var(--gold), transparent);
  opacity: 0; transition: opacity .4s var(--ease);
}
/* high-end hover: gold glowing keyline + slight Y-lift on a soft, deep shadow.
   :focus-visible included — the cards carry tabindex="0" for keyboard users. */
.svc { will-change: transform; backface-visibility: hidden; }
.svc:hover, .svc:focus-visible {
  transform: translateY(-4px) translateZ(0);          /* 4px lift, GPU-composited */
  border-color: rgba(212,175,55,0.50);                /* gold keyline */
  box-shadow:
    0 34px 64px -18px rgba(0,0,0,0.55),               /* soft drop, pushed down */
    0 0 0 1px rgba(212,175,55,0.32),                  /* hairline gold ring */
    0 0 44px -8px rgba(212,175,55,0.38),              /* gold aura */
    inset 0 1px 0 rgba(255,255,255,0.08);             /* glass rim light */
  outline: none;
}
.svc:hover::after, .svc:focus-visible::after { opacity: .95; }
.case:hover {
  transform: translateY(-5px);
  border-color: var(--gold-line);
  box-shadow: 0 34px 66px rgba(0,0,0,0.5), 0 0 44px -12px rgba(212,175,55,0.38);
}

/* ---------------------------------------------------------------
   3 · BORDER GLOWS — animated gradient rim + CTA sheen
   --------------------------------------------------------------- */
@property --tt-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* rotating teal→gold arc traced around the flagship intake terminal */
.intake { position: relative; }
.intake::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 3;
  background: conic-gradient(from var(--tt-angle),
              transparent 0 60%, var(--teal) 74%, var(--gold) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: .75;
  animation: ttSpin 8s linear infinite;
}
@keyframes ttSpin { to { --tt-angle: 360deg; } }

/* subtle authority-panel gradient rim */
.authority { position: relative; box-shadow: 0 24px 48px rgba(0,0,0,0.32); }
.authority::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--gold-line), transparent 45%, var(--line-strong) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* premium light-sweep across primary CTAs on hover */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.42) 50%, transparent 82%);
  transform: translateX(-130%);
}
.btn-primary:hover::after { animation: ttSheen 1.05s ease; }
.btn-primary > * { position: relative; z-index: 1; }
@keyframes ttSheen { to { transform: translateX(130%); } }

/* ---------------------------------------------------------------
   4 · SCROLL MICRO-ANIMATION — richer reveal + staggered cascade
   --------------------------------------------------------------- */
.reveal { transform: translateY(30px) scale(.984); }
.reveal.in { transform: none; }

.services-grid .reveal:nth-child(2) { transition-delay: .07s; }
.services-grid .reveal:nth-child(3) { transition-delay: .14s; }
.services-grid .reveal:nth-child(4) { transition-delay: .21s; }
.services-grid .reveal:nth-child(5) { transition-delay: .10s; }
.services-grid .reveal:nth-child(6) { transition-delay: .17s; }
.cases .reveal:nth-child(2) { transition-delay: .12s; }
.hero-stats .stat { transition: transform .3s cubic-bezier(.25,.8,.25,1); }
.hero-stats .stat:hover { transform: translateY(-4px); }

/* icon tiles turn gold in sympathy with the card — soft glow, micro-pop */
.svc-ico { transition: transform .35s var(--ease), box-shadow .35s var(--ease),
           border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease); }
.svc:hover .svc-ico, .svc:focus-visible .svc-ico {
  border-color: var(--gold-line);
  color: var(--gold-soft);
  background: linear-gradient(150deg, rgba(212,175,55,0.14), rgba(212,175,55,0.03));
  box-shadow: 0 0 26px -6px rgba(212,175,55,0.55);
  transform: translateY(-2px) scale(1.05);
}
/* index pill inverts to solid gold on hover */
.svc-idx { transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.svc:hover .svc-idx, .svc:focus-visible .svc-idx {
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: var(--slate); border-color: transparent; font-weight: 700;
}
/* SVG crispness: pure vectors, precision-rendered, never rasterised mid-lift */
.svc-ico svg {
  width: 28px; height: 28px;
  shape-rendering: geometricPrecision;
  transition: stroke .35s var(--ease), filter .35s var(--ease);
}
/* on hover the GLYPH itself goes gold with a traced drop-shadow glow —
   filter follows the strokes (unlike box-shadow, which glows the tile box) */
.svc:hover .svc-ico svg, .svc:focus-visible .svc-ico svg {
  stroke: #D4AF37;
  filter: drop-shadow(0 0 5px rgba(212,175,55,0.65))
          drop-shadow(0 0 13px rgba(212,175,55,0.30));
}

/* ================================================================
   SUB-PAGE EXTENSION  ·  about-us · it-solutions · pricing · contact
   Carries the same premium layer (palette + techniques) to the inner
   pages, mapped to THEIR section/card classes. (.svc and .intake are
   shared with the homepage, so they inherit the treatment above.)
   ================================================================ */

/* --- 1 · sub-page hero: living glow behind the heading + pin-sharp text --- */
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(560px 400px at 10% -12%, rgba(0,184,169,0.20), transparent 70%),
    radial-gradient(460px 340px at 94% -4%, rgba(212,175,55,0.12), transparent 68%);
  animation: ttHeroGlow 24s ease-in-out infinite;
}
@keyframes ttHeroGlow { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-26px,16px,0); } }
.page-hero h1 { text-shadow: 0 2px 26px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); }
.page-hero p.lead { text-shadow: 0 1px 12px rgba(0,0,0,0.42); }

/* --- 2 · glassmorphism + depth on the plain inner-page cards --- */
.price-card, .retainer:not(.featured), .value, .stat-band .sb, .solution {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014));
  backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 20px 40px rgba(0,0,0,0.30);
  transition:
    opacity .6s var(--ease),
    transform .5s cubic-bezier(.25,.8,.25,1),
    box-shadow .35s cubic-bezier(.25,.8,.25,1),
    border-color .35s cubic-bezier(.25,.8,.25,1),
    background .35s cubic-bezier(.25,.8,.25,1);
}
.price-card:hover, .retainer:not(.featured):hover, .value:hover, .stat-band .sb:hover, .solution:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 30px 58px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,184,169,0.22), 0 0 46px -10px rgba(0,184,169,0.40);
}

/* --- 3 · accent panels keep their branded glow — add depth + gradient rim --- */
.cta-band, .verify, .director, .gate-note, .retainer.featured {
  position: relative;
  box-shadow: 0 24px 50px rgba(0,0,0,0.34);
}
.cta-band::after, .verify::after, .retainer.featured::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--gold-line), transparent 45%, var(--line-strong) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* --- 4 · verification seals: intensify the glow on the existing lift --- */
.seal-frame { transition: transform .4s var(--ease); }
.seal:hover .seal-frame::after { box-shadow: 0 0 64px -4px rgba(0,184,169,0.60); }

/* --- 5 · staggered reveal cascade for the inner-page grids --- */
.price-grid .reveal:nth-child(2) { transition-delay: .06s; }
.price-grid .reveal:nth-child(3) { transition-delay: .12s; }
.price-grid .reveal:nth-child(4) { transition-delay: .09s; }
.price-grid .reveal:nth-child(5) { transition-delay: .15s; }
.price-grid .reveal:nth-child(6) { transition-delay: .18s; }
.retainer-grid .reveal:nth-child(2) { transition-delay: .08s; }
.retainer-grid .reveal:nth-child(3) { transition-delay: .16s; }
.solutions .reveal:nth-child(even) { transition-delay: .09s; }
.values-grid .value:nth-child(2) { transition-delay: .06s; }
.values-grid .value:nth-child(3) { transition-delay: .12s; }
.values-grid .value:nth-child(4) { transition-delay: .18s; }

/* ================================================================
   SEO / SEMANTICS — homepage "Engagement Desk" demoted h2 -> h3 for
   strict heading hierarchy; mirror site.css's .intake-aside h2 styling.
   (contact-us.html keeps its h2 there — correct under its page h1.)
   ================================================================ */
.intake-aside h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 16px; line-height: 1.12; }
/* pricing packages: contract-terms small print beneath the grid */
.price-terms { margin: 26px auto 0; max-width: 72ch; text-align: center;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
  line-height: 1.9; color: var(--ink-faint); }

/* ================================================================
   DESKTOP & NETWORK SUPPORT RETAINER (pricing page)
   2-col retainer grid · gold-glass premium tier · tech badges · SLA <details>
   ================================================================ */
.dsr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
@media (max-width: 760px) { .dsr-grid { grid-template-columns: 1fr; } }

.dsr-card {
  position: relative; display: flex; flex-direction: column;
  padding: 32px 30px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(26,58,58,0.20), rgba(11,27,31,0.42));
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.dsr-card:hover { transform: translateY(-4px); border-color: var(--line-strong);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.55), 0 0 40px -12px rgba(0,184,169,0.28); }

.dsr-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.dsr-ico { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px;
  border: 1px solid var(--line-strong); color: var(--teal); background: rgba(0,184,169,0.06); }
.dsr-ico svg { width: 22px; height: 22px; }
.dsr-ico.gold { border-color: var(--gold-line); color: var(--gold-soft); background: rgba(212,175,55,0.08); }
.dsr-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; line-height: 1.2; margin: 0; color: var(--ink); }
.dsr-head h3 .region { display: inline-block; margin-left: 4px; color: var(--gold-soft);
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; vertical-align: 2px; }
.dsr-tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin: 6px 0 0; }

.dsr-price { display: flex; align-items: baseline; gap: 1px; margin: 2px 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.dsr-price .cur { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--ink-dim); margin-right: 3px; }
.dsr-price .amt { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--ink); letter-spacing: -0.015em; }
.dsr-price .cents { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink-dim); }
.dsr-price .per { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-left: 8px; }

.dsr-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 13px; }
.dsr-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--ink-dim); line-height: 1.55; }
.dsr-list li svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; color: var(--teal); }
.dsr-list li b { color: var(--ink); font-weight: 600; }
.dsr-card .btn { margin-top: auto; align-self: flex-start; }

/* premium tier — subtle gold glassmorphism glow */
.dsr-card.premium {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, rgba(212,175,55,0.10), rgba(11,27,31,0.5));
  backdrop-filter: blur(12px) saturate(135%); -webkit-backdrop-filter: blur(12px) saturate(135%);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.16), 0 26px 60px -22px rgba(212,175,55,0.36), inset 0 1px 0 rgba(255,255,255,0.07);
}
.dsr-card.premium:hover { transform: translateY(-6px); border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.32), 0 36px 72px -20px rgba(212,175,55,0.46), inset 0 1px 0 rgba(255,255,255,0.10); }
.dsr-card.premium .dsr-list li svg { color: var(--gold-soft); }
.dsr-badge {
  position: absolute; top: -11px; right: 22px;
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  color: var(--slate); background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  padding: 5px 12px; border-radius: 999px; box-shadow: 0 6px 18px -6px rgba(212,175,55,0.6);
}

/* supported technologies */
.tech-intro { text-align: center; margin: clamp(50px,6vw,74px) 0 26px; }
.tech-intro h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem,2.4vw,1.7rem); margin: 8px 0 0; color: var(--ink); }
.tech-block { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) { .tech-block { grid-template-columns: 1fr; } }
.tech-group { padding: 24px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0,0,0,0.14); }
.tech-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px; }
.tech-head svg { width: 15px; height: 15px; color: var(--teal); flex: 0 0 auto; }
.tech-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.tech-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(0,184,169,0.04);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink);
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.tech-badge svg { width: 15px; height: 15px; color: var(--teal); flex: 0 0 auto; }
.tech-badge b { font-weight: 500; }
.tech-badge:hover { border-color: var(--gold-line); background: rgba(212,175,55,0.06); transform: translateY(-2px); }
.tech-badge:hover svg { color: var(--gold-soft); }

/* ================================================================
   GLOBAL IMAGE INTEGRATION PROTOCOL — reference implementation
   (M365 architecture image, it-solutions). The four absolute rules:
   1 · wrapper container, flex-centred — no raw <img> in the layout,
       no bleed into neighbouring sections
   2 · transparent PNG ⇒ filter: drop-shadow (NEVER box-shadow —
       a square box on transparent art is an amateur artifact)
   3 · float animates INSIDE the wrapper, transform-only (zero
       document-flow disruption, zero text jitter) + will-change
   4 · max-width 100% · height auto · object-fit contain — scales
       flawlessly on mobile, never stretches, never breaks its column
   ================================================================ */
.sol-media.sol-photo {
  overflow: visible; border: 0; background: transparent; min-height: 0; padding: 0;
}

/* 1 · the wrapper: flexbox perfect-centring; owns the layout slot so the
      animated child can never disturb surrounding content */
.image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 14px 0;
}
/* soft radial underlay on the WRAPPER (background layer, not a shadow) */
.image-wrapper::before {
  content: ""; position: absolute; inset: 10% 6%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(0, 184, 169, 0.28),
    rgba(212, 175, 55, 0.12) 58%,
    transparent 78%);
  filter: blur(34px);
  pointer-events: none;
}

/* 2 + 3 + 4 · the image itself */
.m365-img {
  position: relative; z-index: 1;
  max-width: 100%;                                     /* 4 · strict responsiveness */
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: none;                                    /* 2 · NEVER box-shadow on transparent art */
  filter: drop-shadow(0px 10px 20px rgba(0, 184, 169, 0.4));  /* 2 · contours the silhouette */
  animation: m365Float 6s ease-in-out infinite;        /* 3 · transform-only, inside the wrapper */
  will-change: transform;
}
/* utility: melt a dark-canvas glow artwork into the card (non-destructive) */
.blend-screen { mix-blend-mode: screen; }

@keyframes m365Float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ================================================================
   PRICING ICONS — premium 3D image icons (pricing.html)
   The artwork ships its own complete gold frame on a black canvas:
   the old icon-box frame is removed (no double frame) and the black
   canvas is neutralised with mix-blend-mode:screen, so only the
   neon art composites onto the card. Image Integration Protocol:
   container-centred, object-fit contain, no distortion.
   ================================================================ */
.price-card .pc-ico.pc-ico-img {
  width: 64px; height: 64px;          /* slightly larger stage for the framed art */
  background: none;                    /* old box frame removed — art has its own */
  border: 0;
  display: grid; place-items: center;
}
.price-card .pc-ico.pc-ico-img img {
  width: 100%; height: 100%;
  max-width: 100%;
  object-fit: contain;                 /* never stretched, squashed or cropped */
  display: block;
  mix-blend-mode: screen;              /* black canvas contributes nothing → melts into the card */
}
@media (max-width: 640px) {
  .price-card .pc-ico.pc-ico-img { width: 56px; height: 56px; }
}

/* ================================================================
   TECHNOLOGY IMAGE BADGES — M365 card (it-solutions)
   PNG badge artwork replaces the text pills. The gold frame, glow,
   lettering and dark interior are IN the artwork — no CSS borders,
   radii, backgrounds, shadows or filters are applied over it.
   ================================================================ */
.technology-image-badges {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;               /* uniformity: always ONE line */
    gap: 9px;
    margin-top: 18px;
}
.technology-image-badge {
    display: block;
    width: calc((100% - 18px) / 3);  /* three equal badges fill the row exactly */
    height: auto;                     /* natural 4:1 aspect — never distorted */
    object-fit: contain;
    flex: 0 0 auto;
}
@media (max-width: 640px) {
    .technology-image-badges { gap: 8px; }
    .technology-image-badge  { width: calc((100% - 16px) / 3); }
}

/* ================================================================
   CHECKOUT PAGES — billing ledger, transfer warning, order form
   (the Full Domain Protection card reuses .dsr-card.premium)
   ================================================================ */
.co-ledger { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, rgba(26,58,58,0.22), rgba(11,27,31,0.45));
  backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); }
.co-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 26px;
  padding: 28px 30px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.co-row:last-child { border-bottom: 0; }
.co-item { flex: 1 1 340px; min-width: 0; }
.co-item h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; margin: 0 0 8px; color: var(--ink); }
.co-item p { margin: 0; color: var(--ink-dim); font-size: 0.92rem; line-height: 1.65; }
.co-item .co-note { display: block; margin-top: 9px; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); }
.co-amt { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.co-amt .cur { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink-dim); margin-right: 2px; }
.co-amt .amt { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--ink); letter-spacing: -0.01em; }
.co-amt .cents { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--ink-dim); }
.co-amt .per { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }

/* core-inclusion chips (reuse the .tech-badge look, standalone row) */
.co-incl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* strict transfer-settlement warning clause */
.co-warning { display: flex; gap: 13px; align-items: flex-start; margin-top: 18px;
  padding: 15px 17px; border: 1px solid var(--gold-line); border-left: 3px solid var(--gold);
  border-radius: 10px; background: rgba(212,175,55,0.07); color: var(--ink);
  font-size: 0.9rem; line-height: 1.65; }
.co-warning svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; color: var(--gold); }
.co-warning b { color: var(--gold-soft); }

/* order form panel — glass shell around the standard field system */
.co-form-shell { max-width: 760px; margin-inline: auto; padding: clamp(26px, 4vw, 40px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(26,58,58,0.24), rgba(11,27,31,0.5));
  backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%); }

/* SLA & terms — native <details> accordion */
.sla-accordion { margin-top: clamp(38px,5vw,56px); border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(0,0,0,0.16); overflow: hidden; }
.sla-accordion summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 22px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink);
  transition: background .25s var(--ease); }
.sla-accordion summary::-webkit-details-marker { display: none; }
.sla-accordion summary:hover { background: rgba(0,184,169,0.04); }
.sla-accordion summary .sla-left { display: inline-flex; align-items: center; gap: 11px; }
.sla-accordion summary .sla-left svg { width: 18px; height: 18px; color: var(--gold-soft); flex: 0 0 auto; }
.sla-chevron { width: 18px; height: 18px; color: var(--ink-dim); flex: 0 0 auto; transition: transform .3s var(--ease); }
.sla-accordion[open] .sla-chevron { transform: rotate(180deg); }
.sla-body { padding: 0 22px 20px; }
.sla-body p { margin: 0; color: var(--ink-dim); font-size: 0.92rem; line-height: 1.75;
  border-top: 1px solid var(--line); padding-top: 16px; }
/* flat-rate billing disclaimer — quiet gold keyline chip, Space Grotesk lead-in */
.sla-body .sla-flat { margin-top: 14px; padding: 13px 16px; border: 1px solid var(--gold-line);
  border-radius: 10px; background: rgba(212,175,55,0.06); color: var(--ink); }
.sla-body .sla-flat b { font-family: var(--font-display); font-weight: 600; color: var(--gold-soft); }

/* footer column headings demoted h4 -> h3 (strict outline) — mirror site.css's .foot-col h4 */
.foot-col h3 { font-family: var(--font-mono); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 18px; }

/* ================================================================
   CONSOLE REFINEMENT — hyper-modern glass terminal (hero)
   True glassmorphism over the aurora, eased caret, readability tune.
   ================================================================ */

/* ---- the panel: real glass, layered depth ---- */
.console {
  background: linear-gradient(180deg, rgba(26,58,58,0.48), rgba(11,27,31,0.66));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow:
    0 32px 80px -28px rgba(0,0,0,0.70),   /* ambient drop */
    0 2px 10px rgba(0,0,0,0.35),          /* contact shadow */
    inset 0 1px 0 rgba(255,255,255,0.07); /* top rim light */
}

/* title bar: quieter glass, glowing traffic lights, aired-out title */
.console-bar { background: rgba(0,0,0,0.28); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 14px 18px; }
.console-bar .tcb.r { box-shadow: 0 0 8px -1px #ff5f56; }
.console-bar .tcb.y { box-shadow: 0 0 8px -1px var(--gold); }
.console-bar .tcb.g { box-shadow: 0 0 8px -1px var(--teal); }
.console-bar .ttl { letter-spacing: 0.08em; color: var(--ink-dim); }

/* ---- body: JetBrains Mono kept — spacing + contrast tuned ---- */
.console-body {
  padding: 24px 26px 26px;
  font-size: 0.84rem;
  line-height: 2.1;                 /* breathing room between status lines */
  letter-spacing: 0.012em;
  font-variant-ligatures: none;     /* keep glyphs literal, terminal-true */
}
.console-body .ln { color: #bfd6d3; }                       /* lifted base contrast */
.console-body .ln .k { color: var(--teal); font-weight: 500; }
.console-body .ln .v { color: var(--gold-soft); opacity: .92; }
.console-body .ln .ok { color: var(--teal-soft); text-shadow: 0 0 10px rgba(0,184,169,0.45); }
.console-body .prompt { color: var(--teal-soft); }

/* meters: a touch taller, glowing fill */
.console-body .meter { height: 6px; background: rgba(255,255,255,0.08); }
.console-body .meter i { box-shadow: 0 0 10px -2px var(--glow-teal); }

/* ---- boot sequence: lines TYPE in like a live terminal ----
   steps() quantises a clip-path reveal into chunky keystrokes.
   Rhythm: command types → outputs land quickly → next command.
   The initial clip lives ONLY under no-preference: reduced-motion
   users (whose animations are globally killed) see the full static
   readout instead of an empty panel. */
@media (prefers-reduced-motion: no-preference) {
  .console-body .ln {
    clip-path: inset(0 100% 0 0);
    animation: typeLine .5s steps(18, end) forwards;
  }
  .console-body .ln:nth-child(1)  { animation-delay: .25s; }  /* $ systemctl …   */
  .console-body .ln:nth-child(2)  { animation-delay: .85s; }  /*   networking    */
  .console-body .ln:nth-child(3)  { animation-delay: 1.00s; } /*   hosting       */
  .console-body .ln:nth-child(4)  { animation-delay: 1.15s; } /*   voip          */
  .console-body .ln:nth-child(5)  { animation-delay: 1.30s; } /*   security-ops  */
  .console-body .ln:nth-child(6)  { animation-delay: 1.85s; } /* $ uptime --sla  */
  .console-body .ln:nth-child(7)  { animation-delay: 2.35s; } /*   30-day        */
  .console-body .ln:nth-child(8)  { animation-delay: 2.50s; } /*   threats       */
  .console-body .ln:nth-child(9)  { animation-delay: 2.65s; } /*   failover      */
  .console-body .ln:nth-child(10) { animation-delay: 3.05s; } /* $ ▍ live prompt */
}
@keyframes typeLine {
  to { clip-path: inset(0 -2% 0 0); }   /* -2% so glows/shadows aren't shaved */
}

/* ---- caret: smooth eased pulse (replaces the hard LED-step blink) ---- */
.cursor-blink {
  width: 8px;
  border-radius: 2px;
  box-shadow: 0 0 9px rgba(0,184,169,0.75);
  animation: caretPulse 1.15s ease-in-out infinite;
}
@keyframes caretPulse {
  0%, 55%   { opacity: 1; }
  75%       { opacity: 0.12; }
  100%      { opacity: 1; }
}

/* ---- seamless dissolve: aurora + glow melt into #0f2429 below ---- */
.hero { isolation: isolate; }
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 200px;
  background: linear-gradient(180deg, transparent, rgba(15,36,41,0.85) 70%, var(--slate) 100%);
  z-index: 1; pointer-events: none;
}
.hero .wrap { z-index: 2; }

/* ================================================================
   SERVICES REDESIGN — Networking · Hosting · VoIP (homepage)
   Assurance bar + three flagship pillars with security-spec footers.
   ================================================================ */

/* ---- assurance bar (security + reliability proof strip) ---- */
.assure { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(11,27,31,0.55); }
.assure .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-block: 16px; }
.assure-item { display: flex; align-items: center; gap: 11px; justify-content: center;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.assure-item svg { width: 16px; height: 16px; color: var(--teal); flex: 0 0 auto; }
.assure-item b { color: var(--ink); font-weight: 600; }
@media (max-width: 880px) { .assure .wrap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .assure .wrap { grid-template-columns: 1fr; } }

/* ---- flagship service grid (3 pillars) ---- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .pillars { grid-template-columns: 1fr; } }
.pillar { display: flex; flex-direction: column; padding: 34px 30px 0; }
.pillar .svc-kicker { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.pillar .svc-kicker::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-line), transparent); }
.pillar h3 { font-size: 1.45rem; }
.pillar p { min-height: 4.4em; }
.pillar-points { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.pillar-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--ink-dim); }
.pillar-points li svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; color: var(--teal); }
.pillar-points li b { color: var(--ink); font-weight: 600; }

/* quiet deep-link under each pillar's tags */
.pillar-more { display: inline-block; margin-top: 16px;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--teal);
  transition: color .3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.pillar-more:hover { color: var(--gold-soft); }

/* security-spec footer bar on each pillar */
.svc-stat { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); margin-inline: -30px; padding: 15px 24px;
  background: rgba(0,184,169,0.05); }
.svc-stat .num { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.svc-stat .num em { color: var(--teal); font-style: normal; }
.svc-stat .lbl { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); text-align: right; }
.svc-stat .shield { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px;
  border: 1px solid var(--gold-line); color: var(--gold); background: rgba(212,175,55,0.07); }
.svc-stat .shield svg { width: 15px; height: 15px; }

/* ================================================================
   CASE-STUDY DIAGRAMS — living SVGs (Elite Deployments)
   Scoped to .case-banner only. Slow cycles, small ranges: the
   diagrams read as *live systems*, not attention-seeking motion.
   All of it obeys the global prefers-reduced-motion kill-switch.
   ================================================================ */

/* ---- Omada SDN topology: data flowing along the uplinks ----
   The connection tree is one gradient-stroked path (teal→gold).
   A 14/6 dash keeps it ~70% solid — reads as an active link with
   traffic marching through it, not a dotted line. */
.case-banner svg g[stroke^="url"] path {
  stroke-dasharray: 14 6;
  animation: linkFlow 3.2s linear infinite;
}
@keyframes linkFlow {
  to { stroke-dashoffset: -40; }   /* exactly two dash periods → seamless loop */
}

/* ---- junction + indicator nodes (gold circles, both diagrams):
   a soft heartbeat, staggered so they never pulse in unison ---- */
.case-banner svg g[fill="#D4AF37"] circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: nodePulse 2.8s ease-in-out infinite;
}
.case-banner svg g[fill="#D4AF37"] circle:nth-of-type(2) { animation-delay: .9s; }
.case-banner svg g[fill="#D4AF37"] circle:nth-of-type(3) { animation-delay: 1.8s; }
@keyframes nodePulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.4); }
}

/* ---- Ajax 32-channel grid: a quiet status wave sweeping the
   columns left→right — channels breathing, not blinking ---- */
.cases .case:nth-child(2) .case-banner rect[stroke="#00B8A9"] {
  animation: channelBreath 3.6s ease-in-out infinite;
}
@keyframes channelBreath {
  0%, 100% { opacity: .72; }
  50%      { opacity: 1; }
}
/* armed channels (gold-stroked) assert on their own slower cycle */
.cases .case:nth-child(2) .case-banner rect[stroke="#D4AF37"] {
  animation: armedPulse 2.4s ease-in-out infinite;
}
@keyframes armedPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}
/* column stagger (8 per row-group) — the sweep */
.cases .case:nth-child(2) .case-banner g g rect:nth-of-type(1) { animation-delay: 0s; }
.cases .case:nth-child(2) .case-banner g g rect:nth-of-type(2) { animation-delay: .18s; }
.cases .case:nth-child(2) .case-banner g g rect:nth-of-type(3) { animation-delay: .36s; }
.cases .case:nth-child(2) .case-banner g g rect:nth-of-type(4) { animation-delay: .54s; }
.cases .case:nth-child(2) .case-banner g g rect:nth-of-type(5) { animation-delay: .72s; }
.cases .case:nth-child(2) .case-banner g g rect:nth-of-type(6) { animation-delay: .90s; }
.cases .case:nth-child(2) .case-banner g g rect:nth-of-type(7) { animation-delay: 1.08s; }
.cases .case:nth-child(2) .case-banner g g rect:nth-of-type(8) { animation-delay: 1.26s; }

/* ================================================================
   INTAKE FORM — MOBILE UX OPTIMISATION
   WCAG/HIG touch targets (≥44px, we guarantee 48–54px), single-column
   stacking from 768px, and 16px control text so iOS never zoom-jumps
   on focus. Layout/sizing only — the dark, secure aesthetic is untouched.
   (The contact page honeypot is clipped off-screen + unclassed: unaffected.)
   ================================================================ */

/* base guarantee, all viewports: comfortable targets even on desktop touch */
.intake-form .input,
.intake-form .select { min-height: 48px; }
.intake-form .btn-submit { min-height: 48px; }

@media (max-width: 768px) {
  /* 1 · elegant single-column stack (was 560px — tablets were cramped) */
  .intake-form .field-row { grid-template-columns: 1fr; gap: 0; }
  .intake-form .field { margin-bottom: 16px; }
  .intake-form label { font-size: 0.7rem; margin-bottom: 9px; }

  /* 2 · thumb-first controls: ≥52px tall, 16px text (kills iOS focus-zoom) */
  .intake-form .input,
  .intake-form .select,
  .intake-form .textarea {
    font-size: 1rem;              /* 16px — the iOS no-zoom threshold */
    min-height: 52px;
    padding: 14px 16px;
    border-radius: 12px;          /* slightly softer at touch scale */
  }
  .intake-form .select { background-position: right 16px center; padding-right: 44px; }
  .intake-form .textarea { min-height: 150px; }

  /* 3 · submit: full-width, 54px, action-first (note drops below) */
  .intake-form .form-foot { flex-direction: column-reverse; align-items: stretch; gap: 14px; margin-top: 20px; }
  .intake-form .btn-submit { width: 100%; min-height: 54px; justify-content: center; }
  .intake-form .form-note { max-width: none; text-align: center; }
}

/* ================================================================
   LUXE REVEAL — final say on the .reveal system.
   · Hidden state is GATED on html.js (set inline in <head> before
     paint): if JavaScript ever fails, content is never trapped
     invisible — it simply renders in place.
   · Split timing: opacity resolves on a quick easeOutCubic while the
     translate settles on a long easeOutExpo tail — the "luxury" feel
     comes from the position landing softly *after* the fade completes.
   ================================================================ */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  will-change: opacity, transform;
  transition:
    opacity   .6s  cubic-bezier(0.33, 1, 0.68, 1),   /* easeOutCubic — quick clarity */
    transform .95s cubic-bezier(0.16, 1, 0.30, 1);   /* easeOutExpo — long soft settle */
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
  will-change: auto;         /* release the compositor hint once landed */
}
/* no-JS / failed-JS: override site.css's unconditional hidden state */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }

/* ================================================================
   SOLUTION CARD IMAGE BADGES  ·  enterprise networking (tile 01)
   Index icon + vendor badge images replace text with visual depth.
   ================================================================ */
.sol-idx-img {
  width: 32px; height: 32px;
  object-fit: contain;
  display: block;
}

.sol-tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 3vw, 18px);
  margin-top: 20px;
}

.sol-badge-img {
  height: clamp(64px, 12vw, 88px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  flex-shrink: 0;
  transition: transform .35s var(--ease), filter .35s var(--ease);
  will-change: transform, filter;
}

.solution:hover .sol-badge-img, .solution:focus-within .sol-badge-img {
  transform: translateY(-3px) scale(1.06);
  filter: drop-shadow(0 8px 20px rgba(212,175,55,0.42));
}

@media (max-width: 768px) {
  .sol-badge-img {
    height: clamp(56px, 10vw, 72px);
  }
}

/* ---------------------------------------------------------------
   MOBILE FIX — kill the ~32px horizontal overflow on phones.
   The header's brand + "Engage Us" CTA + hamburger together exceed
   375px. The hamburger menu already carries the Contact link, so we
   drop the header CTA on narrow phones — brand + toggle then fit and
   the slide-in menu is no longer clipped on the left edge.
   (To keep the mobile CTA instead, delete this block and shrink the
   brand sub-text / CTA padding in site.css.)
   --------------------------------------------------------------- */
@media (max-width: 560px) {
  .nav-cta .btn-primary { display: none; }
}

/* ============================================================================
   9 · TELEPHONY — capability comparison table
   Semantic <table> on desktop; collapses to labelled cards under 780px so the
   grid stays readable on a phone without horizontal scrolling.
   ========================================================================== */
.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; }

.cmp-wrap { margin-top: clamp(28px, 4vw, 44px); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel);
  backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 18px 48px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.07);
  overflow: hidden; }

.cmp-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.cmp-table thead th { position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(26,58,58,0.96), rgba(15,36,41,0.96));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  text-align: center; padding: 16px 14px 14px; border-bottom: 1px solid var(--line-strong);
  letter-spacing: .01em; }
.cmp-table thead th:first-child { text-align: left; color: var(--ink-dim);
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.cmp-table thead th.is-featured { color: var(--gold-soft); box-shadow: inset 0 -2px 0 var(--gold-line); }
.cmp-price { display: block; margin-top: 4px; font-family: var(--font-mono);
  font-size: .82rem; font-weight: 400; color: var(--teal); letter-spacing: .02em; }
.cmp-table thead th.is-featured .cmp-price { color: var(--gold); }

.cmp-table tbody th { text-align: left; font-weight: 400; color: var(--ink-dim);
  padding: 13px 16px; font-size: .93rem; line-height: 1.5; }
.cmp-table tbody td { text-align: center; padding: 13px 14px; }
.cmp-table tbody tr + tr th, .cmp-table tbody tr + tr td { border-top: 1px solid var(--line); }
.cmp-table tbody tr:hover th { color: var(--ink); }
.cmp-table tbody tr:hover td { background: rgba(0,184,169,0.045); }
.cmp-table tbody td.is-featured { background: rgba(212,175,55,0.045); }
.cmp-table tbody tr:hover td.is-featured { background: rgba(212,175,55,0.09); }

.cmp-table .yes { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; font-size: .82rem; font-weight: 700;
  color: var(--slate); background: var(--teal);
  box-shadow: 0 0 0 4px rgba(0,184,169,0.14); }
.cmp-table td.is-featured .yes { background: var(--gold); box-shadow: 0 0 0 4px rgba(212,175,55,0.16); }
.cmp-table .no { color: var(--ink-faint); font-size: 1rem; }

@media (max-width: 780px) {
  .cmp-wrap { border: 0; background: none; box-shadow: none; backdrop-filter: none;
    -webkit-backdrop-filter: none; overflow: visible; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: 100%; }
  .cmp-table thead { display: none; }
  .cmp-table tbody tr { margin-bottom: 14px; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: var(--panel);
    backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%);
    padding: 4px 2px 8px; box-shadow: 0 10px 26px rgba(0,0,0,0.24); }
  .cmp-table tbody tr + tr th, .cmp-table tbody tr + tr td { border-top: 0; }
  .cmp-table tbody th { color: var(--ink); font-family: var(--font-display); font-weight: 600;
    padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
  .cmp-table tbody td { display: flex; align-items: center; justify-content: space-between;
    padding: 9px 16px; text-align: right; }
  .cmp-table tbody td::before { content: attr(data-l); color: var(--ink-dim);
    font-size: .84rem; letter-spacing: .02em; }
  .cmp-table tbody td.is-featured { background: rgba(212,175,55,0.06);
    border-left: 2px solid var(--gold-line); }
  .cmp-table tbody tr:hover td { background: none; }
  .cmp-table tbody tr:hover td.is-featured { background: rgba(212,175,55,0.06); }
}

/* ============================================================================
   10 · GLASS REFINEMENT — deeper translucency, specular rim, honest fallback
   A single source of truth for the glass surfaces so every panel reads as one
   material. Fallback: browsers without backdrop-filter get an opaque panel
   rather than unreadable text over the aurora.
   ========================================================================== */
:root {
  --glass-blur:  22px;
  --glass-sat:   165%;
  --glass-tint:  rgba(15, 36, 41, 0.55);
  --glass-rim:   inset 0 1px 0 rgba(255,255,255,0.10), inset 0 0 0 1px rgba(255,255,255,0.035);
  --glass-cast:  0 22px 60px rgba(0,0,0,0.34);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .console, .cmp-wrap, .retainer, .svc, .dsr-card, .sla-accordion, .cta-band {
    background: var(--glass-tint);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    box-shadow: var(--glass-cast), var(--glass-rim);
  }
  /* the featured tier keeps its gold identity, gains the same material depth */
  .retainer.featured { background: rgba(32, 44, 38, 0.55);
    box-shadow: var(--glass-cast), var(--glass-rim), 0 0 0 1px var(--gold-line); }
}

/* Specular sweep — a single soft highlight across the top edge, the detail that
   separates real glass from a flat translucent box. Decorative only. */
.console::after, .cmp-wrap::after, .cta-band::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0));
  pointer-events: none; border-radius: inherit; }
.console, .cmp-wrap, .cta-band { position: relative; }

@media (prefers-reduced-transparency: reduce) {
  .console, .cmp-wrap, .retainer, .svc, .dsr-card, .sla-accordion, .cta-band {
    background: #10262b; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---- 11 · six-card capability grid: force an even 3 × 2 on wide screens ----
   auto-fit gives four columns at 1440px, which strands two cards on a short
   second row. Three columns keeps the block balanced and the cards readable. */
@media (min-width: 1100px) {
  .services-grid.svc-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 12 · grid blow-out guard --------------------------------------------
   Grid items default to `min-width: auto`, so a child with a wide min-content
   (a nowrap monospace label, a long unbroken string) forces its track WIDER
   than the container. With overflow-x clipped at the root that silently cuts
   content off on small screens rather than showing a scrollbar — measured at
   375px, the hero column resolved to 366px inside a 331px wrap.
   `min-width: 0` lets the track shrink to the container, which is what every
   one of these layouts already assumes. */
.hero-grid > *, .services-grid > *, .retainer-grid > *, .dsr-grid > *,
.footer-grid > *, .price-grid > *, .intake-grid > *, .cases > *,
.pillars > *, .tech-block > * { min-width: 0; }

/* the stat band's uppercase mono labels are the widest min-content offenders */
.hero-stats { min-width: 0; }
.hero-stats .lbl { overflow-wrap: anywhere; }

/* footer contact rows: flex children also default to min-width:auto, so the
   street address and the mail link push past the column on narrow screens */
.foot-contact .fc { min-width: 0; }
.foot-contact .fc > span { min-width: 0; overflow-wrap: anywhere; }

/* ---- 13 · .split-2 — the about-page two-column band -----------------------
   Was an inline `display:grid; grid-template-columns:1fr 1fr` on .wrap. Inline
   styles outrank media queries, so it could never collapse: at 375px the two
   tracks resolved to 424px inside a 331px wrap and the right column was cut
   off the screen. As a class it collapses like every other grid. */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); }
.split-2 > * { min-width: 0; }
@media (max-width: 860px) { .split-2 { grid-template-columns: 1fr; } }