/* Verde Villas — landing page
   Golden-ratio system: spacing 8 / 13 / 21 / 34 / 55 / 89 / 144 · type 13 / 16 / 21 / 34 / 55 / 89
   Colours: ivory #FBF6F0 · beige #F1E7D6 · bronze #8A7349 · deep green #4C5D3F (numbers + buttons only) */

@font-face{font-family:'Montserrat';font-weight:400;font-display:swap;src:url(../fonts/Montserrat-Regular.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:500;font-display:swap;src:url(../fonts/Montserrat-Medium.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:600;font-display:swap;src:url(../fonts/Montserrat-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/PlayfairDisplay-Italic.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/PlayfairDisplay-SemiBoldItalic.woff2) format('woff2')}
@font-face{font-family:'Noto Sans Arabic';font-weight:400;font-display:swap;src:url(../fonts/NotoSansArabic-Regular.woff2) format('woff2')}
@font-face{font-family:'Noto Sans Arabic';font-weight:500;font-display:swap;src:url(../fonts/NotoSansArabic-Medium.woff2) format('woff2')}
@font-face{font-family:'Noto Sans Arabic';font-weight:600;font-display:swap;src:url(../fonts/NotoSansArabic-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Alexandria';font-weight:500;font-display:swap;src:url(../fonts/Alexandria-Medium.woff2) format('woff2')}

:root{
  --ivory:#FBF6F0;--beige:#F1E7D6;--bronze:#8A7349;--green:#4C5D3F;--green-d:#3F4F33;
  --ink:#4A3F2E;--muted:#9C8E74;--line:#E6DAC4;--lbronze:#CDBEA3;--sand:#F2D8A6;--white:#FFFFFF;
  --shade:16,21,15;
  --s1:8px;--s2:13px;--s3:21px;--s4:34px;--s5:55px;--s6:89px;--s7:144px;
  --pad:21px;--max:1262px;
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --body-lh:1.618;
}
[dir=rtl]{
  --sans:'Noto Sans Arabic','Montserrat','Segoe UI',Tahoma,Arial,sans-serif;
  --serif:'Alexandria','Noto Sans Arabic','Montserrat',Tahoma,sans-serif;
  --body-lh:1.8;
}
@media (min-width:768px){:root{--pad:55px}}
@media (min-width:1200px){:root{--pad:89px}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--ivory);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:var(--body-lh);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.num{direction:ltr;unicode-bidi:isolate;display:inline-block}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--s6)}
@media (min-width:1200px){.sec{padding-block:var(--s7)}}
.beige{background:var(--beige)}

/* type */
.lbl{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1.4}
[dir=rtl] .lbl{font-size:16px;letter-spacing:0;font-weight:500}
.h2{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--bronze);font-size:34px;line-height:1.15;margin-top:var(--s2)}
[dir=rtl] .h2{font-style:normal;font-weight:500;line-height:1.4}
@media (min-width:768px){.h2{font-size:55px}}
.lead{font-size:16px;max-width:557px}
@media (min-width:1200px){.lead{font-size:21px}}
.lead+.lead{margin-top:var(--s3)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:55px;padding:0 var(--s4);font-family:var(--sans);font-size:16px;font-weight:600;text-decoration:none;border:1px solid transparent;border-radius:2px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn-primary{background:var(--green);color:var(--ivory)}
.btn-primary:hover{background:var(--green-d)}
.btn-ghost{background:transparent;color:var(--ivory);border-color:rgba(251,246,240,.7)}
.btn-ghost:hover{background:rgba(251,246,240,.12)}
.btn:focus-visible,.chip input:focus-visible+span,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.btn svg{width:18px;height:18px;flex:none}

/* header (over the hero) */
.top{position:absolute;inset-inline:0;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-block:var(--s3)}
@media (min-width:1200px){.top .wrap{padding-block:var(--s4)}}
.wm{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600;font-size:21px;line-height:1;color:var(--ivory);text-decoration:none;white-space:nowrap}
[dir=rtl] .wm{font-family:'Alexandria','Noto Sans Arabic',Tahoma,sans-serif;font-style:normal;font-weight:500;font-size:23px}
@media (min-width:768px){.wm{font-size:34px}[dir=rtl] .wm{font-size:37px}}
.top-end{display:flex;align-items:center;gap:var(--s2)}
.top-end img{height:12px;width:auto}
@media (min-width:768px){.top-end{gap:var(--s4)}.top-end img{height:21px}}
.lang{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 var(--s2);border:1px solid rgba(251,246,240,.6);border-radius:34px;color:var(--ivory);text-decoration:none;font-size:13px;font-weight:600;line-height:1}
.lang:hover{background:rgba(251,246,240,.12)}
.lang .long{display:none}
@media (min-width:768px){.lang .long{display:inline}.lang .short{display:none}}
.lang[lang=ar]{font-family:'Noto Sans Arabic',Tahoma,sans-serif;font-size:16px;font-weight:500}
.lang[lang=en]{font-family:'Montserrat',Arial,sans-serif}

/* hero */
.hero{position:relative;min-height:620px;height:100vh;height:100svh;max-height:1100px;color:var(--ivory);overflow:hidden;background:#2b2f27}
.hero picture,.hero picture img{position:absolute;inset:0;width:100%;height:100%}
.hero picture img{object-fit:cover;object-position:50% 0}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(var(--shade),.5) 0%,rgba(var(--shade),0) 18%,rgba(var(--shade),0) 38.2%,rgba(var(--shade),.7) 61.8%,rgba(var(--shade),.9) 100%)}
@media (min-width:768px){
  .hero picture img{object-position:70% 50%}
  [dir=rtl] .hero picture img{object-position:30% 50%}
  .hero-shade{background:linear-gradient(to right,rgba(var(--shade),.72) 0%,rgba(var(--shade),.25) 38.2%,rgba(var(--shade),0) 61.8%),linear-gradient(to bottom,rgba(var(--shade),.45) 0%,rgba(var(--shade),0) 23.6%,rgba(var(--shade),0) 61.8%,rgba(var(--shade),.55) 100%)}
  [dir=rtl] .hero-shade{background:linear-gradient(to left,rgba(var(--shade),.72) 0%,rgba(var(--shade),.25) 38.2%,rgba(var(--shade),0) 61.8%),linear-gradient(to bottom,rgba(var(--shade),.45) 0%,rgba(var(--shade),0) 23.6%,rgba(var(--shade),0) 61.8%,rgba(var(--shade),.55) 100%)}
}
.hero-in{position:absolute;inset-inline:0;bottom:0;padding-bottom:var(--s5)}
@media (min-width:1200px){.hero-in{padding-bottom:var(--s6)}}
.hero .lbl{color:var(--sand)}
.h1{font-family:var(--serif);font-style:italic;font-weight:600;font-size:38px;line-height:1.12;margin-top:var(--s2)}
[dir=rtl] .h1{font-style:normal;font-weight:500;line-height:1.35}
@media (min-width:768px){.h1{font-size:72px;max-width:10em}}
@media (min-width:1600px){.h1{font-size:89px}}
@media (min-width:768px){.hero-in .wrap>*{max-width:42vw}}
.hero-facts{margin-top:var(--s3);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,246,240,.9)}
[dir=rtl] .hero-facts{font-size:16px;letter-spacing:0;font-weight:500}
.price{margin-top:var(--s3);display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s1) var(--s2)}
.price .from{font-size:16px;font-weight:500;color:var(--sand)}
.price .amt{font-family:'Montserrat',Arial,sans-serif;font-size:34px;font-weight:600;line-height:1;color:var(--ivory)}
@media (min-width:1200px){.price .amt{font-size:55px}}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
@media (max-width:479px){.hero-cta .btn{flex:1 1 100%}}

