/* Project detail page styles — ported verbatim from the original project pages. */
*, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { font-family:'Hanken Grotesk',system-ui,sans-serif; background:#fff; color:#18302E; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  ::selection { background:#138776; color:#fff; }
  img { display:block; max-width:100%; }
  a { text-decoration:none; color:inherit; }
  @keyframes waPulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }

  /* NAV (same as rest of site) */
  .site-header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.88); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid #E6EEEB; }
  .nav-inner { width:min(1200px,92vw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:74px; gap:18px; }
  .nav-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .nav-logo img { height:50px; width:auto; }
  .nav-links { display:flex; align-items:center; gap:4px; }
  .nav-link { padding:9px 14px; border-radius:10px; font-size:15px; font-weight:500; color:#36514E; transition:background .15s,color .15s; white-space:nowrap; }
  .nav-link:hover, .nav-link.active { color:#138776; background:#F0F7F5; font-weight:600; }
  .nav-dropdown { position:relative; }
  .nav-caret { display:inline-block; margin-left:5px; font-size:10px; transition:transform .2s; }
  .nav-dropdown:hover .nav-caret { transform:rotate(180deg); }
  .nav-dropdown-menu { position:absolute; top:calc(100% - 4px); left:0; min-width:210px; background:#fff; border:1px solid #E6EEEB; border-radius:14px; box-shadow:0 18px 40px -16px rgba(14,42,40,.28); padding:8px; opacity:0; visibility:hidden; transform:translateY(6px); transition:all .18s ease; }
  .nav-dropdown:hover .nav-dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
  .nav-dropdown-item { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; transition:background .12s; }
  .nav-dropdown-item:hover { background:#F0F7F5; }
  .nav-dropdown-item span:first-child { font-weight:600; font-size:15px; }
  .nav-dropdown-item span:last-child { font-size:12.5px; color:#5B7470; }
  .nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .nav-wa { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:#F0F7F5; color:#138776; border:1px solid #DBEAE6; transition:background .15s; }
  .nav-wa:hover { background:#DBEAE6; }
  .nav-call { display:inline-flex; align-items:center; gap:8px; padding:0 20px; height:42px; border-radius:12px; background:#138776; color:#fff; font-weight:600; font-size:15px; box-shadow:0 8px 20px -8px rgba(19,135,118,.7); transition:background .15s; }
  .nav-call:hover { background:#0C5249; }
  .nav-enquiry { display:inline-flex; align-items:center; gap:7px; padding:0 16px; height:42px; border-radius:12px; background:#B5894E; color:#fff; font-weight:600; font-size:15px; box-shadow:0 8px 20px -8px rgba(181,137,78,.7); transition:background .15s; white-space:nowrap; }
  .nav-enquiry:hover { background:#9c7440; }
  .nav-hamburger { display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; border:1px solid #DBEAE6; background:#fff; cursor:pointer; color:#0E2A28; }
  .mobile-drawer { display:none; border-top:1px solid #E6EEEB; background:#fff; padding:14px clamp(16px,6vw,24px) 26px; flex-direction:column; gap:4px; }
  .mobile-drawer.open { display:flex; }
  .mobile-nav-link { padding:13px 8px; color:#18302E; font-weight:600; font-size:17px; border-bottom:1px solid #F0F4F2; }
  .mobile-projects-sub { padding:8px 14px; color:#138776; font-size:15.5px; display:block; }
  .mobile-drawer-actions { display:flex; gap:10px; margin-top:14px; }
  .mobile-btn-call { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; height:48px; border-radius:12px; background:#138776; color:#fff; font-weight:600; }
  .mobile-btn-wa { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; height:48px; border-radius:12px; background:#F0F7F5; color:#138776; font-weight:600; border:1px solid #DBEAE6; }
  @media (max-width:1024px) { .nav-links,.nav-actions{display:none;} .nav-hamburger{display:flex;} .nav-logo img{height:40px;} }

  .container { width:min(1200px,92vw); margin:0 auto; }

  /* BREADCRUMB */
  .breadcrumb { padding:18px 0 0; font-size:13.5px; color:#7E938F; display:flex; gap:6px; flex-wrap:wrap; }
  .breadcrumb a { color:#138776; font-weight:600; }
  .breadcrumb a:hover { text-decoration:underline; }

  /* GALLERY */
  .gallery-section { padding:20px 0 0; }
  .gallery-main { position:relative; border-radius:20px; overflow:hidden; background:#0E2A28; height:clamp(260px,46vw,520px); }
  .gallery-main img { width:100%; height:100%; object-fit:cover; }
  .gallery-empty { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#E8F4F1 0%,#D3EBE6 100%); color:#89C4BB; }
  .gallery-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; cursor:pointer; color:#0E2A28; box-shadow:0 8px 20px -8px rgba(0,0,0,.3); border:none; }
  .gallery-arrow:hover { background:#fff; }
  .gallery-prev { left:16px; } .gallery-next { right:16px; }
  .gallery-counter { position:absolute; bottom:16px; right:16px; background:rgba(0,0,0,.55); color:#fff; font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:999px; }
  .gallery-thumbs { display:flex; gap:10px; overflow-x:auto; padding:14px 2px 4px; scrollbar-width:thin; }
  .gallery-thumb { flex-shrink:0; width:88px; height:64px; border-radius:10px; overflow:hidden; cursor:pointer; border:2px solid transparent; opacity:.65; transition:opacity .15s,border-color .15s; }
  .gallery-thumb img { width:100%; height:100%; object-fit:cover; }
  .gallery-thumb.active { border-color:#138776; opacity:1; }

  /* TITLE BLOCK */
  .title-section { padding:clamp(24px,3vw,36px) 0 0; display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; }
  .title-block { max-width:680px; }
  .p-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
  .p-type-badge { background:#F0F7F5; color:#138776; font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:999px; }
  .p-status-badge { font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px; }
  .status-uc { background:rgba(255,165,0,.15); color:#996300; border:1px solid rgba(255,165,0,.3); }
  .status-ready { background:rgba(19,135,118,.15); color:#0a6055; border:1px solid rgba(19,135,118,.3); }
  .status-unconfirmed { background:rgba(0,0,0,.08); color:#6b7280; border:1px solid rgba(0,0,0,.12); }
  .status-portfolio { background:rgba(91,116,112,.12); color:#3d5753; border:1px solid rgba(91,116,112,.25); }
  .p-title { font-family:'Schibsted Grotesk',sans-serif; font-weight:700; font-size:clamp(28px,3.6vw,42px); line-height:1.1; margin:0 0 8px; color:#0E2A28; }
  .p-builder { font-size:14px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:#9FB8B3; margin-bottom:6px; }
  .p-location { display:flex; align-items:flex-start; gap:6px; color:#5B7470; font-size:15px; }
  .p-location svg { flex-shrink:0; margin-top:2px; }
  .p-rera { font-size:12.5px; color:#A8BEB9; margin-top:10px; }
  .p-rera span { color:#6FA399; font-weight:600; }
  .title-actions { display:flex; flex-direction:column; gap:10px; min-width:220px; }
  .btn-primary-lg { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 26px; border-radius:14px; background:#138776; color:#fff; font-weight:600; font-size:15.5px; box-shadow:0 12px 28px -10px rgba(19,135,118,.8); }
  .btn-outline-lg { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 22px; border-radius:14px; background:#fff; color:#138776; font-weight:600; font-size:15.5px; border:1.5px solid #B6DAD2; }

  /* MAIN GRID (specs+content / form sidebar) */
  .main-grid { display:grid; grid-template-columns:1fr 340px; gap:40px; padding:clamp(36px,5vw,56px) 0; align-items:start; }
  @media (max-width:900px) { .main-grid { grid-template-columns:1fr; } }

  .content-block { margin-bottom:36px; }
  .block-heading { font-family:'Schibsted Grotesk',sans-serif; font-weight:700; font-size:22px; margin:0 0 16px; color:#0E2A28; }
  .p-description { font-size:15.5px; line-height:1.7; color:#4C6661; margin:0; }

  .specs-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#EAEFED; border-radius:14px; overflow:hidden; border:1px solid #EAEFED; }
  .spec-item { background:#fff; padding:14px 18px; }
  .spec-item .k { font-size:11.5px; color:#9FB8B3; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:4px; }
  .spec-item .v { font-size:14.5px; color:#0E2A28; font-weight:600; }
  @media (max-width:520px) { .specs-grid { grid-template-columns:1fr; } }

  .video-wrap { border-radius:16px; overflow:hidden; aspect-ratio:16/9; }
  .video-wrap iframe { width:100%; height:100%; border:0; }

  .faq-item { border-bottom:1px solid #EAEFED; padding:16px 0; }
  .faq-item summary { cursor:pointer; font-weight:600; font-size:15.5px; color:#0E2A28; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .faq-item summary::-webkit-details-marker { display:none; }
  .faq-item summary::after { content:'+'; font-size:22px; color:#138776; flex-shrink:0; }
  .faq-item[open] summary::after { content:'–'; }
  .faq-item p { margin:12px 0 0; font-size:14.5px; line-height:1.65; color:#4C6661; }

  .children-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
  .child-card { border:1px solid #EAEFED; border-radius:14px; overflow:hidden; transition:box-shadow .2s,transform .2s; display:flex; flex-direction:column; }
  .child-card:hover { box-shadow:0 16px 32px -18px rgba(14,42,40,.3); transform:translateY(-2px); }
  .child-img { width:100%; height:120px; object-fit:cover; }
  .child-img-empty { width:100%; height:120px; background:linear-gradient(135deg,#E8F4F1 0%,#D3EBE6 100%); }
  .child-body { padding:12px 14px; }
  .child-name { font-weight:700; font-size:15px; color:#0E2A28; margin-bottom:2px; }
  .child-meta { font-size:12.5px; color:#7E938F; }

  /* FORM SIDEBAR */
  .form-card { border:1px solid #EAEFED; border-radius:18px; padding:24px; position:sticky; top:96px; box-shadow:0 16px 40px -24px rgba(14,42,40,.25); }
  .form-card h3 { font-family:'Schibsted Grotesk',sans-serif; font-size:19px; margin:0 0 4px; color:#0E2A28; }
  .form-card .sub { font-size:13.5px; color:#7E938F; margin:0 0 18px; }
  .form-field { margin-bottom:12px; }
  .form-field label { display:block; font-size:12.5px; font-weight:600; color:#5B7470; margin-bottom:5px; }
  .form-field input, .form-field textarea { width:100%; border:1.5px solid #DDE8E5; border-radius:10px; padding:11px 13px; font-size:14.5px; font-family:inherit; color:#0E2A28; resize:vertical; }
  .form-field input:focus, .form-field textarea:focus { outline:none; border-color:#138776; }
  .form-submit { width:100%; height:50px; border-radius:12px; background:#138776; color:#fff; font-weight:600; font-size:15.5px; border:none; cursor:pointer; margin-top:6px; }
  .form-submit:hover { background:#0C5249; }
  .form-note { font-size:12px; color:#9FB8B3; margin-top:10px; text-align:center; }
  .form-divider { display:flex; align-items:center; gap:10px; margin:16px 0; color:#B6C7C3; font-size:12px; }
  .form-divider::before, .form-divider::after { content:''; flex:1; height:1px; background:#EAEFED; }
  .form-call-row { display:flex; gap:10px; }
  .form-call-row a { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; height:46px; border-radius:12px; font-weight:600; font-size:14.5px; }
  .form-call-row .call { background:#F0F7F5; color:#138776; border:1px solid #DBEAE6; }
  .form-call-row .wa { background:#E8F9EF; color:#178A45; border:1px solid #C8EED7; }

  /* CTA STRIP + FOOTER — reused */
  .cta-section { background:#F7F4EE; padding:clamp(48px,7vw,88px) 0; }
  .container-sm { width:min(1100px,92vw); margin:0 auto; }
  .cta-card { background:#138776; border-radius:28px; padding:clamp(36px,5vw,64px); display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between; position:relative; overflow:hidden; }
  .cta-card::before { content:''; position:absolute; right:-60px; top:-60px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.07); }
  .cta-copy { position:relative; max-width:560px; }
  .cta-h2 { font-family:'Schibsted Grotesk',sans-serif; font-weight:700; font-size:clamp(26px,3.6vw,40px); line-height:1.1; margin:0 0 12px; color:#fff; }
  .cta-sub { margin:0; font-size:clamp(15.5px,1.6vw,18px); line-height:1.55; color:#D3EDE8; }
  .cta-actions { position:relative; display:flex; flex-wrap:wrap; gap:14px; }
  .btn-white { display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 28px; border-radius:14px; background:#fff; color:#138776; font-weight:700; font-size:16.5px; }
  .btn-ghost { display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 26px; border-radius:14px; background:rgba(255,255,255,.14); color:#fff; font-weight:600; font-size:16.5px; border:1.5px solid rgba(255,255,255,.5); }
  .site-footer { background:#0B2E2A; color:#CFE3DE; }
  .footer-inner { width:min(1200px,92vw); margin:0 auto; padding:clamp(48px,7vw,84px) 0 0; }
  .footer-grid { display:grid; gap:clamp(32px,5vw,56px); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
  .footer-logo-wrap { display:inline-flex; background:#fff; padding:12px 14px; border-radius:14px; margin-bottom:18px; }
  .footer-tagline { margin:0; font-size:15px; line-height:1.65; color:#9FBDB6; }
  .footer-socials { display:flex; gap:10px; margin-top:22px; }
  .social-btn { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.07); color:#CFE3DE; border:1px solid rgba(255,255,255,.1); transition:background .15s; }
  .social-btn:hover { background:rgba(255,255,255,.14); }
  .footer-heading { font-family:'Schibsted Grotesk',sans-serif; font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#6FA399; margin-bottom:18px; }
  .footer-links { display:flex; flex-direction:column; gap:12px; }
  .footer-link { color:#CFE3DE; font-size:15px; transition:color .15s; }
  .footer-link:hover { color:#fff; }
  .footer-contacts { display:flex; flex-direction:column; gap:16px; }
  .footer-contact-row { display:flex; gap:12px; align-items:flex-start; }
  .footer-contact-row a { color:#CFE3DE; display:flex; gap:12px; align-items:center; }
  .footer-contact-row a:hover { color:#fff; }
  .footer-contact-row svg { flex-shrink:0; }
  .footer-contact-text { font-size:14.5px; line-height:1.6; color:#B9D2CC; }
  .footer-contact-phone { font-size:15px; }
  .footer-bottom { margin-top:clamp(40px,6vw,64px); border-top:1px solid rgba(255,255,255,.1); padding:24px 0 30px; display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; }
  .footer-copy { font-size:13.5px; color:#7FA59E; }
  .wa-float { position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:1200; width:60px; height:60px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.7); animation:waPulse 2.4s infinite; }