/* v22 — unified rails, softer geometry and permanent visual depth */
:root{
  --site-rail:1280px;
  --float-radius:22px;
  --float-shadow:0 26px 60px rgba(7,24,60,.13);
  --float-shadow-dark:0 30px 70px rgba(2,12,34,.28);
}

/* One consistent content rail across every public page */
.home-services,
.home-process,
.service-detail-list,
.portfolio-section,
.about-story,
.company-profile,
.values-section,
.contact-page{
  width:min(calc(100% - 64px),var(--site-rail));
  max-width:var(--site-rail);
  margin-left:auto;
  margin-right:auto;
}

/* Homepage — floating editorial blocks instead of flat template strips */
.home-section-heading{
  border-left:0;
  border-radius:var(--float-radius);
  box-shadow:var(--float-shadow);
  overflow:hidden;
  position:relative;
}
.home-section-heading:before{
  content:"";
  position:absolute;
  left:0;
  top:24px;
  bottom:24px;
  width:4px;
  border-radius:0 4px 4px 0;
  background:#24a6bd;
}
.home-services .service-grid{
  gap:26px;
  align-items:start;
}
.home-services .service-grid article{
  border-radius:18px;
  box-shadow:var(--float-shadow);
}
.home-services .service-grid article:nth-child(even){transform:translateY(18px)}

.home-work{
  width:min(calc(100% - 64px),1360px);
  margin:72px auto 0;
  padding:86px 40px 98px;
  border-radius:28px;
  box-shadow:var(--float-shadow-dark);
  overflow:hidden;
}
.home-work-heading,.home-work .project-grid{max-width:var(--site-rail)}
.home-work .project-grid{gap:26px}
.home-work .project-grid>a{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 22px 48px rgba(0,0,0,.28);
}
.home-work .project-grid>a:nth-child(2){transform:translateY(18px)}

.home-process .process-intro,
.home-process .process-list article{
  border-radius:18px;
  box-shadow:var(--float-shadow);
}

/* Services and portfolio introductions: same rail, less empty height */
.page-intro,.portfolio-intro{
  width:min(calc(100% - 64px),var(--site-rail));
  max-width:var(--site-rail);
  min-height:220px;
  margin:56px auto 0;
  padding:48px 64px;
  border-radius:var(--float-radius);
  box-shadow:var(--float-shadow);
}
.page-intro h2,.portfolio-intro h2{
  font-size:clamp(42px,4vw,60px);
  line-height:1;
}
.portfolio-intro>p{margin-top:18px}

.service-detail-list{padding-left:0;padding-right:0}
.service-detail-list article{
  border:0;
  border-radius:var(--float-radius);
  box-shadow:var(--float-shadow);
  overflow:hidden;
}
.service-detail-list article:nth-child(even){transform:translateX(18px)}

.portfolio-section{padding-left:0;padding-right:0}
.portfolio-filters{justify-content:center}
.original-gallery{
  gap:22px;
  align-items:start;
}
.portfolio-item{
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--float-shadow);
}
.portfolio-item:nth-child(3n+2){transform:translateY(16px)}

/* About — shorter opening, aligned floating content */
.about-hero{
  min-height:560px;
  padding-top:145px;
  padding-bottom:64px;
}
.about-hero h1{font-size:clamp(54px,5.5vw,78px)}
.about-story{
  min-height:560px;
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--float-shadow-dark);
}
.about-story-image,.about-story>div:last-child{min-height:560px}
.about-story>div:last-child{padding:58px}
.company-profile{
  border-radius:var(--float-radius);
  box-shadow:var(--float-shadow);
}
.values-grid{gap:20px;border:0}
.values-grid article{
  border:0;
  border-radius:16px;
  box-shadow:var(--float-shadow);
}

/* Calls to action should feel like panels, not full-width bars */
.page-cta{
  width:min(calc(100% - 64px),1360px);
  min-height:0;
  margin:72px auto;
  padding:72px 40px;
  border-radius:26px;
  box-shadow:var(--float-shadow);
}
.page-cta h2{font-size:clamp(44px,5vw,68px)}
.page-cta .button{
  display:inline-flex;
  width:auto;
  min-width:240px;
  border-radius:8px;
}

@media(max-width:900px){
  .home-services,.home-process,.service-detail-list,.portfolio-section,
  .about-story,.company-profile,.values-section,.contact-page,
  .page-intro,.portfolio-intro{
    width:min(calc(100% - 32px),var(--site-rail));
  }
  .home-work,.page-cta{width:calc(100% - 32px)}
  .home-services .service-grid article:nth-child(even),
  .home-work .project-grid>a:nth-child(2),
  .service-detail-list article:nth-child(even),
  .portfolio-item:nth-child(3n+2){transform:none}
  .about-hero{min-height:500px;padding-top:135px}
  .about-story,.about-story-image,.about-story>div:last-child{min-height:0}
  .about-story-image{height:440px}
}

@media(max-width:620px){
  :root{--float-radius:16px}
  .home-work{margin-top:42px;padding:62px 16px 72px;border-radius:18px}
  .page-intro,.portfolio-intro{padding:38px 24px;margin-top:28px}
  .service-detail-list article{border-radius:16px}
  .about-hero{min-height:450px;padding-top:125px;padding-bottom:50px}
  .about-story>div:last-child{padding:44px 24px}
  .page-cta{margin:42px auto;padding:60px 22px;border-radius:18px}
  .page-cta .button{min-width:0;width:auto}
}