:root{
  --bg:#05070b;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --accent:#00cfff;
  --footerCyan:#12b5e6; /* darker cyan-blue */ /* cyan-blue as requested */
  --max:1180px;
  --glass-bg: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.14);
  --glass-shadow: 0 18px 60px rgba(0,0,0,.45);
  --dimA: .40;
  --dimB: .78;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* HERO */
.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
}
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.hero__overlay{
  position:absolute; inset:0;
  z-index:1;
  background:
    radial-gradient(1200px 700px at 20% 30%, rgba(0,0,0,0.10), rgba(0,0,0,0.75)),
    linear-gradient(to top, rgba(0,0,0,0.68), rgba(0,0,0,0.25));
}

/* NAV */
.nav{
  position:relative;
  z-index:2;
  max-width:var(--max);
  margin:0 auto;
  padding:22px 22px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.nav--solid{
  padding:18px 22px;
  background: rgba(10,12,18,.35);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.brand{display:flex;align-items:center;min-width:160px}
.brand__logo{height:42px;width:auto;display:block}

.nav__links{
  display:flex;
  align-items:center;
  gap:26px;
  flex:1;
  justify-content:center;
  white-space:nowrap;
}
.nav__link{
  font-weight:600;
  transition: transform 160ms ease, color 160ms ease, font-weight 160ms ease;
  font-size:13px;
  letter-spacing:.12em;
  color:rgba(255,255,255,.82);
  padding:10px 0;
}
.nav__link.is-active{color:var(--accent); font-weight:800}
.nav__link:hover{color:var(--accent); transform:scale(1.06); font-weight:800}

.nav__hamburger{
  display:none;
  background:transparent;
  border:0;
  width:44px;height:44px;
  border-radius:10px;
  cursor:pointer;
  padding:10px;
}
.nav__hamburger span{
  display:block;height:2px;
  background:rgba(255,255,255,.82);
  margin:6px 0;border-radius:2px;
}

/* HERO CONTENT */
.hero__content{
  position:relative;
  z-index:2;
  max-width:var(--max);
  margin:0 auto;
  padding:92px 22px 40px;
}
.hero__title{
  font-size:clamp(44px,7vw,78px);
  line-height:.95;
  margin:0 0 18px;
  font-weight:800;
  letter-spacing:.02em;
}
.hero__subtitle{
  margin:0 0 54px;
  font-size:clamp(18px,2.2vw,28px);
  font-weight:300;
  color:var(--muted);
  max-width:820px;
  line-height:1.35;
}

.hero__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  margin-top:120px;
}
.hero__grid--two{grid-template-columns:repeat(2,minmax(0,1fr));}
.card{
  padding:12px 0 0;
  border-top:1px solid rgba(255,255,255,.16);
  display:block;
}
.card--button{
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
  width:100%;
}
.card__kicker{
  font-size:13px;
  letter-spacing:.14em;
  font-weight:800;
  color:var(--accent);
  margin-bottom:12px;
}
.card__title{
  margin:0 0 14px;
  font-size:18px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:.02em;
  color:rgba(255,255,255,.9);
  text-transform:uppercase;
}
.card__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  letter-spacing:.10em;
  font-weight:700;
  color:rgba(255,255,255,.86);
}
.card:hover .card__link{color:rgba(255,255,255,1)}

.scrollDown{
  position:absolute;
  right:22px;
  bottom:22px;
  width:54px;height:54px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.28);
  color:white;
  cursor:pointer;
  display:grid;
  place-items:center;
  backdrop-filter: blur(6px);
}
.scrollDown:hover{background:rgba(0,0,0,.38)}
.scrollDown__arrow{font-size:22px;transform:translateY(-1px)}

/* MAIN SECTIONS */
.main{background:var(--bg)}
.section{
  border-top:1px solid rgba(255,255,255,.08);
  padding:80px 22px;
}
.section__inner{max-width:var(--max);margin:0 auto}
.section h2{margin:0 0 12px;font-size:28px}
.section p{margin:0;color:rgba(255,255,255,.72);max-width:760px;line-height:1.6}

/* PAGE HERO */
.pageHero{
  background:linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,0));
  border-bottom:1px solid rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}
.pageHero__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:64px 22px 92px;
  position: relative;
  z-index: 2;
}
.pageHero__title{
  margin:0 0 10px;
  font-size:clamp(34px,5vw,56px);
  letter-spacing:.10em;
  font-weight:800;
}
.pageHero__subtitle{margin:0;color:rgba(255,255,255,.72);max-width:820px;line-height:1.6}

/* PROJECTS */
.projectGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.projectCard{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
}
.projectCard__thumb{
  height:160px;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.projectCard__title{margin:14px 14px 6px;font-size:16px}
.projectCard__meta{margin:0 14px 14px;color:rgba(255,255,255,.65);font-size:13px;line-height:1.4}

/* SERVICES */
.serviceGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.serviceCard{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.03);
  padding:18px;
}
.serviceCard h3{margin:0 0 8px}
.serviceCard p{margin:0;color:rgba(255,255,255,.72);line-height:1.6}

