.journey-start{grid-column:1/-1;background:#f4faf9;border:1px solid #cee2e1;border-radius:20px;padding:18px 22px;margin-bottom:18px;color:#084348}.journey-start h2{font-size:20px;margin:0 0 10px}.journey-button{font:inherit;font-size:15px;line-height:1.5;border:1px solid #a8ccca;border-radius:12px;background:#fff;color:#084348;padding:10px 16px;cursor:pointer;margin:4px;min-height:44px}.journey-button:hover{background:#e0f0ed}.journey-button:focus-visible{outline:3px solid #16868a;outline-offset:2px}.journey-start p{font-size:13px;margin:10px 0 0}.journey-help{font-size:13px;margin:4px 0 0;padding:2px 7px;min-height:32px;align-self:start}.journey-dialog{width:min(760px,calc(100% - 24px));max-height:88dvh;overflow:auto;box-sizing:border-box;border:0;border-radius:22px;padding:24px;color:#084348;background:#f7fbfa}.journey-dialog::backdrop{background:rgba(5,43,47,.6)}.journey-dialog h2{font-size:25px;line-height:1.5}.journey-dialog p{font-size:16px;line-height:1.9}.journey-dialog label{display:grid;gap:8px;margin:14px 0}.journey-dialog input,.journey-dialog select{width:100%;box-sizing:border-box;padding:12px;font:inherit;font-size:16px;border:1px solid #9dbfbb;border-radius:10px;background:#fff;color:#084348}.journey-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.journey-compare article{background:white;padding:18px;border-radius:14px}.journey-scope{font-size:14px;line-height:1.8;padding-top:14px;margin-top:14px;border-top:1px solid #83b5b5}.journey-scope summary{cursor:pointer;font-weight:700}.journey-scope p{font-size:14px!important;color:inherit!important}.journey-extra-cost{grid-column:1/-1;font-size:14px!important;line-height:1.7;color:#084348!important;margin:10px 0}.journey-extra-cost:empty{display:none}#heaterState{display:block;font-size:12px;line-height:1.7;grid-column:1/-1;color:inherit;margin-top:4px}.journey-fallback{width:100%;height:100%;min-height:140px;position:absolute;inset:0;background:#e5f2ef;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:auto}.journey-fallback img{width:100%;height:60%;min-height:60px;object-fit:cover;opacity:.75}.journey-fallback p{padding:8px 14px;margin:0;font-size:13px;line-height:1.6;color:#084348;text-align:center}.journey-project-info{padding:16px 24px;max-width:740px;color:#084348;background:#f2f9f7}.journey-project-info p{font-size:15px;line-height:1.8}.journey-inspiration small{display:block}.journey-whatsapp{display:inline-block;background:#084348;color:white;padding:13px 22px;border-radius:14px;margin:18px 5%;text-decoration:none}.configurator .field>span{color:#365f63!important;font-size:14px!important}.configurator input,.configurator select{font-size:16px!important}.lead{color:#426569!important}.form-actions #quoteBtn{background:#fff!important;color:#086b70!important;border:1px solid #b1d1d0!important}.form-actions #siteVisitBtn{background:#086b70!important;color:#fff!important;border:1px solid #086b70!important}.estimate-card{height:auto!important;min-height:0!important}.benefit-row{position:static!important;margin-top:24px!important}.hero-grid{align-items:start!important}@media(max-width:700px){.journey-start{padding:16px;margin:12px 0}.journey-start .journey-button{width:100%;margin:4px 0}.journey-compare{grid-template-columns:1fr}.journey-dialog{padding:18px}.journey-start h2{font-size:19px}.journey-project-info{padding:16px}.journey-button{white-space:normal}}
/* Natural layout: new guidance must not overlap the former fixed-size canvas. */
#fitOuter,#siteFit{position:relative!important;width:100%!important;height:auto!important;transform:none!important;margin:0!important}
.hero-shell{width:100%!important;max-width:1440px!important;height:auto!important;min-height:0!important;margin:auto!important;padding:0 40px 40px!important;box-sizing:border-box;display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px!important;overflow:hidden}
.hero-shell .site-header{grid-column:1/-1;position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:110px;display:flex!important;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:14px 0!important}
.hero-shell .brand-logo{position:static!important;inset:auto!important;width:170px!important;height:auto!important;max-height:92px;object-fit:contain}.hero-shell .main-nav,.hero-shell .home-header-actions{position:static!important;inset:auto!important;transform:none!important;display:flex!important;gap:16px;flex-wrap:wrap}.hero-shell .main-nav a{font-size:15px!important;min-height:44px;display:flex;align-items:center}.hero-shell .hero-copy{grid-column:1/-1}.hero-shell .hero-copy,.hero-shell .configurator,.hero-shell .estimate-card{position:relative!important;inset:auto!important;transform:none!important;width:100%!important;height:auto!important;margin:0!important;max-width:none!important;box-sizing:border-box}.hero-shell .hero-copy h1{font-size:clamp(34px,4vw,58px)!important;line-height:1.35!important;letter-spacing:0!important}.hero-shell .hero-copy .lead{font-size:16px!important;line-height:1.8}.hero-shell .configurator{padding:24px!important;align-self:start}.hero-shell .estimate-card{padding:28px!important;align-self:start}.hero-shell .field{min-width:0}.hero-shell .field label{font-size:14px!important;line-height:1.7;color:#365f63!important}.hero-shell .field input,.hero-shell .field select{width:100%;box-sizing:border-box;min-height:46px;font-size:16px!important}.hero-shell .form-grid{gap:16px!important;grid-template-columns:repeat(2,minmax(0,1fr))}.hero-shell .form-actions{display:flex!important;flex-wrap:wrap!important;gap:10px}.hero-shell .form-actions button{height:auto!important;min-height:48px!important;flex:1 1 180px;padding:12px!important;font-size:14px!important;white-space:normal}.hero-shell .form-actions #resetBtn{flex-basis:100%}.hero-shell .engine-note,.hero-shell .estimate-note{font-size:14px!important;line-height:1.8}.hero-shell .stats dt{font-size:14px}.hero-shell .stats dd{font-size:18px}.hero-shell .dream-rail,.hero-shell .vertical-caption,.hero-shell .scroll-copy,.hero-shell .white-bottom{display:none!important}#heroSignature.more-than-pool-label{grid-column:1/-1;position:relative!important;inset:auto!important;transform:none!important;margin:20px 0!important;font-size:42px!important}.hero-shell .photo-water{opacity:.12;pointer-events:none}.hero-shell .palm-photo{opacity:.1;pointer-events:none}.journey-start{margin:0!important}.journey-fallback{z-index:2}.pool-dock:has(canvas[hidden]),.pool-dock-pill:has(+ canvas[hidden]){display:none!important}
@media(max-width:980px){.hero-shell{display:flex!important;padding:0 20px 32px!important;gap:20px!important}.hero-shell .site-header{justify-content:center}.hero-shell .main-nav{order:3;justify-content:center;width:100%}.hero-shell .brand-logo{width:140px!important}.hero-shell .configurator{padding:18px!important}.hero-shell .estimate-card{padding:22px!important}.hero-shell .site-header .phone-pill{min-width:0!important}.journey-start{width:100%;box-sizing:border-box}.hero-shell .form-actions{display:grid!important;grid-template-columns:1fr}.hero-shell .form-actions button{width:100%}.hero-shell .benefit-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))}.hero-shell .benefit{min-width:0;flex-direction:column}}
@media(max-width:380px){.hero-shell{padding-inline:12px!important}.hero-shell .form-grid{grid-template-columns:1fr!important}.hero-shell .main-nav{gap:8px 13px!important}.hero-shell .main-nav a{font-size:13px!important}}

