/* ==========================================================
   SCALYMISE FINAL UI POLISH PATCH
   Shared fixes applied after every page stylesheet.
   ========================================================== */

/* --- Compact, cleaner shared header --- */
.site-header{
  top:14px!important;
  padding:0 18px!important;
}
.nav-shell{
  width:min(1440px,100%)!important;
  min-height:72px!important;
  gap:20px!important;
  padding:8px 10px 8px 16px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background-clip:padding-box!important;
}
.brand{padding:4px 6px!important}
.brand img{width:160px!important}
.desktop-nav{
  gap:4px!important;
  padding:4px!important;
  border-radius:17px!important;
}
.nav-link{
  min-height:40px!important;
  padding:0 14px!important;
  border-radius:13px!important;
  font-size:12.5px!important;
}
.project-btn{
  min-height:46px!important;
  padding:0 16px!important;
  border-radius:15px!important;
  font-size:12px!important;
  box-shadow:0 10px 24px rgba(25,34,48,.12)!important;
}
.project-btn:hover{box-shadow:0 13px 28px rgba(25,34,48,.15)!important}

/* --- Approved section rhythm where the shared .section utility is used --- */
main .section{padding:var(--std-section-y) 0!important}

/* --- Homepage first-screen balance --- */
body[data-page="home"] .hero{
  min-height:auto!important;
  padding:132px 0 72px!important;
  background:linear-gradient(180deg,#fff 0%,#fff 88%,rgba(25,34,48,.025) 100%)!important;
}
body[data-page="home"] .hero-grid{
  grid-template-columns:minmax(0,1.06fr) minmax(390px,.94fr)!important;
  gap:52px!important;
  align-items:center!important;
}
body[data-page="home"] .hero h1{margin:24px 0 20px!important}
body[data-page="home"] .hero-copy{max-width:690px!important}
body[data-page="home"] .hero-actions{margin-top:28px!important}
body[data-page="home"] .hero-proof{margin-top:30px!important;padding-top:22px!important}
body[data-page="home"] .hero-stage{
  min-height:560px!important;
  overflow:visible!important;
}
/* Remove the rotated back-plate that created visible box corners around the rounded visual. */
body[data-page="home"] .hero-stage::before{display:none!important}
body[data-page="home"] .hero-visual{
  inset:0!important;
  border-radius:36px!important;
  transform:none!important;
  box-shadow:0 26px 70px rgba(25,34,48,.18)!important;
  overflow:hidden!important;
  background-clip:padding-box!important;
}
body[data-page="home"] .hero-stage:hover .hero-visual{
  transform:translateY(-4px)!important;
}
body[data-page="home"] .floating-card{
  overflow:hidden!important;
  background-clip:padding-box!important;
  border-color:rgba(25,34,48,.08)!important;
  box-shadow:0 16px 38px rgba(25,34,48,.12)!important;
}
body[data-page="home"] .fc-one{top:5%!important;left:4%!important}
body[data-page="home"] .fc-two{right:3%!important;bottom:9%!important}

/* --- Rounded surface clipping / Chromium compositor cleanup ---
   Prevents square background corners from appearing behind rounded floating UI. */
.floating-card,
.work-info,
.process-pop,
.dna-pop,
.featured-title-glass,
.glass-tag,
.featured-year-glass,
.card-glass-tag,
.hero-side,
.hero-note,
.cta-shell,
.fit-card,
.contact-card,
.side-intro,
.form-panel,
.project-card,
.featured-card,
.service-card,
.footer-cta{
  background-clip:padding-box!important;
}
.floating-card,
.process-pop,
.dna-pop,
.featured-title-glass,
.glass-tag,
.featured-year-glass,
.card-glass-tag{
  overflow:hidden!important;
}

/* Keep floating glass UI clean: no bright bloom, no accidental rectangular layer. */
.glass-tag,
.featured-title-glass,
.featured-year-glass,
.card-glass-tag{
  box-shadow:0 8px 24px rgba(25,34,48,.10)!important;
}

/* --- Mobile / tablet polish --- */
@media(max-width:1120px){
  .site-header{top:10px!important;padding:0 10px!important}
  .nav-shell{min-height:66px!important;padding:7px 8px 7px 12px!important;border-radius:21px!important}
  .brand img{width:145px!important}
  body[data-page="home"] .hero{padding-top:112px!important}
  body[data-page="home"] .hero-grid{grid-template-columns:1fr!important;gap:48px!important}
  body[data-page="home"] .hero-stage{min-height:520px!important;width:min(760px,100%)!important;margin:auto!important}
}

@media(max-width:700px){
  .nav-shell{min-height:62px!important}
  .brand img{width:132px!important}
  .project-btn{min-height:42px!important;padding:0 12px!important}
  .menu-toggle{width:42px!important;height:42px!important;border-radius:14px!important}
  body[data-page="home"] .hero{padding:100px 0 52px!important}
  body[data-page="home"] .hero-grid{gap:36px!important}
  body[data-page="home"] .hero-stage{min-height:420px!important}
  body[data-page="home"] .hero-visual{border-radius:28px!important}
  body[data-page="home"] .floating-card{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  body[data-page="home"] .hero-stage:hover .hero-visual{transform:none!important}
}