:root{
  --ink:#0f172a;
  --muted:#475569;
  --soft:#f8fafc;
  --card:#ffffff;
  --brand:#0a3d62;
  --brand-2:#1363a2;
  --gold:#c8a94d;
  --ring:rgba(19,99,162,.25);
  --shadow: 0 10px 25px rgba(2,12,27,.12), 0 2px 6px rgba(2,12,27,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--ink);
  background:#ffffff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Container */
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
/* Header / Nav */
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eef2f7;backdrop-filter:saturate(180%) blur(6px)}
.header .inner{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.nav a{color:#0b1e35;text-decoration:none;font-weight:600;padding:.5rem .75rem;border-radius:.6rem}
.nav a:hover{background:#f2f6fb}
/* Mobile menu */
.menu-toggle{display:none;border:1px solid #e5e7eb;border-radius:.7rem;padding:.5rem .65rem;background:#fff}
@media (max-width: 900px){
  .nav{display:none}
  .nav.show{display:block;position:absolute;top:64px;left:0;right:0;background:#fff;box-shadow:var(--shadow);padding:1rem .75rem}
  .menu-toggle{display:inline-flex;align-items:center;gap:.5rem}
  .header .inner{position:relative}
}
/* Hero */
.hero{position:relative;isolation:isolate;background:linear-gradient(135deg,#0a3d62 0%, #0a2540 100%);color:#fff;overflow:hidden}
.hero .overlay{
  position:absolute;inset:0;background:radial-gradient(60% 60% at 80% 20%, rgba(255,255,255,.15), transparent 60%);
  pointer-events:none
}
.hero .content{position:relative;z-index:2;padding:6rem 0;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.25rem);line-height:1.1;margin:0 0 .75rem}
.hero p{font-size:clamp(1rem,2.2vw,1.25rem);opacity:.95;margin:0 auto 1.5rem;max-width:800px}
.cta{display:inline-block;background:#fff;color:#0a3d62;padding:.9rem 1.2rem;border-radius:.9rem;
     font-weight:800;letter-spacing:.2px;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s}
.cta:hover{transform:translateY(-2px)}
.cta.secondary{background:#0a3d62;color:#fff;border:1px solid rgba(255,255,255,.2)}
/* Sections */
.section{padding:4rem 0}
.section h2{font-size:clamp(1.5rem,3.2vw,2.25rem);margin:0 0 1rem}
.lead{color:var(--muted);max-width:800px}
/* Cards */
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(12,1fr)}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-12{grid-column:span 12}
@media (max-width: 900px){
  .col-4,.col-6{grid-column:span 12}
}
.card{
  background:var(--card);border:1px solid #eef2f7;border-radius:1rem;padding:1.1rem;
  box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease
}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:#e3e8ef}
.card h3{margin:.25rem 0 .35rem}
.card .meta{color:var(--muted);font-size:.95rem}
/* Project tiles */
.project-tile{overflow:hidden;border-radius:1rem;position:relative;border:1px solid #e6eef6;background:#fff}
.project-tile .txt{padding:1rem}
.project-tile .badge{position:absolute;top:.6rem;left:.6rem;background:#0a3d62;color:#fff;font-size:.75rem;padding:.25rem .55rem;border-radius:.6rem}
/* Footer */
.footer{background:#0b1e35;color:#e6edf7}
.footer .inner{padding:2.2rem 0}
.footer a{color:#e6edf7;text-decoration:none}
.footer .brand{font-weight:800;letter-spacing:.4px}
/* Back to top */
#backToTop{
  position:fixed;right:1rem;bottom:1rem;display:none;border:1px solid #d1e0f0;background:#fff;
  padding:.65rem .8rem;border-radius:.9rem;box-shadow:var(--shadow);cursor:pointer
}
#backToTop.show{display:inline-flex}
/* Focus ring */
:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring)}
.video-break{border-radius:1rem;overflow:hidden;box-shadow:var(--shadow);border:1px solid #e6eef6}
/* Read more */
.readmore [data-extra]{display:none}
.readmore.expanded [data-extra]{display:inline}
.readmore .toggle{background:transparent;border:0;color:var(--brand-2);font-weight:700;cursor:pointer}
/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table tr{background:#fff;box-shadow:var(--shadow)}
.table td{padding:.85rem 1rem}


/* === Premium Enhancements (brand-matched) === */

/* Accent lighting using brand blues */
.accent-glow{
  box-shadow: 0 8px 28px rgba(10,61,98,.18), 0 2px 8px rgba(10,61,98,.10);
  border: 1px solid rgba(19,99,162,.18);
}

/* Scroll reveal baseline */
.reveal{opacity:0; transform:translateY(16px) scale(.985); transition:opacity .5s ease, transform .5s ease; will-change:opacity, transform}
.reveal.show{opacity:1; transform:none}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none}
}

/* Parallax hero */
.hero.parallax{overflow:hidden}
.hero.parallax .overlay{
  transform: translateY(calc(var(--scrollY, 0) * .12));
  will-change: transform;
}

/* Subtle gradient edge for cards */
.card.edge, .project-tile.edge{
  position:relative;
  border-radius:1rem;
}
.card.edge:before, .project-tile.edge:before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(19,99,162,.12), rgba(19,99,162,0));
  opacity:.65;
}

/* CTA hover lighting */
.cta{
  position:relative;
}
.cta:after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg, rgba(19,99,162,.0), rgba(19,99,162,.6), rgba(19,99,162,.0));
  border-radius:2px; opacity:.0; transition:opacity .25s ease;
}
.cta:hover:after{opacity:1}

/* Section headings underline */
.section h2{
  position:relative; display:inline-block; padding-bottom:.2rem;
}
.section h2:after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px; border-radius:3px;
  background: linear-gradient(90deg, rgba(10,61,98,.0), rgba(10,61,98,.55), rgba(10,61,98,.0));
}

/* Reveal durations stagger via CSS vars */
.reveal{transition-delay: var(--reveal-delay, 0ms)}



/* === Contrast & Luxury Pass === */

/* Softer site background and off-white cards to avoid stark white */
:root{
  --page:#f4f7fb;
  --card:#f7fafc; /* was #ffffff */
  --ink:#0e1a2b;
  --muted:#4a6078;
  --brand:#0a2745;
  --brand-2:#1769b3;
  --gold:#c8a94d; /* kept but unused per request */
}

/* Base */
body{ background:var(--page); color:var(--ink); }

/* Header: deep navy glass gradient + premium shadow, light links */
.header{
  background: linear-gradient(180deg, rgba(7,20,35,.95) 0%, rgba(7,20,35,.80) 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 10px 25px rgba(4,12,24,.22);
}
.header .inner{ padding:.9rem 0 }
.menu-toggle{ background: rgba(255,255,255,.06); color:#eaf2ff; border-color: rgba(255,255,255,.18) }
.nav a{ color:#eaf2ff !important; }
.nav a:hover{ background: rgba(255,255,255,.10) !important; }
.nav a:focus-visible{ box-shadow:0 0 0 3px rgba(198,216,255,.35) }

/* CTA buttons: less white; use soft blue */
.cta{ background:#eaf2ff; color:#0a3d62; border:1px solid rgba(10,61,98,.18) }
.cta.secondary{ background:#103454; color:#eaf2ff; border-color:rgba(255,255,255,.18) }
.cta:hover{ transform: translateY(-2px) scale(1.01) }

/* Cards & tiles: off-white with gentle gradient and premium border */
.card, .project-tile{
  background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
  border:1px solid #dde7f2 !important;
}
.card:hover, .project-tile:hover{ border-color:#cfdceb }

/* Video break frame on soft background */
.video-break{ background:#0b1e350a; border-color:#d7e3f1 }

/* Sections */
.section h2{ color:#0f1f33 }
.lead{ color:#4c637b }

/* Footer: very deep navy with high-contrast text */
.footer{
  background:#0a1526 !important;
  color:#eaf2ff !important;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer .inner{ padding:2.6rem 0 }
.footer a{ color:#cfe3ff !important; text-decoration:none }
.footer a:hover{ text-decoration:underline }
.footer .brand{ color:#ffffff; }
.footer .muted, .footer small{ color:#c2d3ea }

/* Back to Top on deep UI */
#backToTop{ background:#eaf2ff; border-color:#cfe0f5; color:#0a2745 }

/* Readability fix: any text on darker blocks should be bright */
.hero, .header, .footer{ color:#eaf2ff }
.hero p{ color:#eaf2ff }



/* === Full Black Theme === */
:root{
  --page:#000;
  --card:#111;
  --ink:#fff;
  --muted:#d0d0d0;
  --brand:#fff;
  --brand-2:#e0e0e0;
  --shadow:0 10px 25px rgba(255,255,255,.05);
}

body{ background:#000 !important; color:#fff !important; }
.header, .footer, .hero, .section, .card, .project-tile, .video-break{
  background:#000 !important; color:#fff !important;
  border-color:rgba(255,255,255,.08) !important;
}
.header{box-shadow:0 10px 25px rgba(255,255,255,.08)}
.footer{box-shadow:0 -10px 25px rgba(255,255,255,.08)}
.nav a{color:#fff !important}
.nav a:hover{background:rgba(255,255,255,.1) !important}
.cta{background:#fff !important;color:#000 !important;border:0 !important}
.cta.secondary{background:#222 !important;color:#fff !important;border:1px solid #444 !important}
.card, .project-tile{
  background:#111 !important;color:#fff !important;border:1px solid #222 !important;
}
.card h3, .project-tile h3, .section h2, .footer a{color:#fff !important}
.footer a:hover{text-decoration:underline}
.readmore .toggle{color:#fff !important}



/* === Premium Pass: Background + Hero polish + CTA contrast === */

/* Replace pure black page with a deep gradient background */
body{
  background:
    radial-gradient(1200px 600px at 80% 10%, #1a2332 0%, rgba(26,35,50,0) 60%),
    radial-gradient(1000px 500px at 10% 90%, #0e1624 0%, rgba(14,22,36,0) 55%),
    linear-gradient(180deg, #0b1220 0%, #141a24 60%, #0f1722 100%) !important;
}

/* Soft animated shimmer across the page */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(60% 120% at 100% -10%, rgba(255,255,255,.04), transparent 60%),
              radial-gradient(70% 90% at -10% 110%, rgba(255,255,255,.03), transparent 60%);
  animation: bgSweep 14s linear infinite;
}
@keyframes bgSweep{
  0%{ transform: translateX(-2%) translateY(0%) }
  50%{ transform: translateX(2%) translateY(-1%) }
  100%{ transform: translateX(-2%) translateY(0%) }
}

/* Ensure layout content sits above animated bg */
.header, .hero, .section, .footer{ position:relative; z-index:1; }

/* Cards stay black for the "premium box" look */
.card, .project-tile{
  background:#111 !important; color:#fff !important; border:1px solid #242a33 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}

/* HERO polish: classy gradient + accent lines via overlays */
.hero.rich{
  background:
    linear-gradient(135deg, rgba(15,24,38,.92) 0%, rgba(18,30,48,.92) 60%, rgba(22,34,54,.92) 100%),
    linear-gradient(180deg, #0b1220, #0f1722);
  overflow: hidden;
}
.hero.rich::before, .hero.rich::after{
  content:""; position:absolute; inset:-20%; pointer-events:none; z-index:1;
}
.hero.rich::before{
  background: radial-gradient(600px 300px at 85% 20%, rgba(143,191,255,.18), transparent 60%),
              radial-gradient(500px 260px at 10% 85%, rgba(120,180,255,.10), transparent 60%);
  filter: blur(2px);
}
.hero.rich::after{
  background-image: 
    linear-gradient(120deg, rgba(255,255,255,.06) 0 1px, transparent 1px),
    linear-gradient(300deg, rgba(255,255,255,.04) 0 1px, transparent 1px);
  background-size: 28px 28px, 22px 22px;
  opacity:.25;
  mix-blend-mode: overlay;
}

/* CTA contrast: always readable */
.cta, .hero .cta{
  background:#ffffff !important;
  color:#0b1220 !important;
  border:1px solid rgba(255,255,255,.2) !important;
  text-shadow:none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35) !important;
}
.cta:hover{ transform: translateY(-2px) scale(1.01) }

/* Secondary CTA */
.cta.secondary{
  background:#222 !important; color:#fff !important; border:1px solid #3a3f46 !important;
}

/* Service boxes readability: force pure white text */
.service, .service-card, .services .card, .services .service-card, .services .card *{
  color:#fff !important;
}

/* Links inside dark cards */
.card a{ color:#cfe3ff !important; }
.card a:hover{ text-decoration:underline; }

/* Footer + Header refined to match new background but keep contrast */
.header{
  background: linear-gradient(180deg, rgba(10,18,30,.95) 0%, rgba(10,18,30,.82) 100%) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.footer{
  background: linear-gradient(180deg, #0a1320 0%, #0b1421 100%) !important;
  color:#eaf2ff !important;
}
.footer a{ color:#d6e6ff !important; }



/* === Feedback Pass 2: Contrast, Hero style, Background, Buttons === */

/* 1) Professional site background (no black): light slate gradient + soft film */
body{
  color:#0f1f33 !important;
  background:
    radial-gradient(1600px 900px at 85% 10%, #f3f7fd 0%, rgba(243,247,253,0) 65%),
    radial-gradient(1200px 700px at 5% 95%, #edf2fa 0%, rgba(237,242,250,0) 55%),
    linear-gradient(180deg, #eef3f9 0%, #e9eef6 100%) !important;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 120% at 100% -10%, rgba(0,27,71,.06), transparent 60%),
    radial-gradient(70% 90% at -10% 110%, rgba(0,27,71,.05), transparent 60%);
  opacity:.6;
  filter: saturate(1.1);
  animation: bgSweep2 22s linear infinite;
}
@keyframes bgSweep2{
  0%{ transform: translateX(-1%) translateY(0%) }
  50%{ transform: translateX(1%) translateY(-1%) }
  100%{ transform: translateX(-1%) translateY(0%) }
}

/* Keep cards black for premium contrast */
.card, .project-tile{
  background:#0f1115 !important; color:#fff !important; border:1px solid #1f2833 !important;
  box-shadow: 0 14px 28px rgba(12,18,28,.25);
}
.card h3, .project-tile h3{ color:#fff !important }
.card .meta{ color:#c9d6e8 !important }

/* 2) Header CTA: dark gradient (readable), not bright white */
.header .cta{
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  color:#ffffff !important;
  border:1px solid #233146 !important;
  text-shadow:none !important;
  box-shadow: 0 10px 22px rgba(2,8,23,.35) !important;
}

/* Header links */
.header .nav a{ color:#eaf2ff !important }
.header .nav a:hover{ background: rgba(255,255,255,.10) !important }

/* 3) Hero: add rich styling (gridlines + corner accent + gradient ring) */
.hero.rich{
  color:#ffffff !important;
  background:
    radial-gradient(800px 380px at 82% 18%, rgba(92,164,255,.20), transparent 60%),
    radial-gradient(700px 360px at 10% 85%, rgba(140,190,255,.12), transparent 60%),
    linear-gradient(135deg, #0e1624 0%, #0f1c2e 60%, #0a1626 100%) !important;
}
.hero.rich .content{ padding:6rem 0 5rem !important }
.hero.rich::before, .hero.rich::after{ content:""; position:absolute; inset:0; pointer-events:none }
.hero.rich::before{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity:.18; mix-blend-mode: overlay;
}
.hero.rich::after{
  width:60vmax; height:60vmax; left:50%; top:40%;
  transform: translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle at center, rgba(141,184,255,.22), rgba(141,184,255,0) 60%);
  filter: blur(12px);
  opacity:.35;
}

/* 4) Button/readability system */
/* Base buttons */
button, .button, .btn, .cta{
  font-weight:800 !important;
  letter-spacing:.2px;
  border-radius:.9rem;
}
/* Gray buttons -> readable dark treatment */
.btn, .button, .cta.secondary, .btn-secondary{
  background:#1b2432 !important;
  color:#ffffff !important;
  border:1px solid #2a3444 !important;
  box-shadow: 0 8px 18px rgba(5,12,24,.25) !important;
}
/* Hover */
.btn:hover, .button:hover, .cta.secondary:hover, .cta:hover{
  transform: translateY(-2px);
}

/* Ensure links inside dark buttons stay white */
.btn a, .button a, .cta a{ color:#ffffff !important; text-decoration:none }

/* 5) Explore Services: tighten container & padding */
.hero .cta, .hero .btn, .hero .button{
  padding:.8rem 1.15rem !important;
  font-size:1rem !important;
}
.hero .cta-wrap, .hero .actions, .hero .btn-wrap{
  margin-top:1rem !important;
  gap:.5rem !important;
}

/* 6) Footer remains dark and readable on light page bg */
.footer{
  background: linear-gradient(180deg, #0b1523 0%, #0c1626 100%) !important;
  color:#eaf2ff !important;
}
.footer a{ color:#d6e6ff !important }



/* === Slate Gradient Footer & CTA Block (matches header) === */
.footer{
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  color:#eaf2ff !important;
  border-top:1px solid rgba(255,255,255,.06);
  box-shadow: 0 -10px 24px rgba(3,10,24,.25);
}
.footer a{ color:#cfe3ff !important }

/* Slate CTA block (for "Need stamped drawings..." section) */
.slate-cta{
  position:relative;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  color:#ffffff !important;
  border:1px solid #243247;
  border-radius: 1rem;
  padding: 2rem 1.25rem;
  box-shadow: 0 16px 36px rgba(2,8,23,.35);
}
.slate-cta::before{
  content:""; position:absolute; inset:-2px; border-radius:1.1rem; pointer-events:none;
  background:
    radial-gradient(600px 260px at 85% 15%, rgba(143,191,255,.18), transparent 60%),
    radial-gradient(500px 240px at 10% 95%, rgba(120,180,255,.10), transparent 60%);
  opacity:.6; filter: blur(2px);
}
.slate-cta h2, .slate-cta h3, .slate-cta p, .slate-cta a{ color:#ffffff !important }
.slate-cta .cta, .slate-cta .btn{
  background:#ffffff !important; color:#0b1220 !important; border:1px solid rgba(255,255,255,.2) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.35) !important;
}



/* === Footer Readability & Credit Placement === */
.footer{
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  color:#f4f8ff !important;
}
.footer .inner{ display:flex; flex-direction:column; gap:1.25rem }
.footer h4, .footer h5, .footer .heading{
  color:#ffffff !important; font-weight:800; letter-spacing:.3px;
}
.footer nav a, .footer a{
  color:#e6f0ff !important; opacity:1 !important;
}
.footer nav a:hover, .footer a:hover{ text-decoration:underline }
.footer .muted, .footer small, .footer p{ color:#d7e6ff !important }
.footer .list, .footer ul{ list-style:none; padding:0; margin:.25rem 0 }
.footer li{ margin:.35rem 0 }
.footer .credit{
  margin-top:.75rem; padding-top:.75rem;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center; color:#cfe0ff !important;
}
.footer .credit a{ color:#ffffff !important; font-weight:700 }



/* === Final Polish: White Bold Footer, Spacing Fix, Blue Section Style === */

/* Footer full white bold text */
.footer, .footer *{
  color:#ffffff !important;
  font-weight:700 !important;
}

/* Remove extra whitespace between sections */
section, .section{
  margin:0 !important;
  padding-top:4rem !important;
  padding-bottom:4rem !important;
}
body > * + *{
  margin-top:0 !important;
}

/* Convert old black sections to deep blue gradient */
section, .section, .slate-cta, .card-section{
  background: linear-gradient(180deg, #0f1c2e 0%, #132742 100%) !important;
  border-color:#1f3657 !important;
}
.hero.rich, .hero{
  background: linear-gradient(135deg, #102138 0%, #15365a 100%) !important;
}
.card, .project-tile{
  background:#111827 !important;
  border:1px solid #1e293b !important;
  box-shadow:0 14px 28px rgba(15,27,48,.25);
}



/* === V7: Footer contrast, spacing cleanup, blue section bands === */

/* Footer: all white + bold */
.footer, .footer *{
  color:#ffffff !important;
  font-weight:800 !important;
}
.footer a{ text-decoration:none }
.footer a:hover{ text-decoration:underline }

/* Spacing cleanup: remove empty gaps */
.section{ padding:3.25rem 0 }
.section > *:first-child{ margin-top:0 !important }
.section > *:last-child{ margin-bottom:0 !important }
.section + .section{ margin-top:0 !important }

/* Hide common spacer/gap elements */
.spacer, .space, .gap, .divider, .section-divider{
  display:none !important; height:0 !important; margin:0 !important; padding:0 !important; border:0 !important;
}

/* Blue band theme for formerly-black sections (not cards) */
.section.dark, .band, .cta-band, .promo-band, .video-break{
  background: linear-gradient(135deg, #0b1f3a 0%, #132a4e 100%) !important;
  color:#ffffff !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 10px 26px rgba(8,18,36,.35);
}
.section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4,
.band h1, .band h2, .band h3, .band h4,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4,
.promo-band h1, .promo-band h2, .promo-band h3, .promo-band h4,
.video-break h1, .video-break h2, .video-break h3{
  color:#ffffff !important;
}

/* Keep cards black; ensure overrides don't leak in */
.card, .project-tile{
  background:#0f1115 !important;
  color:#ffffff !important;
  border:1px solid #1f2833 !important;
}

/* Buttons inside dark bands: readable */
.section.dark .cta, .band .cta, .cta-band .cta, .promo-band .cta, .video-break .cta{
  background:#ffffff !important; color:#0e1724 !important; border:1px solid rgba(255,255,255,.2) !important;
}



/* === V8: Hero parity, Footer contrast, About readability === */

/* Unify hero typography */
.hero.rich .content{
  max-width: 1100px; margin: 0 auto; text-align: left; padding: 6rem 1rem 5rem !important;
}
.hero.rich .kicker{
  display:inline-block; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  color:#bcd6ff; opacity:.95; margin-bottom:.6rem; font-size:.85rem;
}
.hero.rich h1{
  font-size:clamp(2rem,4.5vw,3.25rem); line-height:1.1; margin:.25rem 0 .6rem; color:#ffffff !important;
}
.hero.rich p.lead{
  max-width: 60ch; color:#e7f0ff !important; font-size: clamp(1rem, 2.1vw, 1.2rem);
  margin: 0 0 1.1rem;
}
.hero.rich .actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem }
.hero.rich .actions .cta{ padding:.85rem 1.15rem !important; font-size:1rem !important }

/* Footer: max contrast + subtle glow to lift off background */
.footer, .footer *{
  color:#ffffff !important;
  font-weight:800 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
  opacity:1 !important;
}
.footer nav a{ color:#ffffff !important }
.footer .credit{ color:#ffffff !important }
.footer .credit a{ color:#ffffff !important; text-decoration:underline }

/* About page readability (avoid low-contrast text on light sections) */
.page-about, body.about, .about-page{
  color:#0f1f33 !important;
}
.page-about .section:not(.dark):not(.band):not(.cta-band),
.about-page .section:not(.dark):not(.band):not(.cta-band){
  color:#0f1f33 !important;
}
.page-about .section.dark, .about-page .section.dark,
.page-about .band, .about-page .band{
  color:#ffffff !important;
}
.page-about .card, .about-page .card{ color:#ffffff !important } /* cards remain dark */

/* Buttons inside light sections: ensure visible */
.section:not(.dark):not(.band) .cta{
  background:#0f172a !important; color:#ffffff !important; border:1px solid #233146 !important;
}



/* === V9: Gradient hero text === */
.grad-text{
  background: linear-gradient(90deg, #b7d3ff 0%, #78b4ff 40%, #53d0ff 75%, #8de8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.hero.rich h1.grad-text{
  text-shadow: none !important;
}
.hero.rich .kicker.grad-text{
  opacity: 1 !important;
}



/* === V12: Global hero gradient text + two-column hero layout === */

/* Gradient text applied to all hero typographic elements */
.hero .kicker, .hero h1, .hero h2, .hero .lead, .hero .title{
  background: linear-gradient(90deg, #b7d3ff 0%, #78b4ff 40%, #53d0ff 75%, #8de8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Two-column hero layout (text left, media right) */
.hero.rich .wrap{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(1rem, 4vw, 3rem);
  align-items:center;
}
@media (max-width: 900px){
  .hero.rich .wrap{ grid-template-columns: 1fr; }
  .hero.rich .aside{ order:2 }
  .hero.rich .content{ order:1 }
}
.hero.rich .content{ padding: 4.5rem 0 4rem !important }
.hero.rich .aside{
  border-radius: 1rem;
  background: #0b1220;
  box-shadow: 0 18px 44px rgba(2,8,23,.55);
  border: 1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.hero.rich .aside video, .hero.rich .aside .video, .hero.rich .aside .media{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* Ensure CTA buttons over gradient text are readable */
.hero .cta{ 
  background:#ffffff !important; color:#0a1a2e !important; border:1px solid #d7e6ff !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.25) !important;
}



/* === V13: Larger hero video for About & Projects === */
.hero.rich .aside{
  min-height: 460px; /* bigger default */
}
@media (min-width: 1100px){
  .hero.rich .aside{ min-height: 540px; }
}
.hero.rich .aside video{ min-height: 100%; }



/* === V15: Global readability + unified brighter hero gradient === */

/* Global default text: white + soft glow for readability on blue backgrounds */
html, body, body *:not(.grad-text){
  color:#ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Keep links readable and consistent */
a{ color:#ffffff !important }
a:hover{ text-decoration:underline }

/* Buttons: if button background is white, force dark label for contrast */
.cta{ font-weight:800 }
.cta[style*="background:#ffffff"], .cta.bg-white{
  color:#0a1a2e !important;
  text-shadow:none !important;
}

/* Brighter unified hero gradient (same everywhere) */
.hero .kicker, .hero h1, .hero h2, .hero .lead, .hero .title{
  background: linear-gradient(90deg, #d8e9ff 0%, #9fd0ff 35%, #6fdcff 68%, #b5f0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 2px 6px rgba(10,20,40,.25);
}

/* Ensure hero layout readability unaffected */
.hero .cta{ 
  background:#ffffff !important; 
  color:#0a1a2e !important; 
  border:1px solid #d7e6ff !important;
  text-shadow:none !important;
}

/* Preserve dark cards look */
.card, .project-tile{
  background:#0f1115 !important; 
  color:#ffffff !important; 
  border:1px solid #1f2833 !important; 
  box-shadow: 0 14px 28px rgba(12,18,28,.25);
}
.card h3, .project-tile h3{ color:#ffffff !important }



/* === V16: About hero height tweak + Team section polish === */
/* Make About hero a bit shorter */
.page-about .hero.rich .content, body.about .hero.rich .content, .about-page .hero.rich .content{
  padding: 3.5rem 0 3rem !important;
}
/* Team section spacing */
.section.team{ padding: 3rem 0 3.25rem !important; }
.section.team h2{ margin-bottom: .5rem }
.section.team p.lead{ margin: 0 0 1.25rem }
/* Team cards use existing card styling; tighten inner padding if needed */
.section.team .card{ padding: 1.1rem }
.section.team .role{ font-weight: 900; letter-spacing: .2px; margin: .1rem 0 .25rem }
.section.team .desc{ opacity: .95 }



/* === V17: Full-bleed, centered heroes with subtle parallax === */
.hero.rich{
  margin:0 !important;
  border:0 !important;
}
/* Center the hero content vertically and reduce overall height */
.hero.rich .wrap{
  min-height: clamp(320px, 42vh, 560px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
/* If page uses two-column hero (text/media), keep it but center vertically */
.hero.rich .wrap.has-aside{
  grid-template-columns: 1.2fr 1fr;
}
@media (max-width: 900px){
  .hero.rich .wrap.has-aside{ grid-template-columns: 1fr; }
}
/* Tighten padding */
.hero.rich .content{ padding: clamp(1.8rem, 5vw, 2.8rem) 0 !important; }
/* Remove any unintended edges */
.hero.rich::before, .hero.rich::after{ margin:0 !important }
/* Subtle parallax: background and overlays will shift slightly */
.hero.parallax .overlay, .hero.parallax::before, .hero.parallax::after{
  transform: translateY(calc(var(--scrollY, 0) * .08));
  will-change: transform;
}



/* v20: Larger index/services heroes + animated scroll cue */
.page-home .hero.rich .wrap, body.home .hero.rich .wrap,
.page-services .hero.rich .wrap, body.services .hero.rich .wrap{
  min-height: clamp(520px, 70vh, 860px);
}
.scroll-cue{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  width:24px; height:36px; border:2px solid rgba(255,255,255,.85); border-radius:16px;
  opacity:.95;
}
.scroll-cue::after{
  content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; border-radius:2px;
  background:#fff; transform:translateX(-50%);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue{
  0%{ opacity:0; transform:translate(-50%,0) }
  30%{ opacity:1 }
  100%{ opacity:0; transform:translate(-50%,12px) }
}



/* v21: Make index & services hero videos ~4× larger (cinematic full-viewport) */
.page-home .hero.rich .wrap, body.home .hero.rich .wrap,
.page-services .hero.rich .wrap, body.services .hero.rich .wrap{
  min-height: clamp(820px, 100vh, 1200px);
}

/* Ensure background video covers and scales perfectly */
.hero .bg-video, .hero .bg-video video{
  width:100%; height:100%; object-fit:cover;
}


/* v22: Restore hero height; enlarge hero aside on Index & Services */
.page-home .hero.rich .wrap, body.home .hero.rich .wrap,
.page-services .hero.rich .wrap, body.services .hero.rich .wrap{
  min-height: clamp(320px, 42vh, 560px); /* back to original feel */
}

/* Make the right-side container (aside) larger on index & services */
.page-home .hero.rich .wrap.has-aside,
.page-services .hero.rich .wrap.has-aside{
  grid-template-columns: 1.05fr 1.35fr; /* give more space to the right block */
}

.page-home .hero.rich .aside,
.page-services .hero.rich .aside{
  min-height: clamp(260px, 46vh, 520px);
}

/* Keep the rounded, premium card look */
.page-home .hero.rich .aside,
.page-services .hero.rich .aside{
  border-radius: 22px;
  box-shadow: 0 28px 60px rgba(6,12,22,.45);
}



/* === Hero unified gradient + video overlay (injected) === */
:root{
  --hero-grad-start: #0f2b3d;   /* deep teal-navy */
  --hero-grad-end:   #0c2033;   /* dark blue */
}
.hero,
.hero-section{
  position: relative;
  overflow: hidden;
  background: transparent !important; /* kill any solid blocks */
}
.hero video,
.hero-section video{
  width: 100%;
  height: clamp(40vh, 68vh, 84vh);
  object-fit: cover;
  display: block;
}
.hero-overlay,
.hero .overlay,
.hero-section .hero-overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
}
.hero-overlay::before,
.hero .overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 30%, rgba(13,40,57,0.35) 0%, rgba(12,32,51,0.65) 40%, rgba(10,25,41,0.85) 100%), 
              linear-gradient(180deg, var(--hero-grad-start) 0%, var(--hero-grad-end) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.hero-overlay > *,
.hero .overlay > *{ position: relative; z-index: 1; }

.hero-overlay h1,
.hero .overlay h1{
  color: #e6f4ff;
  letter-spacing: .08em;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
}
/* Remove any margin gaps directly under headers when hero follows */
header + .hero,
header + .hero-section{ margin-top: 0 !important; }
/* Kill accidental white stripes/sections behind hero */
.page-hero, .hero-bg, .hero-strip, .page-title-bar{
  background: transparent !important;
  box-shadow: none !important;
}


/* === Hero Title Gradient (text only) === */
:root{
  --title-grad-start:#a8d8ff; /* light aqua */
  --title-grad-end:#78bdfc;   /* light blue */
}
.hero-overlay::before,
.hero .overlay::before{
  background: none !important; /* remove full-hero gradient overlay */
}
.hero-overlay h1,
.hero .overlay h1{
  background: linear-gradient(90deg, var(--title-grad-start), var(--title-grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-transform: uppercase;
  letter-spacing:.08em;
  font-weight:800;
}


/* === Fix: hero title too bright / glow removal === */
.hero-overlay h1,
.hero .overlay h1{
  text-shadow: none !important;
  opacity: 0.92;
}
/* Remove any leftover white/light overlays */
.hero-overlay::before,
.hero .overlay::before{
  background: none !important;
}


/* === Project detail hero (no video) === */
.project-hero{
  background:#0b1625; /* deep navy */
  padding: clamp(48px, 10vh, 96px) 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.project-hero .container{ max-width:1100px; margin:0 auto; }
.project-hero h1{
  margin:0 0 8px 0;
  line-height:1.1;
  letter-spacing:.06em;
  font-weight:800;
  text-transform:uppercase;
  background: linear-gradient(90deg, #a8d8ff, #78bdfc);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow:none;
}
.project-hero p.tagline{
  margin:0;
  color:#c9d6e8;
  opacity:.92;
}
/* Kill any residual 'title bar' strips */
header + .page-title-bar,
header + .title,
header + .page-hero,
header + .breadcrumb,
header + .hero-strip{ display:none !important; }


/* === Gradient text for project titles & taglines (words only) === */
:root{
  --title-grad-start:#a8d8ff;
  --title-grad-end:#78bdfc;
}
/* Project hero (plain) */
.project-hero h1,
.project-hero .tagline{
  background: linear-gradient(90deg, var(--title-grad-start), var(--title-grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
}
/* In case any project still uses a video hero with overlay */
.hero-overlay h1,
.hero-overlay .tagline{
  background: linear-gradient(90deg, var(--title-grad-start), var(--title-grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
}