.journey-compare img{display:block;width:100%;height:auto;margin-bottom:8px}.journey-compare small{font-size:12px;color:#55716e}.journey-dialog [hidden]{display:none!important}


/* V91 scroll stability: keep a clear page header while moving through the long configurator. */
.hero-shell{overflow:clip!important}
.hero-shell .site-header{
  position:sticky!important;
  top:0!important;
  z-index:90!important;
  background:rgba(248,251,250,.94)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(8,67,72,.08);
}
html{scroll-padding-top:118px}
@media(max-width:980px){
  .hero-shell .site-header{top:0!important}
  html{scroll-padding-top:155px}
}


/* =========================================================
   V92 — HOME HERO / HEADER REFINEMENT
   ========================================================= */

/* Full-width header while keeping the configurator content centered. */
@media (min-width:981px){
  .hero-shell{
    max-width:none!important;
    width:100%!important;
    margin:0!important;
    padding:0 0 42px!important;
    grid-template-columns:
      minmax(28px,1fr)
      minmax(0,680px)
      minmax(0,620px)
      minmax(28px,1fr)!important;
    column-gap:24px!important;
    overflow:visible!important;
  }

  .hero-shell .site-header{
    grid-column:1/-1!important;
    width:100%!important;
    margin:0!important;
    padding:14px clamp(28px,5vw,86px)!important;
    box-sizing:border-box!important;
  }

  .hero-shell .hero-copy{
    grid-column:2/4!important;
  }

  .hero-shell .configurator{
    grid-column:2/3!important;
  }

  .hero-shell .estimate-card{
    grid-column:3/4!important;
  }

  .hero-shell > .journey-start{
    grid-column:2/4!important;
  }

  #heroSignature.more-than-pool-label{
    grid-column:2/4!important;
  }
}

/* Main homepage statement: centered and treated as the visual hero. */
.hero-shell .hero-copy{
  text-align:center!important;
  justify-self:center!important;
  align-self:center!important;
  padding:30px 16px 18px!important;
}