/* intro */
.intro .wrap{display:grid;gap:var(--s5);align-items:center}
@media (min-width:900px){.intro .wrap{grid-template-columns:1.618fr 1fr;gap:var(--s6)}}
@media (min-width:900px){.intro .h2{max-width:11em}}
.intro .lead{margin-top:var(--s4)}
.intro figure img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* villa facts */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s4);margin-top:var(--s5);border-top:1px solid var(--bronze)}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding-block:var(--s4) var(--s3);border-bottom:1px solid var(--lbronze)}
.stat .v{font-family:'Montserrat',Arial,sans-serif;font-size:34px;font-weight:600;color:var(--green);line-height:1.2;margin-top:var(--s1)}
.stat .v{white-space:nowrap}
.stat .u{font-size:13px;font-weight:600;color:var(--muted);margin-inline-start:4px}
.rooms{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s4);margin-top:var(--s5)}
@media (min-width:768px){.rooms{grid-template-columns:repeat(3,1fr)}}
.rooms li{list-style:none;display:flex;align-items:baseline;gap:var(--s2);padding-block:var(--s2);border-bottom:1px solid var(--lbronze);font-size:16px}
.rooms b{font-family:'Montserrat',Arial,sans-serif;font-weight:600;color:var(--green);min-width:21px}

