/* (clean) removed old hero-left-mask rules */

/* Dedicated absolute left image column */
.hero-photo{
  position:absolute; left:0; top:0; bottom:0; width:var(--left-col);
  z-index:1; overflow:hidden; background:#081B2C;
}

/* Military: make bottom CTA match dark hero and improve readability */
.page-military .gaming-cta{ background:linear-gradient(180deg, #0b0f1a 0%, #111827 100%) }
.page-military .gaming-cta .cta-copy h2{ color:#ffffff }
.page-military .gaming-cta .cta-copy p{ color:#cbd5e1 }
.page-military .gaming-cta .cta-note{ color:#94a3b8 }

/* Military CTA button: high-contrast accent that fits dark palette */
.page-military .gaming-cta .btn-dark-pill{
  background:#2563eb;            /* blue-600 */
  border-color:#1d4ed8;          /* blue-700 */
  color:#fff;                    /* ensure contrast */
  box-shadow:0 8px 24px rgba(37,99,235,.35);
}
.page-military .gaming-cta .btn-dark-pill:hover{
  background:#1d4ed8;            /* slightly darker on hover */
  box-shadow:0 12px 30px rgba(29,78,216,.45);
  transform:translateY(-2px);
  filter:none;                   /* neutralize global brightness filter */
}
.page-military .gaming-cta .btn-dark-pill:focus-visible{
  outline:2px solid rgba(59,130,246,.85); /* blue-500 focus ring */
  outline-offset:2px;
}

/* Marketing: center hero actions at 412x892 and smaller */
@media screen and (max-width: 412px) and (max-height: 892px){
  .page-marketing .hero-actions{ justify-content:center; align-items:center }
  .page-marketing .btn-marketing-dark,
  .page-marketing .btn-marketing-outline{ margin-inline:auto }
}

/* Ensure grid/flex children in service listings can shrink on narrow viewports */
.services-grid > *{ min-width:0 }

/* Phone/tablet overflow hardening */
@media (max-width: 768px){
  html, body{ overflow-x:hidden }
}
.hero-photo-img{ width:100%; height:100%; object-fit:cover; object-position:40% 22%; display:block }

/* Neutralize old sticky wrapper if present */
.hero-sticky-inner{ position:static; top:auto; height:auto; width:100%; display:contents }

/* (clean) removed old image-mask and fallbacks */

.hero-person-img{
  width:auto; 
  height:90%; 
  max-width:100%; 
  max-height:none;
  object-fit:contain; 
  object-position:center bottom; 
  transform:none;
}

/* Ensure full visibility on cybersecurity page */
.page-cybersecurity .hero-person-img{ 
  object-fit:contain !important; 
  object-position:center bottom !important;
}

/* Hover polish (desktop only) */
@media (hover:hover) and (pointer:fine){
  .hero-dashboard .hero-main-img,
  .hero-left-image img{ transition: transform .28s ease, filter .28s ease, box-shadow .28s ease; will-change: transform }
  .hero-dashboard:hover .hero-main-img{ transform: scale(1.025); filter:saturate(1.05) }
  .hero-left-image:hover img{ transform: scale(1.02); filter:saturate(1.05) }
}

/*
  SassonAI static site styles
*/
:root{
  --bg:#ffffff;
  --text:#111827; /* gray-900 */
  --muted:#6b7280; /* gray-500 */
  --border:#e5e7eb; /* gray-200 */
  --primary:#111827;
  --radius:10px;
  --container:1200px;
  --section:#f7f9fc; /* subtle alternate background */
  --section-2:#f6f7f9; /* services section background */
  --panel:#8f949d; /* grey panel */
  --panel-text:#ffffff; /* panel text */
  /* spacing scale */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  /* radii */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px;
  /* shadows */
  --shadow-sm:0 4px 12px rgba(0,0,0,.08);
  --shadow-md:0 10px 24px rgba(0,0,0,.14);
  --shadow-lg:0 18px 46px rgba(0,0,0,.18);
  /* motion system */
  --ease-std:cubic-bezier(.2,.0,.2,1);
  --ease-emph:cubic-bezier(.2,.0,0,1);
  --dur-1:120ms; --dur-2:180ms; --dur-3:240ms; --dur-4:360ms;
  /* breakpoints */
  --bp-sm:640px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px; --bp-2xl:1536px;
  /* focus */
  --focus:#4F46E5; /* indigo-600 */
  /* safe area */
  --safe-top:env(safe-area-inset-top, 0px);
}

/* CTA image section */
.section-cta-image{ padding-block:70px; background:#ffffff; }
.cta-card{ position:relative; margin:0 auto; border-radius:14px; overflow:hidden; min-height:520px; max-width:1100px; 
  background-color:#0b0f1a; 
  background-image:url('https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=1600&auto=format&fit=crop');
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.cta-card::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); }
.cta-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.55); }
.cta-overlay{ position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:flex-start; padding:48px 42px; color:#fff; z-index:1 }
.cta-title{ margin:0 0 16px; font-size:clamp(36px, 6vw, 64px); line-height:1.08; font-weight:800; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.35) }
.btn-on-dark{ background:#111827; color:#fff; border:1px solid #0f172a; padding:16px 26px; font-size:17px; border-radius:12px; font-weight:800; box-shadow:0 10px 24px rgba(0,0,0,.25); display:inline-flex; align-items:center; justify-content:center; line-height:1 }
.btn-on-dark:hover{ filter:brightness(.92) }
*{box-sizing:border-box}
html,body{height:100%}
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,Apple Color Emoji,Segoe UI Emoji,sans-serif;
  color:var(--text);
  background:var(--bg);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{
  width:100%;
  max-width:var(--container);
  padding-inline:20px;
  margin-inline:auto;
}

/* Fluid typography (element-level, low specificity) */
h1{ font-size:clamp(32px, 7vw, 64px); line-height:1.1; margin:.2em 0 }
h2{ font-size:clamp(26px, 5.6vw, 48px); line-height:1.15; margin:.6em 0 .4em }
h3{ font-size:clamp(22px, 4vw, 36px); line-height:1.2; margin:.6em 0 .3em }
h4{ font-size:clamp(18px, 3.2vw, 28px); line-height:1.25; margin:.6em 0 .3em }
h5{ font-size:clamp(16px, 2.8vw, 22px); line-height:1.3; margin:.6em 0 .2em }
h6{ font-size:clamp(14px, 2.4vw, 18px); line-height:1.35; margin:.6em 0 .2em }
body{ font-size:clamp(14px, 1.2vw, 16px); line-height:1.55 }
small{ font-size:clamp(12px, .95vw, 13px) }

/* Focus visibility */
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px }

/* Nav/touch ergonomics */
.primary-nav{ gap:16px }
.nav-link{ display:inline-flex; align-items:center; min-height:44px; padding:10px 12px }
@media (max-width: 640px){
  .primary-nav{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
  .primary-nav::-webkit-scrollbar{ display:none }
}

/* Safe area support for iOS notches */
.site-header{ padding-top:var(--safe-top) }

/* Media & images: CLS mitigation for lazy images */
img[loading="lazy"]{ contain-intrinsic-size:800px 600px }

/* Common video iframes: provide intrinsic ratio to avoid layout shift when no wrapper sizing is present */
iframe.media-card,
.hero-video,
.solution-video,
.military-video{
  width:100%;
  max-width:100%;
  aspect-ratio:16/9;
  height:auto;
  display:block;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important }
  .reveal, .float{ animation:none !important }
}

/* QA: optional debug outline (toggle by adding .debug-outline to <html>) */
.debug-outline *{ outline:1px dashed rgba(99,102,241,.35) !important; outline-offset:-1px }

/* Entry reveal animation */
.reveal{ opacity:0; transform: translateY(12px); transition: opacity var(--dur-3) var(--ease-std), transform var(--dur-3) var(--ease-std) }
.reveal.in, .reveal.is-in{ opacity:1; transform: none }

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.site-footer{ padding-bottom: env(safe-area-inset-bottom, 0px) }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{ width:36px; height:36px; border-radius:50%; object-fit:cover; display:block }
.logo-placeholder{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#f8fafc,#eef2f7);
}
.brand-meta{line-height:1}
.brand-name{font-weight:700; letter-spacing:.2px}
.brand-tag{font-size:12px; color:var(--muted)}

.primary-nav{display:flex; gap:24px}
.nav-link{color:#374151}
.nav-link.active{font-weight:600; color:var(--text)}
.nav-link:hover{color:var(--text)}

/* Hero layout */
.hero{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "copy"
    "media"
    "image";
  column-gap:48px; row-gap:28px;
  padding-block:28px 56px;
}
.hero > *{ min-width:0 }
@media (min-width: 1025px){
  .hero{
    grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    grid-template-areas:
      "copy media"
      "image media";
  }
}
.card{
  border:none;
  border-radius:0;
  padding:34px 28px;
  background:transparent;
}
.hero-copy{ grid-area:copy; }
.hero-title{
  margin:0 0 16px; font-size:42px; line-height:1.05; font-weight:800;
}
.br-md{display:none}
.hero-intro{color:var(--muted); font-size:16px; line-height:1.6; margin:0 0 18px}
.cta-row{display:flex; gap:12px; margin:6px 0 12px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:8px; font-weight:600; font-size:14px; border:1px solid transparent}
.btn{ min-height:44px }
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{filter:brightness(0.95)}
.btn-ghost{background:#fff; color:var(--text); border-color:transparent}
.btn-ghost:hover{background:#f3f4f6}

.hero-badges{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:8px 0 0}
.badge{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#374151; padding:8px 10px; border:none; border-radius:9999px; background:#f3f4f6}
.badge-icon{font-size:14px}

/* Home hero badges – subtle hover and 3D tilt polish (scoped) */
.hero-badges .badge{
  background:linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  will-change:transform, box-shadow;
  transform:translateZ(0);
  transition:transform .22s ease, box-shadow .22s ease, background .30s ease;
}
.hero-badges .badge:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 22px rgba(0,0,0,.15);
}
.hero-badges .badge:active{ transform:translateY(-1px) }
.hero-badges .badge .badge-icon{ transition:transform .25s ease }
.hero-badges .badge:hover .badge-icon{ transform:translateZ(8px) scale(1.12) rotate(8deg) }

.hero-media{ grid-area:media; align-self:start; }
.media-card{
  width:100%; aspect-ratio:16/9; height:auto; max-height:420px;
  border:1px solid var(--border); border-radius:8px; background:#000;
  box-shadow: 0 8px 28px rgba(0,0,0,.07);
}

.hero-image{ grid-area:image; margin:0; width:min(580px,100%); justify-self:start; align-self:start }
.hero-image img{
  width:100%; height:auto;
  border-radius:8px; border:1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
}

/* Placeholder sections */
.placeholder{padding-block:60px; border-top:1px solid var(--border)}
.placeholder h2{margin:0 0 8px}
.placeholder p{color:var(--muted)}

/* Second section (alternate background) */
.section-alt{ background:var(--section); padding-block:60px; }
.section-alt .section-title{ margin:0 0 6px; font-size:28px; font-weight:700; }
.section-alt .section-intro{ color:var(--muted); margin:0 0 20px; max-width:800px; }
.solutions-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch; }
.solutions-grid > *{ min-width:0 }
.solutions-figure{ margin:0; display:flex; flex-direction:column; gap:12px; height:100%; }
.solutions-figure img{ display:block; width:100%; height:clamp(220px, 30vw, 420px); aspect-ratio:auto; border-radius:12px; object-fit:cover; object-position:center; box-shadow:0 10px 30px rgba(0,0,0,.08); }

/* Captions under images (open, no boxes) */
.section-alt .solutions-caption{ margin-top:auto; margin-bottom:0; height: clamp(130px, 15vw, 190px); display:flex; flex-direction:column; justify-content:flex-start; }
.section-alt .solutions-figure.reveal{ opacity:1 !important; transform:none !important; }
.section-alt .caption-tag{ display:block; font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.1px; margin-bottom:6px; }
.section-alt .caption-title{ margin:0 0 8px; font-weight:800; font-size:22px; line-height:1.3; color:var(--text); }
.section-alt .caption-text{ margin:0; color:var(--muted); line-height:1.7; max-width:680px; }

/* FAQ section */
.section-faq{ padding-block:72px; background:#fff }
.faq-title{ text-align:center; margin:0 0 8px; font-size:34px; font-weight:800 }
.faq-intro{ text-align:center; color:#6b7280; max-width:800px; margin:0 auto 34px; line-height:1.7 }
.faq-list{ display:flex; flex-direction:column; gap:30px; max-width:900px; margin:0 auto; }
.faq-item{ padding:10px 0 26px; border-bottom:1px solid var(--border) }
.faq-item:last-child{ border-bottom:none }
.faq-q{ margin:0 0 10px; font-size:22px; font-weight:700; letter-spacing:.1px }
.faq-a{ margin:0; color:#4b5563; line-height:1.8 }
.faq-cta{ display:flex; justify-content:center; margin-top:34px }
.btn-pill{ background:#111827; color:#fff; border:1px solid #0f172a; padding:10px 18px; border-radius:9999px; font-weight:700; letter-spacing:.6px; display:inline-flex; align-items:center; gap:8px }
.btn-pill::after{ content:"→"; font-weight:800 }
.btn-pill:hover{ filter:brightness(.92) }

/* Hide any CTA accidentally present in the second section */
.section-alt .services-cta{ display:none }

/* Footer */
.site-footer{ margin-top:20px; color:#111827; background:#fbfaf7 }
.footer-top{ display:flex; align-items:flex-start; gap:60px; padding:36px 0; border-top:1px solid #e9e9ee; }
.brand-footer{ display:flex; align-items:center; gap:12px; color:inherit }
.brand-footer .logo{ width:40px; height:40px }
.footer-columns{ display:grid; grid-template-columns:repeat(2, minmax(220px, 1fr)); gap:60px; flex:1 }
.footer-heading{ font-weight:700; margin:0 0 10px }
.footer-address{ font-style:normal; color:#4b5563; margin:0 0 14px; line-height:1.7 }
.footer-subhead{ color:#111827; font-weight:700; margin:6px 0 6px }
.footer-link{ color:#4b5563 }
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.footer-links a{ color:#4b5563 }
.footer-bottom{ background:#0b0b0b; color:#fff; padding:8px 0; margin-top:10px; font-size:12px; text-align:center }

/* Services section (grey panels) */
.section-services{ background:var(--section-2); padding-block:70px; position:relative; overflow:hidden; perspective:1000px }
.section-services .eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:var(--muted); text-align:center; margin:0 0 6px; }
.section-services .section-title{ text-align:center; margin:0 0 32px; font-size:30px; font-weight:700; }

.services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.service-card{ position:relative; background:var(--panel); color:var(--panel-text); border-radius:14px; padding:22px; box-shadow:0 16px 32px rgba(0,0,0,.15); 
  /* interactive hover variables */
  --tx: 0px; --ty: 0px; --tiltX: 0deg; --tiltY: 0deg;
  transform: translateZ(0) scale(1); transform-style:preserve-3d; will-change: transform;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
/* soft colored glow under the card */
.service-card::after{
  content:""; position:absolute; inset:-12px; border-radius:inherit; pointer-events:none; z-index:0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--panel) 55%, transparent) 0%, transparent 60%);
  filter: blur(18px);
  opacity:0; transform: translate(var(--tx), var(--ty)) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
.service-card:hover{ transform: translate(var(--tx), var(--ty)) rotateX(var(--tiltY)) rotateY(var(--tiltX)) scale(1.035); box-shadow:0 22px 44px rgba(0,0,0,.22), 0 0 36px 4px color-mix(in srgb, var(--panel) 48%, transparent) }
.service-card:hover::after{ opacity:.6; transform: translate(var(--tx), var(--ty)) scale(1.02) }
.service-card:active{ transform: translate(calc(var(--tx) * .6), calc(var(--ty) * .6)) rotateX(calc(var(--tiltY) * .6)) rotateY(calc(var(--tiltX) * .6)) scale(1.02) }

@media (prefers-reduced-motion: reduce){
  .service-card{ transition:none }
  .service-card::after{ display:none }
  .service-card:hover, .service-card:active{ transform:none; box-shadow:0 16px 32px rgba(0,0,0,.15) }
}

@media (hover: none) and (pointer: coarse){
  .service-card:hover, .service-card:active{ transform:none }
}
.service-icon{ width:30px; height:30px; color:#fff; margin-bottom:12px; display:block }
.service-title{ margin:0 0 8px; font-weight:700; font-size:18px; color:#fff }
.service-desc{ margin:0; color:rgba(255,255,255,.92); line-height:1.6 }

/* Services CTA */
.services-cta{ display:flex; justify-content:center; margin-top:34px; }
.btn-cta{ padding:14px 22px; border-radius:10px; font-weight:700; box-shadow:0 10px 24px rgba(0,0,0,.15); transform:translateY(0); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease }
.btn-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.18); filter:brightness(0.97) }

/* decorative circles */
.section-services::before,
.section-services::after{
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.06), rgba(0,0,0,0));
  z-index:0; pointer-events:none;
}
.section-services::before{ left:45%; top:38%; transform:translate(-50%,-50%); }
.section-services::after{ right:-60px; bottom:-80px; }

/* ensure cards are above decorations */
.service-card{ position:relative; z-index:1 }

/* Partners section */
.section-partners{ background:#eeeff1; padding-block:72px; isolation:isolate; }
.partners-inner{ display:grid; grid-template-columns:1fr; gap:32px; align-items:start; }
.partners-copy{ max-width:640px; }
.partners-intro{ color:#4b5563; margin:8px 0 0; max-width:640px; }
.partners-logos{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:48px 72px; align-items:center; }
.partners-logos li{ display:flex; justify-content:center; align-items:center; height:140px; perspective:700px; }
.partners-logos img{ max-height:110px; max-width:280px; width:auto; height:auto; object-fit:contain; transition:transform .18s ease; will-change:transform; transform:translateZ(0) }
.partners-logos img:hover{ transform:translateY(-1px) }
@media (prefers-reduced-motion: reduce){
  .partners-logos img{ transition:none }
}

/* Make specific white-box logos blend into the section background and size up */
.partners-logos img[alt="Reinvent VC"],
.partners-logos img[alt="Untitled Entertainment"]{
  mix-blend-mode:multiply; /* whites disappear against light bg */
  filter:brightness(1.03) contrast(1.06);
}
.partners-logos img[alt="Reinvent VC"]{ max-height:130px; max-width:320px; }
.partners-logos img[alt="Untitled Entertainment"]{ max-height:124px; max-width:300px; }

@media (max-width: 1024px){
  .partners-logos{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 640px){
  .partners-logos{ grid-template-columns:repeat(2,1fr); gap:24px }
}
/* Responsive */
@media (max-width: 1024px){
  .br-md{display:inline}
  .hero{ grid-template-columns:1fr; grid-template-areas:"copy" "media" "image"; }
  /* ensure grid children don't create intrinsic overflow */
  .hero > *{ min-width:0; max-width:100% }
  /* Home hero wrap guards at tablet/phone widths */
  #home .hero-title, #home .hero-intro{ overflow-wrap:anywhere; hyphens:auto }
  /* Fix hero media and images to be truly responsive */
  .hero-media{ width:100% }
  .hero-image{ width:100%; max-width:100% }
  .hero-image img{ max-width:100%; height:auto }
  .media-card{ max-height:420px }
  .solutions-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* Home: short viewport protection on laptops (avoid hero clipping) */
@media (max-height: 820px) and (min-width: 1024px) and (max-width: 1600px){
  .hero{ padding-block:20px 40px; row-gap:20px }
  .media-card{ max-height: clamp(320px, 40vh, 420px) }
}
@media (max-width: 640px){
  /* Prevent horizontal scroll */
  .container{ width:100%; max-width:var(--container); padding-inline:16px; margin-inline:auto }
  
  /* Ensure hero media fits on mobile */
  .hero-media{ width:100%; max-width:100% }
  .media-card{ width:100%; max-width:100% }
  .hero-image{ width:100%; max-width:100% }
  .hero-image img{ width:100%; max-width:100%; height:auto }
  
  /* Header - Better mobile navigation */
  .header-inner{ height:auto; padding:12px 0; gap:16px }
  .primary-nav{ gap:16px; font-size:15px; flex-wrap:wrap }
  .nav-link{ padding:8px 4px; min-height:44px; display:flex; align-items:center }
  .brand{ gap:10px }
  .logo{ width:32px; height:32px }
  .brand-name{ font-size:15px }
  .brand-tag{ font-size:11px }
  
  /* Hero - Better readability */
  .hero{ padding-block:24px 48px; row-gap:20px }
  .hero-title{ font-size:clamp(28px, 8vw, 38px); margin:0 0 14px }
  .hero-intro{ font-size:15px; line-height:1.65; margin:0 0 16px }
  .hero-copy{ padding:20px 16px }
  
  /* Buttons - Touch-friendly (44px min) */
  .btn{ padding:12px 20px; font-size:15px; min-height:44px }
  .cta-row{ flex-direction:column; gap:10px; margin:10px 0 16px }
  .cta-row .btn{ width:100% }
  
  /* Badges - Better spacing and wrapping */
  .hero-badges{ flex-wrap:wrap; gap:10px; margin-top:20px }
  .badge{ padding:8px 14px; font-size:13px; white-space:normal; flex-wrap:wrap; max-width:100%; overflow-wrap:anywhere }
  .badge-icon{ font-size:16px }
  
  /* Services grid */
  .services-grid{ grid-template-columns:1fr; gap:20px }
  
  /* Solutions grid */
  .solutions-grid{ gap:20px }
  .solution-item{ padding:24px 20px }
  .solution-item h3{ font-size:19px }
  .solution-item p{ font-size:14px; line-height:1.6 }
  
  /* Footer - Better mobile layout */
  .footer-top{ padding:40px 0 32px; gap:32px }
  .footer-columns{ gap:32px }
  .footer-heading{ font-size:16px; margin-bottom:14px }
  .footer-links{ gap:10px }
  .footer-links li a{ padding:6px 0; min-height:44px; display:inline-block }
  .footer-bottom{ padding:20px 0 }
  
  /* CTA sections */
  .section-cta-image{ padding-block:48px }
  .cta-card{ min-height:400px }
  .cta-overlay{ padding:32px 24px; align-items:center; justify-content:center; text-align:center }
  .cta-title{ font-size:clamp(32px, 9vw, 48px); margin:0 0 14px }
  .btn-on-dark{ padding:14px 24px; font-size:16px; width:100%; max-width:280px }
}

/* ==========================
   About page styles
   ========================== */
/* Section 1: AI innovation for every industry */
.page-about .about-hero{ position:relative; background:#e9eaec; padding-block:140px 220px; overflow:hidden; isolation:isolate }
.page-about .about-hero::before,
.page-about .about-hero::after{
  content:""; position:absolute; top:0; bottom:0; width:2px; opacity:.45;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.25) 0 8px, rgba(0,0,0,0) 8px 18px);
}
.page-about .about-hero::before{ left:5%; }
.page-about .about-hero::after{ right:5%; }
.page-about .about-hero .hero-inner{ position:relative; z-index:2; text-align:center }
.page-about .about-hero .cta-row{ justify-content:center; align-items:center }
.page-about .display-title{ margin:0 0 14px; font-size:clamp(46px, 7.5vw, 82px); line-height:1.05; font-weight:800; max-width:20ch; margin-left:auto; margin-right:auto }
.page-about .lead{ color:#4b5563; max-width:620px; margin:0 auto 18px; line-height:1.75 }
.btn-neutral{ background:#e5e7eb; color:#111827; border:1px solid #d1d5db; border-radius:8px; padding:10px 16px; font-weight:700 }
.btn-neutral:hover{ filter:brightness(.97) }

/* floating images */
.page-about .float-img{ position:absolute; z-index:0; pointer-events:none; 
  /* base composed transform via vars so layout-specific and hover effects combine safely */
  --tx: 0px; --ty: 0px; --rot: 0deg;
  transform: translateX(var(--tx)) translateY(var(--ty)) rotate(var(--rot)) scale(var(--sc, 1));
  transition: transform var(--dur-3) cubic-bezier(.2,.7,.2,1), box-shadow var(--dur-3) var(--ease-std);
  will-change: transform;
}
.page-about .float-img img{ width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 14px 36px rgba(0,0,0,.18);
  transition: transform var(--dur-3) cubic-bezier(.2,.7,.2,1), filter var(--dur-3) var(--ease-std);
  will-change: transform;
  object-fit:cover;
}
/* positioning tuned with clamp() to avoid encroaching into the central copy at laptop widths */
.page-about .float-1{ left:clamp(2%, 5.2vw, 6%); top:clamp(12px, 3.5vw, 36px); width:clamp(220px, 24vw, 320px); }
.page-about .float-2{ left:clamp(3%, 6vw, 8%); bottom:clamp(60px, 8vw, 120px); width:clamp(220px, 26vw, 320px); }
.page-about .float-3{ right:clamp(4%, 6.5vw, 10%); bottom:clamp(-10px, 2vw, 20px); width:clamp(320px, 24vw, 520px); }
/* aspect ratios to ensure zero CLS for decorative images */
.page-about .float-1 img{ aspect-ratio:4/5 }
.page-about .float-2 img{ aspect-ratio:4/3 }
.page-about .float-3 img{ aspect-ratio:16/10 }
/* subtle cursor shine overlay (enabled via JS-added .has-pointer) */
.page-about .float-img::after{
  content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none; opacity:var(--sh, 0);
  transition: opacity var(--dur-2) var(--ease-std);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.12), rgba(255,255,255,0) 60%);
  mix-blend-mode:soft-light;
}
.page-about .about-hero.has-pointer .float-img::after{ opacity:var(--sh, 0) }

/* mid-range laptops: push cards outward slightly to protect text column */
@media (min-width: 1024px) and (max-width: 1440px){
  .page-about .float-1, .page-about .float-2{ --tx: clamp(-60px, -6vw, -80px) }
  .page-about .float-3{ --tx: clamp(60px, 6vw, 90px) }
  .page-about .float-3{ width:clamp(300px, 22vw, 480px) }
}
/* tablets 768–1024px: modest push-out and size caps */
@media (min-width: 768px) and (max-width: 1024px){
  .page-about .float-1, .page-about .float-2{ --tx: clamp(-40px, -5vw, -60px); width:clamp(200px, 26vw, 280px) }
  .page-about .float-3{ --tx: clamp(40px, 5vw, 60px); width:clamp(260px, 30vw, 380px) }
}
/* short-height guards: slightly smaller cards and tighter offsets so the full text stays visible */
@media (max-height: 740px) and (min-width: 1024px){
  .page-about .about-hero{ padding-block:120px 160px }
  .page-about .float-1, .page-about .float-2{ width:clamp(200px, 22vw, 280px) }
  .page-about .float-3{ width:clamp(280px, 22vw, 440px); bottom:clamp(-10px, 1vw, 10px) }
}
/* ultrawide (≥2560px): container caps + optical scaling/offsets */
@media (min-width: 2560px){
  /* inner width cap for hero only; leaves ≤1920 unaffected */
  .page-about .about-hero{ --container: clamp(1320px, 52vw, 1440px) }
  .page-about .lead{ max-width: clamp(60ch, 68ch, 75ch) }

  /* left cluster: slightly smaller + pushed outward */
  .page-about .float-1{ left:6%; width:clamp(280px, 16vw, 380px); --sc:.92; --tx: clamp(-120px, -7vw, -160px) }
  .page-about .float-2{ left:7%; width:clamp(280px, 17vw, 360px); --sc:.94; --tx: clamp(-100px, -6vw, -140px) }

  /* right image: nudge outward/down a touch for balance */
  .page-about .float-3{ right:6%; width:clamp(340px, 19vw, 520px); --sc:.96; --tx: clamp(120px, 7vw, 180px); bottom: clamp(0px, 2vw, 40px) }
}
/* calmer hover on ultrawide */
@media (min-width: 2560px) and (hover: hover) and (pointer: fine){
  .page-about .about-hero:hover .float-1{ --ty:-4px; --rot:-1.0deg }
  .page-about .about-hero:hover .float-2{ --ty:-4px; --rot:-0.8deg }
  .page-about .about-hero:hover .float-3{ --ty:-4px; --rot: 0.9deg }
}

/* very-wide aspect (≥21/9) while keeping ≤1920px unchanged */
@media (min-aspect-ratio: 21/9) and (min-width: 1921px){
  .page-about .about-hero{ --container: clamp(1320px, 54vw, 1440px) }
  .page-about .lead{ max-width: clamp(60ch, 68ch, 75ch) }
  .page-about .float-1{ left:6%; width:clamp(270px, 15vw, 360px); --sc:.92; --tx: clamp(-100px, -6vw, -150px) }
  .page-about .float-2{ left:7%; width:clamp(270px, 16vw, 340px); --sc:.94; --tx: clamp(-90px, -5vw, -130px) }
  .page-about .float-3{ right:6%; width:clamp(320px, 18vw, 500px); --sc:.96; --tx: clamp(110px, 6vw, 170px); bottom: clamp(0px, 2vw, 40px) }
}
@media (min-aspect-ratio: 21/9) and (min-width: 1921px) and (hover: hover) and (pointer: fine){
  .page-about .about-hero:hover .float-1{ --ty:-4px; --rot:-1.0deg }
  .page-about .about-hero:hover .float-2{ --ty:-4px; --rot:-0.8deg }
  .page-about .about-hero:hover .float-3{ --ty:-4px; --rot: 0.9deg }
}
/* premium but subtle hover: lift + micro-tilt + gentle image scale */
@media (hover:hover) and (pointer:fine){
  .page-about .about-hero:hover .float-1{ --ty:-6px; --rot:-1.6deg }
  .page-about .about-hero:hover .float-2{ --ty:-5px; --rot:-1.2deg }
  .page-about .about-hero:hover .float-3{ --ty:-6px; --rot: 1.4deg }
  .page-about .about-hero:hover .float-img img{ transform:scale(1.02) }
}
/* override: calmer hover on ultrawide (placed after general hover) */
@media (min-width: 2560px) and (hover: hover) and (pointer: fine){
  .page-about .about-hero:hover .float-1{ --ty:-4px; --rot:-1.0deg }
  .page-about .about-hero:hover .float-2{ --ty:-4px; --rot:-0.8deg }
  .page-about .about-hero:hover .float-3{ --ty:-4px; --rot: 0.9deg }
}
@media (min-aspect-ratio: 21/9) and (min-width: 1921px) and (hover: hover) and (pointer: fine){
  .page-about .about-hero:hover .float-1{ --ty:-4px; --rot:-1.0deg }
  .page-about .about-hero:hover .float-2{ --ty:-4px; --rot:-0.8deg }
  .page-about .about-hero:hover .float-3{ --ty:-4px; --rot: 0.9deg }
}
/* Focus mirrors hover when images are links/focusable */
.page-about .float-img:focus-within{ --ty:-6px }
.page-about .float-img:focus-within img{ transform:scale(1.02) }

/* Reduced motion: disable tilt/translate/shine (keep minimal shadow) */
@media (prefers-reduced-motion: reduce){
  .page-about .about-hero:hover .float-img{ transform:none !important }
  .page-about .about-hero:hover .float-img img{ transform:none !important }
  .page-about .about-hero.has-pointer .float-img::after{ opacity:0 !important }
}

/* About hero: portrait tablets (820×1180, 834×1194, 1024×1366) */
@media (orientation: portrait) and (width: 820px) and (height: 1180px),
       (orientation: portrait) and (width: 834px) and (height: 1194px),
       (orientation: portrait) and (width: 1024px) and (height: 1366px){
  /* Center the right hero image below the text */
  .page-about .float-3{ left:50%; right:auto; bottom:6%; --tx:-50%; --ty:10% }
  /* Hide top-left image; keep only one left card */
  .page-about .float-1{ display:none }
  /* Pin the remaining left image near bottom-left for balance */
  .page-about .float-2{ left:6%; bottom:8%; --tx:0; --ty:6% }
}

/* Robust catch-all for tablet portrait range (handles minor UI/DPI offsets) */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1060px) and (min-height: 1000px) and (max-height: 1400px){
  .page-about .float-3{ left:50%; right:auto; bottom:6%; --tx:-50% }
  .page-about .about-hero:hover .float-3{ --tx:-50% }
}

/* 820×1180 portrait: lower left float */
@media (orientation: portrait) and (width: 820px) and (height: 1180px){
  .page-about .about-hero .float-2{ bottom:-2% !important; --ty:30% }
  .page-about .about-hero:hover .float-2{ --ty:30% }
}

/* 834×1194 portrait: lower left float */
@media (orientation: portrait) and (width: 834px) and (height: 1194px){
  .page-about .about-hero .float-2{ bottom:-2% !important; --ty:30% }
  .page-about .about-hero:hover .float-2{ --ty:30% }
}

/* 1024×1366 portrait: lower left float more */
@media (orientation: portrait) and (width: 1024px) and (height: 1366px){
  .page-about .about-hero .float-2{ bottom:-3% !important; --ty:24% }
  /* Ensure hover does not pull it back up */
  .page-about .about-hero:hover .float-2{ --ty:24% }
}

/* Robust range for 1024×1366-class portrait tablets (e.g., DPI/UI bars offsets) */
@media (orientation: portrait) and (min-width: 1000px) and (max-width: 1060px) and (min-height: 1280px) and (max-height: 1400px){
  .page-about .about-hero .float-2{ bottom:-3% !important; --ty:24% }
  .page-about .about-hero:hover .float-2{ --ty:24% }
}

/* Section 2: Shaping the Future with AI */
.section-about-mission{ background:#f3f4f6; padding-block:110px 110px }
.mission-inner{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:start }
.mission-title{ margin:8px 0 0; font-size:clamp(44px, 7vw, 68px); line-height:1.04; font-weight:800; color:#111827; }
.mission-copy{ color:#4b5563; line-height:1.8; }
.mission-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:30px }
.mission-gallery .gallery-item img{ width:100%; height:auto; aspect-ratio: 14 / 10; object-fit: cover; border-radius:14px; box-shadow:0 14px 36px rgba(0,0,0,.14) }

/* Section 3: Collaboration at the Core */
.section-collab{ background:#2f2f2f; color:#fff; padding-block:140px 133px; min-height:80vh }
.collab-inner{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center }
.brand-mini{ display:flex; align-items:center; gap:8px; margin-bottom:10px; color:#fff }
.brand-mini img{ width:22px; height:22px; border-radius:50%; object-fit:cover }
.collab-title{ margin:0 0 12px; font-size:clamp(42px, 7vw, 72px); line-height:1.02; font-weight:800; color:#fff }
.collab-desc{ margin:0 0 14px; color:#e5e7eb; line-height:1.9; max-width:680px }
.collab-footnote{ margin:18px 0; color:#cbd5e1 }
.btn-light-pill{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:9999px; background:#f1f5f9; color:#111827; font-weight:700; border:1px solid #d1d5db }
.btn-light-pill:hover{ filter:brightness(.98) }
.collab-figure img{ width:100%; height:auto; aspect-ratio: 32 / 25; object-fit: cover; object-position: center 40%; border-radius:16px; box-shadow:0 20px 48px rgba(0,0,0,.3) }

/* Responsive: About */
@media (max-width: 1024px){
  .page-about .about-hero{ padding-block:100px 140px }
  .section-about-mission{ padding-block:90px 90px }
  .section-collab{ padding-block:120px; min-height:auto }
  .mission-inner{ grid-template-columns:1fr }
  .collab-inner{ grid-template-columns:1fr }
}
@media (max-width: 768px){
  /* Reflow floats below text; no overlap */
  .page-about .float-img{ position:static; display:block; width:clamp(260px, 92vw, 620px); margin:14px auto 0; transform:none }
  .page-about .float-img img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; box-shadow:0 10px 24px rgba(0,0,0,.14) }
}
@media (max-width: 640px){
  .page-about .display-title{ font-size:clamp(32px, 9vw, 42px); line-height:1.1 }
  .page-about .about-hero{ padding-block:60px 80px }
  .page-about .lead{ font-size:15px; line-height:1.7; padding:0 16px }
  .btn-neutral{ width:100%; max-width:280px; min-height:44px; padding:12px 20px; font-size:15px }
  /* Keep About hero CTA centered and not full-width on small screens */
  .page-about .about-hero .cta-row .btn,
  .page-about .about-hero .btn-neutral{ width:auto; max-width:none }
  
  .section-about-mission{ padding-block:60px 70px }
  .mission-title{ font-size:clamp(32px, 8vw, 44px) }
  .mission-copy{ font-size:15px; line-height:1.75 }
  .mission-gallery{ grid-template-columns:1fr; gap:20px; margin-top:24px }
  
  .section-collab{ padding-block:80px; min-height:auto }
  .collab-title{ font-size:clamp(32px, 8vw, 48px) }
  .collab-desc{ font-size:15px; line-height:1.75 }
  .btn-light-pill{ width:100%; max-width:280px; min-height:44px; padding:12px 20px }
}

/* ==========================
   Partners page styles
   ========================== */
.page-partners .container{
  width:100%;
  max-width:var(--container);
  padding-inline:clamp(16px, 4vw, 56px);
  margin-inline:auto;
}
@media (prefers-reduced-motion: reduce){
  .page-partners .reveal{ opacity:1 !important; transform:none !important; transition:none !important }
}
/* Section 1: Partners hero */
.page-partners .partners-hero{ position:relative; background:#0b0f1a url('https://images.unsplash.com/photo-1543269865-cbf427effbad?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat; padding-block:160px 180px }
.page-partners .partners-hero::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45) }
.page-partners .partners-hero .hero-overlay{ position:relative; z-index:1; max-width:820px }
.page-partners .partners-hero .hero-overlay > *{ min-width:0; max-width:100% }
.page-partners .partners-title{ margin:0 0 12px; font-size:clamp(44px, 7vw, 80px); line-height:1.05; font-weight:800; color:#fff }
.page-partners .partners-sub{ margin:0 0 16px; color:#e5e7eb; line-height:1.8; max-width:600px }
.page-partners :is(h1,h2,h3,p,a){ overflow-wrap:anywhere; hyphens:auto }
/* Keep partners hero title on whole words at all sizes */
.page-partners .partners-title{ overflow-wrap:normal; word-break:normal; hyphens:none }
.page-partners .partners-title br{ display:inline }
.page-partners .btn{ white-space:normal; overflow-wrap:anywhere; max-width:100% }
.page-partners .cta-row{ flex-wrap:wrap }

/* Wide-desktop: stabilize hero background crop so it doesn't appear to zoom */
@media (min-width: 1366px){
  /* Lock crop by sizing to hero height; prevents apparent zoom at wider widths */
  .page-partners .partners-hero{ background-position:center 38%; background-size:cover }
}

/* Section 2: Impact */
.partners-impact{ background:#e5e6ea; padding-block:120px 140px }
.impact-inner{ display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:center }
.impact-inner > *{ min-width:0; max-width:100% }
.impact-icon{ width:42px; height:42px; border-radius:12px; background:#efeff2; border:1px solid #d1d5db; display:flex; align-items:center; justify-content:center; margin-bottom:10px }
.impact-icon img{ width:22px; height:22px; border-radius:50% }
.impact-title{ margin:0 0 10px; font-size:clamp(34px, 5.2vw, 54px); font-weight:800; color:#111827; line-height:1.08 }
.impact-desc{ margin:0; color:#4b5563; line-height:1.9; max-width:640px }
.impact-figure{ margin:0; background:#fff; padding:20px; border-radius:22px; box-shadow:0 14px 36px rgba(0,0,0,.14) }
.impact-figure img{ display:block; width:100%; height:auto; border-radius:12px; aspect-ratio: 16 / 10; object-fit:cover }

/* Section 3: Logos grid */
.partners-logos-section{ background:#ffffff; padding-block:80px }
.logo-grid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px 22px; justify-items:center }
.logo-grid > *{ min-width:0; max-width:100% }
.logo-card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:22px; display:flex; align-items:center; justify-content:center; height:130px; box-shadow:0 2px 6px rgba(0,0,0,.04) }
.logo-card img{ max-width:220px; max-height:72px; width:auto; height:auto; object-fit:contain }

/* Scale up select marks for parity */
.page-partners .logo-card img[alt="Air Jordan"],
.page-partners .logo-card img[alt="Goldman Sachs"],
.page-partners .logo-card img[alt="Reinvent VC"],
.page-partners .logo-card img[alt="WPP"],
.page-partners .logo-card img[alt="Mitsubishi"],
.page-partners .logo-card img[alt="General Electric"],
.page-partners .logo-card img[alt="Boeing"],
.page-partners .logo-card img[alt="Samsung"],
.page-partners .logo-card img[alt="Untitled Entertainment"],
.page-partners .logo-card img[alt="Mount Sinai"],
.page-partners .logo-card img[alt^="Ichilov"]{
  max-height:88px; max-width:260px;
}

/* Blend white-box logos */
.page-partners .logo-card img[alt="Untitled Entertainment"],
.page-partners .logo-card img[alt="Reinvent VC"]{ mix-blend-mode:multiply; filter:brightness(1.03) contrast(1.06) }

/* Section 4: Final CTA */
.partners-final-cta{ background:#e9eaec; padding-block:90px }
.final-inner{ display:flex; flex-direction:column; gap:26px }
.final-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px }
.final-inner > *, .final-head > *{ min-width:0; max-width:100% }
.final-title{ margin:0; font-size:clamp(34px, 5.6vw, 58px); font-weight:800; color:#111827; line-height:1.06 }
.final-actions{ display:flex; gap:12px; flex-wrap:wrap }
.btn-dark-pill{ background:#111827; color:#fff; border:1px solid #0f172a; padding:12px 18px; border-radius:9999px; font-weight:800 }
.btn-dark-pill:hover{ filter:brightness(.92) }
.btn-ghost-outline{ background:transparent; color:#111827; border:1px solid #cbd5e1; padding:12px 18px; border-radius:9999px; font-weight:700 }
.btn-ghost-outline:hover{ background:#f8fafc }
.final-figure{ margin:0 }
.final-figure img{ display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.1); aspect-ratio: 16 / 9; object-fit:cover }
.page-partners .btn:focus-visible{ outline:0; box-shadow:0 0 0 3px #fff, 0 0 0 5px #111827 }
.page-partners .site-footer .footer-links a{ display:inline-flex; align-items:center; min-height:44px }

/* Responsive: Partners */
@media (max-width: 1024px){
  .impact-inner{ grid-template-columns:1fr }
  body.page-partners{ overflow-x:hidden }
  html:has(body.page-partners){ overflow-x:hidden }
  .page-partners .partners-hero .hero-overlay > *{ min-width:0; max-width:100% }
  .page-partners .logo-card img{ max-width:min(220px, 100%); max-height:72px; height:auto }
}
@media (max-width: 834px){
  .final-head{ flex-direction:column; align-items:flex-start; gap:16px }
  .logo-grid{ grid-template-columns:repeat(2, 1fr); gap:24px }
  .page-partners .logo-card img[alt="Air Jordan"],
  .page-partners .logo-card img[alt="Goldman Sachs"],
  .page-partners .logo-card img[alt="Reinvent VC"],
  .page-partners .logo-card img[alt="WPP"],
  .page-partners .logo-card img[alt="Mitsubishi"],
  .page-partners .logo-card img[alt="General Electric"],
  .page-partners .logo-card img[alt="Boeing"],
  .page-partners .logo-card img[alt="Samsung"],
  .page-partners .logo-card img[alt="Untitled Entertainment"],
  .page-partners .logo-card img[alt^="Ichilov"]{
    max-width:min(200px, 100%); max-height:64px;
  }
}
@media (max-width: 640px){
  .page-partners .partners-hero{ padding-block:80px 100px }
  .page-partners .partners-title{ font-size:clamp(32px, 9vw, 48px) }
  .page-partners .partners-sub{ font-size:15px; line-height:1.75 }
  
  .logo-grid{ grid-template-columns:repeat(2, 1fr); gap:32px }
  .logo-grid li{ height:100px }
  .partners-logos li{ height:100px }
  .partners-logos img{ max-height:80px; max-width:200px }
  
  .impact-title{ font-size:clamp(28px, 7vw, 38px) }
  .impact-copy{ font-size:15px; line-height:1.75 }
  .stats-grid{ gap:24px }
  .stat-item{ padding:20px }
  .stat-value{ font-size:clamp(32px, 8vw, 42px) }
  .stat-label{ font-size:14px }
  
  .final-head{ flex-direction:column; align-items:flex-start; gap:16px }
  .final-title{ font-size:clamp(28px, 7vw, 38px) }
  .btn-dark-pill{ width:100%; max-width:280px; min-height:44px; padding:12px 20px }
}

/* ==========================
   Services page styles
   ========================== */
/* Section 1: Hero display */
.page-services .services-hero{ position:relative; background:#dcdedd; padding-block:120px 160px; overflow:hidden }
.page-services .services-hero::before,
.page-services .services-hero::after{ content:none; display:none }
.page-services .services-hero::after{ display:none }
.page-services .services-display{ margin:0 0 26px; font-size:clamp(46px, 10vw, 120px); line-height:1.05; letter-spacing:2px; text-align:center; font-weight:800; color:#2b2b2b }
.page-services .services-hero-thumbs{ list-style:none; padding:0; margin:0 auto; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; max-width:900px }
.page-services .services-hero-thumbs img{ width:160px; height:100px; object-fit:cover; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.12) }

/* Section 2: Panels grid */
.services-panels{ position:relative; background:#e9e8e3; padding-block:96px 120px }
.services-panels::before,
.services-panels::after{ content:none; display:none }
.services-h2{ text-align:center; margin:0 0 30px; font-weight:800; font-size:clamp(22px, 4vw, 34px) }
.panels-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px 32px; align-items:stretch }
.service-panel{ background:#f3f2ee; border:1px solid #dedbd6; border-radius:22px; padding:18px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 8px 26px rgba(0,0,0,.08); min-height:480px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease }
.service-panel.solo{ grid-column:1 / -1; max-width:520px; margin:0 auto }
.service-panel .panel-body h3{ margin:2px 0 8px; font-weight:800; font-size:clamp(20px, 2.4vw, 26px) }
.service-panel .panel-body p{ margin:0 0 14px; color:#4b5563; line-height:1.8; font-size:clamp(14px, 1.5vw, 18px) }
.panel-figure{ margin:0; border-radius:12px; overflow:hidden; height:260px }
.panel-figure img{ width:100%; height:100%; object-fit:cover; object-position:50% 32%; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); transition: transform .25s ease, filter .25s ease, object-position .2s ease }
.service-panel:hover, .service-panel:focus-within{ transform: translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.14); border-color:#d0cec8; background:#f6f5f1 }
.service-panel:hover .panel-figure img{ transform:scale(1.012) }

/* Fine-tune crop for specific panels: Health, Military, Marketing, Cybersecurity */
.page-services .panel-figure img[alt="Doctor using laptop"],
.page-services .panel-figure img[alt="Military operations"],
.page-services .panel-figure img[alt="Business meeting with analytics"],
.page-services .panel-figure img[alt="Cybersecurity dashboard"]{
  object-position:50% 12%;
}
/* Extra headroom for Health only */
.page-services .panel-figure img[alt="Doctor using laptop"]{ object-position:50% 2%; }
.panel-actions{ display:flex; justify-content:center; margin-top:12px }
.btn-chip{ background:#fff; color:#111827; border:1px solid #cbd5e1; padding:12px 22px; border-radius:12px; font-weight:800; font-size:15px; min-width:150px; height:44px; display:inline-flex; align-items:center; justify-content:center; letter-spacing:.2px; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease }
.btn-chip.dark{ background:#2b2b2b; color:#fff; border-color:#1f2937 }
.btn-chip:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.12); border-color:#b9c2cf }
.btn-chip.dark:hover{ background:#1f2937; box-shadow:0 10px 22px rgba(0,0,0,.22) }
.btn-chip:active{ transform:translateY(0); box-shadow:0 3px 10px rgba(0,0,0,.10) }
.btn-chip:focus-visible{ outline:0; box-shadow:0 0 0 3px #fff, 0 0 0 5px #111827 }

/* Ensure Services page content is always visible */
.page-services .reveal{ opacity:1 !important; transform:none !important }

/* Section 3: Results CTA */
.services-results{ background:#faf9f6; padding-block:90px }
.results-inner{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center }
.results-figure img{ width:100%; height:auto; border-radius:16px; box-shadow:0 14px 36px rgba(0,0,0,.12) }
.results-copy h2{ margin:0 0 8px; font-size:clamp(30px, 4.6vw, 54px); font-weight:800 }
.results-copy p{ margin:0 0 14px; color:#4b5563; line-height:1.8 }

/* Responsive: Services */
@media (max-width: 1024px){
  .panels-grid{ grid-template-columns:1fr }
  .results-inner{ grid-template-columns:1fr }
  .service-panel{ min-height:unset }
  .panel-figure{ height:240px }
}
@media (max-width: 640px){
  .page-services .services-hero{ padding-block:80px 100px }
  .page-services .services-hero::before, .page-services .services-hero::after{ display:none }
  .page-services .services-hero-title{ font-size:clamp(32px, 9vw, 48px) }
  .page-services .services-hero-intro{ font-size:15px; line-height:1.75; padding:0 16px }
  .page-services .services-hero-thumbs{ gap:12px; margin-top:32px }
  .page-services .services-hero-thumbs img{ width:44vw; height:28vw; border-radius:8px }
  
  .panels-grid{ gap:24px }
  .service-panel{ padding:24px; min-height:unset }
  .panel-body h3{ font-size:22px }
  .panel-body p{ font-size:14px; line-height:1.7 }
  .panel-figure{ height:200px }
  .btn-chip{ min-height:44px; padding:10px 20px; font-size:14px }
  
  .results-title{ font-size:clamp(28px, 7vw, 38px) }
  .results-copy{ font-size:15px; line-height:1.75 }
}

/* ==========================
   Fitness & Wellness page styles
   ========================== */
/* Section 1: Split hero */
.page-fitness{ font-family:"Montserrat","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif }
.page-fitness .fitness-hero{ position:relative; min-height:70vh; display:grid; grid-template-columns:1fr 1fr }
.page-fitness .fitness-hero .split{ position:relative; background-size:cover; background-position:center; filter:brightness(.95) }
.page-fitness .fitness-hero .split::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4) }
.page-fitness .fitness-hero .hero-center{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; align-items:center; justify-items:stretch; pointer-events:none }
.page-fitness .hero-card{ pointer-events:auto; background:#fff; border:0; border-radius:0; padding:32px 30px 28px 30px; box-shadow:0 12px 28px rgba(0,0,0,.12); width:420px; max-width:calc(100% - 24px); height:480px; grid-column:1; justify-self:end; margin:0; display:grid; grid-template-rows:auto auto auto; row-gap:14px }
.page-fitness .hero-card-title{ margin:0 0 12px; font-weight:800; font-size:42px; line-height:1.18; color:#111827 }
.page-fitness .hero-card-desc{ margin:0; color:#374151; line-height:1.7; font-size:18px; align-self:auto }
.btn-green{ background:#10B981; color:#fff; border:none; padding:12px 22px; border-radius:6px; font-weight:500; font-family:inherit; display:inline-flex; align-items:center; justify-content:center; line-height:1.1; width:160px; height:50px; box-sizing:border-box; font-size:14px; cursor:pointer; transition:background-color .18s ease }
.page-fitness .hero-card .btn-green{ align-self:start; margin-top:14px; margin-bottom:0; width:160px; height:48px; font-size:16px; background:#169A66; border-radius:4px }
.page-fitness .hero-card .btn-green:hover{ background:#128258 }
.btn-green:hover{ background:#059669 }
.btn-green:focus-visible{ outline:2px solid #065f46; outline-offset:2px }

/* Section 2: Centered video */
.page-fitness .fitness-video{ background:#fbf9f7; padding-block:80px }
.page-fitness .video-inner{ text-align:center; max-width:980px }
.page-fitness .video-title{ margin:0 0 8px; font-size:clamp(32px, 6vw, 48px); font-weight:800 }
.page-fitness .video-sub{ margin:0 auto 18px; color:#6b7280; line-height:1.9; max-width:860px; font-size:clamp(19px, 2.6vw, 24px) }
.page-fitness .video-frame{ margin:22px auto 0; width:100%; max-width:900px; aspect-ratio:16/9; border-radius:10px; overflow:hidden; border:1px solid #d1d5db; box-shadow:0 14px 32px rgba(0,0,0,.14) }
.page-fitness .video-frame iframe{ width:100%; height:100%; display:block }

/* Section 3: Stacked gallery + steps */
.page-fitness .fitness-gallery{ background:#ffffff; padding-block:90px }
.page-fitness .gallery-inner{ max-width:1000px }
.page-fitness .gallery-title{ text-align:center; margin:0 0 44px; font-weight:800; font-size:clamp(48px, 7.2vw, 64px) }

  /* Default mobile-first: stacked layout for small screens */
  .page-fitness .stacked-gallery{ display:grid; grid-auto-rows:auto; grid-template-columns:1fr; justify-items:center; height:auto; gap:12px; margin:0 auto 40px; overflow:visible }
  .page-fitness .stacked-gallery .stack-img{ position:relative; width:min(92vw, 620px); margin-inline:auto; aspect-ratio:16/9; transform:none }
  .page-fitness .stacked-gallery .stack-img img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.14) }
  .page-fitness .stacked-gallery .three img{ object-position:center 10% }

/* Larger screens (≥641px): absolute positioning layout */
@media (min-width: 641px){
  .page-fitness .stacked-gallery{ position:relative; display:block; grid-auto-rows:unset; grid-template-columns:unset; justify-items:unset; height:520px; margin:0 auto 110px; gap:0 }
  .page-fitness .stacked-gallery .stack-img{ position:absolute; width:auto; margin:0; aspect-ratio:unset; will-change: transform }
  .page-fitness .stacked-gallery .one{ left:2%; top:6%; width:42%; height:64% }
  .page-fitness .stacked-gallery .two{ right:2%; top:0; width:42%; height:66% }
  .page-fitness .stacked-gallery .three{ left:25%; top:14%; width:50%; height:92%; z-index:2 }
  .page-fitness .stacked-gallery .three img{ object-position:center center }
}

.page-fitness .steps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px 44px; margin-top:88px }
.page-fitness .step-card{ position:relative; background:#fff; border:1px solid #d1d5db; border-radius:8px; padding:22px 18px 16px; box-shadow:0 8px 26px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease }
.page-fitness .step-card:hover{ transform:translateY(-5px); box-shadow:0 18px 46px rgba(0,0,0,.16); border-color:#cfd4da; background-color:#fcfbf8 }
.page-fitness .step-card:hover .step-title{ color:#0f172a }
.page-fitness .step-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; background:#d7d2c7; border-top-left-radius:8px; border-top-right-radius:8px }
.page-fitness .step-card:hover::before{ background:#cfc8b8 }
.page-fitness .step-card.step-wide{ grid-column:1 / -1 }
.page-fitness .step-badge{ position:absolute; left:50%; transform:translateX(-50%); top:-18px; width:36px; height:36px; border-radius:50%; background:#111827; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; z-index:1; transition: transform .2s ease, background-color .2s ease }
.page-fitness .step-card:hover .step-badge{ transform:translateX(-50%) scale(1.05); background:#0f172a }
.page-fitness .step-title{ margin:8px 0 6px; font-weight:800 }
.page-fitness .step-desc{ margin:0; color:#4b5563; line-height:1.8 }
.page-fitness .steps-cta{ grid-column:1/-1; display:flex; justify-content:center; padding-top:18px }
.page-fitness .steps-cta .btn-on-dark{ padding:22px 42px; font-size:21px; border-radius:14px; min-width:240px; display:inline-flex; align-items:center; justify-content:center; line-height:1 }

/* Section 4: Final CTA */
.page-fitness .fitness-results{ background:#f3f5f7; padding-block:120px }
.page-fitness .fitness-results .results-inner{ display:grid; grid-template-columns:1.1fr 1fr; gap:26px; align-items:center }
.page-fitness .fitness-results h2{ margin:0 0 12px; font-size:clamp(42px, 6.2vw, 68px); font-weight:800 }
.page-fitness .fitness-results .results-copy{ max-width:600px }
.page-fitness .fitness-results .results-copy p{ line-height:1.65; margin:10px 0 12px; font-size:clamp(17px, 2.1vw, 19px) }
.page-fitness .fitness-results .results-actions{ margin-top:26px }
.page-fitness .fitness-results .results-actions .btn-ghost-outline{ padding:20px 34px; font-size:19px; border-radius:14px; font-weight:700 }
.page-fitness .fitness-results .results-figure img{ width:100%; height:auto; border-radius:14px; box-shadow:0 14px 36px rgba(0,0,0,.12) }

/* Responsive: Fitness */
@media (max-width: 1024px){
  .page-fitness .fitness-hero{ grid-template-columns:1fr; min-height:60vh }
  .page-fitness .split{ min-height:40vh }
  .page-fitness .fitness-hero .hero-center{ grid-template-columns:1fr; justify-items:center }
  .page-fitness .hero-card{ justify-self:center }
  .page-fitness .stacked-gallery{ height:auto }
  .page-fitness .fitness-results .results-inner{ grid-template-columns:1fr }
}
@media (max-width: 640px){
  .page-fitness .fitness-hero{ min-height:50vh }
  .page-fitness .split{ min-height:25vh }
  .page-fitness .hero-card{ width:auto; height:auto; padding:20px 18px; max-width:calc(100% - 24px); row-gap:12px }
  .page-fitness .hero-card-title{ font-size:clamp(26px, 7.5vw, 34px); line-height:1.15; margin:0 0 10px }
  .page-fitness .hero-card-desc{ font-size:15px; line-height:1.65 }
  .page-fitness .hero-card .btn-green{ width:150px; height:44px; font-size:15px }

  .page-fitness .gallery-title{ font-size:clamp(28px, 7vw, 38px); margin-bottom:28px }
  .page-fitness .steps-grid{ grid-template-columns:1fr; gap:24px }
  .page-fitness .step-item{ padding:24px 20px }
  .page-fitness .step-item h3{ font-size:20px }
  .page-fitness .step-item p{ font-size:14px; line-height:1.7 }
  .page-fitness .fitness-results .results-title{ font-size:clamp(28px, 7vw, 38px) }
  .page-fitness .fitness-results .results-copy{ font-size:15px }
}

  /* Small phones: 360–430 width, 780–915 height — tighten hero card further */
  @media screen and (min-width: 360px) and (max-width: 430px) and (min-height: 780px) and (max-height: 915px){
    .page-fitness .fitness-hero{ min-height:64vh }
    .page-fitness .split{ min-height:32vh }
    .page-fitness .hero-card{ width:auto; height:auto; padding:18px 16px; max-width:calc(100% - 22px); row-gap:10px }
    .page-fitness .hero-card-title{ font-size:clamp(24px, 7.2vw, 30px); line-height:1.12; margin:0 0 8px }
    .page-fitness .hero-card-desc{ font-size:14px; line-height:1.6 }
    .page-fitness .hero-card .btn-green{ width:144px; height:42px; font-size:14px }
  }

  @media (min-width: 1025px){
    .page-fitness .fitness-hero .hero-center{ grid-template-columns:1fr 1fr; top:0; bottom:0; height:auto; justify-items:stretch }
    .page-fitness .hero-card{ justify-self:end }
  }

/* Gentle float animation for stacked gallery cards */
  /* Gentle float animation for stacked gallery cards */
  @keyframes fitnessFloatY {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -6px, 0); }
    100% { transform: translate3d(0, 0, 0); }
  }

  @keyframes fitnessFloatYMobile {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -10px, 0); }
    100% { transform: translate3d(0, 0, 0); }
  }

  /* Small phones: add floating animation */
  @media (max-width: 480px){
    .page-fitness .stacked-gallery .stack-img img{ animation: fitnessFloatYMobile 7s ease-in-out infinite; }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .page-fitness .stacked-gallery .stack-img img{ animation: none !important; }
  }
  /* Fitness: laptops (1366×768, 1536×864) — taller stage and gentle offsets */
  @media (min-width: 1200px) and (max-width: 1600px) and (max-height: 900px){
  .page-fitness .stacked-gallery{ height:clamp(560px, 76vh, 720px); margin-bottom:clamp(60px, 10vh, 120px) }
  .page-fitness .stacked-gallery .one{ left:clamp(1%, 3vw, 4%); top:clamp(4%, 6%, 8%); width:clamp(38%, 42vw, 44%); height:clamp(56%, 60%, 64%); transform:translateY(clamp(0px, 1%, 12px)) }
  .page-fitness .stacked-gallery .two{ right:clamp(1%, 3vw, 4%); top:clamp(2%, 4%, 6%); width:clamp(38%, 42vw, 44%); height:clamp(56%, 60%, 64%); transform:translateY(clamp(0px, 1%, 10px)) }
  .page-fitness .stacked-gallery .three{ left:clamp(22%, 26vw, 28%); top:clamp(12%, 14%, 18%); width:clamp(46%, 50vw, 52%); height:clamp(78%, 84%, 90%) }
}

/* Tall/narrow viewports (e.g., phones, portrait monitors): stack hero safely */
@media (max-aspect-ratio: 3/4){
  .page-fitness .fitness-hero{ grid-template-columns:1fr }
  .page-fitness .fitness-hero .hero-center{ grid-template-columns:1fr; justify-items:center }
  .page-fitness .hero-card{ justify-self:center }
}

/* Ultrawide: constrain inner content to avoid overstretching */
@media (min-aspect-ratio: 21/9) and (min-width: 1400px){
  .page-fitness .gallery-inner,
  .page-fitness .video-inner{ max-width: min(64vw, 1100px) }
}

/* ==========================
   Genetics page styles
   ========================== */
.page-genetics .gen-hero{ background:#f7f8fb; padding-block:clamp(80px, 12vh, 120px) }
.page-genetics .gen-hero-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center }
.page-genetics .gen-hero-copy{ max-width:680px }
.page-genetics .gen-hero-title{ margin:0 0 12px; font-size:clamp(42px, 7vw, 72px); line-height:1.05; font-weight:800; max-width:22ch; overflow-wrap:anywhere }
.page-genetics .gen-hero-text{ margin:0 0 16px; color:#4b5563; line-height:1.8; max-width:60ch }
.page-genetics .btn-gen-dark{ background:#111827; color:#fff; border:1px solid #0f172a; padding:12px 18px; border-radius:10px; font-weight:800 }
.page-genetics .btn-gen-dark:hover{ filter:brightness(.95) }
.page-genetics .gen-hero-art{ margin:0 }
.page-genetics .gen-hero-art{ background:transparent !important; border:0 !important; box-shadow:none }
.page-genetics .gen-hero-art img{ width:100%; height:auto; aspect-ratio:2/3; object-fit:contain; border-radius:14px; background:transparent; box-shadow:none }

.page-genetics .gen-media{ background:#fff; padding-block:clamp(70px, 10vh, 100px) }
.page-genetics .gen-media-grid{ display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center }
.page-genetics .gen-media-left{ margin:0 }
.page-genetics .gen-media-left img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.12) }
.page-genetics .gen-media-right{ margin:0 }
.page-genetics .gen-video-frame{ width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid #d1d5db; box-shadow:0 12px 30px rgba(0,0,0,.12) }
.page-genetics .gen-video-frame iframe{ width:100%; height:100%; display:block }

.page-genetics .gen-features{ background:#f7f9fc; padding-block:clamp(80px, 12vh, 110px) }
.page-genetics .gen-features-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px }
.page-genetics .gen-card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px; box-shadow:0 8px 26px rgba(0,0,0,.08) }
.page-genetics .gen-card-title{ margin:0 0 8px; font-weight:800; font-size:clamp(20px, 3.6vw, 26px); line-height:1.2; overflow-wrap:anywhere }
.page-genetics .gen-card-text{ margin:0; color:#4b5563; line-height:1.8 }
.page-genetics .gen-card-image{ margin:12px 0 0; border-radius:10px; overflow:hidden }
.page-genetics .gen-card-image img{ width:100%; height:auto; object-fit:contain; aspect-ratio:16/10 }

.page-genetics .gen-cta{ background:#eef1f5; padding-block:clamp(80px, 12vh, 110px) }
.page-genetics .gen-cta-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center }
.page-genetics .gen-cta-copy{ max-width:720px }
.page-genetics .gen-cta-figure{ margin:0 }
.page-genetics .gen-cta-figure img{ width:100%; height:auto; object-fit:cover; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.12); aspect-ratio:16/10 }

/* Responsive: Genetics */
@media (max-width: 1024px){
  .page-genetics .gen-hero-grid,
  .page-genetics .gen-media-grid,
  .page-genetics .gen-cta-grid{ grid-template-columns:1fr; gap:28px }
}
@media (max-width: 640px){
  .page-genetics .gen-hero{ padding-block:60px }
  .page-genetics .gen-hero-title{ font-size:clamp(32px, 9vw, 48px); max-width:22ch; text-align:left }
  .page-genetics .gen-hero-text{ font-size:15px; line-height:1.75 }
  .page-genetics .btn-gen-dark{ width:100%; max-width:280px; min-height:44px; padding:12px 20px }
  .page-genetics .gen-features-grid{ grid-template-columns:1fr }
}

/* Tablet portrait specific fixes (768x1024 and similar) */
@media (min-width: 768px) and (max-width: 1024px){
  #home .hero.container{ width:100%; padding-inline: 20px }
  #home .hero-media{ width:100%; max-width:100% }
  #home .media-card{ width:100%; max-width:100%; max-height:400px }
  #home .hero-image{ width:100%; max-width:100% }
  #home .hero-image img{ width:100%; max-width:100%; height:auto }
}

/* Home: 360–430 width and 720–820 height — prevent cut-off and tighten hero */
@media screen and (min-width: 360px) and (max-width: 430px) and (min-height: 720px) and (max-height: 820px){
  #home .hero.container{ padding-block:18px 36px }
  #home .hero{ row-gap:16px }
  #home .hero-title{ font-size:clamp(26px, 7.5vw, 34px); margin:0 0 10px }
  #home .hero-intro{ font-size:14px; line-height:1.65; margin:0 0 14px }
  #home .media-card{ max-height:220px }
}

/* Home: phone wrap guards to avoid sideways scroll on real devices */
@media (max-width: 767px){
  #home .hero.container{ width:100%; padding-inline: 16px }
  #home .hero-title{ overflow-wrap:anywhere; hyphens:auto }
  #home .hero-intro{ overflow-wrap:anywhere }
  /* Additional safety for small phones */
  #home .hero-media{ width:100%; max-width:100% }
  #home .media-card{ width:100%; max-width:100% }
  #home .hero-image{ width:100%; max-width:100% }
  #home .hero-image img{ width:100%; max-width:100%; height:auto }
}

/* Short-height screens: reduce card min-height and padding slightly */
@media (max-height: 700px){
  .page-fitness .hero-card{ min-height: 340px; padding: 20px 20px }
  .page-fitness .fitness-hero{ min-height: 60vh }
}
.page-longevity .longevity-hero{ position:relative; background:#0f1420 url('../assets/images/serviceshub/longevitybackground.jpg') center/cover no-repeat; color:#fff; min-height:100vh; }
.page-longevity .longevity-hero .hero-center{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-height:100vh; padding:10vh 20px 40px; text-align:center }
.page-longevity .longevity-title{ margin:0 0 20px; text-align:center; font-family:"Cormorant Garamond","Inter",serif; font-weight:700; letter-spacing:.06em; font-size:clamp(48px, 8.4vw, 84px); line-height:1.05; color:#2e4a54 }
.page-longevity .longevity-scroll{ display:inline-flex; width:48px; height:48px; border-radius:50%; border:2px solid currentColor; color:#2e4a54; align-items:center; justify-content:center; margin:0 auto; position:relative }
.page-longevity .longevity-scroll::after{ content:""; position:absolute; top:52%; left:50%; transform:translate(-50%,-35%); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:12px solid currentColor }
.page-longevity .longevity-scroll:hover{ filter:brightness(.9) }

.page-longevity .longevity-overview{ background:#f7f9fc; padding-block:90px }
.page-longevity .overview-inner{ max-width:1100px }
.page-longevity .overview-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start }
.page-longevity .overview-left{ display:flex; flex-direction:column; gap:32px; max-width:580px }
.page-longevity .overview-title{ margin:0 0 6px; font-size:clamp(28px, 4.8vw, 42px); font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.08) }
.page-longevity .overview-sub{ margin:0; color:#4b5563; line-height:1.8; max-width:640px; text-shadow:0 1px 2px rgba(0,0,0,.06) }
.page-longevity .overview-left .panel{ margin:0; border-radius:12px; overflow:hidden; box-shadow:0 14px 36px rgba(0,0,0,.14); max-width:480px }
.page-longevity .overview-left .panel img{ display:block; width:100%; height:auto }
.page-longevity .photo{ margin:0; border-radius:12px; overflow:hidden; box-shadow:0 14px 36px rgba(0,0,0,.14); justify-self:center; align-self:center; max-width:580px; width:100% }
.page-longevity .photo img{ display:block; width:100%; height:auto }
.page-longevity .overview-left .panel[data-parallax]{ will-change:auto; transform:none !important }
.page-longevity .photo[data-parallax]{ will-change:auto; transform:none !important }

.page-longevity .longevity-gallery{ background:#fff; padding-block:90px }
.page-longevity .gallery-inner{ max-width:1520px }
.page-longevity .gallery-title{ text-align:center; margin:0 auto 50px; font-weight:800; font-size:clamp(32px, 5.4vw, 46px); line-height:1.3; max-width:820px; color:#111827 }
.page-longevity .gallery-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; justify-items:center }
.page-longevity .gallery-card{ display:flex; flex-direction:column; gap:20px; width:471px; max-width:100% }
.page-longevity .card-image{ margin:0; border-radius:12px; overflow:hidden; box-shadow:0 14px 36px rgba(0,0,0,.14); width:471px; height:600px; max-width:100%; background:#f8f9fa; display:flex; align-items:center; justify-content:center; transition:transform .3s ease, box-shadow .3s ease; cursor:pointer }
.page-longevity .card-image:hover{ transform:translateY(-8px) scale(1.02); box-shadow:0 20px 48px rgba(0,0,0,.22) }
.page-longevity .card-image img{ width:100%; height:100%; object-fit:contain; display:block; transition:opacity .3s ease }
.page-longevity .card-image:hover img{ opacity:.95 }
.page-longevity .card-content{ display:flex; flex-direction:column; gap:10px }
.page-longevity .card-content h3{ margin:0; font-weight:700; font-size:24px; line-height:1.3; color:#111827 }
.page-longevity .card-content p{ margin:0; color:#4b5563; line-height:1.65; font-size:18px }

.page-longevity .longevity-final-cta{ background:#eef1f5; padding-block:90px }
.page-longevity .cta-copy h2{ margin:0 0 12px; font-size:clamp(32px, 5vw, 48px); font-weight:800 }
.page-longevity .cta-copy p{ margin:0 0 8px; color:#4b5563; line-height:1.75 }
.page-longevity .cta-actions{ margin-top:20px }
.page-longevity .cta-inner{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center }
.page-longevity .cta-note{ display:block; color:#6b7280; margin:12px 0 0 }
.page-longevity .cta-figure{ margin:0 }
.page-longevity .cta-figure img{ width:100%; max-height:580px; height:auto; object-fit:cover; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.12) }

@media (max-width: 1024px){
  .page-longevity .longevity-hero .hero-center{ padding:12vh 20px 40px }
  .page-longevity .overview-grid{ grid-template-columns:1fr }
  .page-longevity .photo{ max-width:680px }
  .page-longevity .gallery-cards{ grid-template-columns:1fr }
  .page-longevity .gallery-card{ width:100%; max-width:471px }
  .page-longevity .card-image{ width:100%; height:auto; aspect-ratio:471/600 }
  .page-longevity .cta-inner{ grid-template-columns:1fr }
}

@media (max-width: 640px){
  .page-longevity .longevity-hero .hero-center{ padding:8vh 16px 28px }
  .page-longevity .longevity-title{ font-size:clamp(34px, 9vw, 48px) }
  .page-longevity .longevity-scroll{ width:44px; height:44px }
  
  .page-longevity .overview-intro{ font-size:15px; line-height:1.7; padding:0 12px }
  .page-longevity .photo{ max-width:100%; border-radius:12px }
  
  .page-longevity .gallery-title{ font-size:clamp(28px, 7vw, 38px); margin-bottom:28px }
  .page-longevity .gallery-card{ max-width:100%; padding:20px }
  .page-longevity .card-content{ gap:8px }
  .page-longevity .card-content h3{ font-size:20px }
  .page-longevity .card-content p{ font-size:15px; line-height:1.65 }
  
  .page-longevity .longevity-final-cta{ padding-block:60px }
  .page-longevity .cta-copy h2{ font-size:clamp(28px, 7vw, 38px) }
  .page-longevity .cta-copy p{ font-size:15px }
  .btn-dark-pill{ width:100%; max-width:280px; min-height:44px }
}

/* ===== PSYCH CARE PAGE ===== */
.page-psych{ font-family:"EB Garamond", serif; color:#3a3a3a }
.page-psych .site-header,
.page-psych .site-footer{ font-family:"Inter", sans-serif }

/* Hero Section */
.page-psych .psych-hero{ background:#f5f0e8; border-bottom:1px solid #d4cfc4 }
.page-psych .hero-split-grid{ display:grid; grid-template-columns:45% 55%; min-height:80vh }
.page-psych .hero-left{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 5% 60px 8%; text-align:center }
.page-psych .psych-hero-title{ font-size:clamp(42px, 6vw, 68px); font-weight:400; line-height:1.15; margin:0 0 36px; color:#3a3a3a; max-width:520px }
.page-psych .btn-psych-outline{ display:inline-block; padding:13px 42px; border:2px solid #3a3a3a; color:#3a3a3a; text-decoration:none; font-size:18px; font-weight:500; transition:all .3s ease; background:transparent }
.page-psych .btn-psych-outline:hover{ background:#3a3a3a; color:#f5f0e8 }
.page-psych .hero-right{ margin:0; overflow:hidden; height:100% }
.page-psych .hero-right img{ width:100%; height:100%; object-fit:cover; display:block }

/* Center top hero image for tablet portrait (1024x1366 → 768x1024) */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px){
  .page-psych .hero-right img{ object-position:center center }
}

/* Robust centering for tablet range (covers DPI/UI bar offsets) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 1024px) and (max-height: 1366px){
  .page-psych .hero-right img{ object-position:50% 50% !important }
}

/* Explicit iPad portrait sizes: enforce centering */
@media screen and (width: 820px) and (height: 1180px),
       screen and (width: 834px) and (height: 1194px),
       screen and (width: 1024px) and (height: 1366px){
  .page-psych .hero-right img{ object-position:50% 50% !important }
}

/* Psych-care: neutralize global .hero-right width/margin at <=1024 and enforce centering */
@media (max-width: 1024px){
  .page-psych .hero-right{ max-width:100% !important; margin:0 !important }
  .page-psych .hero-right img{ object-position:50% 50% !important }
}

/* About Section */
.page-psych .psych-about{ background:#f5f0e8; padding:80px 0 100px }
.page-psych .about-inner{ max-width:900px }
.page-psych .about-title{ text-align:center; font-size:clamp(32px, 5vw, 42px); font-weight:400; margin:0 0 20px; color:#3a3a3a }
.page-psych .about-description{ text-align:center; font-size:18px; line-height:1.7; margin:0 0 28px; color:#5a5a5a; max-width:780px; margin-left:auto; margin-right:auto }
.page-psych .btn-read-more{ display:inline-block; padding:12px 36px; background:#5a5a5a; color:#fff; text-decoration:none; font-size:16px; font-weight:500; border-radius:24px; transition:all .3s ease; margin:0 auto 50px; display:block; width:fit-content }
.page-psych .btn-read-more:hover{ background:#3a3a3a; transform:translateY(-2px) }
.page-psych .video-container{ position:relative; width:100%; max-width:740px; margin:0 auto; padding-bottom:56.25%; border-radius:8px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.15) }

/* Support Section */
.page-psych .psych-support{ position:relative; background:#f5f0e8; padding:0 0 60px }
.page-psych .support-hero-image{ width:100%; height:320px; overflow:hidden; margin-bottom:40px }
.page-psych .support-hero-image img{ width:100%; height:100%; object-fit:cover; display:block }
.page-psych .support-title{ text-align:center; font-family:"Inter", sans-serif; font-size:clamp(34px, 5.5vw, 48px); font-weight:700; line-height:1.3; margin:0 auto; max-width:700px; color:#2d2d2d }

/* Features Section */
.page-psych .psych-features{ background:linear-gradient(135deg, #f5f0e8 0%, #f0ebe1 100%); padding:60px 0 80px; position:relative }
.page-psych .features-inner{ max-width:1200px }
.page-psych .features-masonry{ display:grid; gap:48px; margin-bottom:60px }
.page-psych .feature-item{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:center; position:relative }
.page-psych .feature-img{ margin:0; overflow:hidden; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.15); position:relative; transition:all .4s cubic-bezier(.4,0,.2,1) }
.page-psych .feature-img::before{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(135deg, rgba(46,74,84,.08) 0%, transparent 60%); z-index:1; opacity:0; transition:opacity .4s ease }
.page-psych .feature-img:hover{ transform:translateY(-6px); box-shadow:0 12px 32px rgba(0,0,0,.2) }
.page-psych .feature-img:hover::before{ opacity:1 }
.page-psych .feature-img img{ width:100%; height:100%; object-fit:cover; display:block; min-height:320px; transition:transform .4s ease }
.page-psych .feature-img:hover img{ transform:scale(1.05) }
.page-psych .feature-info{ padding:44px 48px; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(135deg, #e8e3da 0%, #ebe6dd 100%); border-radius:20px; margin:20px; box-shadow:0 4px 20px rgba(0,0,0,.08); position:relative; transition:all .3s ease }
.page-psych .feature-info::before{ content:""; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px; background:linear-gradient(135deg, rgba(90,90,90,.1) 0%, transparent 60%); border-radius:20px; z-index:-1; opacity:0; transition:opacity .3s ease }
.page-psych .feature-info:hover{ transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.12) }
.page-psych .feature-info:hover::before{ opacity:1 }
.page-psych .feature-info h3{ font-size:30px; font-weight:700; margin:0 0 18px; color:#2d2d2d; line-height:1.15; letter-spacing:-0.02em }
.page-psych .feature-info p{ font-size:17px; line-height:1.75; margin:0; color:#5a5a5a }
.page-psych .feature-1 .feature-img{ order:1 }
.page-psych .feature-1 .feature-info{ order:2; margin-left:40px; margin-right:0 }
.page-psych .feature-2 .feature-info{ order:1; background:transparent; margin:0; padding-right:60px; box-shadow:none }
.page-psych .feature-2 .feature-info::before{ display:none }
.page-psych .feature-2 .feature-info:hover{ transform:none; box-shadow:none }
.page-psych .feature-2 .feature-info h3{ color:#2e4a54; position:relative; padding-bottom:12px }
.page-psych .feature-2 .feature-info h3::after{ content:""; position:absolute; bottom:0; left:0; width:60px; height:3px; background:linear-gradient(90deg, #5a5a5a 0%, transparent 100%) }
.page-psych .feature-2 .feature-img{ order:2 }
.page-psych .feature-3 .feature-img{ order:1 }
.page-psych .feature-3 .feature-info{ order:2; margin-left:40px; margin-right:0 }
.page-psych .features-cta{ text-align:center; margin-top:20px }
.page-psych .btn-get-started{ display:inline-block; padding:14px 48px; background:#000; color:#fff; text-decoration:none; font-size:18px; font-weight:600; border-radius:0; transition:all .3s ease; box-shadow:0 4px 12px rgba(0,0,0,.2) }
.page-psych .btn-get-started:hover{ background:#2d2d2d; transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.3) }

/* Final CTA Section */
.page-psych .psych-final-cta{ background:#eef1f5; padding-block:90px }
.page-psych .cta-inner{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center }
.page-psych .cta-copy h2{ margin:0 0 12px; font-size:clamp(32px, 5vw, 48px); font-weight:800; font-family:"Inter", sans-serif }
.page-psych .cta-copy p{ margin:0 0 8px; color:#4b5563; line-height:1.75; font-family:"Inter", sans-serif }
.page-psych .cta-note{ display:block; color:#6b7280; margin:12px 0 0; font-family:"Inter", sans-serif }
.page-psych .cta-actions{ margin-top:20px }
.page-psych .cta-figure{ margin:0 }
.page-psych .cta-figure img{ width:100%; max-height:580px; height:auto; object-fit:cover; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.12) }

/* Ensure Psych Care Contact Us button uses Fitness font (Inter) */
.page-psych .psych-final-cta .btn{ font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:800 }

/* Responsive */
@media (min-width: 1921px){
  .page-psych .hero-split-grid{ grid-template-columns:48% 52% }
  .page-psych .hero-left{ padding:60px 10% }
  .page-psych .psych-hero-title{ max-width:600px }
  .page-psych .features-inner{ max-width:1400px }
  .page-psych .feature-info{ padding:48px 52px }
}

@media (max-width: 1024px){
  .page-psych .hero-split-grid{ grid-template-columns:1fr; min-height:auto }
  .page-psych .hero-left{ padding:50px 30px; align-items:center; text-align:center }
  .page-psych .psych-hero-title{ max-width:100% }
  .page-psych .hero-right{ min-height:400px }
  .page-psych .feature-item{ grid-template-columns:1fr }
  .page-psych .feature-1 .feature-img,
  .page-psych .feature-2 .feature-img,
  .page-psych .feature-3 .feature-img{ order:1; min-height:280px }
  .page-psych .feature-1 .feature-info,
  .page-psych .feature-2 .feature-info,
  .page-psych .feature-3 .feature-info{ order:2; background:linear-gradient(135deg, #e8e3da 0%, #ebe6dd 100%); margin:20px; padding:36px 32px; box-shadow:0 4px 20px rgba(0,0,0,.08) }
  .page-psych .feature-2 .feature-info{ padding:36px 32px }
  .page-psych .feature-2 .feature-info h3::after{ display:none }
  .page-psych .cta-inner{ grid-template-columns:1fr }
}

@media (max-width: 640px){
  .page-psych .hero-left{ padding:36px 20px }
  .page-psych .psych-hero-title{ font-size:clamp(32px, 8.5vw, 42px); line-height:1.2 }
  .page-psych .btn-psych-outline{ width:100%; max-width:280px; min-height:44px; padding:12px 36px; font-size:16px }
  .page-psych .hero-right{ min-height:300px }
  
  .page-psych .support-section{ padding-block:60px }
  .page-psych .support-title{ font-size:clamp(28px, 7vw, 38px); margin-bottom:20px }
  
  .page-psych .feature-img img{ min-height:220px }
  .page-psych .feature-info{ padding:28px 24px; margin:16px; border-radius:16px }
  .page-psych .feature-info h3{ font-size:22px; margin-bottom:12px }
  .page-psych .feature-info p{ font-size:15px; line-height:1.75 }
  
  .page-psych .psych-final-cta{ padding-block:60px }
  .page-psych .cta-copy h2{ font-size:clamp(28px, 7vw, 38px) }
  .page-psych .cta-copy p{ font-size:15px }
}

/* ===== GAMING PAGE ===== */
.page-gaming{ font-family:"Inter", sans-serif; color:#1a1a1a }

/* Badge Highlight */
.badge-highlight{ background:linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%); color:#fff; padding:4px 20px; border-radius:20px; display:inline-block; font-weight:600; box-shadow:0 4px 20px rgba(139,92,246,.4), 0 0 40px rgba(139,92,246,.3); animation:badgeGlow 3s ease-in-out infinite; transition:all .3s ease }
.badge-highlight:hover{ transform:scale(1.05); box-shadow:0 6px 30px rgba(139,92,246,.6), 0 0 60px rgba(139,92,246,.5) }

@keyframes badgeGlow{
  0%, 100%{ box-shadow:0 4px 20px rgba(139,92,246,.4), 0 0 40px rgba(139,92,246,.3) }
  50%{ box-shadow:0 6px 28px rgba(139,92,246,.6), 0 0 50px rgba(139,92,246,.4), 0 0 80px rgba(139,92,246,.2) }
}

/* Hero Section */
.gaming-hero{ position:relative }
.hero-top{ position:relative; background:#fff; padding:80px 20px 60px; text-align:center }
.hero-top::after{ content:""; position:absolute; bottom:0; left:0; right:0; height:120px; background:linear-gradient(to bottom, rgba(255,200,220,0) 0%, rgba(255,220,180,.08) 20%, rgba(200,230,255,.12) 50%, rgba(180,200,255,.15) 100%); pointer-events:none; z-index:0 }
.hero-top .hero-content{ position:relative; z-index:1; max-width:900px; margin:0 auto }
.gaming-hero-title{ font-size:clamp(36px, 6vw, 56px); font-weight:800; margin:0 0 24px; line-height:1.2; color:#1a1a1a }
.gaming-hero-subtitle{ font-size:clamp(16px, 2.5vw, 19px); line-height:1.7; color:#4a5568; max-width:720px; margin:0 auto }
.hero-bottom{ position:relative; min-height:65vh; overflow:visible; background:url('https://static.wixstatic.com/media/044386_629aec14e7be476d8b76c6bc2ecbefa0~mv2.png') center top/cover no-repeat; background-position:center 0% }
.hero-bottom::before{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.2) 100%); z-index:1 }

/* Video Player */
.hero-video-container{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:min(800px, 80%); max-width:90%; aspect-ratio:16/9; z-index:2; border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.2) }
.hero-video{ width:100%; height:100%; border:none; display:block; border-radius:20px }

/* Floating 3D Shapes */
.floating-shape{ position:absolute; pointer-events:all; animation:float 6s ease-in-out infinite; transition:transform .3s ease; cursor:pointer }
.floating-shape:hover{ transform:translateY(-10px) translateX(10px) rotate(10deg) scale(1.1) !important }
.shape-tree{ width:clamp(120px, 12vw, 165px); height:auto; top:-80px; right:8%; z-index:10; animation-delay:0s }
.shape-plus{ width:clamp(110px, 11vw, 150px); height:auto; bottom:15%; left:5%; z-index:3; animation-delay:1s }
.shape-donut{ width:clamp(110px, 11vw, 150px); height:auto; bottom:-70px; right:25%; z-index:10; animation-delay:2s }

@keyframes float{
  0%, 100%{ transform:translateY(0) rotate(0deg) }
  50%{ transform:translateY(-20px) rotate(5deg) }
}

/* Game Badges */
.game-badge{ position:absolute; z-index:5; background:#fff; border-radius:16px; padding:16px 18px; box-shadow:0 6px 24px rgba(0,0,0,.15); display:flex; align-items:center; gap:14px; font-size:13px; font-weight:600; color:#2d3748; animation:badgePulse 3s ease-in-out infinite; transition:all .3s ease }
.game-badge:hover{ transform:translateY(-5px); box-shadow:0 10px 32px rgba(0,0,0,.25) }
.game-badge img{ width:64px; height:64px; border-radius:10px }
.badge-wolf{ top:12%; left:6%; animation-delay:.5s }
.badge-dragon{ top:50%; right:5%; animation-delay:1.5s }

@keyframes badgePulse{
  0%, 100%{ transform:scale(1) }
  50%{ transform:scale(1.05) }
}

/* Transitive Section */
.gaming-transitive{ background:#fff; padding:80px 20px; text-align:center }
.transitive-inner{ max-width:900px }
.transitive-title{ font-size:clamp(32px, 5vw, 44px); font-weight:800; margin:0 0 24px; line-height:1.3; color:#1a1a1a }
.transitive-description{ font-size:18px; line-height:1.75; color:#4a5568; margin:0 0 36px; max-width:800px; margin-left:auto; margin-right:auto }
.transitive-quote{ background:linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); border-left:4px solid #8b5cf6; padding:28px 36px; margin:0; font-size:17px; line-height:1.8; font-style:italic; color:#2d3748; border-radius:8px; max-width:750px; margin:0 auto }

/* Feature Banners */
.gaming-banner{ position:relative; min-height:520px; display:flex; align-items:center; overflow:hidden; background-size:cover; background-position:center; background-repeat:no-repeat; margin-bottom:60px }
.banner-dragon{ background-image:url('https://static.wixstatic.com/media/044386_d5292119faa640c6994dd5cf0daf7450~mv2.jpg') }
.banner-castle{ background-image:url('https://static.wixstatic.com/media/044386_80f7c102a7b84abaafbad5013f01f919~mv2.png') }
.banner-warriors{ background-image:url('https://static.wixstatic.com/media/044386_75b91aa7c6af4ba9a0f1b6b19652458c~mv2.jpg'); margin-bottom:0 }
.banner-overlay{ position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.15); z-index:1 }
.banner-content{ position:relative; z-index:2; padding:60px 20px }

/* Feature Cards */
.feature-card{ display:flex; align-items:center; gap:48px; max-width:680px }
.card-left{ margin-right:auto }
.card-right{ margin-left:auto; flex-direction:row-reverse }
.card-text{ background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-radius:20px; padding:36px 40px; box-shadow:0 16px 48px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.5); flex:1; min-width:300px; transition:all .4s ease; cursor:pointer }
.card-text:hover{ transform:translateY(-8px) scale(1.02); box-shadow:0 24px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.8), 0 0 30px rgba(139,92,246,.3); background:rgba(255,255,255,.98) }
.card-text h3{ font-size:26px; font-weight:700; margin:0 0 16px; color:#1a1a1a; line-height:1.2; transition:color .3s ease }
.card-text:hover h3{ color:#8b5cf6 }
.card-text p{ font-size:16px; line-height:1.7; margin:0; color:#4a5568; transition:color .3s ease }
.card-text:hover p{ color:#2d3748 }

/* Phone Mockup */
.card-phone{ position:relative; flex-shrink:0; width:186px; height:372px; filter:drop-shadow(0 0 20px rgba(139,92,246,.4)) drop-shadow(0 8px 24px rgba(0,0,0,.2)); transition:filter .3s ease; overflow:hidden; border-radius:32px }
.card-phone:hover{ filter:drop-shadow(0 0 32px rgba(139,92,246,.6)) drop-shadow(0 12px 32px rgba(0,0,0,.3)) }
.phone-frame{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; pointer-events:none }
.phone-screen{ position:absolute; top:2.5%; left:4%; width:92%; height:95%; object-fit:cover; border-radius:28px; z-index:1 }

/* Gaming CTA */
.gaming-cta{ background:#eef1f5; padding:90px 20px }
.gaming-cta .cta-inner{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; max-width:1200px; margin:0 auto }
.gaming-cta .cta-copy h2{ margin:0 0 12px; font-size:clamp(32px, 5vw, 48px); font-weight:800 }
.gaming-cta .cta-copy p{ margin:0 0 8px; color:#4b5563; line-height:1.75 }
.gaming-cta .cta-note{ display:block; color:#6b7280; margin:12px 0 0 }
.gaming-cta .cta-actions{ margin-top:20px }
.gaming-cta .cta-figure{ margin:0 }
.gaming-cta .cta-figure img{ width:100%; max-height:580px; height:auto; object-fit:cover; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.12) }

/* Responsive */
@media (min-width: 1921px){
  .hero-bottom{ min-height:70vh }
  .shape-tree{ right:12%; top:-100px }
  .shape-plus{ left:8% }
  .shape-donut{ right:30%; bottom:-80px }
  .badge-wolf{ left:10% }
  .badge-dragon{ right:8% }
}

@media (max-width: 1024px){
  .floating-shape{ display:none }
  .game-badge{ position:static; margin:12px; display:inline-flex }
  .badge-wolf,
  .badge-dragon{ position:static }
  .hero-top{ padding:60px 20px 40px }
  .hero-top::after{ height:100px; background:linear-gradient(to bottom, rgba(255,200,220,0) 0%, rgba(255,220,180,.07) 20%, rgba(200,230,255,.11) 50%, rgba(180,200,255,.14) 100%) }
  .hero-bottom{ min-height:45vh }
  .hero-video-container{ width:min(600px, 85%); border-radius:16px }
  .hero-video{ border-radius:16px }
  .feature-card{ flex-direction:column; max-width:500px; margin:0 auto; gap:32px }
  .card-left,
  .card-right{ margin:0 auto }
  .card-right{ flex-direction:column }
  .gaming-banner{ margin-bottom:40px }
  .gaming-cta .cta-inner{ grid-template-columns:1fr }
}

@media (max-width: 640px){
  .hero-top{ padding:48px 16px 32px }
  .hero-top::after{ height:80px; background:linear-gradient(to bottom, rgba(255,200,220,0) 0%, rgba(255,220,180,.06) 20%, rgba(200,230,255,.1) 50%, rgba(180,200,255,.12) 100%) }
  .gaming-hero-title{ font-size:clamp(30px, 8vw, 40px); line-height:1.2 }
  .gaming-hero-subtitle{ font-size:15px; line-height:1.7; padding:0 12px }
  .hero-bottom{ min-height:38vh }
  .hero-video-container{ width:min(400px, 92%); border-radius:12px }
  .hero-video{ border-radius:12px }
  .game-badge{ padding:12px 14px; gap:10px; font-size:11px; margin:8px }
  .game-badge img{ width:48px; height:48px }
  
  .gaming-transitive{ padding:60px 16px }
  .transitive-title{ font-size:clamp(28px, 7vw, 38px); margin-bottom:20px }
  .transitive-description{ font-size:15px; padding:0 12px }
  .transitive-quote{ padding:20px 20px; font-size:14px; line-height:1.75; border-left-width:3px }
  
  .gaming-banner{ min-height:380px; margin-bottom:32px }
  .banner-content{ padding:40px 16px }
  .feature-card{ gap:24px }
  .card-text{ padding:26px 24px; border-radius:16px }
  .card-text h3{ font-size:20px; margin-bottom:12px }
  .card-text p{ font-size:14px; line-height:1.7 }
  .card-phone{ width:130px; height:260px; border-radius:22px }
  .phone-screen{ top:2.5%; left:4%; width:92%; height:95%; border-radius:18px }
  
  .gaming-cta{ padding:60px 16px }
  .gaming-cta .cta-copy h2{ font-size:clamp(28px, 7vw, 38px) }
  .gaming-cta .cta-copy p{ font-size:15px }
  .btn-dark-pill{ font-size:15px }
}

/* ===== MARKETING PAGE ===== */
.page-marketing{ font-family:"Inter", sans-serif; color:#1a1a1a; background:#e8e4dc }

/* Hero Section */
.marketing-hero{ background:#e8e4dc; padding:100px 20px 80px; position:relative }
.hero-split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-bottom:60px }
.hero-left{ max-width:520px }
.marketing-hero-title{ font-size:clamp(36px, 5vw, 48px); font-weight:800; margin:0 0 24px; line-height:1.15; color:#1a1a1a }
.marketing-hero-text{ font-size:16px; line-height:1.7; color:#3a3a3a; margin:0 0 32px }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap }
.btn-marketing-dark{ background:#2d2d2d; color:#fff; padding:14px 32px; border-radius:4px; font-weight:600; font-size:15px; display:inline-block; transition:all .3s ease; border:none }
.btn-marketing-dark:hover{ background:#1a1a1a; transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.2) }
.btn-marketing-outline{ background:transparent; color:#2d2d2d; padding:14px 32px; border-radius:4px; font-weight:600; font-size:15px; display:inline-block; border:2px solid #2d2d2d; transition:all .3s ease }
.btn-marketing-outline:hover{ background:#2d2d2d; color:#fff }

/* Hero Right Image */
.hero-right{ position:relative }
.hero-image-wrapper{ position:relative; border-radius:8px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.15) }
.hero-main-image{ width:100%; height:auto; display:block; object-fit:cover; filter:brightness(1.05) contrast(0.95) }
.hero-image-wrapper::before{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(255,255,255,.15) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 100%); pointer-events:none; z-index:1 }
.hero-image-wrapper::after{ content:""; position:absolute; bottom:0; left:0; right:0; height:30%; background:linear-gradient(to bottom, rgba(232,228,220,0) 0%, rgba(232,228,220,.4) 100%); pointer-events:none; z-index:2 }

/* Monitor Mockup */
.hero-monitor{ display:flex; justify-content:center; margin-top:60px }
.monitor-frame{ width:min(650px, 100%); aspect-ratio:16/9; background:#000; border-radius:12px 12px 0 0; padding:18px 18px 48px; box-shadow:0 20px 60px rgba(0,0,0,.2); position:relative }
.monitor-frame::after{ content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:160px; height:16px; background:#2d2d2d; border-radius:0 0 8px 8px }
.monitor-screen{ width:100%; height:100%; background:linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%); border-radius:4px; box-shadow:inset 0 2px 10px rgba(0,0,0,.1) }

/* Personalized Content Section */
.marketing-personalized{ background:#e8e4dc; padding:100px 20px }
.section-title-marketing{ font-size:clamp(32px, 5vw, 44px); font-weight:800; text-align:left; margin:0 0 60px; color:#1a1a1a; line-height:1.2; max-width:1200px; margin-left:auto; margin-right:auto; padding-left:20px }
.content-split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; max-width:1200px; margin:0 auto }
.content-left{ max-width:480px }
.content-text{ font-size:16px; line-height:1.75; color:#3a3a3a; margin:0 0 20px }
.highlight-text{ font-weight:600; color:#1a1a1a }
.content-right{ position:relative }
.content-image-wrapper{ position:relative; background:#e2d5c0; padding:40px; border-radius:12px; box-shadow:0 16px 48px rgba(0,0,0,.12) }
.content-image{ width:100%; height:auto; display:block }

/* Smart Targeting Section */
.marketing-targeting{ background:#e8e4dc; padding:100px 20px }
.section-title-marketing-center{ font-size:clamp(32px, 5vw, 44px); font-weight:800; text-align:center; margin:0 0 60px; color:#1a1a1a; line-height:1.2 }
.targeting-main-grid{ display:grid; grid-template-columns:340px 1fr; gap:60px; align-items:start; max-width:1200px; margin:0 auto 60px }
.targeting-left-images{ display:flex; flex-direction:column; gap:28px }
.target-img-box{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.12); padding:12px }
.target-img-box img{ width:100%; height:auto; display:block; border-radius:8px }
.crop-bottom{ object-fit:cover; height:auto; max-height:280px; object-position:top }
.targeting-right-boxes{ display:flex; flex-direction:column; gap:28px }
.top-row-boxes{ display:grid; grid-template-columns:1fr 1fr; gap:28px }
.feature-box{ background:#fff; border-radius:8px; overflow:visible; box-shadow:0 8px 24px rgba(0,0,0,.1); position:relative; margin-top:36px }
.feature-box.full-width{ width:100% }
.box-number-bar{ position:relative; height:0; display:flex; align-items:center; justify-content:center; width:100% }
.box-number-bar::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:#2d2d2d; z-index:0 }
.box-number{ width:56px; height:56px; border-radius:50%; background:#2d2d2d; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:22px; position:relative; z-index:1; border:4px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.15) }
.box-content{ padding:36px 32px 28px }
.box-title{ font-size:20px; font-weight:700; margin:0 0 12px; color:#1a1a1a }
.box-text{ font-size:15px; line-height:1.7; color:#3a3a3a; margin:0 }
.targeting-team-image{ max-width:900px; margin:0 auto; border-radius:16px; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.15) }
.targeting-team-image img{ width:100%; height:auto; display:block }

/* Transform Section */
.marketing-transform{ background:#e8e4dc; padding:100px 20px 120px }
.transform-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; max-width:1200px; margin:0 auto 60px }
.transform-card{ background:#e8e4dc; padding:36px 32px; border-radius:8px; text-align:center; box-shadow:0 4px 16px rgba(0,0,0,.08) }
.card-title{ font-size:20px; font-weight:700; margin:0 0 16px; color:#1a1a1a }
.card-text{ font-size:15px; line-height:1.7; color:#3a3a3a; margin:0 }
.transform-dashboard-wrapper{ max-width:700px; margin:0 auto; text-align:center }
.transform-dashboard{ border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.2); background:#1a1a1a; padding:16px; margin-bottom:32px }
.transform-dashboard img{ width:100%; height:auto; display:block; border-radius:8px }
.btn-get-started{ background:#2d2d2d; color:#fff; padding:14px 40px; border-radius:4px; font-weight:600; font-size:16px; display:inline-block; transition:all .3s ease; border:none; cursor:pointer }
.btn-get-started:hover{ background:#1a1a1a; transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.3) }

/* Responsive: Marketing */
@media (max-width: 1024px){
  .hero-split{ grid-template-columns:1fr; gap:40px }
  .hero-left{ max-width:100%; text-align:center; margin:0 auto }
  .hero-actions{ justify-content:center }
  .hero-right{ max-width:600px; margin:0 auto }
  .section-title-marketing{ text-align:center; padding-left:0 }
  .content-split{ grid-template-columns:1fr; gap:48px }
  .content-left{ max-width:100%; text-align:center; margin:0 auto }
  .content-right{ max-width:600px; margin:0 auto }
  .targeting-main-grid{ grid-template-columns:1fr; gap:48px }
  .targeting-left-images{ max-width:500px; margin:0 auto }
  .top-row-boxes{ grid-template-columns:1fr 1fr; gap:24px }
  .crop-bottom{ max-height:260px }
  .feature-box{ margin-top:32px }
  .transform-cards{ grid-template-columns:1fr; max-width:500px; margin:0 auto 60px }
  .transform-dashboard-wrapper{ max-width:600px }
}

@media (max-width: 640px){
  .marketing-hero{ padding:60px 16px 50px }
  .hero-split{ gap:32px; margin-bottom:48px }
  .marketing-hero-title{ font-size:clamp(28px, 8vw, 36px); margin:0 0 20px }
  .marketing-hero-text{ font-size:15px; margin:0 0 24px }
  .hero-actions{ flex-direction:column; gap:12px }
  .btn-marketing-dark,
  .btn-marketing-outline{ width:100%; max-width:280px; text-align:center }
  .monitor-frame{ padding:12px 12px 32px; border-radius:8px 8px 0 0 }
  .monitor-frame::after{ width:120px; height:12px }
  
  .marketing-personalized{ padding:60px 16px }
  .section-title-marketing{ font-size:clamp(28px, 7vw, 36px); margin:0 0 40px; text-align:center; padding-left:0 }
  .section-title-marketing-center{ font-size:clamp(28px, 7vw, 36px) }
  .content-split{ gap:36px }
  .content-text{ font-size:15px }
  .content-image-wrapper{ padding:24px; border-radius:8px }
  
  .marketing-targeting{ padding:60px 16px }
  .targeting-main-grid{ gap:36px; margin-bottom:48px }
  .targeting-left-images{ gap:20px }
  .target-img-box{ padding:8px }
  .crop-bottom{ max-height:220px }
  .targeting-right-boxes{ gap:20px }
  .top-row-boxes{ grid-template-columns:1fr; gap:20px }
  .feature-box{ margin-top:28px }
  .box-number{ width:48px; height:48px; font-size:18px; border:3px solid #fff }
  .box-content{ padding:32px 24px 20px }
  .box-title{ font-size:18px; margin:0 0 10px }
  .box-text{ font-size:14px }
  .targeting-team-image{ max-width:100%; border-radius:12px }
  
  .marketing-transform{ padding:60px 16px 80px }
  .transform-cards{ gap:24px; margin-bottom:48px }
  .transform-card{ padding:28px 24px }
  .card-title{ font-size:18px }
  .card-text{ font-size:14px }
  .transform-dashboard-wrapper{ max-width:100% }
}

@media screen and (max-width: 412px) and (max-height: 892px){
  .page-marketing .hero-actions{ justify-content:center; align-items:center; flex-direction:row }
  .page-marketing .btn-marketing-dark,
  .page-marketing .btn-marketing-outline{ width:auto; max-width:none; text-align:center; margin-inline:auto }
}

@media (max-width: 640px){
  .transform-dashboard{ padding:12px; border-radius:8px }
  .btn-get-started{ width:100%; max-width:280px; padding:12px 32px }
}

/* ===== MILITARY PAGE ===== */
.page-military{ font-family:"Inter", sans-serif; color:#fff; background:#000 }

/* Hero Section with Full-Width Background */
.military-hero{ 
  background:url('https://static.wixstatic.com/media/044386_b008a1c64f1b4a0b8141a8b0f8b66b95~mv2.png') center center / cover no-repeat; 
  min-height:60vh; 
  display:flex; 
  align-items:center; 
  position:relative; 
  padding:80px 20px;
  margin:0;
}
.military-hero::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:1 }
.hero-content{ position:relative; z-index:2; max-width:700px; margin:0 0 0 80px }
.military-hero-title{ 
  font-size:clamp(36px, 6vw, 56px); 
  font-weight:800; 
  margin:0 0 20px; 
  line-height:1.1; 
  letter-spacing:1px;
  text-transform:uppercase;
  color:#fff;
  text-shadow:2px 2px 8px rgba(0,0,0,.5);
}
.military-hero-text{ 
  font-size:16px; 
  line-height:1.7; 
  margin:0 0 32px; 
  color:#f0f0f0;
  max-width:600px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap }
.btn-military-light{ 
  background:#fff; 
  color:#1a1a1a; 
  padding:14px 36px; 
  border-radius:4px; 
  font-weight:600; 
  font-size:15px; 
  transition:all .3s ease;
  box-shadow:0 4px 12px rgba(255,255,255,.3);
}
.btn-military-light:hover{ background:#f0f0f0; transform:translateY(-2px); box-shadow:0 6px 20px rgba(255,255,255,.4) }
.btn-military-outline{ 
  background:transparent; 
  color:#fff; 
  padding:14px 36px; 
  border-radius:4px; 
  font-weight:600; 
  font-size:15px; 
  border:2px solid #fff; 
  transition:all .3s ease;
}
.btn-military-outline:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px) }

/* Media Section */
.military-media{ background:#000; padding:0; margin:0 }
.media-container{ display:grid; grid-template-columns:1fr 1fr; gap:0; max-width:100%; margin:0 }
.media-left,
.media-right{ position:relative }
.video-wrapper{ 
  position:relative; 
  width:100%; 
  padding-bottom:56.25%; 
  background:#000;
}
.military-video{ 
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  border:none;
}
.media-image{ width:100%; height:auto; display:block }

/* Tactical Features Section */
.military-tactical{ 
  background:url('https://static.wixstatic.com/media/044386_58c088e6e9ca429ea8614265f382c9dd~mv2.png') center center / cover no-repeat; 
  padding:100px 20px; 
  position:relative;
  margin:0;
}
.military-tactical::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.5); z-index:1 }
.tactical-content{ position:relative; z-index:2; max-width:1200px; margin:0 auto }
.tactical-title{ 
  font-size:clamp(32px, 5vw, 44px); 
  font-weight:800; 
  text-align:center; 
  margin:0 0 60px; 
  color:#fff; 
  line-height:1.2;
}
.tactical-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:40px }
.tactical-card{ background:#fff; border-radius:12px; padding:32px; box-shadow:0 8px 32px rgba(0,0,0,.12); text-align:center; transition:all .3s ease; cursor:pointer }
.tactical-card:hover{ transform:translateY(-8px); box-shadow:0 16px 48px rgba(0,0,0,.2) }
.card-title-military{ font-size:22px; font-weight:700; margin:0 0 16px; color:#1a1a1a }
.card-text-military{ font-size:15px; line-height:1.7; color:#3a3a3a; margin:0 0 24px }
.card-image-wrapper{ 
  border-radius:8px; 
  overflow:hidden; 
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  margin-top:auto;
  max-height:280px;
}
.card-image-wrapper img{ width:100%; height:auto; display:block; object-fit:cover; object-position:top; max-height:280px }

/* Responsive: Military */
@media (max-width: 1024px){
  .hero-content{ margin:0 auto; text-align:center; max-width:600px }
  .hero-actions{ justify-content:center }
  .media-container{ grid-template-columns:1fr; gap:0 }
  .tactical-grid{ grid-template-columns:1fr; gap:32px; max-width:600px; margin:0 auto }
}

@media (max-width: 640px){
  .military-hero{ min-height:50vh; padding:60px 16px }
  .hero-content{ margin:0 }
  .military-hero-title{ font-size:clamp(28px, 8vw, 36px); margin:0 0 16px }
  .military-hero-text{ font-size:15px; margin:0 0 24px }
  .hero-actions{ flex-direction:column; gap:12px }
  .btn-military-light,
  .btn-military-outline{ width:100%; max-width:280px; text-align:center; padding:12px 28px }
  
  .military-tactical{ padding:60px 16px }
  .tactical-title{ font-size:clamp(28px, 7vw, 36px); margin:0 0 40px }
  .tactical-card{ padding:24px }
  .card-title-military{ font-size:20px }
  .card-text-military{ font-size:14px; margin:0 0 20px }
  .card-image-wrapper{ max-height:240px }
  .card-image-wrapper img{ max-height:240px }
}

/* ===== CYBERSECURITY PAGE ===== */
.page-cybersecurity{ font-family:"Inter", sans-serif; background:#fff }

/* Hero Section - Fixed Background Parallax */
.cyber-hero{ 
  position:relative;
  min-height:100vh;
  width:100%;
  overflow:hidden;
  isolation:isolate;
  background:#081B2C;
  --left-col: clamp(580px, 48vw, 935px);
  /* custom position props removed; using explicit object-position on image */
}

/* Fixed Background Image (global, behind all content) */
.site-fixed-bg{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.site-fixed-bg img{
  position:fixed;
  left:0;
  bottom:0;
  width:clamp(520px, 35vw, 935px);
  height:auto;
  object-fit:contain;
  object-position:left bottom;
  transform:translateZ(0);
}

/* Scrolling Content Wrapper (Dark Blue Block) */
.hero-content-wrapper{
  position:relative;
  z-index:10;
  background:transparent;
  min-height:120vh; /* balanced across resolutions */
}
.hero-content-grid{
  display:grid;
  grid-template-columns:var(--left-col, clamp(420px, 36vw, 760px)) 1fr;
  grid-template-rows:minmax(360px, 62vh) auto;
  min-height:120vh;
  max-width:100%;
  gap:0;
  width:min(100%, 1600px); 
  margin-inline:auto
}

/* Define a safe default for left column on this page */
.page-cybersecurity .hero-content-grid{ --left-col: clamp(420px, 36vw, 760px); width:min(100%, 1600px); margin-inline:auto }

/* Left image occupies the full left column across both rows */
.hero-left-image{ 
  grid-column:1; 
  grid-row:2; 
  margin:0; 
  position:relative; 
  z-index:1; 
  overflow:hidden;
  background:#081B2C;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0;
  min-height:0;
}
.hero-left-image img{ 
  width:100%; 
  height:100%; 
  max-width:100%; 
  object-fit:contain; 
  object-position:center bottom; 
  display:block;
}

/* Title Block */
.hero-title-block{ 
  background:#081B2C; 
  padding:clamp(40px, 8vh, 80px) clamp(30px, 5vw, 60px); 
  color:#fff; 
  display:flex; 
  flex-direction:column; 
  justify-content:center;
  grid-column:1;
  grid-row:1;
  min-height:62vh;
  max-width:clamp(520px, 40vw, 800px);
  position:relative; z-index:2;
}
.cyber-hero-title{ 
  font-size:clamp(40px, 6vw, 64px); 
  font-weight:800; 
  margin:0 0 24px; 
  line-height:1.1; 
  color:#fff;
}
.cyber-hero-text{ 
  font-size:17px; 
  line-height:1.7; 
  margin:0 0 32px; 
  color:#d0d9e6;
  max-width:500px;
}
.btn-cyber-light{ 
  background:#fff; 
  color:#081B2C; 
  padding:14px 36px; 
  border-radius:4px; 
  font-weight:600; 
  font-size:15px; 
  transition:all .3s ease;
  display:inline-block;
  align-self:flex-start;
}
.btn-cyber-light:hover{ background:#f0f0f0; transform:translateY(-2px) }
/* Center hero button on cybersecurity page */
.page-cybersecurity .hero-title-block .btn-cyber-light{ align-self:center }

/* Dashboard Image */
.hero-dashboard{ 
  background:#081B2C; 
  padding:0; /* edge-to-edge alignment with left column */ 
  display:flex; 
  align-items:flex-start; 
  justify-content:flex-start;
  grid-column:2;
  grid-row:1;
  align-self:stretch; /* fill the grid row height */
  height:100%;
  position:relative; z-index:2; overflow:hidden;
  min-height:0;
}
.hero-main-img{ width:100%; height:100%; display:block; border-radius:0; box-shadow:none; object-fit:cover; object-position:center }

/* Ensure top-right image hovers above its neighbors when scaled */
.hero-dashboard:hover{ z-index:3 }

/* Ultrawide tuning */
@media (min-width: 1800px){
  .page-cybersecurity .hero-content-grid{ --left-col: clamp(560px, 34vw, 900px) }
}
@media (min-aspect-ratio: 21/9){
  .page-cybersecurity .hero-content-grid{ grid-template-rows:minmax(320px, 56vh) auto }
  .page-cybersecurity .hero-content-wrapper{ min-height:100vh }
  .page-cybersecurity .hero-title-block{ min-height:56vh }
  .page-cybersecurity .solution-video-wrapper{ padding-bottom:45% }
}

/* Ultrawide tuning */
@media (min-width: 1800px){
  .page-cybersecurity .hero-content-grid{ --left-col: clamp(560px, 34vw, 900px) }
}
@media (min-aspect-ratio: 21/9){
  .page-cybersecurity .hero-content-grid{ grid-template-rows:minmax(320px, 56vh) auto }
  .page-cybersecurity .hero-content-wrapper{ min-height:100vh }
  .page-cybersecurity .hero-title-block{ min-height:56vh }
  .page-cybersecurity .solution-video-wrapper{ padding-bottom:45% }
}

/* Solution Video Box */
.hero-solution-box{ 
  background:#081B2C;
  padding:clamp(20px, 3vh, 32px);
  grid-column:2;
  grid-row:2;
  display:flex;
  flex-direction:column;
  gap:16px;
  justify-content:flex-start;
  align-items:stretch; /* let video fill horizontally */
  position:relative; z-index:2;
  min-height:0;
}
.solution-title{ 
  font-size:clamp(24px, 4vw, 32px); 
  font-weight:700; 
  margin:0 0 24px; 
  line-height:1.2; 
  color:#fff;
  text-align:left;
}
.solution-video-wrapper{ 
  background:#000; 
  border-radius:8px; 
  overflow:hidden; 
  position:relative; 
  width:100%;
  max-width:100%; /* stretch with column */
  padding-bottom:56.25%;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.solution-video{ 
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  border:none;
}

/* Expertise Section */
.cyber-expertise{ background:#fff; padding:100px 20px }
.expertise-header{ text-align:left; margin:0 0 60px }
.expertise-subtitle{ 
  font-size:14px; 
  font-weight:600; 
  color:#666; 
  margin:0 0 12px; 
  text-transform:uppercase; 
  letter-spacing:1px;
}
.expertise-title{ 
  font-size:clamp(36px, 5vw, 52px); 
  font-weight:800; 
  margin:0; 
  color:#1a1a1a; 
  line-height:1.2;
}
.expertise-grid{ 
  display:grid; 
  grid-template-columns:repeat(3, 1fr) 300px; 
  gap:32px; 
  max-width:1400px; 
  margin:0 auto;
}
.expertise-card{ 
  background:#fff; 
  border:1px solid #e5e7eb; 
  border-radius:8px; 
  padding:32px; 
  height:100%;
  transition:all .3s ease;
  display:flex;
  flex-direction:column;
}
.expertise-card:hover{ box-shadow:0 12px 40px rgba(0,0,0,.1); transform:translateY(-4px) }
.card-icon{ 
  width:48px; 
  height:48px; 
  background:#0a1e2e; 
  border-radius:8px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  margin:0 0 20px;
  color:#fff;
}
.card-title-cyber{ 
  font-size:22px; 
  font-weight:700; 
  margin:0 0 16px; 
  color:#1a1a1a;
}
.card-text-cyber{ 
  font-size:15px; 
  line-height:1.7; 
  color:#3a3a3a; 
  margin:0 0 24px;
}
.card-image{ 
  border-radius:8px; 
  overflow:hidden; 
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  aspect-ratio:4/3; /* slightly taller for bigger visuals */
  display:block;
  margin-top:auto;
}
.card-image img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  object-position:center; 
  display:block; 
  transition: transform .28s ease, filter .28s ease; 
  will-change: transform;
}

/* Card image hover polish */
.expertise-card:hover .card-image img{ transform: scale(1.03); filter:saturate(1.05) }

/* Entrance reveal animation */
.expertise-card.reveal, .expertise-side-image.reveal{ opacity:0; transform:translateY(18px); transition: opacity .5s ease, transform .5s ease }
.expertise-card.reveal.is-in, .expertise-side-image.reveal.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  .expertise-card.reveal, .expertise-side-image.reveal{ opacity:1; transform:none }
}
.expertise-side-image{ 
  border-radius:8px; 
  overflow:hidden; 
  box-shadow:0 12px 40px rgba(0,0,0,.15); 
  height:100%;
}
.expertise-side-image img{ width:100%; height:100%; object-fit:cover; display:block }

/* CTA Section */
.cyber-cta{ background:#f9fafb; padding:100px 20px }
.cta-container-cyber{ display:grid; grid-template-columns:1fr 400px; gap:80px; max-width:1200px; margin:0 auto; align-items:center }
.cta-title-cyber{ 
  font-size:clamp(32px, 5vw, 48px); 
  font-weight:800; 
  margin:0 0 24px; 
  color:#1a1a1a; 
  line-height:1.2;
}
.cta-text-cyber{ 
  font-size:17px; 
  line-height:1.8; 
  color:#3a3a3a; 
  margin:0 0 24px;
}
.cta-trust{ 
  font-size:15px; 
  color:#9a3b3b; 
  font-weight:600; 
  margin:0 0 32px;
}
.btn-cyber-dark{ 
  background:#1a1a1a; 
  color:#fff; 
  padding:16px 48px; 
  border-radius:4px; 
  font-weight:600; 
  font-size:16px; 
  transition:all .3s ease;
  display:inline-block;
  width:100%;
  max-width:400px;
  text-align:center;
}
.btn-cyber-dark:hover{ background:#2d2d2d; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2) }
.cta-vertical-img{ 
  width:100%; 
  height:auto; 
  display:block; 
  border-radius:12px; 
  box-shadow:0 16px 48px rgba(0,0,0,.15);
  aspect-ratio:2/3;
  object-fit:cover;
}

/* Genetics page */
.page-genetics{ background:#faf4ee; color:#1a1a1a }
.gen-hero{ background:#f7efe7; padding:100px 20px }
.gen-hero-grid{ display:grid; grid-template-columns:1fr 480px; align-items:center; gap:48px; max-width:1200px; margin:0 auto }
.gen-hero-title{ font-size:clamp(42px, 6vw, 64px); font-weight:800; margin:0 0 16px; color:#0f172a }
.gen-hero-text{ font-size:17px; line-height:1.7; margin:0 0 20px; max-width:520px }
.btn-gen-dark{ background:#111827; color:#fff; padding:14px 28px; border-radius:6px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; transition: filter .25s ease, transform .25s ease }
.btn-gen-dark:hover{ filter:brightness(.9); transform: translateY(-2px) }
.gen-hero-art img{ width:100%; height:auto; display:block }

.gen-media{ background:#fbf7f1; padding:80px 20px }
.gen-media-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; max-width:1200px; margin:0 auto }
.gen-media-left img{ width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 16px 48px rgba(0,0,0,.12) }
.gen-media-right{ background:#f2e7da; border-radius:12px; padding:16px; box-shadow:0 16px 48px rgba(0,0,0,.08) }
.gen-video-frame{ position:relative; width:100%; padding-bottom:56.25%; border-radius:10px; overflow:hidden; background:#000 }
.gen-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

.gen-features{ background:#fff; padding:100px 20px }
.gen-features-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; max-width:1200px; margin:0 auto }
.gen-card{ background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:28px; display:flex; flex-direction:column; transition: box-shadow .3s ease, transform .3s ease }
.gen-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.08) }
.gen-card-title{ font-size:22px; font-weight:800; margin:0 0 12px; color:#0f172a }
.gen-card-text{ font-size:15px; line-height:1.7; color:#374151; margin:0 0 20px }
.gen-card-image{ aspect-ratio:4/3; border-radius:12px; overflow:hidden; margin-top:auto; box-shadow:0 10px 24px rgba(0,0,0,.12) }
.gen-card-image img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .25s ease }
.gen-card:hover .gen-card-image img{ transform: scale(1.03) }

.gen-cta{ background:#f9f8f6; padding:100px 20px }
.gen-cta-grid{ display:grid; grid-template-columns:1fr 400px; gap:80px; align-items:center; max-width:1200px; margin:0 auto }
.gen-cta-title{ font-size:clamp(28px, 5vw, 42px); font-weight:800; margin:0 0 16px }
.gen-cta-text{ font-size:17px; line-height:1.8; color:#3a3a3a; margin:0 0 14px; max-width:640px }
.gen-cta-note{ color:#7a7a7a; display:block; margin:0 0 24px }
.btn-gen-outline{ display:inline-flex; align-items:center; justify-content:center; padding:14px 28px; border-radius:8px; border:1px solid #1a1a1a; color:#1a1a1a; font-weight:700; transition: all .25s ease }
.btn-gen-outline:hover{ background:#1a1a1a; color:#fff; transform: translateY(-2px) }
.gen-cta-figure img{ width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 16px 48px rgba(0,0,0,.15); aspect-ratio:2/3; object-fit:cover }

/* Genetics reveal */
.gen-card.reveal{ opacity:0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease }
.gen-card.reveal.in{ opacity:1; transform:none }
/* Hero reveal targets */
.gen-hero-title.reveal,
.gen-hero-text.reveal,
.gen-hero-copy .btn-gen-dark.reveal,
.gen-hero-art.reveal{ opacity:0; transform:translateY(16px); transition: opacity .6s ease, transform .6s ease }
.gen-hero-title.reveal.in{ opacity:1; transform:none; transition-delay:.05s }
.gen-hero-text.reveal.in{ opacity:1; transform:none; transition-delay:.12s }
.gen-hero-copy .btn-gen-dark.reveal.in{ opacity:1; transform:none; transition-delay:.18s }
.gen-hero-art.reveal.in{ opacity:1; transform:none; transition-delay:.1s }

/* Card inner text subtle animation */
.gen-card .gen-card-title{ opacity:0; transform:translateY(10px); transition: opacity .45s ease, transform .45s ease }
.gen-card .gen-card-text{ opacity:0; transform:translateY(12px); transition: opacity .5s ease, transform .5s ease }
.gen-card.in .gen-card-title{ opacity:1; transform:none; transition-delay:.05s }
.gen-card.in .gen-card-text{ opacity:1; transform:none; transition-delay:.15s }

/* Stagger the three panels */
.gen-features-grid .gen-card.reveal:nth-child(1){ transition-delay: .00s }
.gen-features-grid .gen-card.reveal:nth-child(2){ transition-delay: .08s }
.gen-features-grid .gen-card.reveal:nth-child(3){ transition-delay: .16s }

/* Stagger the three panels */
.gen-features-grid .gen-card.reveal:nth-child(1){ transition-delay: .00s }
.gen-features-grid .gen-card.reveal:nth-child(2){ transition-delay: .08s }
.gen-features-grid .gen-card.reveal:nth-child(3){ transition-delay: .16s }

@media (prefers-reduced-motion: reduce){ 
  .gen-card.reveal, .gen-hero-title.reveal, .gen-hero-text.reveal, .gen-hero-copy .btn-gen-dark.reveal, .gen-hero-art.reveal{ opacity:1; transform:none }
}


/* Genetics responsive */
@media (max-width: 1024px){
  .gen-hero-grid{ grid-template-columns:1fr; text-align:left; gap:28px }
  .gen-hero-copy{ order:1 }
  .gen-hero-art{ order:2; max-width:520px; margin:0 auto }
  .gen-media-grid{ grid-template-columns:1fr }
  .gen-cta-grid{ grid-template-columns:1fr; gap:40px; text-align:center }
  .gen-cta-actions{ justify-content:center; display:flex }
}
@media (max-width: 640px){
  .gen-hero{ padding:60px 16px }
  .gen-media{ padding:60px 16px }
  .gen-features{ padding:60px 16px }
  .gen-cta{ padding:60px 16px }
}


/* Responsive: Cybersecurity */
@media (max-width: 1200px){
  .hero-content-grid{ grid-template-columns:50% 50% }
  /* REMOVED hero-sticky-bg rules - using hero-left-image now */
  .hero-person-img{ max-width:700px }
  .expertise-grid{ grid-template-columns:repeat(3, 1fr); gap:28px }
  .expertise-side-image{ display:none }
}

@media (max-width: 1024px){
  /* REMOVED all hero-sticky-bg and hero-sticky-inner rules */
  .hero-left-image{ position:relative; width:100%; height:420px; grid-column:1; grid-row:3 }
  .hero-content-wrapper{ background:#081B2C; min-height:auto }
  .hero-left-mask{ display:none }
  .hero-title-block{ position:static }
  .hero-content-grid{ grid-template-columns:1fr; grid-template-rows:auto auto auto auto; text-align:center; min-height:auto }
  .hero-title-block{ padding:60px 40px; grid-column:1; grid-row:1 }
  .hero-dashboard{ padding:40px; grid-column:1; grid-row:2 }
  .hero-solution-box{ padding:40px; grid-column:1; grid-row:4 }
  .solution-video-wrapper{ max-width:600px; padding-bottom:40%; margin:0 auto }
  
  .expertise-grid{ grid-template-columns:1fr; max-width:600px; margin:0 auto }
  
  .cta-container-cyber{ grid-template-columns:1fr; gap:48px; text-align:center }
}

@media (max-width: 640px){
  /* REMOVED hero-sticky-bg rule */
  .hero-left-image{ height:320px }
  .hero-title-block{ padding:48px 20px }
  .cyber-hero-title{ font-size:clamp(32px, 8vw, 42px); margin:0 0 20px }
  .cyber-hero-text{ font-size:15px; margin:0 0 24px }
  .hero-dashboard{ padding:20px }
  .hero-solution-box{ padding:28px 20px }
  .solution-title{ font-size:clamp(20px, 5vw, 28px); margin:0 0 20px }
  .solution-video-wrapper{ max-width:100%; padding-bottom:56.25% }
  
  .cyber-expertise{ padding:60px 16px }
  .expertise-header{ margin:0 0 40px }
  .expertise-title{ font-size:clamp(28px, 7vw, 36px) }
  .expertise-card{ padding:24px }
  .card-title-cyber{ font-size:20px }
  .card-text-cyber{ font-size:14px }
  
  .cyber-cta{ padding:60px 16px }
  .cta-container-cyber{ gap:36px }
  .cta-title-cyber{ font-size:clamp(28px, 7vw, 36px); margin:0 0 20px }
  .cta-text-cyber{ font-size:15px; margin:0 0 20px }
  .cta-trust{ font-size:14px; margin:0 0 24px }
  .btn-cyber-dark{ width:100%; padding:14px 32px }
}

/* =====================================
   Canonical Header & Footer Unification
   ===================================== */

/* Lock header/footer font to Home's header/footer stack (Inter) across all pages */
:is(header, .site-header),
:is(footer, .site-footer){
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* Container bounds and responsive gutters for header/footer only */
:is(header, .site-header) .container,
:is(footer, .site-footer) .container{
  width:100%;
  max-width:var(--container);
  padding-inline:clamp(16px, 4vw, 56px);
  margin-inline:auto;
}

/* Header canonical layout */
:is(header, .site-header){
  background:#fff;
  color:var(--text);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10;
  padding-top:var(--safe-top);
}
:is(header, .site-header) .header-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:clamp(56px, 7.5svh, 72px);
  gap:clamp(8px, 2vw, 20px);
}
:is(header, .site-header) .brand{ display:flex; align-items:center; gap:clamp(8px, 1.2vw, 12px) }
:is(header, .site-header) .logo{ width:clamp(28px, 3.2vw, 36px); height:clamp(28px, 3.2vw, 36px); border-radius:50%; object-fit:cover }
:is(header, .site-header) .brand-name{ font-weight:700; letter-spacing:.2px }
:is(header, .site-header) .brand-tag{ font-size:12px; color:var(--muted) }

/* Mobile nav ergonomics and overflow safety */
:is(header, .site-header) .primary-nav{
  display:flex; align-items:center; gap:clamp(12px, 2.2vw, 24px); flex-wrap:wrap;
}
:is(header, .site-header) .nav-link{
  display:inline-flex; align-items:center; min-height:44px; padding:10px 12px;
  color:#374151;
}
:is(header, .site-header) .nav-link:hover{ color:var(--text) }
:is(header, .site-header) .nav-link.active{ font-weight:600; color:var(--text) }
:is(header, .site-header) .nav-link:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:8px }
@media (max-width: 640px){
  :is(header, .site-header) .primary-nav{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
  :is(header, .site-header) .primary-nav::-webkit-scrollbar{ display:none }
}

/* Footer canonical layout */
:is(footer, .site-footer){
  background:#fbfaf7; color:#111827; margin-top:20px; padding-bottom: env(safe-area-inset-bottom, 0px);
}
:is(footer, .site-footer) .footer-top{
  display:flex; align-items:flex-start; gap:clamp(24px, 4vw, 60px); flex-wrap:wrap;
  padding-block:clamp(28px, 4.6vw, 36px); border-top:1px solid #e9e9ee;
}
:is(footer, .site-footer) .brand-footer{ display:flex; align-items:center; gap:12px; color:inherit }
:is(footer, .site-footer) .brand-footer .logo{ width:40px; height:40px }
:is(footer, .site-footer) .footer-columns{
  display:grid; grid-template-columns:repeat(2, minmax(220px, 1fr)); gap:clamp(24px, 4vw, 60px); flex:1;
}
@media (max-width: 800px){ :is(footer, .site-footer) .footer-columns{ grid-template-columns:1fr } }
:is(footer, .site-footer) .footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
:is(footer, .site-footer) .footer-links a{ color:#4b5563 }
:is(footer, .site-footer) .footer-bottom{ background:#0b0b0b; color:#fff; padding:clamp(12px, 2.6vw, 20px) 0; margin-top:10px; font-size:12px; text-align:center }

/* Images/icons in header/footer */
:is(header, .site-header) img,
:is(footer, .site-footer) img{ max-width:100%; height:auto; object-fit:contain }

/* Consistency guardrails: neutralize page-level font overrides within header/footer */
[class^="page-"] :is(header, .site-header),
[class^="page-"] :is(footer, .site-footer){
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}
[class^="page-"] :is(header, .site-header) *,
[class^="page-"] :is(footer, .site-footer) *{ font-family:inherit }

/* Optional sticky-to-bottom layout if header/main/footer exist on a page */
body{ min-height:100svh; display:grid; grid-template-rows:auto 1fr auto }

/* ===== Mobile Burger Menu (≤768px) ===== */
/* Hidden by default on desktop */
:is(header, .site-header) #nav-toggle{ display:none }

@media (max-width: 768px){
  /* Place brand + toggle on first row; nav drops to second row */
  :is(header, .site-header) .header-inner{ flex-wrap:wrap; position:relative }
  :is(header, .site-header) .brand{ flex:1 1 auto }

  /* Injected button styles */
  :is(header, .site-header) #nav-toggle{
    display:inline-grid; place-items:center; position:relative; z-index:13;
    width:44px; height:44px; border-radius:10px; cursor:pointer;
    border:1px solid var(--border); background:#fff; color:#111827;
    margin-left:auto;
    background-image:linear-gradient(currentColor, currentColor);
    background-repeat:no-repeat; background-position:center; background-size:22px 2px;
    transition: background-size var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std);
  }
  :is(header, .site-header) #nav-toggle::before,
  :is(header, .site-header) #nav-toggle::after{
    content:""; position:absolute; left:50%; transform-origin:center; translate:-50% 0;
    width:22px; height:2px; border-radius:2px; background:currentColor;
    transition: transform var(--dur-3) var(--ease-std), opacity var(--dur-2) var(--ease-std);
  }
  :is(header, .site-header) #nav-toggle::before{ transform:translateY(-6px) rotate(0deg) }
  :is(header, .site-header) #nav-toggle::after{ transform:translateY(6px) rotate(0deg) }

  /* Mobile panel (transform-based; no CLS) */
  :is(header, .site-header) :is(.primary-nav, .nav-links){
    position:absolute; left:8px; right:8px; top:calc(100% + 6px); z-index:12;
    display:flex; flex-direction:column; gap:clamp(8px, 2.5vw, 12px);
    opacity:0; transform:translateY(-8px) scale(.98);
    pointer-events:none;
    transition: opacity var(--dur-3) var(--ease-std), transform var(--dur-3) var(--ease-std);
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(160%) blur(10px);
    backdrop-filter:saturate(160%) blur(10px);
    border-radius:12px; padding:8px; box-shadow:var(--shadow-md);
    will-change:opacity, transform;
  }
  :is(header, .site-header) :is(.primary-nav, .nav-links) .nav-link{
    padding:12px 8px; min-height:44px;
    opacity:0; transform:translateY(-6px);
    transition: opacity var(--dur-3) var(--ease-std), transform var(--dur-3) var(--ease-std);
  }

  /* Open state */
  body[data-nav-open="true"] :is(header, .site-header) #nav-toggle{ background-size:0 2px }
  body[data-nav-open="true"] :is(header, .site-header) #nav-toggle::before{ transform:translateY(0) rotate(45deg) }
  body[data-nav-open="true"] :is(header, .site-header) #nav-toggle::after{ transform:translateY(0) rotate(-45deg) }
  body[data-nav-open="true"] :is(header, .site-header) :is(.primary-nav, .nav-links){
    opacity:1; transform:none; pointer-events:auto;
  }
  body[data-nav-open="true"] :is(header, .site-header) :is(.primary-nav, .nav-links) .nav-link{ opacity:1; transform:none }
  /* Staggered reveal (40ms steps) */
  body[data-nav-open="true"] :is(header, .site-header) :is(.primary-nav, .nav-links) .nav-link:nth-child(1){ transition-delay:40ms }
  body[data-nav-open="true"] :is(header, .site-header) :is(.primary-nav, .nav-links) .nav-link:nth-child(2){ transition-delay:80ms }
  body[data-nav-open="true"] :is(header, .site-header) :is(.primary-nav, .nav-links) .nav-link:nth-child(3){ transition-delay:120ms }
  body[data-nav-open="true"] :is(header, .site-header) :is(.primary-nav, .nav-links) .nav-link:nth-child(4){ transition-delay:160ms }
  body[data-nav-open="true"] :is(header, .site-header) :is(.primary-nav, .nav-links) .nav-link:nth-child(5){ transition-delay:200ms }
  body[data-nav-open="true"] :is(header, .site-header) :is(.primary-nav, .nav-links) .nav-link:nth-child(6){ transition-delay:240ms }

  /* Overlay behind dropdown */
  :is(header, .site-header) .nav-overlay{
    position:fixed; inset:0; z-index:11;
    background:rgba(17,24,39,0.22);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    opacity:0; pointer-events:none;
    transition: opacity var(--dur-3) var(--ease-std);
  }
  body[data-nav-open="true"] :is(header, .site-header) .nav-overlay{ opacity:.95; pointer-events:auto }

  /* Scroll lock while menu open */
  body[data-nav-open="true"]{ overflow:hidden; touch-action:none }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    :is(header, .site-header) :is(.primary-nav, .nav-links){ transition:none }
    :is(header, .site-header) :is(.primary-nav, .nav-links) .nav-link{ transition:none }
    :is(header, .site-header) .nav-overlay{ transition:none }
    :is(header, .site-header) #nav-toggle{ transition:none }
    :is(header, .site-header) #nav-toggle::before,
    :is(header, .site-header) #nav-toggle::after{ transition:none }
  }
}

/* Viewport unit hardening for mobile URL bars: prefer svh when supported */
@supports (height: 100svh){
  .section-collab{ min-height:80svh }
  .page-fitness .fitness-hero{ min-height:70svh }
  @media (max-width: 1024px){
    .page-fitness .fitness-hero{ min-height:60svh }
    .page-fitness .split{ min-height:40svh }
  }
  @media (max-width: 640px){
    .page-fitness .fitness-hero{ min-height:50svh }
    .page-fitness .split{ min-height:25svh }
  }
}

/* ==========================
   Contact Page Styles
   ========================== */
.page-contact{ font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif }

/* Section 1: Contact Hero - Let's talk AI solutions */
.contact-hero{ background:#e5e7eb; padding-block:clamp(80px, 12vh, 140px) clamp(60px, 10vh, 100px); min-height:746px; display:flex; align-items:center; overflow:hidden }
.contact-hero-inner{ max-width:1200px; margin-inline:auto; text-align:center; padding-inline:clamp(20px, 4vw, 40px); width:100% }
.contact-hero-content{ text-align:center; margin-bottom:clamp(48px, 8vh, 80px); max-width:100% }
.contact-eyebrow{ font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#111827; margin:0 0 20px }
.contact-hero-title{ margin:0 0 16px; font-size:clamp(42px, 5.5vw, 68px); line-height:1.05; font-weight:800; color:#111827; overflow-wrap:anywhere; hyphens:auto }
.contact-hero-subtitle{ margin:0; font-size:clamp(16px, 2vw, 20px); line-height:1.6; color:#374151; overflow-wrap:anywhere }

.contact-info-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(40px, 6vw, 80px); max-width:900px; margin-inline:auto }
.contact-info-card{ display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center }
.contact-icon{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:#6b7280; color:#fff; border-radius:8px }
.contact-icon svg{ width:32px; height:32px }
.contact-info-title{ margin:8px 0 4px; font-size:18px; font-weight:700; color:#111827 }
.contact-info-desc{ margin:0 0 8px; font-size:14px; color:#4b5563; line-height:1.6 }
.contact-info-link{ font-size:15px; font-weight:600; color:#111827; text-decoration:underline; transition:color .2s ease; word-break:break-word; overflow-wrap:anywhere }
.contact-info-link:hover{ color:#374151 }
.contact-address{ font-style:normal; font-size:15px; color:#374151; line-height:1.7 }
.contact-address p{ margin:2px 0 }

/* Section 2: Connect with AI experts today */
.contact-experts{ background:#e5e7eb; padding-block:clamp(60px, 10vh, 100px); min-height:897px; display:flex; align-items:center; overflow:hidden }
.contact-experts-inner{ max-width:800px; margin-inline:auto; text-align:center; padding-inline:clamp(20px, 4vw, 40px); width:100% }
.contact-experts-title{ margin:0 0 20px; font-size:clamp(36px, 5vw, 52px); line-height:1.15; font-weight:700; color:#111827; overflow-wrap:anywhere; hyphens:auto }
.contact-experts-subtitle{ margin:0 0 clamp(36px, 6vh, 60px); font-size:clamp(15px, 1.8vw, 18px); line-height:1.75; color:#374151; max-width:680px; margin-inline:auto; overflow-wrap:anywhere }
.contact-experts-figure{ margin:0; display:flex; justify-content:center }
.contact-experts-figure img{ display:block; width:100%; max-width:600px; height:auto; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.15) }

/* Section 3: Explore Solutions CTA */
.contact-cta{ position:relative; background:#2a2a2a url('https://static.wixstatic.com/media/044386_b32b01f2e2e748738ab327d315450223~mv2.png') center/cover no-repeat; min-height:746px; display:flex; align-items:center; justify-content:center; isolation:isolate; background-position:center 25%; overflow:hidden }
.contact-cta::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:1 }
.contact-cta-overlay{ position:relative; z-index:2; width:100%; display:flex; align-items:center; justify-content:center; padding-block:clamp(60px, 10vh, 100px) }
.contact-cta-inner{ max-width:820px; margin-inline:auto; text-align:center; padding-inline:24px }
.contact-cta-title{ margin:0 0 24px; font-size:clamp(40px, 5.2vw, 64px); line-height:1.1; font-weight:800; color:#fff; overflow-wrap:anywhere; hyphens:auto }
.contact-cta-text{ margin:0 0 36px; font-size:clamp(16px, 2vw, 20px); line-height:1.75; color:#e5e7eb; max-width:700px; margin-inline:auto; overflow-wrap:anywhere }
.btn-contact{ display:inline-flex; align-items:center; justify-content:center; padding:16px 36px; font-size:16px; font-weight:700; color:#fff; background:#111827; border:1px solid #0f172a; border-radius:8px; min-height:54px; transition:background .2s ease, transform .2s ease, box-shadow .2s ease; box-shadow:0 10px 28px rgba(0,0,0,.25) }
.btn-contact:hover{ background:#0f172a; transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.35) }
.btn-contact:active{ transform:translateY(0); box-shadow:0 8px 20px rgba(0,0,0,.2) }

/* Responsive: Contact Page */
/* Tablet landscape and smaller desktops */
@media (max-width: 1024px){
  .contact-hero-inner, .contact-experts-inner{ padding-inline:clamp(24px, 5vw, 48px) }
  .contact-info-grid{ gap:clamp(32px, 5vw, 60px) }
}

/* Tablets */
@media (max-width: 768px){
  .contact-info-grid{ grid-template-columns:1fr; gap:40px; max-width:500px }
  .contact-hero{ min-height:auto; padding-block:clamp(56px, 9vh, 80px) clamp(48px, 8vh, 70px) }
  .contact-experts{ min-height:auto; padding-block:clamp(56px, 9vh, 80px) }
  .contact-cta{ min-height:auto; padding-block:clamp(70px, 11vh, 100px); background-position:center 30% }
  .contact-experts-figure img{ max-width:100%; border-radius:10px }
  .contact-hero-content{ margin-bottom:clamp(40px, 7vh, 60px) }
  .contact-info-card{ gap:10px }
}

/* Small tablets and large phones */
@media (max-width: 640px){
  .contact-hero-title{ font-size:clamp(30px, 8.2vw, 44px); line-height:1.08 }
  .contact-experts-title{ font-size:clamp(26px, 6.8vw, 38px); line-height:1.12 }
  .contact-cta-title{ font-size:clamp(30px, 7.8vw, 48px); line-height:1.08 }
  .contact-hero-subtitle{ font-size:clamp(15px, 3.5vw, 18px); line-height:1.65 }
  .contact-experts-subtitle{ font-size:14px; line-height:1.7 }
  .contact-cta-text{ font-size:clamp(15px, 3.6vw, 18px); line-height:1.7; margin-bottom:30px }
  .contact-hero{ padding-block:clamp(44px, 8vh, 60px) clamp(40px, 7vh, 56px) }
  .contact-experts{ padding-block:clamp(44px, 8vh, 60px) }
  .contact-cta{ padding-block:clamp(56px, 10vh, 80px) }
  .contact-icon{ width:52px; height:52px }
  .contact-icon svg{ width:30px; height:30px }
  .contact-info-title{ font-size:17px }
  .contact-info-desc{ font-size:13px }
  .contact-info-link{ font-size:14px }
  .contact-address{ font-size:14px }
  .btn-contact{ padding:14px 32px; font-size:15px; min-height:50px }
  .contact-eyebrow{ font-size:11px; letter-spacing:1.3px; margin-bottom:16px }
}

/* Small phones: 360-430px */
@media screen and (min-width: 360px) and (max-width: 430px){
  .contact-hero-title{ font-size:clamp(26px, 7.8vw, 36px); margin-bottom:12px }
  .contact-hero-subtitle{ font-size:clamp(14px, 3.8vw, 16px) }
  .contact-experts-title{ font-size:clamp(24px, 6.5vw, 32px) }
  .contact-cta-title{ font-size:clamp(28px, 7.5vw, 42px) }
  .contact-cta-text{ font-size:14px; line-height:1.65 }
  .contact-hero{ padding-block:40px 36px }
  .contact-experts{ padding-block:40px }
  .contact-cta{ padding-block:50px; background-position:center 35% }
  .contact-hero-content{ margin-bottom:36px }
  .contact-info-grid{ gap:32px; max-width:100% }
  .contact-icon{ width:48px; height:48px }
  .contact-icon svg{ width:26px; height:26px }
  .contact-info-title{ font-size:16px }
  .contact-info-desc{ font-size:13px; line-height:1.5 }
  .contact-info-link{ font-size:13px }
  .contact-address{ font-size:13px; line-height:1.6 }
  .contact-address p{ margin:1px 0 }
  .btn-contact{ padding:12px 28px; font-size:14px; min-height:46px }
  .contact-eyebrow{ font-size:10px; letter-spacing:1.2px; margin-bottom:14px }
  .contact-experts-figure img{ border-radius:8px }
}

/* Ultra-wide desktops */
@media (min-width: 1600px){
  .contact-hero-inner, .contact-experts-inner{ max-width:1400px }
  .contact-info-grid{ max-width:1100px; gap:clamp(80px, 8vw, 120px) }
}

/* Utility: crop bottom 10% of an image */
.crop-btm-10{
  display:block;
  width:100%;
  height:auto;
  clip-path: inset(0 0 10% 0);
}