/* CONTACT */
.contactCards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  max-width:760px;
}
.contactCard{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.03);
  padding:18px;
}
.contactCard h3{margin:0 0 10px}
.contactLink{text-decoration:underline;text-underline-offset:3px}
.contactNote{margin-top:18px;color:rgba(255,255,255,.6)}

/* WETA-LIKE FOOTER */
.wetaFooter{
  position:relative;
  overflow:hidden;
  background:transparent;
  color:rgba(255,255,255,.92);
  padding:0;
}
.wetaFooter::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(900px 380px at 20% 20%, rgba(0,207,255,.12), rgba(0,0,0,0)),
              radial-gradient(900px 380px at 80% 30%, rgba(46,199,255,.10), rgba(0,0,0,0)),
              rgba(0,0,0,.85);
  z-index:0;
}
.wetaFooter__inner{ position:relative; z-index:1; }

.wetaFooter__inner{
  max-width:1480px;
  margin:0 auto;
  padding:22px 54px;
  display:flex;
  justify-content:space-between;
  gap:28px;
}
.wetaFooter__left{
  display:flex;
  flex-direction:row;
  gap:44px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.wetaItem{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.wetaIcon{
  width:38px;height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:#000;
}
.wetaLabel{
  font-weight:800;
  letter-spacing:.10em;
  font-size:13px;
}
.wetaValue{
  margin-top:6px;
  font-weight:600;
  letter-spacing:.06em;
  font-size:16px;
}

.wetaFooter__right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:space-between;
  flex:1;
}
.wetaFollowRow{
  display:flex;
  align-items:center;
  gap:14px;
}
.wetaFollow{
  font-weight:800;
  letter-spacing:.12em;
  font-size:14px;
}
.wetaSocial{
  display:flex;
  align-items:center;
  gap:12px;
}
.wetaSocial__btn{
  width:32px;height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#000;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.wetaSocial__btn:hover{background:rgba(0,0,0,.16); transform:scale(1.10); box-shadow:0 0 18px rgba(255,255,255,.35), 0 0 26px rgba(0,0,0,.10)}

.wetaFooter__meta{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  letter-spacing:.06em;
  font-size:12px;
}
.wetaMetaDot{opacity:.65}
.wetaMetaLink{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* MOBILE MENU */
.mobileMenu{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  z-index:50;
}
.mobileMenu.is-open{display:block}
.mobileMenu__panel{
  position:absolute;
  right:0; top:0; bottom:0;
  width:min(360px, 90vw);
  background:rgba(10,12,18,.96);
  border-left:1px solid rgba(255,255,255,.12);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mobileMenu__close{
  align-self:flex-end;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:transparent;
  color:white;
  cursor:pointer;
}
.mobileMenu__panel a{
  padding:14px 10px;
  border-radius:12px;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(255,255,255,.86);
}
.mobileMenu__panel a:hover{background:rgba(255,255,255,.06)}

/* MODAL (YouTube) */
.modal{
  position:fixed; inset:0;
  display:none;
  z-index:60;
}
.modal.is-open{display:block}
.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.65);
}
.modal__dialog{
  position:relative;
  width:min(980px, 92vw);
  margin: min(10vh, 80px) auto 0;
  background: rgba(10,12,18,.55);
  border: 1px solid rgba(255,255,255,.14);
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.modal__close{
  position:absolute;
  top:10px; right:10px;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:white;
  cursor:pointer;
  z-index:2;
}
.modal__embed{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
  background:#000;
}
.modal__embed iframe{
  position:absolute; inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* CINEMA INTRO */
@keyframes cinemaIn{
  0%{opacity:0; transform:translateY(16px); letter-spacing:.28em; filter:blur(6px)}
  100%{opacity:1; transform:translateY(0); letter-spacing:inherit; filter:blur(0)}
}
.cinema-in{
  opacity:0;
  animation:cinemaIn 900ms cubic-bezier(.2,.9,.2,1) forwards;
}
.cinema-in--delay{animation-delay:180ms}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero__grid{margin-top:58px;}

  .nav__links{display:none}
  .nav__hamburger{display:block}
  .hero__grid{grid-template-columns:1fr; gap:20px}
  .hero__grid--two{grid-template-columns:1fr}
  .hero__content{padding-top:72px}
  .scrollDown{right:16px; bottom:16px}
  .projectGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .serviceGrid{grid-template-columns:1fr}
  .contactCards{grid-template-columns:1fr}
  .wetaFooter__inner{padding:36px 22px}
}
@media (max-width: 560px){
  .wetaFooter__left{flex-direction:column; gap:18px;}

  .projectGrid{grid-template-columns:1fr}
  .wetaFooter__inner{flex-direction:column; align-items:flex-start}
  .wetaFooter__right{align-items:flex-start}
  .wetaFollowRow{flex-wrap:wrap}
  .wetaFooter__meta{flex-wrap:wrap}
}


/* Centered intro block */
.introCenter{
  text-align:center;
}
.introCenter p{
  margin: 0 auto;
  max-width: 920px;
  line-height: 1.7;
  font-size: 18px;
}

/* Clickable project cards */
.projectCard--link{
  display:block;
  color:inherit;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.projectCard--link:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
}


/* HERO CARDS: subtle slide-up + fade-in with stagger */
@keyframes cardIn{
  0%{opacity:0; transform:translateY(18px)}
  100%{opacity:1; transform:translateY(0)}
}
.hero__grid .card{
  opacity:0;
  transform:translateY(18px);
  animation:cardIn 700ms cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay:520ms; /* after title/subtitle */
}
.hero__grid .card:nth-child(2){ animation-delay:640ms; }
.hero__grid .card:nth-child(3){ animation-delay:760ms; }


/* Glass cards */
.hero__grid .card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hero__grid .card:hover{
  transform: translateY(-4px) scale(1.01);
  background: rgba(255,255,255,.08);
  border-color: rgba(0,207,255,.35);
}


/* Page background images (add your images in assets/) */
.page{
  position:relative;
}
.page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.42;
  transform: translateZ(0);
}
.page::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(0,0,0,var(--dimA)), rgba(0,0,0,var(--dimB))),
    linear-gradient(to bottom, rgba(0,0,0,calc(var(--dimA) + .05)), rgba(0,0,0,calc(var(--dimB) - .03)));
}