/* payment plans */
.plans{display:grid;gap:var(--s5);margin-top:var(--s5)}
@media (min-width:900px){.plans{grid-template-columns:1fr 1fr;gap:var(--s6)}}
.plan h3{font-family:var(--serif);font-style:italic;font-weight:600;font-size:34px;color:var(--bronze);line-height:1.2}
[dir=rtl] .plan h3{font-style:normal;font-weight:500;line-height:1.5}
.bar{display:flex;gap:4px;margin-block:var(--s3) var(--s1)}
.bar span{height:8px;background:var(--lbronze)}
.bar span.on{background:var(--bronze)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding-block:var(--s2);border-bottom:1px solid var(--line)}
.row .p{font-family:'Montserrat',Arial,sans-serif;font-size:34px;font-weight:600;color:var(--green);line-height:1.2}
.row .t{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:end}
[dir=rtl] .row .t{font-size:16px;letter-spacing:0;font-weight:500}

/* gallery */
.gal-wide{margin-top:var(--s5)}
.gal-wide img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media (min-width:768px){.gal-wide img{aspect-ratio:2/1}}
.gal{display:grid;gap:var(--s3);margin-top:var(--s3)}
.gal img{width:100%;aspect-ratio:4/5;object-fit:cover}
.gal figcaption{margin-top:var(--s1);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
[dir=rtl] .gal figcaption{font-size:16px;letter-spacing:0;font-weight:500}
@media (min-width:768px){.gal{grid-template-columns:repeat(4,1fr)}}
@media (max-width:767px){
  .gal{grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scroll-padding-inline:var(--pad);scrollbar-width:none}
  .gal::-webkit-scrollbar{display:none}
  .gal figure{scroll-snap-align:start}
}
.hint{display:block;margin-top:var(--s2);font-size:13px;color:var(--muted)}
@media (min-width:768px){.hint{display:none}}

/* materials */
.mat .wrap{display:grid;gap:var(--s5);align-items:center}
@media (min-width:900px){.mat .wrap{grid-template-columns:1fr 1fr;gap:var(--s6)}}
.mat .lead{margin-top:var(--s4)}
.mat .lead+.lead{margin-top:var(--s3)}
.mat figure img{width:100%;max-width:557px;margin-inline:auto}

/* location */
.places{display:grid;gap:var(--s5);margin-top:var(--s5)}
@media (min-width:900px){.places{grid-template-columns:1fr 1fr;gap:var(--s6)}}
.place img{width:100%;aspect-ratio:16/9;object-fit:cover}
.place h3{font-family:var(--serif);font-style:italic;font-weight:600;font-size:34px;color:var(--bronze);line-height:1.2;margin-top:var(--s3)}
[dir=rtl] .place h3{font-style:normal;font-weight:500;line-height:1.5}
.place p{margin-top:var(--s2);max-width:557px}
.amen{margin-top:var(--s5)}
.amen ul{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s3)}
.amen li{list-style:none;padding:var(--s1) var(--s3);border:1px solid var(--lbronze);border-radius:34px;font-size:13px;font-weight:500;background:var(--ivory)}
[dir=rtl] .amen li{font-size:16px}

