@media (min-width:721px){
  .brand.brandExactLogo{display:flex;align-items:center;gap:10px;font-size:0;line-height:1}
  .brand.brandExactLogo:before{display:none!important}
  .brand.brandExactLogo .siteExactLogo{display:block;width:150px;height:auto;object-fit:contain;flex:0 0 auto}
  .brand.brandExactLogo small{display:block;font-size:.58rem;line-height:1.2;letter-spacing:.14em;margin:0;color:#9db2be;max-width:155px}

  .hero{padding:18px 0 34px}
  .heroGrid{grid-template-columns:minmax(0,1.08fr) minmax(420px,.78fr)!important;gap:26px!important;align-items:stretch!important;margin-bottom:12px!important;min-height:248px}
  .heroGrid>div:first-child{display:flex;flex-direction:column;justify-content:center;padding:6px 0}
  .heroGrid h1{font-size:clamp(2.7rem,4vw,4.05rem)!important;line-height:.98!important;margin-bottom:12px!important;max-width:760px!important}
  .heroGrid .eyebrow{margin-bottom:10px}
  .heroGrid p{font-size:.96rem;line-height:1.48;max-width:720px}
  .heroGrid .pickupLine{margin-top:8px!important;font-size:.9rem}

  .heroSide.desktopHeroPhoto{position:relative;overflow:visible;min-height:248px;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;isolation:isolate}
  .heroSide.desktopHeroPhoto:before{content:""!important;position:absolute;inset:-12px -18px -18px -72px;display:block;background:url('/assets/kitchen-crossover.jpg') center 49%/cover no-repeat;border-radius:18px;z-index:-2;opacity:.98;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%),linear-gradient(0deg,transparent 0%,#000 23%,#000 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%),linear-gradient(0deg,transparent 0%,#000 23%,#000 100%);mask-composite:intersect}
  .heroSide.desktopHeroPhoto:after{content:"";position:absolute;inset:-12px -18px -18px -72px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(6,26,44,.92) 0%,rgba(6,26,44,.24) 26%,rgba(6,26,44,0) 58%),linear-gradient(0deg,rgba(6,26,44,.9) 0%,rgba(6,26,44,.08) 30%,rgba(6,26,44,0) 62%);border-radius:18px}
  .heroPhotoCaption{position:absolute;right:8px;bottom:9px;display:grid;gap:2px;padding:10px 13px;border-radius:11px;background:rgba(5,24,40,.76);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);box-shadow:0 12px 34px rgba(0,0,0,.22);max-width:240px}
  .heroPhotoCaption strong{font-size:.9rem;color:#fff;margin:0!important}
  .heroPhotoCaption span{font-size:.72rem;color:#bad0dc;font-weight:700}

  .pricingHead>div,.serviceName{padding-top:10px!important;padding-bottom:10px!important}
  .priceCell{padding-top:10px!important;padding-bottom:10px!important}
  .serviceName strong{font-size:.94rem}
  .serviceName span{font-size:.73rem}
  .pricingFoot{padding-top:10px!important;padding-bottom:10px!important}

  .referenceFooter .footerExactLogo{display:block;width:118px;height:auto;object-fit:contain}
  .referenceCrossover .brandPanel.exactLogoPanel{background-repeat:no-repeat!important;background-position:center!important;background-size:min(82%,330px) auto!important}
}

@media (min-width:1001px){
  .hero>.wrap{grid-template-columns:minmax(0,1fr) 330px!important;gap:16px!important}
  .heroGrid{grid-column:1/-1!important}
}

@media (min-width:721px) and (max-width:1000px){
  .heroGrid{grid-template-columns:minmax(0,1fr) 390px!important}
}

/* Desktop visual correction. Hero/brand are preserved; builder below is one authoritative grid. */
@media (min-width:721px){
  .header .nav{height:86px!important;padding-top:8px!important;align-items:center!important}
  .brand{min-width:190px!important;align-items:center!important;padding:0!important}
  .brand .desktopExactBrand{display:block!important;width:118px!important;height:76px!important;object-fit:contain!important;object-position:center!important;flex:0 0 auto!important}
  .brand .desktopBrandGuard{display:none!important}
  .brand .brandMark,.brand .brandMarket,.brand .brandReady,.brand .brandInstall,.brand small{display:none!important}
  .nav nav{padding-top:0!important}
  .navCta{margin-top:0!important}

  .hero>.wrap{padding-top:90px!important}
  .heroGrid{grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr)!important;min-height:205px!important;gap:20px!important;align-items:stretch!important}
  .heroGrid>div:first-child{padding:0 8px 0 0!important;justify-content:center!important}
  .heroGrid h1,.hero h1{font-size:clamp(2.55rem,3.3vw,3.35rem)!important;line-height:.97!important;margin:0 0 9px!important;max-width:720px!important}
  .heroGrid>div:first-child>p:not(.pickupLine){font-size:.93rem!important;line-height:1.32!important;max-width:670px!important}
  .eyebrow{margin:0 0 8px!important;padding:6px 11px!important;font-size:.67rem!important}

  .heroSide.desktopHeroPhoto{min-height:205px!important;overflow:visible!important;transform:none!important;filter:none!important;background:none!important}
  .heroSide.desktopHeroPhoto:before{content:""!important;display:block!important;position:absolute!important;inset:-8px -12px -12px -58px!important;background-image:url('/assets/kitchen-crossover.jpg')!important;background-size:cover!important;background-position:center 51%!important;background-repeat:no-repeat!important;border-radius:0!important;filter:none!important;transform:none!important;opacity:1!important;z-index:-2!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.26) 10%,#000 34%,#000 100%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.45) 12%,#000 31%,#000 100%)!important;-webkit-mask-composite:source-in!important;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.26) 10%,#000 34%,#000 100%),linear-gradient(0deg,transparent 0%,rgba(0,0,0,.45) 12%,#000 31%,#000 100%)!important;mask-composite:intersect!important}
  .heroSide.desktopHeroPhoto:after{content:none!important;display:none!important;border:0!important;transform:none!important}
  .heroSide.desktopHeroPhoto .heroPhotoCaption{display:none!important}
  .mockBenefits{display:none!important}

  /* One desktop builder layout: pickup -> heading -> cards + order panel. */
  .hero>.wrap{grid-template-columns:minmax(0,1fr) 330px!important;column-gap:16px!important;row-gap:0!important;align-items:start!important}
  .heroGrid{grid-column:1/-1!important;grid-row:1!important}
  .pickupDeliveryLine{grid-column:1!important;grid-row:2!important;display:inline-flex!important;align-items:center!important;justify-self:start!important;width:auto!important;max-width:100%!important;margin:10px 0 10px!important;padding:7px 12px!important;border:1px solid rgba(88,230,107,.38)!important;border-radius:999px!important;background:rgba(88,230,107,.11)!important;color:#dff7e3!important;font-size:.82rem!important;line-height:1!important;font-weight:780!important;letter-spacing:.005em!important;box-shadow:none!important}
  .pickupDeliveryLine:before{content:"✓"!important;display:grid!important;place-items:center!important;width:18px!important;height:18px!important;margin-right:7px!important;border-radius:50%!important;background:#58e66b!important;color:#06243b!important;font-size:.7rem!important;font-weight:950!important;flex:0 0 18px!important}
  .builderIntro{grid-column:1!important;grid-row:3!important;display:flex!important;position:relative!important;z-index:3!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;box-sizing:border-box!important;width:100%!important;min-height:68px!important;margin:0 0 12px!important;padding:12px 16px!important;border:1px solid var(--line)!important;border-radius:12px!important;background:rgba(7,38,62,.84)!important;box-shadow:0 18px 50px rgba(0,0,0,.2)!important}
  .builderIntro h2{margin:0!important;font-size:1.45rem!important;line-height:1.05!important}
  .builderIntro p{margin:5px 0 0!important;font-size:.8rem!important;line-height:1.3!important}
  .saveNote{flex:0 0 auto!important;font-size:.9rem!important;line-height:1.08!important}
  .reactiveServiceMenu{grid-column:1!important;grid-row:4!important;position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;width:100%!important;margin:0 0 18px!important;align-self:start!important}
  .reactiveServiceCard{min-height:176px!important;border-radius:18px!important}
  .reactiveCardSummary{min-height:176px!important;padding:18px!important;grid-template-columns:108px minmax(0,1fr) 24px!important;gap:16px!important}
  .reactiveImageWrap{width:108px!important;height:108px!important;border-radius:14px!important}
  .reactiveCardCopy{gap:5px!important}
  .reactiveCardCopy strong{font-size:1.08rem!important;line-height:1.08!important}
  .reactiveCardCopy small{font-size:.76rem!important;line-height:1.35!important}
  .reactiveCardCopy b{font-size:1rem!important;margin-top:6px!important}
  .emptyOrderPanel,.orderWrap{grid-column:2!important;grid-row:4!important;position:sticky!important;top:12px!important;align-self:start!important;width:100%!important;min-height:0!important;margin:0!important}
  .pricingShell{grid-column:1!important;grid-row:5!important;margin:0!important}

  .pricingHead{min-height:42px!important}
  .pricingHead>div{font-size:.68rem!important}
  .pricingHead small{font-size:.64rem!important}
  .serviceRow{min-height:61px!important}
  .serviceName{padding:7px 10px 7px 92px!important}
  .serviceProductImg{left:14px!important;width:58px!important;height:49px!important}
  .serviceProduct-fan{left:5px!important;width:72px!important;height:53px!important}
  .serviceProduct-toilet,.serviceProduct-disposal{height:54px!important}
  .serviceName strong{font-size:.88rem!important}
  .serviceName>span:not(.serviceProductImg),.serviceName .serviceTitleLine+span{font-size:.67rem!important;margin-top:3px!important}
  .priceCell{min-height:61px!important}
  .priceCell b{font-size:1.08rem!important}

  .referenceFooter .right{display:flex!important;align-items:center!important;justify-content:flex-end!important}
  .referenceFooter .desktopFooterBrand{display:block!important;width:120px!important;height:88px!important;object-fit:contain!important}
}


/* Desktop builder alignment: service cards and order panel share one vertical frame. */
@media (min-width:721px){
  .reactiveServiceMenu{
    align-self:stretch!important;
    height:100%!important;
    min-height:0!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    margin-bottom:0!important;
  }
  .reactiveServiceCard{
    align-self:stretch!important;
    height:100%!important;
    min-height:0!important;
  }
  .reactiveCardSummary{
    height:100%!important;
    min-height:0!important;
  }
  .emptyOrderPanel,.orderWrap{
    align-self:start!important;
    margin-top:0!important;
    transform:none!important;
  }
  .reactiveImageWrap{
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .reactiveImageWrap img.productPhoto{
    background:transparent!important;
  }
}


/* Full-width builder heading and cleaner desktop hero. */
@media (min-width:721px){
  .pickupDeliveryLine{display:none!important}
  .builderIntro{
    grid-column:1/-1!important;
    width:100%!important;
    margin:8px 0 16px!important;
    padding:15px 20px!important;
    border-color:rgba(164,213,231,.3)!important;
    background:linear-gradient(90deg,rgba(7,38,62,.96),rgba(8,48,75,.88))!important;
    box-shadow:0 16px 42px rgba(0,0,0,.18)!important;
  }
  .builderIntro h2{font-size:1.55rem!important}
  .builderIntro p{font-size:.84rem!important;color:#dceaf1!important}
  .saveNote{margin-left:auto!important;padding-left:24px!important}
  .brand .desktopExactBrand{
    background:transparent!important;
    mix-blend-mode:normal!important;
  }
}


/* Requested desktop placement correction: trust follows cards, savings aligns to cart, photo fades on all sides. */
@media (min-width:721px){
  .postOrderTrust{
    grid-column:1/-1!important;
    grid-row:5!important;
    margin:16px 0 8px!important;
  }

  .builderIntro{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 330px!important;
    column-gap:16px!important;
    align-items:center!important;
  }
  .builderIntro>div:first-child{grid-column:1!important}
  .saveNote{
    grid-column:2!important;
    justify-self:center!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    text-align:center!important;
    transform:none!important;
  }

  .heroSide.desktopHeroPhoto:after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:-8px -12px -12px -58px!important;
    z-index:-1!important;
    pointer-events:none!important;
    border:0!important;
    border-radius:0!important;
    transform:none!important;
    background:linear-gradient(180deg,rgba(6,36,59,.98) 0%,rgba(6,36,59,.68) 11%,rgba(6,36,59,.22) 23%,rgba(6,36,59,0) 36%)!important;
  }
}


/* Desktop proportion pass: denser service tiles and a tighter ordering header. */
@media (min-width:1001px){
  .builderIntro{
    height:76px!important;
    min-height:76px!important;
    margin:4px 0 14px!important;
    padding:10px 20px!important;
  }

  .reactiveServiceMenu{
    align-self:start!important;
    height:510px!important;
    min-height:510px!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
  }
  .reactiveServiceCard{
    align-self:stretch!important;
    height:auto!important;
    min-height:0!important;
  }
  .reactiveCardSummary{
    height:100%!important;
    min-height:0!important;
    padding:16px 18px!important;
  }

  .emptyOrderPanel{
    height:510px!important;
    min-height:510px!important;
  }
  .orderWrap{
    min-height:510px!important;
  }
}