.page--home::before{ background-image:none; } /* home uses video */
.page--projects::before{
  /* No JPG needed: pure black glassy background */
  background-image:
    radial-gradient(900px 600px at 20% 10%, rgba(0,207,255,.10), rgba(0,0,0,0)),
    radial-gradient(800px 520px at 80% 30%, rgba(39,199,255,.08), rgba(0,0,0,0)),
    linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.96));
}
.page--services::before{ background-image:url("assets/bg-services.jpg"); }
.page--contact::before{ background-image:url("assets/bg-contact.jpg"); }
.page--project-01::before{
  background-image:
    radial-gradient(900px 600px at 20% 10%, rgba(0,207,255,.10), rgba(0,0,0,0)),
    radial-gradient(800px 520px at 80% 30%, rgba(39,199,255,.08), rgba(0,0,0,0)),
    linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.96));
}
.page--project-02::before{
  background-image:
    radial-gradient(900px 600px at 20% 10%, rgba(0,207,255,.10), rgba(0,0,0,0)),
    radial-gradient(800px 520px at 80% 30%, rgba(39,199,255,.08), rgba(0,0,0,0)),
    linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.96));
}
.page--project-03::before{
  background-image:
    radial-gradient(900px 600px at 20% 10%, rgba(0,207,255,.10), rgba(0,0,0,0)),
    radial-gradient(800px 520px at 80% 30%, rgba(39,199,255,.08), rgba(0,0,0,0)),
    linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.96));
}
.page--project-04::before{
  background-image:
    radial-gradient(900px 600px at 20% 10%, rgba(0,207,255,.10), rgba(0,0,0,0)),
    radial-gradient(800px 520px at 80% 30%, rgba(39,199,255,.08), rgba(0,0,0,0)),
    linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.96));
}

/* Page dim levels (auto-dim per page) */
.page--projects{ --dimA: .40; --dimB: .72; }  /* tuned for black bg */  /* darker */
.page--services{ --dimA: .46; --dimB: .84; }  /* medium */
.page--contact{  --dimA: .28; --dimB: .66; }  /* lighter */
.page--project-01{ --dimA: .52; --dimB: .88; }
.page--project-02{ --dimA: .52; --dimB: .88; }
.page--project-03{ --dimA: .52; --dimB: .88; }
.page--project-04{ --dimA: .52; --dimB: .88; }



/* Glass cards (projects/services/contact pages) */
.projectCard,
.serviceCard,
.contactCard{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.projectCard__thumb{
  background: rgba(255,255,255,.03);
}


/* Back button */
.backBtn{
  z-index: 5;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-right:auto;
  margin-left:14px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,12,18,.28);
  color: rgba(255,255,255,.90);
  cursor:pointer;
  letter-spacing:.12em;
  font-weight:800;
  font-size:12px;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.backBtn:hover{
  transform: scale(1.06);
  background: rgba(10,12,18,.40);
  border-color: rgba(0,207,255,.35);
  color: var(--accent);
}
.backBtn span{ line-height:1; }


/* Cyan glow border on hover (Projects cards) */
.projectCard{ position:relative; }
.projectCard__thumb{
  position:relative;
  overflow:hidden;
  border-radius:14px;
}
.projectCard__thumb::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(0,207,255,0);
  box-shadow: 0 0 0 rgba(0,207,255,0);
  border-radius:14px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  pointer-events:none;
}
.projectCard:hover .projectCard__thumb::after,
.projectCard:focus-visible .projectCard__thumb::after{
  border-color: rgba(0,207,255,.75);
  box-shadow: 0 0 18px rgba(0,207,255,.22), 0 0 34px rgba(0,207,255,.14);
}
.projectCard:hover{
  border-color: rgba(0,207,255,.35);
}