/* form */
.reg .wrap{display:grid;gap:var(--s5)}
@media (min-width:900px){.reg .wrap{grid-template-columns:1fr 1.618fr;gap:var(--s6);align-items:start}}
.reg-info .lead{margin-top:var(--s3)}
.contact{margin-top:var(--s4);display:grid;gap:var(--s2)}
.contact a{text-decoration:none}
.contact .tel{font-family:'Montserrat',Arial,sans-serif;font-size:34px;font-weight:600;color:var(--green);line-height:1.2}
.contact .web{font-size:16px;color:var(--bronze)}
.card{background:var(--white);border:1px solid var(--line);padding:var(--s4) var(--s3)}
@media (min-width:768px){.card{padding:var(--s5)}}
.fgrid{display:grid;gap:var(--s3)}
@media (min-width:768px){.fgrid{grid-template-columns:1fr 1fr}.fgrid .full{grid-column:1/-1}}
.field label,.field legend{display:block;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s1)}
[dir=rtl] .field label,[dir=rtl] .field legend{font-size:16px;letter-spacing:0;font-weight:500}
.field fieldset{border:0}
.req{color:var(--bronze)}
input[type=text],input[type=email],input[type=tel],select{width:100%;height:55px;padding:0 var(--s2);font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--lbronze);border-radius:2px;-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--bronze) 50%),linear-gradient(135deg,var(--bronze) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:var(--s4)}
[dir=rtl] select{background-position:18px 50%,13px 50%}
input:focus,select:focus{border-color:var(--bronze)}
.phone{display:grid;grid-template-columns:minmax(150px,44%) 1fr;gap:var(--s1)}
.phone input{direction:ltr;text-align:start}
[dir=rtl] .phone input{text-align:right}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);border:1px solid var(--lbronze);border-radius:2px;font-size:16px;cursor:pointer;background:var(--white);transition:background .15s,color .15s,border-color .15s}
.chip input:checked+span{background:var(--green);border-color:var(--green);color:var(--ivory)}
.consent{display:flex;gap:var(--s2);align-items:flex-start;font-size:13px;line-height:1.6;color:var(--ink)}
[dir=rtl] .consent{font-size:16px}
.consent input{width:21px;height:21px;margin-top:2px;flex:none;accent-color:var(--green)}
.hp{position:absolute!important;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.submit{width:100%;margin-top:var(--s4)}
.msg{margin-top:var(--s3);font-size:16px;min-height:1px}
.msg.err{color:#A3342B}
.field.bad input,.field.bad select{border-color:#A3342B}
.thanks{text-align:center;padding-block:var(--s5)}
.thanks .h2{margin-top:0}
.thanks p{margin-top:var(--s3)}

/* footer */
.foot{padding-block:var(--s6) var(--s5);background:var(--beige)}
.foot .wrap{display:grid;gap:var(--s4)}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4)}
.foot-top img{height:26px;width:auto}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
[dir=rtl] .foot-links{font-size:16px;letter-spacing:0}
.foot-links a{text-decoration:none;color:var(--bronze)}
.legal{font-size:13px;color:var(--muted);line-height:1.6;max-width:89ch}
[dir=rtl] .legal{font-size:14px}

/* sticky mobile CTA */
.sticky{position:fixed;inset-inline:0;bottom:0;z-index:20;display:flex;gap:var(--s1);padding:var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom));background:rgba(251,246,240,.96);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s ease}
.sticky.on{transform:none}
.sticky .btn{min-height:48px}
.sticky .btn-primary{flex:1}
.sticky .btn-call{background:transparent;color:var(--green);border-color:var(--green);padding:0 var(--s3)}
@media (min-width:900px){.sticky{display:none}}

