.hero{
  position:relative;
  min-height:760px;
  overflow:hidden;
  display:flex;
  align-items:center;
  color:#fff;
  background:var(--navy);
  isolation:isolate;
}
.hero>picture{position:absolute;inset:0;z-index:-3;display:block}
.hero img.bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 38%;
  z-index:auto;
  transform:scale(1.015);
}
.hero .veil{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(7,27,42,.94) 0%,rgba(7,27,42,.84) 38%,rgba(7,27,42,.44) 68%,rgba(7,27,42,.24) 100%),
    linear-gradient(180deg,rgba(11,38,57,.08) 0%,rgba(11,38,57,.16) 55%,rgba(11,38,57,.68) 100%);
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:180px;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(7,27,42,.34));
}
.hero .wrap{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
  align-items:center;
  gap:64px;
  padding-top:86px;
  padding-bottom:86px;
}
.hero-copy{
  max-width:660px;
}
.hero .eyebrow{
  margin-bottom:14px;
  text-shadow:0 1px 12px rgba(0,0,0,.2);
}
.hero h1{
  max-width:11.5ch;
  margin:0;
  font-size:clamp(2.6rem,5.15vw,4.85rem);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.hero h1 em{
  display:inline-block;
  font-style:normal;
  color:var(--sky);
}
.hero .seven{
  margin:24px 0 10px;
  font-size:clamp(1.2rem,2vw,1.62rem);
  font-weight:800;
  line-height:1.25;
  color:#fff;
}
.hero .seven b{
  color:var(--orange);
}
.hero p.sub{
  max-width:58ch;
  margin:0;
  color:#e8f0f5;
  font-size:1.05rem;
  line-height:1.75;
}
.hero .ctas{
  display:flex;
  gap:14px;
  margin-top:30px;
  flex-wrap:wrap;
}
.hero .ctas .btn{
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.hero .ctas .btn.ghost{
  backdrop-filter:blur(8px);
  background:rgba(255,255,255,.06);
}

.hero-gallery{
  position:relative;
  width:min(100%,470px);
  height:510px;
  justify-self:end;
}
.hero-shot{
  position:absolute;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.28);
  border-radius:20px;
  background:#17384d;
  box-shadow:0 28px 70px rgba(0,0,0,.34);
}
.hero-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-shot-main{
  top:8px;
  right:0;
  width:365px;
  height:363px;
}
.hero-shot-main img{
  object-position:center;
}
.hero-shot-small{
  left:0;
  bottom:0;
  width:259px;
  height:221px;
  border:7px solid rgba(255,255,255,.96);
}
.hero-shot-small img{
  object-position:center;
}
.hero-gallery::before{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  right:-46px;
  bottom:4px;
  border-radius:50%;
  background:rgba(242,78,36,.20);
  filter:blur(2px);
  z-index:-1;
}

@media(max-width:980px){
  .hero{
    min-height:720px;
  }
  .hero .wrap{
    grid-template-columns:minmax(0,1fr) 300px;
    gap:34px;
  }
  .hero-gallery{
    width:300px;
    height:420px;
  }
  .hero-shot-main{
    width:86%;
    height:300px;
  }
  .hero-shot-small{
    width:66%;
    height:190px;
  }
}

@media(max-width:760px){
  .hero{
    min-height:auto;
    align-items:flex-end;
  }
  .hero img.bg{
    object-position:center 38%;
  }
  .hero .veil{
    background:
      linear-gradient(180deg,rgba(7,27,42,.32) 0%,rgba(7,27,42,.60) 40%,rgba(7,27,42,.96) 100%);
  }
  .hero .wrap{
    display:block;
    padding-top:190px;
    padding-bottom:54px;
  }
  .hero-copy{
    max-width:620px;
  }
  .hero h1{
    max-width:12ch;
    font-size:clamp(2.35rem,11vw,3.65rem);
  }
  .hero p.sub{
    font-size:1rem;
    line-height:1.65;
  }
  .hero .ctas{
    margin-top:24px;
  }
  .hero-gallery{
    display:none;
  }
}

@media(max-width:460px){
  .hero .wrap{
    padding-top:160px;
    padding-bottom:46px;
  }
  .hero .ctas{
    display:grid;
    grid-template-columns:1fr;
  }
  .hero .ctas .btn{
    width:100%;
    text-align:center;
  }
}
.trust{background:var(--sand)}
.trust .wrap{display:flex;gap:10px 34px;flex-wrap:wrap;justify-content:center;padding:18px 20px;font-weight:600;font-size:.92rem}
.trust span::before{content:"";display:inline-block;width:9px;height:9px;background:var(--orange);margin-right:9px;clip-path:polygon(0 0,100% 50%,0 100%)}
.chooser{padding:72px 0 30px}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:26px}
.door{background:var(--navy);color:#fff;border-radius:10px;padding:26px 22px;display:block;transition:transform .18s ease}
.door:hover{transform:translateY(-3px)}
.door .em{font-size:1.6rem;display:block;margin-bottom:8px}
.door b{font-size:1.08rem;display:block;margin-bottom:4px}
.door span{color:var(--sky);font-size:.92rem}
.door.alt{background:var(--orange)}.door.alt span{color:#ffe4da}
.shelf{padding:56px 0 60px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;margin-top:30px}
.card{background:#fff;border:1px solid #e8e2d6;border-radius:12px;overflow:hidden;display:flex}
.card-link{display:flex;flex-direction:column;width:100%}
.card:hover{box-shadow:0 14px 34px rgba(11,38,57,.14)}
.ph{aspect-ratio:4/3;overflow:hidden}
.ph picture{display:block;width:100%;height:100%}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.card:hover .ph img{transform:scale(1.04)}
.ph-empty{background:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.ph-empty svg{width:52%;height:auto}.ph-empty span{color:var(--sky);font-size:.85rem;font-weight:600;letter-spacing:.06em}
.pname{padding:18px 20px 0;display:flex;flex-direction:column}
.flav{font-size:1.9rem;font-weight:800;letter-spacing:.02em;line-height:1}
.fulln{font-size:.86rem;font-weight:600;color:#5a7183;margin-top:5px}
.desc{padding:10px 20px 0;font-size:.95rem;color:#33506a}
.meta{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 0}
.lvl i{display:inline-block;width:11px;height:11px;background:var(--orange);margin-right:3px;clip-path:polygon(0 0,100% 50%,0 100%)}
.lvl i.o{background:#e4d9c6}.price{font-weight:800;color:var(--navy)}
.tag{padding:6px 20px 0;font-size:.82rem;color:#5d6b73}.card .btn{margin:16px 20px 20px;align-self:flex-start}
.included{background:var(--sand);padding:64px 0}
.inc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:26px}
.inc{background:#fff;border:1px solid #e8e2d6;border-radius:10px;padding:22px}
.inc b{display:block;margin-bottom:6px;font-size:1.02rem}.inc p{font-size:.92rem;color:#33506a}
.inc .n{display:inline-block;width:26px;height:26px;background:var(--orange);color:#fff;border-radius:50%;text-align:center;line-height:26px;font-weight:800;margin-bottom:10px}
.cmp{padding:70px 0}
.tblwrap{overflow-x:auto;margin-top:26px;border:1px solid #e8e2d6;border-radius:12px}
table{border-collapse:collapse;width:100%;min-width:900px;font-size:.9rem}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid #efe9dd;vertical-align:top}
thead th{background:var(--navy);color:#fff;font-size:.95rem;letter-spacing:.03em}
tbody th{background:var(--sand);font-weight:700;white-space:nowrap}tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
.band{background:var(--navy);color:#fff;padding:64px 0}.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.band h2{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:800;max-width:22ch;letter-spacing:-.015em}.band h2 b{color:var(--sky)}
.occasions{padding:70px 0}.occ-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:26px}
.occ{border:1px solid #e8e2d6;border-radius:10px;padding:22px;background:#fff}.occ .em{font-size:1.5rem}.occ b{display:block;margin:8px 0 4px}.occ p{font-size:.92rem;color:#33506a}.occ a{color:var(--orange);font-weight:600;font-size:.92rem}
.quote{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  min-height:460px;
  overflow:hidden;
  background:var(--navy);
  color:#fff;
}
.quote-media{
  position:relative;
  min-height:460px;
  overflow:hidden;
}
.quote-media picture{display:block;width:100%;height:100%}
.quote-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(11,38,57,.04) 50%,rgba(11,38,57,.28) 100%);
}
.quote img{
  width:100%;
  height:100%;
  min-height:460px;
  object-fit:cover;
  object-position:center;
}
.quote .txt{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:58px clamp(34px,5vw,76px);
  text-align:left;
  background:
    radial-gradient(circle at 100% 0%,rgba(170,207,223,.13),transparent 42%),
    var(--navy);
}
.quote .txt::before{
  content:"";
  width:54px;
  height:4px;
  margin-bottom:24px;
  border-radius:99px;
  background:var(--orange);
}
.quote .quote-kicker{
  margin:0 0 10px;
  color:var(--sky);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.quote p{
  max-width:18ch;
  margin:0;
  font-size:clamp(1.55rem,2.6vw,2.45rem);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.025em;
  text-wrap:balance;
}

@media(max-width:820px){
  .quote{
    grid-template-columns:1fr;
    min-height:0;
  }
  .quote-media{
    min-height:330px;
  }
  .quote img{
    min-height:330px;
    height:330px;
    object-position:center;
  }
  .quote .txt{
    padding:38px 20px 42px;
  }
  .quote p{
    max-width:24ch;
  }
}

@media(max-width:560px){
  .hero .wrap{
    padding-left:0;
    padding-right:0;
  }
  .hero-copy{
    padding-left:20px;
    padding-right:20px;
  }

  .quote{
    width:100%;
    margin-left:0;
    margin-right:0;
  }
  .quote-media{
    min-height:290px;
  }
  .quote img{
    height:290px;
    min-height:290px;
  }
  .quote .txt{
    padding:34px 20px 38px;
  }

  .faq .wrap{
    max-width:none;
    padding-left:0;
    padding-right:0;
  }
  .faq .eyebrow,
  .faq h2.sec{
    padding-left:20px;
    padding-right:20px;
  }
  .faq details{
    margin-top:10px;
    border-left:0;
    border-right:0;
    border-radius:0;
    padding:18px 20px;
  }
}
.why{padding:70px 0;background:#fff}.why .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-top:26px}.why .col b{display:block;margin-bottom:6px;font-size:1.05rem}.why .col p{font-size:.95rem;color:#33506a}
.faq{padding:72px 0;background:var(--sand)}.faq details{background:#fff;border:1px solid #e8e2d6;border-radius:10px;margin-top:14px;padding:18px 22px}.faq summary{font-weight:700;cursor:pointer}.faq details p{margin-top:10px;color:#33506a;font-size:.97rem}
.seo{padding:60px 0;background:#fff}.seo h2{font-size:1.3rem;font-weight:800;margin-bottom:12px}.seo p{max-width:78ch;color:#33506a;font-size:.97rem;margin-bottom:12px}


/* =========================================================
   MOBILE FULL-BLEED SECTIONS
   Remove outer page gutters from visual/background sections,
   while keeping readable padding on their inner content.
   ========================================================= */
@media (max-width: 760px){

  /* Full-width section backgrounds */
  .hero,
  .trust,
  .band,
  .quote,
  .faq,
  footer{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }

  /* Hero content still needs safe text spacing */
  .hero .wrap{
    width:100%;
    max-width:none;
    padding-left:20px;
    padding-right:20px;
  }

  /* Trust strip: background edge-to-edge, content padded */
  .trust .wrap{
    width:100%;
    max-width:none;
    padding-left:20px;
    padding-right:20px;
  }

  /* WhatsApp navy banner */
  .band .wrap{
    width:100%;
    max-width:none;
    padding-left:20px;
    padding-right:20px;
  }

  /* Split/image banner */
  .quote{
    border-radius:0;
  }

  .quote .txt{
    padding-left:20px;
    padding-right:20px;
  }

  /* FAQ: sand background edge-to-edge */
  .faq .wrap{
    width:100%;
    max-width:none;
    padding-left:0;
    padding-right:0;
  }

  .faq .eyebrow,
  .faq h2.sec{
    padding-left:20px;
    padding-right:20px;
  }

  .faq details{
    margin-left:0;
    margin-right:0;
    border-left:0;
    border-right:0;
    border-radius:0;
    padding-left:20px;
    padding-right:20px;
  }

  /* Footer background edge-to-edge, content remains readable */
  footer .wrap{
    width:100%;
    max-width:none;
    padding-left:20px;
    padding-right:20px;
  }
}