/* Rotating cyan border (loop while hover) */
@keyframes ringSpin{
  0%{ --ring-angle: 0turn; }
  100%{ --ring-angle: 1turn; }
}
.ringGlow{
  position: relative;
  isolation: isolate;
}
.ringGlow::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: conic-gradient(from var(--ring-angle, 0turn),
    rgba(0,207,255,0) 0deg,
    rgba(0,207,255,.95) 60deg,
    rgba(0,207,255,0) 140deg,
    rgba(0,207,255,.75) 220deg,
    rgba(0,207,255,0) 320deg);
  filter: blur(0.2px);
  opacity:0;
  z-index:-1;
  transition: opacity 180ms ease;
  /* Mask to show only border */
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding:2px;
}
.ringGlow::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 rgba(0,207,255,0);
  opacity:0;
  transition: opacity 180ms ease, box-shadow 180ms ease;
  pointer-events:none;
}
.ringGlow:hover::before,
.ringGlow:focus-visible::before{
  opacity:1;
  animation: ringSpin 1.2s linear infinite;
}
.ringGlow:hover::after,
.ringGlow:focus-visible::after{
  opacity:1;
  box-shadow: 0 0 18px rgba(0,207,255,.22), 0 0 38px rgba(0,207,255,.14);
}

.backBtn{ margin-left:auto; }

/* Centered contact info */
.contactCenter{
  max-width:520px;
  margin:0 auto;
  padding:28px 24px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.contactItem{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:18px;
  font-weight:800;
  letter-spacing:.04em;
}
.contactItem a{
  color:var(--accent);
  text-decoration:none;
}
.contactItem a:hover{ text-decoration:underline; }
.contactIcon{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background: rgba(0,207,255,.15);
  color:#fff;
  font-size:16px;
}

/* Careers page card */
.careersCard{
  max-width: 820px;
  margin: 0 auto;
  padding: 26px 22px;
  border-radius: 18px;
  text-align: center;
}
.careersText p{
  margin:0 0 10px;
  color: rgba(255,255,255,.72);
  letter-spacing: .08em;
  font-weight: 700;
}
.careersEmail{
  display:inline-block;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 18px;
}
.careersEmail:hover{ text-decoration: underline; }

.careersForm{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}
.careersForm textarea{ grid-column: 1 / -1; }
.careersForm button{ grid-column: 1 / -1; }
@media (max-width: 760px){
  .careersForm{ grid-template-columns: 1fr; }
}
.careersThanks{
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 14px 12px;
  border-radius: 14px;
  background: rgba(0,207,255,.10);
  border: 1px solid rgba(0,207,255,.22);
  color: rgba(255,255,255,.92);
  letter-spacing: .02em;
  line-height: 1.65;
  font-weight: 700;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 260ms ease, transform 260ms ease;
  text-align:center;
}
.careersThanks.show{
  opacity: 1;
  transform: translateY(0);
}

/* Careers tweaks */
.cyanTitle{ color: var(--accent); }

.careersSendEmail{
  margin-top: 14px;
  color: rgba(255,255,255,.72);
  letter-spacing: .06em;
  font-weight: 800;
  text-align:center;
}
.careersSendEmail a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 900;
}
.careersSendEmail a:hover{ text-decoration: underline; }

/* Textarea resize: vertical only */
.careersForm textarea{ resize: vertical; }
textarea{ max-width:100%; }

/* Fun interactive dots box */
.funDotsWrap{
  position: relative;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}
#funDotsCanvas{
  display:block;
  width:100%;
  height:260px;
}
.funDotsHint{display:none !important;}

/* Contact bottom boxes under fun dots */
.contactBottomBoxes{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 760px){
  .contactBottomBoxes{ grid-template-columns: 1fr; }
}
.contactMini{
  padding: 16px;
  border-radius: 18px;
}
.contactRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
}
.contactLink{
  color: var(--accent);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.02em;
}
.contactLink:hover{ text-decoration: underline; }

/* Back button (glow + press) */
.backBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:#fff;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
  margin-left:auto; /* push to the far right */
}
.backBtn__icon{
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:999px;
  background: rgba(0,207,255,.14);
  border:1px solid rgba(0,207,255,.22);
  font-size:18px;
  line-height:0;
}
.backBtn:hover,
.backBtn:focus-visible{
  border-color: rgba(0,207,255,.50);
  box-shadow: 0 0 18px rgba(0,207,255,.18), 0 0 38px rgba(0,207,255,.10);
  background: rgba(0,207,255,.08);
  color: var(--accent);
  transform: translateY(-1px);
}
.backBtn:active{
  transform: translateY(0px) scale(.98);
  box-shadow: 0 0 10px rgba(0,207,255,.16);
}

/* Back button (glow + press) */
.backBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:#fff;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
  margin-left:auto;
}
.backBtn__icon{
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:999px;
  background: rgba(0,207,255,.14);
  border:1px solid rgba(0,207,255,.22);
  font-size:18px;
  line-height:0;
}
.backBtn:hover,
.backBtn:focus-visible{
  border-color: rgba(0,207,255,.50);
  box-shadow: 0 0 18px rgba(0,207,255,.18), 0 0 38px rgba(0,207,255,.10);
  background: rgba(0,207,255,.08);
  color: var(--accent);
  transform: translateY(-1px);
}
.backBtn:active{
  transform: translateY(0px) scale(.98);
  box-shadow: 0 0 10px rgba(0,207,255,.16);
}