/* fixes */
.field label.chip,.field label.consent{display:flex;margin:0;font-size:16px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
.field label.chip{display:inline-flex}
.field label.consent{font-size:13px;line-height:1.6}
[dir=rtl] .field label.consent{font-size:16px}
@media (max-width:599px){
  .stats{grid-template-columns:1fr}
  .stat{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding-block:var(--s3)}
  .stat .v{margin-top:0;font-size:26px;white-space:nowrap}
}

/* pop-out portrait: the head rises above the photo frame (transparent PNG/WebP) */
.intro figure.popout img{aspect-ratio:auto;object-fit:fill}

/* island aerial in the intro (29 Oct): desktop = under the text, the portrait spans both rows and its frame
   ends on the same line as the aerial; tablet/mobile = text, portrait, aerial. 2.2:1 desktop / 4:3 mobile crop */
@media (min-width:900px){
  .intro .wrap{grid-template-rows:auto auto;row-gap:var(--s5);align-items:end}
  .intro .wrap > div{grid-column:1;grid-row:1;align-self:start}
  .intro figure.popout{grid-column:2;grid-row:1 / span 2;align-self:end}
  .intro figure.aerial{grid-column:1;grid-row:2}
}
@media (min-width:600px) and (max-width:899px){.intro figure.popout{max-width:448px}}
.intro figure.aerial picture{display:block}
.intro figure.aerial img{aspect-ratio:1600/727;object-fit:cover}
@media (max-width:767px){.intro figure.aerial img{aspect-ratio:4/3}}

/* amenities & facilities: images only, no captions (29 Oct) */
.agal{display:grid;gap:var(--s3);margin-top:var(--s5)}
.agal img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (min-width:768px){.agal{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){
  .agal figure:first-child{grid-column:span 2;grid-row:span 2}
  .agal figure:first-child img{height:100%;aspect-ratio:auto}
}
@media (max-width:767px){
  .agal{grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scroll-padding-inline:var(--pad);scrollbar-width:none}
  .agal::-webkit-scrollbar{display:none}
  .agal figure{scroll-snap-align:start}
}

/* floor plans */
.floor-list{display:grid;gap:var(--s6);margin-top:var(--s5)}
.floor h3{font-family:var(--serif);font-style:italic;font-weight:600;font-size:34px;color:var(--bronze);line-height:1.2}
[dir=rtl] .floor h3{font-style:normal;font-weight:500;line-height:1.5}
.plan-img{position:relative;display:block;margin-top:var(--s3);padding:var(--s2);background:var(--white);border:1px solid var(--line)}
.plan-img picture{display:block}
.plan-img img{width:100%}
.zoom{display:block;margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line);text-align:end;font-size:13px;font-weight:600;color:var(--green);line-height:1.4}
.zoom::after{content:' \2197'}
[dir=rtl] .zoom::after{content:' \2196'}
[dir=rtl] .zoom{font-size:14px;font-weight:500}
.plan-img{text-decoration:none}
.plan-img:hover .zoom{text-decoration:underline}
.floor-rooms{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s3)}
.floor-rooms li{list-style:none;padding:var(--s1) var(--s3);border:1px solid var(--lbronze);border-radius:34px;font-size:13px;font-weight:500;background:var(--ivory)}
[dir=rtl] .floor-rooms li{font-size:16px}
.note{margin-top:var(--s3);font-size:13px;color:var(--muted)}
[dir=rtl] .note{font-size:14px}

.consent a{color:var(--green);font-weight:600}
.legal.tc{max-width:none}
.legal.tc b{font-weight:600;color:var(--ink)}