/* Ghassan Mitri inc. — site styles
   Layout lives in the inline styles on each element (edit those to move things).
   This file holds animations, hover states, and the mobile rules. */
body{margin:0;background:#fdfcfa;font-family:'Jost',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#101a33}
  a{color:inherit;text-decoration:none}
  a:hover{color:#d21f3c}
  input,textarea,button{font-family:inherit}
  ::selection{background:#d21f3c;color:#fff}
  [data-track]::-webkit-scrollbar{display:none}
  @keyframes gmRise{from{transform:translateY(112%)}to{transform:translateY(0)}}
  @keyframes gmUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
  @keyframes gmIn{from{opacity:0}to{opacity:1}}
  @keyframes gmKen{from{transform:scale(1.01)}to{transform:scale(1.06)}}
  @keyframes gmMarq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
  @keyframes gmBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}

/* hover / focus states */
.x1:hover{background:#b0182f !important;transform:translateY(-2px) !important;color:#fff !important}
.x2:hover{background:#b0182f !important;transform:translateY(-2px) !important;color:#fff !important}
.x3:hover{color:#fff !important}
.x4:hover{border-color:#d21f3c !important;transform:translateY(-2px) !important;color:#101a33 !important}
.x5:hover{border-color:#d21f3c !important;transform:translateY(-2px) !important;color:#101a33 !important}
.x6:hover{background:#b0182f !important;transform:translateY(-2px) !important;color:#fff !important}
.x7:hover{background:#b0182f !important;color:#fff !important}
.x8:hover{gap:16px !important;color:#d21f3c !important}
.x9:hover{background:#101a33 !important;border-color:#101a33 !important;color:#fff !important}
.x10:hover{background:#d21f3c !important;border-color:#d21f3c !important;color:#fff !important}
.x11:hover{box-shadow:0 34px 60px -34px rgba(0,0,0,.5) !important;color:#101a33 !important}
.x12:hover{box-shadow:0 34px 60px -34px rgba(0,0,0,.5) !important;color:#101a33 !important}
.x13:hover{box-shadow:0 34px 60px -34px rgba(0,0,0,.5) !important;color:#101a33 !important}
.x14:hover{border-color:#d21f3c !important;color:#101a33 !important}
.x15:hover{background:#101a33 !important;border-color:#101a33 !important;color:#fff !important}
.x16:hover{background:#d21f3c !important;border-color:#d21f3c !important;color:#fff !important}
.x17:hover{background:#b0182f !important;transform:translateY(-2px) !important}
.x18:hover{border-color:#d21f3c !important;color:#fff !important}
.x19:hover{border-color:#d21f3c !important;color:#fff !important}
.x20:hover{border-color:#d21f3c !important;color:#fff !important}
.x21:focus{border-bottom-color:#d21f3c !important}
.x22:focus{border-bottom-color:#d21f3c !important}
.x23:focus{border-bottom-color:#d21f3c !important}
.x24:focus{border-bottom-color:#d21f3c !important}
.x25:focus{border-color:#d21f3c !important}

.rescard:hover{transform:translateY(-8px) !important;box-shadow:0 40px 70px -34px rgba(0,0,0,.55) !important}

/* carousels */
[data-track]::-webkit-scrollbar{display:none}
@media (max-width:900px){
  [data-card]{flex:0 0 82% !important}
  [data-tcard]{flex:0 0 86% !important}
}

/* photo placeholders: swap each .photo-slot for
   <img src="assets/your-photo.jpg" alt="" style="width:100%;height:100%;object-fit:cover"> */
.photo-slot{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#e8e5de;color:rgba(16,26,51,.45);font:500 11px/1.4 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:12px}

img{max-width:100%}

/* header: tighten before the nav can reach the phone number */
@media (max-width:1440px){
  [data-hnav]{gap:clamp(12px,1.6vw,26px) !important}
}
@media (max-width:1320px){
  [data-hphone]{display:none !important}
}

/* ---- tablet ---- */
@media (max-width:1080px){
  [data-cols="3"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  [data-gridtrack]{grid-auto-columns:calc((100% - 24px)/2) !important}
  [data-card],[data-tcard]{flex:0 0 calc((100% - 24px)/2) !important}
  [data-split]{grid-template-columns:minmax(0,1fr) !important;gap:40px !important}
  [data-portrait]{height:520px !important}
  [data-heroline],[data-heroline] span{font-size:62px !important}
}
@media (max-width:1080px){[data-stats]{grid-template-columns:minmax(0,1fr) !important}}
/* cards size to their own content instead of stretching to the tallest in the row */
[data-track] [data-card]{align-self:start}

/* ---- hero on phones ---- */
@media (max-width:760px){
  [data-burger]{display:inline-flex !important}
  [data-hcta]{font-size:9.5px !important;letter-spacing:.08em !important;padding:12px 14px !important}
  header{padding:14px 18px !important;gap:12px !important}
  [data-herocol]{padding:0 22px !important}
  [data-heroveil]{background:linear-gradient(180deg,rgba(9,15,30,.55) 0%,rgba(9,15,30,.5) 45%,rgba(9,15,30,.8) 100%) !important}
  #hero [data-eyebrow]{letter-spacing:.1em !important;font-size:11.5px !important}
  #hero a[href="#contact"]{white-space:nowrap !important;font-size:12.5px !important;letter-spacing:.11em !important;padding:18px 30px !important}
  #hero [data-herobar]{font-size:9.5px !important;letter-spacing:.08em !important;gap:10px !important}
[data-split] li > div > div{font-size:19px !important}
[data-split] li p{font-size:15.5px !important;line-height:1.6 !important}
  /* contact form: real breathing room on a phone */
  #contact label{gap:6px !important}
  #contact input,#contact textarea{padding:10px 0 !important;font-size:16px !important}
  #contact [data-cols="2"]{gap:18px !important}
  #contact form{margin-top:8px !important}
  #contact .g-recaptcha,#contact [data-captcha]{transform:scale(.88);transform-origin:left top;margin-top:18px !important}
  /* footer: everything on the centre line */
  footer > div{text-align:center !important;justify-content:center !important}
  footer > div > div{align-items:center !important;justify-content:center !important;text-align:center !important}
  footer nav{justify-content:center !important}
}

/* ---- phone: bigger type, more breathing room ---- */
@media (max-width:760px){
  [style*="padding:clamp(52px,7vw,100px) clamp(20px,4vw,48px)"]{padding-left:24px !important;padding-right:24px !important}
  [style*="font:400 16px/1.7"]{font-size:18px !important;line-height:1.65 !important}
  [style*="font:400 16.5px/1.75"]{font-size:18.5px !important;line-height:1.7 !important}
  [style*="font:400 15.5px/1.65"]{font-size:17px !important;line-height:1.6 !important}
  [style*="font:500 11px "]{font-size:12.5px !important}
  [style*="font:500 11.5px "]{font-size:13px !important}
  [style*="font:500 12.5px "]{font-size:14px !important}
  [style*="font:600 12px "]{font-size:13.5px !important}
  [style*="font:600 12.5px "]{font-size:14px !important}
  [style*="font:500 19px "]{font-size:21.5px !important}
  [style*="font:500 20px "]{font-size:22.5px !important}
  [data-split] li p{font-size:17px !important}
  #contact input,#contact textarea,#contact label span{font-size:16px !important}
}
/* ---- phone ---- */
@media (max-width:760px){
  [data-cols="3"],[data-cols="2"]{grid-template-columns:minmax(0,1fr) !important}
  [data-gridtrack]{grid-auto-columns:88% !important;grid-template-rows:auto !important}
  [data-card],[data-tcard]{flex:0 0 88% !important}
  [data-portrait]{height:420px !important}
  [data-tl]{border-left:none !important;padding-left:0 !important}
  [data-heroline],[data-heroline] span{font-size:44px !important}
  #hero [data-eyebrow]{margin-top:34px !important}
  #hero a[href="#contact"]{margin-top:34px !important}
  #properties [data-card] > div:first-child,
  #properties [data-card] a > div:first-child{height:230px !important}
}
@media (max-width:520px){
  [data-card],[data-tcard]{flex:0 0 92% !important}
  [data-gridtrack]{grid-auto-columns:92% !important}
  [data-heroline],[data-heroline] span{font-size:32px !important}
}
@media (max-width:1080px){#js-nav{display:none !important}#js-burger{display:inline-flex !important}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

[data-logos]{gap:18px !important}
[data-logos] img{max-height:40px !important;max-width:calc((100% - 36px)/3) !important}