/* ===== Page Transition (cinema) ===== */
.pageTransition{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  background: radial-gradient(800px 500px at 30% 20%, rgba(0,207,255,.10), rgba(0,0,0,0)),
              radial-gradient(800px 500px at 70% 30%, rgba(46,199,255,.08), rgba(0,0,0,0)),
              rgba(0,0,0,.82);
  transition: opacity 220ms ease, backdrop-filter 220ms ease, -webkit-backdrop-filter 220ms ease;
  z-index: 9999;
}
body.is-transitioning .pageTransition{
  opacity: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce){
  .pageTransition{ transition:none; }
  body.is-transitioning .pageTransition{ opacity:1; }
}

/* ===== Projects (cinematic) ===== */
.projectGrid{
  gap: 22px;
}
.projectCard{
  border-radius: 18px;
}
.projectThumb{
  min-height: 220px;
  border-radius: 16px;
  background:
    radial-gradient(900px 500px at 30% 20%, rgba(0,207,255,.10), rgba(0,0,0,0)),
    radial-gradient(900px 500px at 70% 30%, rgba(46,199,255,.08), rgba(0,0,0,0)),
    linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.25));
  position: relative;
}
.projectThumb::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity:.12;
  pointer-events:none;
}
.projectCard__title{
  margin-top: 14px;
}
.projectTags{
  display:flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 900;
  color: rgba(255,255,255,.68);
  text-transform: uppercase;
}
.projectCard:hover .projectThumb::after,
.projectCard:focus-visible .projectThumb::after{
  border-color: rgba(0,207,255,.85);
  box-shadow: 0 0 22px rgba(0,207,255,.22), 0 0 48px rgba(0,207,255,.10);
}

