/* V23 — single hero alignment contract, matching /web-development.
   Keep existing photographic backgrounds, animation and controls intact. */
:root { --hero-reference-width:1180px; --hero-reference-gutter:24px; --hero-reference-height:760px; }
main .web-development-hero,
main.work-portfolio .work-hero,
main .sales-page .sales-hero,
main.sales-page .sales-hero,
main.lognova-qr-campaign .qr-hero,
main .studio-new-hero,
main .graphic-design-hero,
main .marketing-page-hero,
main .contact-page-hero,
main .photo-hero.photo-hero-pro,
main .inner-hero {
  box-sizing:border-box!important;
  min-height:var(--hero-reference-height)!important;
  display:flex!important;
  align-items:center!important;
  padding:0!important;
}
main .web-development-hero > .container,
main.work-portfolio .work-hero > .container,
main .sales-page .sales-hero > .container,
main.sales-page .sales-hero > .container,
main.lognova-qr-campaign .qr-hero > .container,
main .studio-new-hero > .container,
main .graphic-design-hero > .container,
main .marketing-page-hero > .container,
main .contact-page-hero > .container,
main .photo-hero.photo-hero-pro > .container,
main .inner-hero > .container {
  box-sizing:border-box!important;
  width:calc(100% - 2 * var(--hero-reference-gutter))!important;
  max-width:var(--hero-reference-width)!important;
  min-width:0!important;
  margin:0 auto!important;
  padding:64px 0!important;
  position:relative;
}
main .web-development-hero .web-development-hero-copy,
main .sales-hero .sales-copy,
main .qr-hero .qr-copy,
main .studio-new-hero .studio-new-hero-copy {
  max-width:710px!important;
  margin:0!important;
  padding:0!important;
  min-width:0!important;
}
/* Portfolio: the container must remain 1180px like Web Development.
   Only the text elements are constrained, never the container itself. */
main.work-portfolio .work-hero > .container {
  max-width:var(--hero-reference-width)!important;
  width:calc(100% - 2 * var(--hero-reference-gutter))!important;
  margin-inline:auto!important;
  padding:64px 0!important;
  min-width:0!important;
}
main.work-portfolio .work-hero h1,
main.work-portfolio .work-hero p {max-width:710px!important;}
main .web-development-hero h1,
main.work-portfolio .work-hero h1,
main .sales-hero h1,
main .qr-hero h1,
main .studio-new-hero h1,
main .graphic-design-hero h1,
main .marketing-page-hero h1,
main .contact-page-hero h1,
main .photo-hero h1,
main .inner-hero h1 {
  font-size:clamp(2.9rem,5.25vw,5.4rem)!important;
  line-height:1.08!important;
  letter-spacing:-.047em!important;
  max-width:800px!important;
  margin:22px 0 26px!important;
}
main .work-hero .work-eyebrow,
main .sales-hero .sales-eyebrow,
main .qr-hero .qr-eyebrow,
main .studio-new-hero .studio-new-eyebrow {
  display:inline-block;
  margin:0!important;
}
/* Avoid competing content paddings when text blocks contain their own grid wrappers. */
main .sales-hero-grid,main .qr-layout {display:block!important;}
@media(max-width:800px){
 :root {--hero-reference-height:700px;}
 main .web-development-hero h1,main.work-portfolio .work-hero h1,
 main .sales-hero h1,main .qr-hero h1,main .studio-new-hero h1,
 main .graphic-design-hero h1,main .marketing-page-hero h1,
 main .contact-page-hero h1,main .photo-hero h1,main .inner-hero h1 {font-size:clamp(2.65rem,7vw,4.4rem)!important;}
}
@media(max-width:620px){
 :root {--hero-reference-height:640px;--hero-reference-gutter:24px;}
 main .web-development-hero,main.work-portfolio .work-hero,
 main .sales-page .sales-hero,main.sales-page .sales-hero,
 main.lognova-qr-campaign .qr-hero,main .studio-new-hero,
 main .graphic-design-hero,main .marketing-page-hero,
 main .contact-page-hero,main .photo-hero.photo-hero-pro,
 main .inner-hero {min-height:640px!important;height:auto!important;}
 main .web-development-hero > .container,main.work-portfolio .work-hero > .container,
 main .sales-hero > .container,main .qr-hero > .container,
 main .studio-new-hero > .container,main .graphic-design-hero > .container,
 main .marketing-page-hero > .container,main .contact-page-hero > .container,
 main .photo-hero > .container,main .inner-hero > .container {padding-block:58px!important;}
 main .web-development-hero h1,main.work-portfolio .work-hero h1,
 main .sales-hero h1,main .qr-hero h1,main .studio-new-hero h1,
 main .graphic-design-hero h1,main .marketing-page-hero h1,
 main .contact-page-hero h1,main .photo-hero h1,main .inner-hero h1 {
  font-size:clamp(2.4rem,10vw,3.4rem)!important;
  overflow-wrap:break-word!important;
 }
}

/* V25: Studio hero starts at the same top anchor as Web Development.
   A shorter headline must not move its whole content downward. */
@media (min-width: 621px) {
  main .studio-new-hero {
    align-items:flex-start!important;
  }
  main .studio-new-hero > .container.studio-new-hero-content {
    padding-top:120px!important;
    padding-bottom:70px!important;
  }
}
@media (max-width: 620px) {
  main .studio-new-hero {
    align-items:flex-start!important;
  }
  main .studio-new-hero > .container.studio-new-hero-content {
    padding-top:72px!important;
    padding-bottom:74px!important;
  }
}