/* V0LT V18.5 — wide-desktop homepage alignment restoration
   Restores the approved professional desktop canvas shown in the V0LT reference:
   - header, hero copy and lower sections share one visual alignment system
   - wide repair-bench artwork returns on large monitors
   - Journey / Ecosystem / Trust / Home Lab use the full desktop canvas
   - mobile composition, draggable rails and V18.4 footer remain unchanged
*/

@media (min-width:1450px){
  :root{
    --wide-content:min(calc(100% - 96px),1760px)!important;
  }

  /* Restore the large-screen header canvas already defined in the approved base. */
  .site-header{
    height:86px;
    padding-left:max(48px,calc((100vw - 1760px)/2));
    padding-right:max(48px,calc((100vw - 1760px)/2));
  }

  /* Restore the professional wide hero rather than the V18.3 compact lock. */
  .hero{
    width:100%!important;
    max-width:none!important;
    height:620px!important;
    margin:0!important;
  }
  .hero::before{
    display:block!important;
    background:
      linear-gradient(
        90deg,
        #fff 0%,
        #fff 31%,
        rgba(255,255,255,.998) 36%,
        rgba(255,255,255,.92) 41%,
        rgba(255,255,255,.68) 46%,
        rgba(255,255,255,.34) 50%,
        rgba(255,255,255,.08) 54%,
        rgba(255,255,255,0) 58%
      )!important;
  }
  .hero-copy{
    left:max(56px,calc((100vw - 1760px)/2 + 18px))!important;
    top:50%!important;
    width:640px!important;
    translate:0 -50%!important;
  }
  .hero h1{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    width:max-content!important;
    max-width:none!important;
    font-size:76px!important;
    line-height:.94!important;
    letter-spacing:-4px!important;
    font-weight:820!important;
    white-space:normal!important;
  }
  .hero-title-desktop,
  .hero-title-desktop>span{
    display:block!important;
  }
  .hero-title-mobile{
    display:none!important;
  }
  .hero-line-main,
  .hero-line-accent{
    white-space:nowrap!important;
  }
  .hero-line-main{
    color:#0d1015!important;
  }
  .hero-line-accent{
    margin-top:8px!important;
    color:var(--orange)!important;
  }
  .hero-copy>p{
    width:auto!important;
    max-width:515px!important;
    margin-top:27px!important;
    color:#5f6670!important;
    font-size:16px!important;
    line-height:1.58!important;
  }
  .hero-actions{
    width:max-content!important;
    max-width:540px!important;
    margin-top:30px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:14px!important;
  }
  .hero-actions .button{
    width:auto!important;
    height:52px!important;
    min-width:0!important;
    padding:0 22px!important;
    border-radius:11px!important;
    gap:20px!important;
    font-size:14px!important;
  }
  .hero-actions .primary{
    min-width:220px!important;
  }
  .hero-actions .secondary{
    min-width:300px!important;
  }
  .benefits{
    margin-top:32px!important;
    gap:24px!important;
  }
  .benefits>div{
    gap:10px!important;
    font-size:16px!important;
    line-height:1.28!important;
  }
  .benefit-icon{
    width:38px!important;
    height:38px!important;
    border:1px solid #dfe2e6!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 6px 16px rgba(17,20,25,.035)!important;
  }
  .benefit-icon svg{
    width:17px!important;
    height:17px!important;
  }
  .hero-art{
    left:43%!important;
    right:0!important;
    top:0!important;
    width:auto!important;
    max-width:none!important;
    height:100%!important;
    background-image:url('../hero-showroom-wide.jpg')!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
  .hero-art::after{
    display:block!important;
  }

  /* Lower homepage sections use the same broad canvas as the hero/header. */
  .journey{
    width:var(--wide-content)!important;
    padding:48px 0 54px!important;
    grid-template-columns:220px repeat(3,minmax(0,1fr))!important;
    gap:22px!important;
  }
  .journey-intro{
    padding:34px 12px 18px 0!important;
  }
  .journey-intro h2{
    font-size:34px!important;
  }
  .journey-intro p{
    max-width:178px!important;
    font-size:16px!important;
  }
  .journey-card{
    height:374px!important;
    border-radius:14px!important;
  }
  .journey-card h3{
    font-size:27px!important;
  }
  .journey-card p{
    font-size:16px!important;
    line-height:1.55!important;
  }

  .ecosystem{
    width:var(--wide-content)!important;
    min-height:470px!important;
    padding:48px 0 76px!important;
    grid-template-columns:310px minmax(0,1fr)!important;
    gap:48px!important;
  }
  .ecosystem-intro h2{
    max-width:290px!important;
    font-size:36px!important;
  }
  .ecosystem-intro p{
    max-width:285px!important;
    font-size:16px!important;
  }
  .ecosystem-stage{
    height:420px!important;
  }

  .trust-strip{
    width:var(--wide-content)!important;
    min-height:104px!important;
    margin:4px auto 28px!important;
    padding:18px 24px!important;
    border-radius:14px!important;
  }
  .trust-item{
    padding:3px 28px!important;
  }
  .trust-copy strong,
  .trust-copy small{
    font-size:16px!important;
  }

  .store-showcase{
    width:var(--wide-content)!important;
    padding:24px 0 68px!important;
  }
  .store-showcase-heading{
    margin-bottom:28px!important;
  }
  .store-showcase-heading h2{
    font-size:40px!important;
  }
  .store-showcase-heading>p{
    max-width:430px!important;
    font-size:16px!important;
  }
  .store-visual-panel{
    min-height:370px!important;
    grid-template-columns:minmax(0,1.65fr) minmax(320px,.62fr)!important;
  }
  .store-visual-image,
  .store-visual-map{
    min-height:370px!important;
  }
  .store-card-grid{
    gap:20px!important;
    margin-top:22px!important;
  }
  .location-card{
    min-height:280px!important;
    padding:23px 23px 20px!important;
  }

  .site-footer{
    padding-left:max(48px,calc((100% - 1760px)/2));
    padding-right:max(48px,calc((100% - 1760px)/2));
  }
}

/* Match the approved ultra-wide reference exactly. At the user's 90% browser
   zoom this produces the same 1840px CSS canvas seen in the supplied image. */
@media (min-width:1900px){
  :root{
    --wide-content:min(calc(100% - 96px),1840px)!important;
  }

  .site-header,
  .site-footer{
    padding-left:max(48px,calc((100vw - 1840px)/2));
    padding-right:max(48px,calc((100vw - 1840px)/2));
  }

  .hero{
    height:660px!important;
  }
  .hero-copy{
    left:max(72px,calc((100vw - 1840px)/2))!important;
    width:680px!important;
  }
  .hero h1{
    font-size:82px!important;
  }
  .hero-art{
    left:40%!important;
  }
  .hero::before{
    background:
      linear-gradient(
        90deg,
        #fff 0%,
        #fff 29%,
        rgba(255,255,255,.998) 34%,
        rgba(255,255,255,.90) 39%,
        rgba(255,255,255,.62) 44%,
        rgba(255,255,255,.28) 48%,
        rgba(255,255,255,.06) 52%,
        rgba(255,255,255,0) 56%
      )!important;
  }

  .journey,
  .ecosystem,
  .trust-strip,
  .store-showcase{
    width:var(--wide-content)!important;
  }
}