/* ===== Project page (cinematic layout) ===== */
.projectHeroCard{
  max-width: 980px;
  margin: 0 auto;
  padding: 22px;
  border-radius: 20px;
}
.projectHeroTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
}
@media (max-width: 760px){
  .projectHeroTop{ flex-direction:column; }
}
.projectTitle{
  margin:0;
  letter-spacing:.08em;
  font-size: 26px;
}
.projectSub{
  margin: 10px 0 0;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
}
.projectBadges{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.badge{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,207,255,.22);
  background: rgba(0,207,255,.10);
  font-weight: 900;
  letter-spacing: .12em;
  font-size: 11px;
  text-transform: uppercase;
}
.projectStill{
  margin-top: 18px;
  height: 360px;
  border-radius: 18px;
  display:grid;
  place-items:center;
}
@media (max-width: 760px){
  .projectStill{ height: 240px; }
}
.projectStillLabel{
  color: rgba(255,255,255,.70);
  font-weight: 900;
  letter-spacing:.08em;
  text-align:center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.10);
}
.projectBreakdown{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px){
  .projectBreakdown{ grid-template-columns: 1fr; }
}
.bdItem{
  padding: 14px;
  border-radius: 16px;
}
.bdK{
  font-size: 12px;
  letter-spacing:.14em;
  font-weight: 900;
  color: rgba(255,255,255,.65);
}
.bdV{
  margin-top: 10px;
  line-height: 1.7;
  color: rgba(255,255,255,.90);
}
.projectCTA{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.btn--ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

/* Project back button polish */
.projectCTA{
  justify-content: flex-start;
}
.btn--back{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(0,207,255,.22);
  background: rgba(0,207,255,.10);
  color: #fff;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}
.btn--back:hover, .btn--back:focus-visible{
  border-color: rgba(0,207,255,.55);
  box-shadow: 0 0 18px rgba(0,207,255,.18), 0 0 38px rgba(0,207,255,.10);
  background: rgba(0,207,255,.14);
  transform: translateY(-1px);
}
.btn--back:active{ transform: translateY(0) scale(.98); }

/* ===== Project Slider ===== */
.projSlider{
  margin-top: 18px;
  border-radius: 18px;
  overflow:hidden;
  position: relative;
}
.projSlider__viewport{
  position: relative;
  height: 360px;
}
@media (max-width: 760px){
  .projSlider__viewport{ height: 240px; }
}
.projSlide{
  position:absolute;
  inset:0;
  opacity:0;
  transform: scale(1.01);
  transition: opacity 260ms ease, transform 420ms ease;
  background-size: cover;
  background-position: center;
}
.projSlide.is-active{
  opacity:1;
  transform: scale(1);
}
.projSlider__overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 500px at 30% 20%, rgba(0,207,255,.10), rgba(0,0,0,0)),
              radial-gradient(900px 500px at 70% 30%, rgba(46,199,255,.08), rgba(0,0,0,0)),
              linear-gradient(to bottom, rgba(255,255,255,.05), rgba(0,0,0,.35));
}
.projSlider__controls{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 12px;
  pointer-events:none;
}
.projNavBtn{
  pointer-events:auto;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.projNavBtn:hover, .projNavBtn:focus-visible{
  border-color: rgba(0,207,255,.55);
  box-shadow: 0 0 18px rgba(0,207,255,.18);
  background: rgba(0,207,255,.10);
  transform: translateY(-1px);
}
.projNavBtn:active{ transform: translateY(0) scale(.98); }
.projNavBtn svg{ width:20px; height:20px; }

.projSlider__thumbs{
  display:flex;
  gap:10px;
  padding: 12px;
  background: rgba(0,0,0,.22);
  border-top: 1px solid rgba(255,255,255,.10);
}
.projThumb{
  width: 74px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background-size: cover;
  background-position:center;
  opacity: .72;
  cursor:pointer;
  transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.projThumb:hover{
  opacity:1;
  transform: translateY(-1px);
  border-color: rgba(0,207,255,.35);
}
.projThumb.is-active{
  opacity:1;
  border-color: rgba(0,207,255,.55);
  box-shadow: 0 0 18px rgba(0,207,255,.14);
}


/* Slider images inside slides */
.projSlide{ overflow:hidden; }
.projSlide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Lightbox */
.lightbox{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.86);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 10000;
  padding: 18px;
}
.lightbox.is-open{ display:flex; }
.lightbox__img{
  max-width: min(1100px, 96vw);
  max-height: 92vh;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 50px rgba(0,207,255,.10);
}
.lightbox__close{
  position:absolute;
  top: 18px;
  right: 18px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.30);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.lightbox__close:hover{
  border-color: rgba(0,207,255,.55);
  box-shadow: 0 0 18px rgba(0,207,255,.18);
  background: rgba(0,207,255,.10);
}


/* === CYAN BLUE ACCENT OVERRIDES (added) === */
:root{
  --accent-cyan:#00cfff;
}

/* active nav + any elements that previously used green accent */
.nav__link.is-active,
a:hover{
  color: var(--accent-cyan) !important;
}

/* ring/glow/borders */
.ringGlow{
  box-shadow:
    0 0 0 1px rgba(0,207,255,.20),
    0 0 30px rgba(0,207,255,.12);
}
.backBtn--glow{
  box-shadow:
    0 0 0 1px rgba(0,207,255,.20),
    0 0 30px rgba(0,207,255,.12);
}

/* Projects title + Services title */
.pageHero__title{ color: var(--accent-cyan) !important; }

/* Remove any leftover "green" utility classes */
.green, .text-green, .accentGreen { color: var(--accent-cyan) !important; }
.border-green, .ring-green { border-color: rgba(0,207,255,.45) !important; }

/* Project cards: cover image styling */
.projectThumb{
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* === Cinematic video block === */
.cineVideo{
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  margin: 22px 0 28px;
  background: rgba(255,255,255,.02);
}
.cineVideo::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 380px at 20% 20%, rgba(0,207,255,.12), rgba(0,0,0,0)),
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.55));
  pointer-events:none;
  opacity:.9;
}
.cineVideo video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #000;
}
.cinePlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.cinePlay__btn{
  width: 86px;
  height: 86px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(0,207,255,.35);
  box-shadow: 0 0 0 6px rgba(0,207,255,.10), 0 18px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.cinePlay__btn svg{
  width: 28px;
  height: 28px;
  transform: translateX(2px);
  fill: var(--accent-cyan);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.6));
}

/* Services cards image slot */
.serviceCard__img{
  width:100%;
  height: 160px;
  border-radius: 14px;
  overflow:hidden;
  margin-bottom: 14px;
  background:
    radial-gradient(900px 500px at 30% 20%, rgba(0,207,255,.10), rgba(0,0,0,0)),
    linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.25));

  position:relative;
  overflow:hidden;
}
.serviceCard__img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.serviceCard__img::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0, 207, 255, 0.18);
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
}

.serviceCard:hover .serviceCard__img::after{
  opacity:1;
}

.serviceCard__img img{
  transition: transform .35s ease;
}

.serviceCard:hover .serviceCard__img img{
  transform: scale(1.05);
}



/* === Title Fun Dots (reused from Contact) === */
.titleDotsWrap{
  width: min(620px, 92vw);
  margin: 18px auto 0;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(0,207,255,0.28);
  box-shadow: 0 0 0 1px rgba(0,207,255,0.06), 0 18px 55px rgba(0,0,0,0.35);
}

.titleDotsWrap::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 70% at 50% 30%, rgba(0,207,255,0.16), rgba(0,0,0,0) 70%);
  opacity: 0.55;
  transition: opacity 220ms ease;
}

.titleDotsWrap:hover::after{opacity:0.85;}

.titleDotsWrap canvas{
  display:block;
  width:100%;
}

/* HERO version: full-width background under the page title */
.titleDotsWrap--hero{
  position:absolute;
  inset:0;
  width:100%;
  margin:0;
  border-radius:0;
  border:none;
  background:transparent;
  box-shadow:none;
  pointer-events:none;
}

