/*
 * Balanced company layout
 * A calmer, centered system shared by every public page.
 */
:root{
  --content:1280px;
  --content-narrow:1080px;
  --section-gap:64px;
  --section-pad:88px;
  --card-gap:24px;
}

/* Header */
.site-header{
  height:96px;
  padding-left:max(32px,calc((100vw - var(--content))/2));
  padding-right:max(32px,calc((100vw - var(--content))/2));
  grid-template-columns:190px 1fr 190px;
}
.site-header nav{gap:30px}
.brand img{width:145px}

/* Heroes: smaller type, centered content rail, more natural vertical balance */
.hero,.page-hero{
  min-height:720px;
  padding-top:170px;
  padding-bottom:90px;
  padding-left:max(32px,calc((100vw - var(--content))/2));
  padding-right:max(32px,calc((100vw - var(--content))/2));
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-copy{width:min(680px,100%)}
.hero h1,.page-hero h1{
  font-size:clamp(58px,5.5vw,88px);
  line-height:.94;
  letter-spacing:-.035em;
}
.page-hero>*{width:min(720px,100%);max-width:none}
.hero .intro,.page-hero>p:last-child{font-size:15px;max-width:590px}

/* Shared section rhythm */
.section,.work,.contact,.values-section{
  padding-left:max(32px,calc((100vw - var(--content))/2));
  padding-right:max(32px,calc((100vw - var(--content))/2));
}
.section h2,.work h2,.about h2,.contact h2,.page-cta h2{
  font-size:clamp(44px,4.5vw,68px);
  line-height:.98;
  letter-spacing:-.03em;
}

/* Home: contained, useful and less "magazine cover" */
.home-services{max-width:var(--content);margin:0 auto;padding:95px 0 110px}
.home-section-heading{
  grid-template-columns:minmax(0,.85fr) minmax(320px,.65fr);
  padding:48px 52px;
  gap:70px;
  box-shadow:0 14px 38px rgba(7,24,60,.09);
}
.home-section-heading h2{font-size:clamp(45px,4vw,62px)}
.home-services .service-grid{grid-template-columns:repeat(2,1fr);gap:24px;margin-top:42px}
.home-services .service-grid article{display:grid;grid-template-columns:46% 54%;min-height:320px}
.home-services .service-card-image{height:100%;min-height:320px}
.home-services .service-card-copy{min-height:320px;padding:32px}
.home-services .service-grid h3{font-size:32px;margin-top:30px}
.home-work{padding-top:100px;padding-bottom:110px}
.home-work-heading,.home-work .project-grid{max-width:var(--content);margin-left:auto;margin-right:auto}
.home-work .project-grid{margin-top:48px}
.home-work .project-grid article{min-height:500px}
.home-process{max-width:var(--content);margin:0 auto;padding:100px 0;grid-template-columns:.78fr 1.22fr;gap:34px}
.home-process .process-intro{position:static;padding:50px}
.home-process .process-list article{min-height:132px;padding:25px 28px}
.about{max-width:1440px;margin:0 auto;grid-template-columns:1fr 1fr}
.about-photo{min-height:610px}.about>div:last-child{padding:80px}
.contact>div,.contact>form,.contact>.notice{max-width:var(--content);margin-left:auto;margin-right:auto}

/* Internal page introductions */
.page-intro,.portfolio-intro{
  display:block;
  max-width:var(--content-narrow);
  margin:64px auto 38px;
  padding:52px 58px;
  text-align:center;
  box-shadow:0 14px 38px rgba(7,24,60,.09);
}
.page-intro:before,.portfolio-intro:before{display:none}
.page-intro h2,.portfolio-intro h2{max-width:820px;margin:0 auto;font-size:clamp(44px,4.4vw,66px)}
.portfolio-intro>p{max-width:720px;margin:25px auto 0;padding:0;border:0;font-size:15px}

/* Services */
.service-detail-list{max-width:var(--content);margin:0 auto;padding:8px 0 100px}
.service-detail-list article{
  grid-template-columns:45px minmax(300px,.82fr) minmax(460px,1.18fr);
  gap:34px;
  margin:22px 0;
  padding:30px;
  align-items:center;
}
.service-detail-list h2{font-size:clamp(36px,3.2vw,50px)}
.service-image{min-height:360px}

/* Portfolio */
.portfolio-section{max-width:var(--content);margin:0 auto;padding:0 0 100px}
.portfolio-filters{justify-content:center;margin:0 auto 34px}
.original-gallery{gap:20px}
.portfolio-open img{height:390px}
.portfolio-item:nth-child(7n+1) img{height:500px}

/* About */
.about-story{max-width:1440px;margin:0 auto;grid-template-columns:1fr 1fr}
.about-story-image{min-height:650px}
.about-story>div:last-child{padding:75px}
.about-story h2{font-size:clamp(45px,4.5vw,67px)}
.company-profile{max-width:var(--content);margin:48px auto;padding:70px;gap:70px}
.company-profile h2{font-size:clamp(44px,4.2vw,64px)}
.values-section{max-width:var(--content);margin:0 auto;padding:80px 0 100px}
.values-grid{grid-template-columns:repeat(2,1fr);gap:20px}
.values-grid article{min-height:220px;padding:32px!important}
.values-grid h3{margin-top:30px}

/* Contact */
.contact-page{
  max-width:var(--content);
  margin:0 auto;
  padding:85px 0 100px;
  grid-template-columns:.72fr 1.28fr;
  gap:70px;
  align-items:start;
}
.contact-details{padding-top:24px}
.contact-details h2{font-size:clamp(42px,4vw,58px)}
.contact-page-form{padding:32px}
.page-cta{padding-top:85px;padding-bottom:85px}

/* Footer */
footer{
  padding-left:max(32px,calc((100vw - var(--content))/2));
  padding-right:max(32px,calc((100vw - var(--content))/2));
}

@media(max-width:1360px){
  .home-services,.home-process,.service-detail-list,.portfolio-section,.values-section,.contact-page{margin-left:32px;margin-right:32px}
  .company-profile{margin-left:32px;margin-right:32px}
}
@media(max-width:980px){
  .site-header{grid-template-columns:150px 1fr 160px}.site-header nav{gap:17px}
  .home-services .service-grid article{grid-template-columns:1fr}.home-services .service-card-image{height:280px;min-height:0}
  .home-process{grid-template-columns:1fr}
  .service-detail-list article{grid-template-columns:40px 1fr}.service-image{grid-column:1/-1}
  .contact-page{grid-template-columns:1fr}.contact-details{max-width:650px}
}
@media(max-width:900px){
  .site-header{grid-template-columns:1fr auto}.site-header nav{display:none}
  .home-section-heading{grid-template-columns:1fr;gap:25px}
  .about,.about-story{grid-template-columns:1fr}.about-photo,.about-story-image{min-height:500px}
  .company-profile{grid-template-columns:1fr}
}
@media(max-width:700px){
  .hero,.page-hero{min-height:650px;padding:145px 22px 70px}
  .hero h1,.page-hero h1{font-size:54px}
  .home-services,.home-process,.service-detail-list,.portfolio-section,.values-section,.contact-page{margin-left:16px;margin-right:16px}
  .home-services{padding-top:65px}.home-services .service-grid{grid-template-columns:1fr}
  .home-section-heading,.home-process .process-intro{padding:36px 26px}
  .home-work{padding:75px 22px}.home-work-heading{display:block}
  .page-intro,.portfolio-intro{margin:30px 16px;padding:40px 25px}
  .service-detail-list article{padding:23px 20px}
  .about>div:last-child,.about-story>div:last-child{padding:60px 26px}
  .company-profile{margin:28px 16px;padding:50px 25px}
  .values-grid{grid-template-columns:1fr}.values-grid article{min-height:0}
  .contact-page{padding-top:60px;gap:35px}.contact-page-form{padding:24px 18px}
}

/* Consistent spacing and sizing across every public page */
main > section + section{margin-top:var(--section-gap)}

.hero + .home-services,
.page-hero + .page-intro,
.page-hero + .portfolio-intro,
.page-hero + .about-story,
.page-hero + .contact-page{
  margin-top:var(--section-gap);
}

.home-services,
.home-work,
.home-process,
.service-detail-list,
.portfolio-section,
.values-section,
.contact-page{
  padding-top:var(--section-pad);
  padding-bottom:var(--section-pad);
}

.home-services{padding-top:0}
.home-work{margin-top:0}
.home-process{margin-top:0}

.page-intro,.portfolio-intro{
  margin-top:var(--section-gap);
  margin-bottom:0;
  min-height:270px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.service-detail-list,.portfolio-section{
  margin-top:var(--section-gap);
}

.service-detail-list article{
  margin:0 0 var(--card-gap);
  min-height:420px;
}
.service-detail-list article:last-child{margin-bottom:0}
.service-detail-list article>div:nth-child(2){padding:18px 0}
.service-image{height:360px;min-height:360px}

.about-story{
  margin-top:var(--section-gap);
  min-height:650px;
}
.about-story-image,.about-story>div:last-child{min-height:650px}
.about-story>div:last-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.company-profile{
  margin-top:var(--section-gap);
  margin-bottom:0;
  min-height:430px;
  align-items:center;
}
.values-section{margin-top:var(--section-gap)}
.values-grid{gap:var(--card-gap)}
.values-grid article{
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.portfolio-intro + .portfolio-section{margin-top:0}
.portfolio-section{padding-top:38px}
.portfolio-filters{margin-bottom:var(--card-gap)}

.contact-page{
  margin-top:var(--section-gap);
  min-height:590px;
  align-items:center;
}
.contact-details{padding-top:0}
.contact-page-form{min-height:480px}

.page-cta{
  margin-top:var(--section-gap);
  min-height:360px;
  padding-top:var(--section-pad);
  padding-bottom:var(--section-pad);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.about + .contact{
  margin-top:var(--section-gap);
}
.contact{
  padding-top:var(--section-pad);
  padding-bottom:var(--section-pad);
}

@media(max-width:900px){
  :root{--section-gap:44px;--section-pad:68px}
  .service-detail-list article{min-height:0}
  .about-story,.about-story-image,.about-story>div:last-child{min-height:0}
  .about-story-image{height:520px}
  .contact-page,.contact-page-form{min-height:0}
}

@media(max-width:700px){
  :root{--section-gap:28px;--section-pad:52px;--card-gap:16px}
  .page-intro,.portfolio-intro{min-height:0}
  .service-image{height:300px;min-height:300px}
  .company-profile{min-height:0}
  .page-cta{min-height:300px}
}