/* Website skin for the property pages: same type, colours, header, footer and shapes as the RAKEZ
   website (white header, Sapphire type, Emerald lines, yellow only for actions). The staff and tenant
   workspaces keep their app layout but share the type and square shapes. */
:root{--font:"Roboto Condensed",Arial,sans-serif;--radius:0px;--wash:#9dd4d62e}
body{font-weight:300}
.btn,.badge,input,select,.section-nav a,.side a{border-radius:0}
h1,h2,h3,strong,b,th,label{font-weight:700}

/* ---------- Website header ---------- */
.site-skin .site-top{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;padding:0 clamp(16px,3vw,40px);min-height:80px;background:#fff;color:var(--sapphire);box-shadow:0 1px 0 #9dd4d6}
.site-skin .site-top::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--emerald)}
.site-brand img{display:block;width:44px;height:56px;object-fit:contain}
.site-nav{display:flex;align-items:center;justify-content:center;gap:18px;min-width:0}
.site-nav>a,.site-about summary,.site-login{position:relative;font-size:17px;font-weight:700;color:var(--sapphire);text-decoration:none;white-space:nowrap;padding:28px 0;cursor:pointer}
.site-nav>a::after{content:"";position:absolute;left:0;right:0;bottom:20px;height:3px;background:var(--emerald);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.site-nav>a:hover::after,.site-nav>a[aria-current=page]::after{transform:scaleX(1)}
.site-about{position:relative}
.site-about summary{list-style:none}.site-about summary::-webkit-details-marker{display:none}
.site-about>div{position:absolute;right:0;top:100%;min-width:230px;background:#fff;border:1px solid #9dd4d6;border-top:3px solid var(--emerald);box-shadow:0 20px 40px -20px #0e3a5c59;padding:8px;display:grid}
.site-about>div a{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;color:var(--sapphire);text-decoration:none;font-weight:700}
.site-about>div a:hover{background:var(--wash)}
.site-actions{display:flex;align-items:center;gap:16px}
.site-login{display:inline-flex;align-items:center;gap:8px;padding:0}
.site-cta{display:inline-flex;align-items:center;gap:12px;background:var(--highlight-yellow);color:var(--sapphire);font-weight:700;font-size:15px;padding:14px 18px;text-decoration:none}
.site-cta:hover{background:var(--sapphire);color:#fff}
.web-arrow{width:16px;height:16px;flex:none}
.site-menu{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative}
.site-menu span{position:absolute;left:11px;right:11px;height:2px;background:var(--sapphire);transition:transform .2s}
.site-menu span:first-child{top:17px}.site-menu span:last-child{top:25px}
.site-menu[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.site-menu[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.site-mobile{grid-column:1/-1;display:grid;padding:8px 0 20px;border-top:1px solid #9dd4d6}
.site-mobile[hidden]{display:none}
.site-mobile a{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-bottom:1px solid #0e3a5c1a;color:var(--sapphire);text-decoration:none;font-size:20px;font-weight:700}
.site-mobile .site-cta{justify-content:space-between;margin-top:14px;font-size:17px;border:0;padding:16px 18px}
@media(max-width:1180px){.site-nav{gap:12px}.site-nav>a,.site-about summary,.site-login{font-size:15px}}
@media(max-width:980px){.site-nav,.site-login,.site-actions>.site-cta{display:none}.site-menu{display:block}.site-skin .site-top{min-height:72px}}

/* ---------- Page ---------- */
.site-skin{background:#fff}
.site-skin main{max-width:1320px;padding:clamp(40px,6vw,88px) clamp(16px,5vw,72px) 72px}
.site-skin .heading{margin-bottom:28px}
.site-skin .eyebrow{display:inline-block;color:var(--sapphire);font-size:12px;letter-spacing:.14em;border-left:4px solid var(--emerald);padding-left:10px;text-transform:uppercase}
.site-skin h1{font-size:clamp(44px,6vw,84px);line-height:.96;letter-spacing:-.01em;margin:18px 0 18px}
.site-skin h1 em{font-style:normal;background:linear-gradient(transparent 60%,#9dd4d6 60%)}
.site-skin .heading>p:last-child{font-size:20px;color:#33475b;max-width:640px}
.site-skin .catalogue-note{background:transparent;border-left:4px solid var(--emerald);font-size:14px;color:#33475b;padding:4px 12px;margin-bottom:28px}

/* filters in a soft Emerald band */
.site-skin .catalogue-filters{background:var(--wash);padding:20px;gap:14px;margin-bottom:14px}
.site-skin label{font-size:14px;color:var(--sapphire)}
.site-skin input,.site-skin select{border:1px solid #0e3a5c55;background:#fff;font-size:16px;min-height:48px}
.site-skin input:focus,.site-skin select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--sapphire)}
.site-skin .rent-filter{background:#fff;border-color:#0e3a5c33}
.site-skin .listing-results{margin:6px 0 18px}
.site-skin #results{color:var(--sapphire);font-weight:700}

/* listing cards like the site's founder / facility cards */
.site-skin .cards{gap:20px}
.site-skin .card{border:1px solid #0e3a5c1f;border-top:3px solid transparent;transition:transform .2s,box-shadow .2s,border-color .2s}
.site-skin .card:hover{transform:translateY(-3px);box-shadow:0 16px 36px #0e3a5c22;border-top-color:var(--emerald)}
.site-skin .card>img{height:210px;border-radius:0}
.site-skin .card-body{padding:18px 20px 20px;gap:10px}
.site-skin .card-body h3{font-size:22px;line-height:1.1}
.site-skin .card-price{background:transparent;border-left:3px solid var(--emerald);padding:4px 12px}
.site-skin .card-price strong{font-size:20px}
.site-skin .badge.green{background:#fff;border:1px solid var(--emerald);border-left-width:4px}
.site-skin .btn{border:2px solid var(--sapphire);font-weight:700;padding:10px 16px}
.site-skin .btn:hover{background:var(--sapphire);color:#fff}
.site-skin .btn.primary{background:var(--highlight-yellow);border-color:var(--highlight-yellow);color:var(--sapphire)}
.site-skin .btn.primary:hover{background:var(--sapphire);border-color:var(--sapphire);color:#fff;text-decoration:none}

/* property page */
.site-skin .property-back a{color:var(--sapphire);font-weight:700;text-decoration:none;border-bottom:2px solid var(--emerald)}
.site-skin .property-photo{border:0}
.site-skin .property-photo figcaption{background:var(--sapphire);color:#fff;font-weight:700;font-size:12px;letter-spacing:.06em;padding:8px 12px}
.site-skin .property-facts{padding:24px;border-top:3px solid var(--emerald);background:#fff;border-left:1px solid #0e3a5c1f;border-right:1px solid #0e3a5c1f;border-bottom:1px solid #0e3a5c1f}
.site-skin .property-facts dt{color:#58585a}
.site-skin .property-enquiry{background:var(--wash);border-left:4px solid var(--emerald)}
.site-skin .property-rent strong{font-size:30px;color:var(--sapphire)}
.site-skin dialog{border-top:4px solid var(--emerald);border-radius:0}

/* ---------- Website footer ---------- */
.site-foot{background:var(--sapphire);color:#fff;padding:56px clamp(16px,5vw,72px) 28px}
.site-foot a{color:#fff;text-decoration:none}
.site-foot-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid #ffffff26}
.site-foot-top img{display:block;width:56px;height:auto}
.site-foot-statement{font-size:clamp(28px,3.4vw,46px);font-weight:700;line-height:1.05;flex:1;min-width:240px}
.site-foot-statement span{color:#9dd4d6}
.site-foot-contact{display:inline-flex;gap:10px;align-items:center;font-weight:700;font-size:18px;border-bottom:2px solid var(--emerald);padding-bottom:4px}
.site-foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:32px 0}
.site-foot-cols h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9dd4d6;margin:0 0 12px}
.site-foot-cols a,.site-foot-cols p{display:block;margin:0 0 9px;font-size:16px;color:#e6f0f5}
.site-foot-cols a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.site-foot-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #ffffff26;padding-top:18px;font-size:12px;font-weight:700;letter-spacing:.08em;color:#d6e6ee}
@media(max-width:700px){.site-foot-cols{grid-template-columns:1fr}}
/* menu button on the right like the website; clean × when open */
.site-actions{justify-self:end}
@media(max-width:980px){.site-skin .site-top{grid-template-columns:auto minmax(0,1fr)}.site-actions{grid-column:2}}
.site-menu[aria-expanded=true] span:first-child,.site-menu[aria-expanded=true] span:last-child{top:21px}
.site-menu[aria-expanded=true] span:first-child{transform:rotate(45deg)}
.site-menu[aria-expanded=true] span:last-child{transform:rotate(-45deg)}
.site-skin h1 em{color:inherit}