.titleDotsWrap--hero::after{
  background: radial-gradient(70% 70% at 50% 35%, rgba(0,207,255,0.18), rgba(0,0,0,0) 70%);
  opacity: 0.65;
}

.titleDotsWrap--hero:hover::after{opacity:0.65;}

.titleDotsWrap--hero canvas{
  width:100%;
  height:100%;
}



/* Home footer dots bar */
.wetaDotsWrap{ z-index:0; }
.wetaItem{ position:relative; }
.wetaIcon{ color: var(--accent); }
.wetaLabel{ color: rgba(255,255,255,.70); }
.wetaValue{ color: rgba(255,255,255,.92); }
.wetaMeta{ color: rgba(255,255,255,.72); }
.wetaMetaLink{ color: rgba(255,255,255,.92); }

/* ===== Final mobile polish (keeps desktop look) ===== */
@media (max-width: 760px){
  /* More breathing room on small screens */
  .section{ padding:56px 16px; }
  .pageHero__inner{ padding:40px 16px 58px; }
  .pageHero__title{ letter-spacing:.08em; }

  /* Keep title-dots header from feeling too tall */
  .pageHero{ min-height: 0; }
  .titleDotsWrap--hero canvas{ min-height: 160px; }

  /* Nav / back button spacing */
  .nav{ padding-left:16px; padding-right:16px; }
  .backBtn{ margin-left:auto; }

  /* Cards feel better on touch */
  .card, .serviceCard, .projectCard{ border-radius:18px; }
  .serviceCard__img{ height: 170px; }
  .projectCard__thumb{ height: 150px; }

  /* Contact/info footer: stack nicely */
  .wetaFooter__inner{ padding:30px 16px; }
  .wetaFooter__left{ width:100%; }
}

@media (max-width: 420px){
  .pageHero__title{ font-size: 34px; }
  .hero__title{ font-size: 44px; }
  .hero__subtitle{ font-size: 15px; }
}


/* --- Mobile stability tweaks (iOS Safari) --- */
@media (max-width: 768px){
  /* Backdrop blur can be heavy on iOS */
  .nav--solid{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10,12,18,.85) !important;
  }

  /* Disable animated canvas dots on mobile */
  .titleDotsWrap,
  canvas.funDotsCanvas{
    display:none !important;
  }

  /* Reduce heavy glow/shadows on mobile */
  .ringGlow,
  .card,
  .serviceCard{
    box-shadow:none !important;
    filter:none !important;
  }
}


/* Contact hero image placeholder (replaces particles canvas) */
.contactHeroImage{
  display:block;
  width:100%;
  height:260px;
  object-fit: cover;
  border-radius: 16px;
}

canvas.funDotsCanvas{display:none !important;}

/* --- Fix YouTube overlay UI --- */
.videoEmbed iframe{
  pointer-events: auto;
}
.videoEmbed::before,
.videoEmbed::after{
  display:none !important;
}

/* Disable custom video play overlay completely */
.cinePlay,
.cinePlay__btn,
.cinePlay__ring {
  display: none !important;
  pointer-events: none !important;
}

/* Projects description */
.projects-description{
  max-width:900px;
  margin:0 auto 40px;
  padding:20px;
}
.projects-description__lead{
  font-size:1.1rem;
  line-height:1.6;
  margin-bottom:12px;
}
.projects-description p{
  line-height:1.7;
  margin-bottom:12px;
  opacity:.9;
}

/* Projects description spacing + size v2 */
.projects-description{
  max-width: 960px;
  margin: 0 auto 56px;
  padding: 32px 20px 10px;
}