.hero-shell .hero-copy .eyebrow{
  margin-inline:auto!important;
  text-align:center!important;
}

.hero-shell .hero-copy h1{
  max-width:1040px!important;
  margin:8px auto 16px!important;
  font-size:clamp(52px,5.35vw,84px)!important;
  line-height:1.06!important;
  letter-spacing:-.035em!important;
  text-wrap:balance;
}

.hero-shell .hero-copy .lead{
  max-width:720px!important;
  margin:0 auto!important;
  text-align:center!important;
  font-size:17px!important;
  line-height:1.75!important;
}

/* Neutralize the old Arabic lead lift now that the hero is centered. */
body[data-lang="ar"] .hero-copy .lead{
  top:auto!important;
  margin:0 auto!important;
}

body[data-lang="ar"] .hero-copy h1{
  font-size:clamp(50px,5.05vw,78px)!important;
  line-height:1.17!important;
  letter-spacing:0!important;
}

/* "More Than a Pool" / "أكثر من مجرد حمام سباحة" — same visual weight and centered. */
#heroSignature.more-than-pool-label,
body[data-lang="ar"] #heroSignature.more-than-pool-label{
  width:min(100%,520px)!important;
  justify-self:center!important;
  margin:24px auto 6px!important;
  font-size:34px!important;
  line-height:1.02!important;
  text-align:center!important;
  transform:none!important;
  direction:inherit;
}

body[data-lang="ar"] #heroSignature.more-than-pool-label{
  direction:rtl!important;
  font-size:34px!important;
  line-height:1.14!important;
}

/* Mobile keeps the same centered hierarchy without oversized type. */
@media(max-width:980px){
  .hero-shell .hero-copy{
    width:100%!important;
    padding:20px 6px 10px!important;
  }

  .hero-shell .hero-copy h1{
    font-size:clamp(42px,10vw,64px)!important;
    line-height:1.08!important;
  }

  body[data-lang="ar"] .hero-copy h1{
    font-size:clamp(40px,9.6vw,60px)!important;
    line-height:1.18!important;
  }

  #heroSignature.more-than-pool-label,
  body[data-lang="ar"] #heroSignature.more-than-pool-label{
    width:100%!important;
    margin:14px auto 4px!important;
    font-size:30px!important;
  }
}


/* =========================================================
   V94 — MOBILE HOME HEADER FULL WIDTH FIX
   ========================================================= */
@media(max-width:980px){

  /* Remove the remaining mobile shell side clipping/padding. */
  .hero-shell{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding-left:0!important;
    padding-right:0!important;
    overflow:visible!important;
  }

  /* Make homepage header span the entire viewport. */
  .hero-shell .site-header{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    padding-left:18px!important;
    padding-right:18px!important;
    box-sizing:border-box!important;
    left:auto!important;
    right:auto!important;
  }

  /* Keep the rest of homepage content padded normally. */
  .hero-shell > :not(.site-header){
    max-width:100%!important;
  }
}

/* Very narrow phones: keep header edges visible without crowding. */
@media(max-width:520px){
  .hero-shell .site-header{
    padding-left:12px!important;
    padding-right:12px!important;
  }
}


/* =========================================================
   V95 — MOBILE NAV ONE ROW + NON-STICKY HEADER
   ========================================================= */
@media(max-width:980px){

  /* Header should stay in its natural document position.
     It scrolls away with the top of the page instead of following the user. */
  .hero-shell .site-header{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
  }

  /* Keep the full mobile header width from V94. */
  .hero-shell .site-header{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    box-sizing:border-box!important;
  }

  /* Force the main navigation links into one single row. */
  .hero-shell .site-header nav,
  .hero-shell .site-header .nav-links,
  .hero-shell .site-header .main-nav{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:clamp(9px,2.4vw,18px)!important;
    white-space:nowrap!important;
    overflow:visible!important;
    width:100%!important;
  }

  .hero-shell .site-header nav a,
  .hero-shell .site-header .nav-links a,
  .hero-shell .site-header .main-nav a{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    font-size:clamp(11px,2.7vw,14px)!important;
    line-height:1.2!important;
    padding-inline:0!important;
  }

  /* Prevent "Contact / تواصل معنا" from wrapping to a second line. */
  .hero-shell .site-header nav a *,
  .hero-shell .site-header .nav-links a *,
  .hero-shell .site-header .main-nav a *{
    white-space:nowrap!important;
  }
}

/* Smaller phones: tighten the nav slightly, still one row. */
@media(max-width:560px){
  .hero-shell .site-header nav,
  .hero-shell .site-header .nav-links,
  .hero-shell .site-header .main-nav{
    gap:7px!important;
  }

  .hero-shell .site-header nav a,
  .hero-shell .site-header .nav-links a,
  .hero-shell .site-header .main-nav a{
    font-size:10.5px!important;
  }
}