.projects-description__lead{
  font-size: 1.25rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

.projects-description p{
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 18px;
  opacity: .95;
}

/* Projects description alignment v3 */
.projects-description{
  max-width: 960px;
  margin: 0 auto 56px;
  padding: 32px 20px 10px;
  padding-left: clamp(28px, 8vw, 96px); /* align with PROJECTS title */
}

/* Mobile refinement */
@media (max-width: 768px){
  .projects-description{
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 40px;
  }
  .projects-description__lead{
    font-size: 1.15rem;
  }
  .projects-description p{
    font-size: 1rem;
  }
}


/* Projects description alignment v4 (match PROJECTS title start) */
.pageHero__inner .projects-description{
  max-width: 820px;          /* match hero subtitle rhythm */
  margin-top: 22px;
  margin-bottom: 0;
  padding: 0;                 /* parent handles left/right padding */
}

.pageHero__inner .projects-description__lead{
  font-size: 1.25rem;
  line-height: 1.7;
  margin: 0 0 18px;
  opacity: .95;
}

.pageHero__inner .projects-description p{
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 16px;
  opacity: .9;
}

/* Mobile: slightly tighter + keep perfect alignment */
@media (max-width: 768px){
  .pageHero__inner .projects-description{
    margin-top: 18px;
    max-width: 100%;
  }
  .pageHero__inner .projects-description__lead{
    font-size: 1.15rem;
    margin-bottom: 16px;
  }
  .pageHero__inner .projects-description p{
    font-size: 1rem;
    margin-bottom: 14px;
  }
}



/* Projects description alignment v5 (force left align under PROJECTS) */
.pageHero__inner{
  /* keep as-is; only align the description block */
}

.pageHero__inner .projects-description{
  width: 100%;
  max-width: 820px;      /* readable measure */
  margin: 22px 0 0;      /* no auto-centering */
  padding: 0;            /* use parent's padding */
  text-align: left;
  align-self: flex-start; /* if parent uses flex + align-items:center */
}

@media (max-width: 768px){
  .pageHero__inner .projects-description{
    max-width: 100%;
    margin-top: 18px;
    padding: 0;          /* still rely on parent's padding */
  }
}



/* Services (What Can We Do) description block */
.services-description{
  width: 100%;
  max-width: 820px;
  margin: 22px 0 40px;
  padding: 0;
  text-align: left;
  align-self: flex-start;
}

.services-description__lead{
  font-size: 1.25rem;
  line-height: 1.7;
  margin: 0 0 18px;
  opacity: .95;
}

.services-description__text{
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 18px;
  opacity: .9;
}

.services-description__list{
  margin: 0 0 18px;
  padding-left: 18px;
  line-height: 1.75;
  opacity: .95;
}

.services-description__list li{
  margin: 0 0 8px;
}

.services-description__tagline{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.75;
  opacity: .95;
}

/* Mobile refinement */
@media (max-width: 768px){
  .services-description{
    max-width: 100%;
    margin: 18px 0 32px;
  }
  .services-description__lead{
    font-size: 1.15rem;
    margin-bottom: 16px;
  }
  .services-description__text,
  .services-description__tagline{
    font-size: 1rem;
  }
  .services-description__list{
    padding-left: 18px;
  }
}



/* Services description alignment v2 (match WHAT CAN WE DO title start) */
.pageHero__inner .services-description{
  width: 100%;
  max-width: 820px;
  margin: 22px 0 0;
  padding: 0;
  text-align: left;
  align-self: flex-start;
}

.pageHero__inner .services-description__lead{
  font-size: 1.25rem;
  line-height: 1.7;
  margin: 0 0 18px;
  opacity: .95;
}

.pageHero__inner .services-description__text{
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 18px;
  opacity: .9;
}

.pageHero__inner .services-description__list{
  margin: 0 0 18px;
  padding-left: 18px;
  line-height: 1.75;
  opacity: .95;
}

.pageHero__inner .services-description__list li{
  margin: 0 0 8px;
}

.pageHero__inner .services-description__tagline{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.75;
  opacity: .95;
}

@media (max-width: 768px){
  .pageHero__inner .services-description{
    max-width: 100%;
    margin-top: 18px;
  }
  .pageHero__inner .services-description__lead{
    font-size: 1.15rem;
    margin-bottom: 16px;
  }
  .pageHero__inner .services-description__text,
  .pageHero__inner .services-description__tagline{
    font-size: 1rem;
  }
}



/* Featured projects mosaic (home) */
.featured{
  padding-top: 10px;
}

.featured__header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin: 0 0 14px;
}

.featured__title{
  margin:0;
}

.featured__all{
  text-decoration:none;
  opacity:.9;
}

.featured__all:hover{
  opacity:1;
}

.mosaic{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-auto-rows: 160px;
  gap:14px;
}

.mosaic__item{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  text-decoration:none;
  transform: translateZ(0);
}

.mosaic__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  transition: transform .25s ease, filter .25s ease;
}

.mosaic__item::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%);
  pointer-events:none;
}

.mosaic__label{
  position:absolute;
  left:14px;
  right:14px;
  bottom:12px;
  font-weight:600;
  font-size: .95rem;
  line-height:1.2;
  opacity:.95;
}

.mosaic__item--lg{
  grid-row: span 2;
}

.mosaic__item--wide{
  grid-column: span 2;
}

.mosaic__item:hover img{
  transform: scale(1.07);
  filter: saturate(1.1) contrast(1.08);
}

.mosaic__item:hover{
  border-color: rgba(0,204,255,.35);
}

/* Mobile */
@media (max-width: 900px){
  .mosaic{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 150px;
  }
  .mosaic__item--lg{
    grid-row: span 1;
  }
  .mosaic__item--wide{
    grid-column: span 2;
  }
}

@media (max-width: 560px){
  .mosaic{
    grid-template-columns: 1fr;
    grid-auto-rows: 170px;
  }
  .mosaic__item--wide{
    grid-column: span 1;
  }
}


/* Featured Projects title color */
.featured__title{
  color: var(--accent, #00ccff);
}

/* Featured projects tweaks v3 */
.featured__all{
  color: rgba(0,204,255,.7);
}

.featured__all:hover{
  color: rgba(0,204,255,1);
}

/* Safety: hide mosaic labels if any remain */
.mosaic__label{
  display:none;
}


.page--project-06::before{
  background-image:
    radial-gradient(900px 600px at 20% 10%, rgba(0,207,255,.10), rgba(0,0,0,0)),
    radial-gradient(800px 520px at 80% 30%, rgba(39,199,255,.08), rgba(0,0,0,0)),
    linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.92));
}