{"id":2339,"date":"2026-08-21T13:56:26","date_gmt":"2026-08-21T13:56:26","guid":{"rendered":"https:\/\/perswood.com.my\/?page_id=2339"},"modified":"2026-09-28T06:05:09","modified_gmt":"2026-09-28T06:05:09","slug":"portfolio-2","status":"publish","type":"page","link":"https:\/\/perswood.com.my\/?page_id=2339","title":{"rendered":"Portfolio"},"content":{"rendered":"<style>.elementor-2339 .elementor-element.elementor-element-266892c{transition:all 400ms;}.elementor-2339 .elementor-element.elementor-element-08296e1{transition:all 400ms;}.elementor-2339 .elementor-element.elementor-element-8d27bdf{transition:all 400ms;}.elementor-2339 .elementor-element.elementor-element-a0345be{transition:all 400ms;}.elementor-2339 .elementor-element.elementor-element-3fe61ba{transition:all 400ms;}.elementor-2339 .elementor-element.elementor-element-5f00afd{transition:all 400ms;}:root{--page-title-display:none;}<\/style>\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2339\" class=\"elementor elementor-2339\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-266892c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"266892c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-08296e1\" data-id=\"08296e1\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8d27bdf de_scroll_animation_no elementor-widget elementor-widget-html\" data-id=\"8d27bdf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@200;300;400;500&display=swap\" rel=\"stylesheet\">\r\n<title>IFIT<\/title>\r\n<style>\r\n\r\n:root {\r\n    --oak: #8B5E3C;\r\n    --walnut: #3D2314;\r\n    --teak: #C17F4A;\r\n    --cream: #F5F0E8;\r\n    --forest: #2C4A3E;\r\n  }\r\n  \r\n#pw-hero {\r\n    position: relative;\r\n    height: 100vh !important;\r\n    min-height: unset !important;\r\n    width: 100vw;\r\n    margin-left: calc(-50vw + 50%);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    text-align: center;\r\n    overflow: visible;\r\n}\r\n\r\n#pw-hero .hero-content {\r\n    position: relative;\r\n    z-index: 2;\r\n    max-width: 800px;\r\n    padding: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 1rem;\r\n}\r\n#pw-hero .hero-bg {\r\n    position: absolute; inset: 0;\r\n    background-image: url('https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/03\/Perswood-Project-Nobu-001.jpg');\r\n    background-size: cover;\r\n    background-position: center;\r\n    background-attachment: fixed;\r\n    filter: brightness(0.55);\r\n}\r\n  #pw-hero .hero-overline {\r\n    font-family: 'Jost', sans-serif;\r\n    font-size: 0.65rem;\r\n    letter-spacing: 0.3em;\r\n    text-transform: uppercase;\r\n    color: #FFFFFF;\r\n    margin-bottom: 1.5rem;\r\n  }\r\n  #pw-hero .hero-title {\r\n    height: 100px;\r\n    width: auto;\r\n    margin-bottom: 0rem;\r\n    filter: brightness(0) invert(1);\r\n  }\r\n  #pw-hero .hero-title em {\r\n    font-style: italic;\r\n    color: #C17F4A;\r\n  }\r\n  #pw-hero .hero-subtitle {\r\n    font-family: 'Jost', sans-serif;\r\n    font-size: 1rem;\r\n    font-weight: 300;\r\n    line-height: 1.9;\r\n    color: rgba(245,240,232,0.8);\r\n    max-width: 560px;\r\n    margin: 0 auto 2.5rem;\r\n  }\r\n\r\n  #pw-hero .hero-scroll {\r\n    position: absolute;\r\n    bottom: 2.5rem;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n    font-family: 'Jost', sans-serif;\r\n    font-size: 0.6rem;\r\n    letter-spacing: 0.25em;\r\n    text-transform: uppercase;\r\n    color: rgba(245,240,232,0.4);\r\n  }\r\n  #pw-hero .hero-scroll::after {\r\n    content: '';\r\n    display: block;\r\n    width: 1px;\r\n    height: 40px;\r\n    background: #C17F4A;\r\n    animation: scrollLine 1.5s ease-in-out infinite;\r\n  }\r\n  \r\n  #pw-hero h1{\r\n      font-family: 'Jost', sans-serif;\r\n      color: var(--cream);\r\n      letter-spacing: 0.22em;\r\n    text-transform: uppercase;\r\n    line-height: 1.6;\r\n  }\r\n  \r\n  @keyframes scrollLine {\r\n    0% { opacity: 0; transform: scaleY(0); transform-origin: top; }\r\n    50% { opacity: 1; transform: scaleY(1); }\r\n    100% { opacity: 0; transform: scaleY(0); transform-origin: bottom; }\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    #pw-hero .hero-title { font-size: clamp(2.2rem, 8vw, 3.5rem); }\r\n  }\r\n<\/style>\r\n\r\n<section id=\"pw-hero\">\r\n  <div class=\"hero-bg\"><\/div>\r\n  <div class=\"hero-content\">\r\n  <h1>Portfolio<\/h1>\r\n  <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a0345be elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a0345be\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3fe61ba\" data-id=\"3fe61ba\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5f00afd de_scroll_animation_no elementor-widget elementor-widget-html\" data-id=\"5f00afd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Paste this whole snippet into the Elementor HTML widget. No <html>, <head> or <body> tags. -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Jost:wght@200;300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n  :root {\n    --oak: #8B5E3C;\n    --walnut: #3D2314;\n    --teak: #C17F4A;\n    --cream: #F5F0E8;\n    --forest: #2C4A3E;\n  }\n\n  \/* ============ SCOPED RESET (no more global * \/ body rules) ============ *\/\n  .gal-section,\n  .gal-section * {\n    box-sizing: border-box;\n  }\n\n  \/* ============ GALLERY SECTION ============ *\/\n  .gal-section {\n    width: 100vw;\n    margin-left: calc(-50vw + 50%);\n    padding: 4rem 4rem 4.5rem;\n    background: var(--cream);\n    font-family: 'Jost', sans-serif;\n  }\n\n  .gal-intro {\n    max-width: 1370px;\n    margin: 0 auto 3rem;\n  }\n\n  .gal-intro h1 {\n    font-family: 'Jost', sans-serif;\n    font-size: 34px;\n    font-weight: 500;\n    letter-spacing: -0.01em;\n    text-transform: none;\n    line-height: 1.25;\n    color: var(--walnut);\n    margin-bottom: 0.75rem;\n  }\n\n  .gal-intro p {\n    font-family: 'Jost', sans-serif;\n    max-width: 780px;\n    font-size: 15px;\n    font-weight: 300;\n    line-height: 1.6;\n    color: rgba(61, 35, 20, 0.75);\n  }\n\n  .gal-grid {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 25px;\n    max-width: 1370px;\n    margin: 0 auto;\n  }\n\n  .gal-card {\n    position: relative;\n    overflow: hidden;\n    aspect-ratio: 1 \/ 0.9;\n    display: block;\n    text-decoration: none;\n    flex: 0 0 calc((100% - 50px) \/ 3);\n    cursor: pointer;\n  }\n\n  .gal-card img {\n    width: 100%;\n    height: 100%;\n    max-width: none;\n    object-fit: cover;\n    display: block;\n    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n  }\n\n  .gal-card:hover img {\n    transform: scale(1.05);\n  }\n\n  .gal-card::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(to top, rgba(61, 35, 20, 0.75), rgba(61, 35, 20, 0.1));\n    z-index: 1;\n    transition: opacity 0.4s ease;\n  }\n\n  .gal-card:hover::after {\n    opacity: 0.85;\n  }\n\n  .gal-card span {\n    position: absolute;\n    left: 1.5rem;\n    right: 1.5rem;\n    bottom: 1.5rem;\n    z-index: 2;\n    font-family: 'Jost', sans-serif;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--cream);\n    letter-spacing: 0.18em;\n    text-transform: uppercase;\n    line-height: 1.4;\n  }\n\n  \/* ============ MODAL \/ LIGHTBOX ============ *\/\n  \/* The script moves the modal to <body>, so it is styled on its own, not under .gal-section *\/\n  .gal-modal-overlay,\n  .gal-modal-overlay * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  .gal-modal-overlay {\n    display: none !important;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100vw;\n    height: 100vh;\n    background: rgba(0, 0, 0, 0.6);\n    z-index: 999999;\n    align-items: center;\n    justify-content: center;\n    padding: 2rem;\n  }\n\n  .gal-modal-overlay.is-open {\n    display: flex !important;\n  }\n\n  .gal-modal-content {\n    position: relative;\n    max-width: 720px;\n    width: 100%;\n    max-height: 90vh;\n    overflow: hidden;\n    background: var(--walnut);\n    font-family: 'Jost', sans-serif;\n  }\n\n  .gal-modal-image-wrap {\n    position: relative;\n    aspect-ratio: 16 \/ 10;\n    overflow: hidden;\n    background: var(--walnut);\n  }\n\n  \/* Makes the photo fill the placeholder exactly.\n     Use \"cover\" to fill with no gaps (crops edges),\n     or change to \"contain\" to show the whole photo with walnut bars. *\/\n  .gal-modal-image-wrap img {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    max-width: none;\n    object-fit: cover;\n    object-position: center;\n    display: block;\n  }\n\n  .gal-modal-body {\n    padding: 1.25rem 1.75rem 2.5rem;\n  }\n\n  .gal-modal-nav {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    background: rgba(61, 35, 20, 0.6) !important;\n    border: none !important;\n    color: var(--cream) !important;\n    font-size: 28px !important;\n    font-family: 'Jost', sans-serif;\n    cursor: pointer;\n    width: 44px;\n    height: 44px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n    padding: 0 !important;\n  }\n\n  .gal-modal-nav:hover {\n    background: rgba(61, 35, 20, 0.85) !important;\n  }\n\n  .gal-modal-prev {\n    left: 1rem;\n  }\n\n  .gal-modal-next {\n    right: 1rem;\n  }\n\n  .gal-modal-counter {\n    position: absolute;\n    bottom: 0.75rem;\n    right: 1rem;\n    font-family: 'Jost', sans-serif;\n    font-size: 12px;\n    font-weight: 400;\n    color: rgba(245, 240, 232, 0.85);\n    letter-spacing: 0.05em;\n    z-index: 3;\n  }\n\n  .gal-modal-title {\n    font-family: 'Jost', sans-serif;\n    font-size: 20px;\n    font-weight: 600;\n    letter-spacing: 0.02em;\n    color: var(--cream) !important;\n    margin-bottom: 0.4rem;\n  }\n\n  .gal-modal-body p {\n    font-family: 'Jost', sans-serif;\n    font-size: 13px;\n    font-weight: 300;\n    line-height: 1.5;\n    color: rgba(245, 240, 232, 0.85);\n    margin: 0;\n  }\n\n  .gal-modal-close {\n    position: absolute;\n    top: 1rem;\n    right: 1rem;\n    background: transparent !important;\n    border: none !important;\n    outline: none !important;\n    box-shadow: none !important;\n    -webkit-appearance: none;\n    appearance: none;\n    color: var(--cream) !important;\n    font-size: 32px !important;\n    font-family: 'Jost', sans-serif;\n    font-weight: 300;\n    cursor: pointer;\n    line-height: 1 !important;\n    padding: 0.25rem !important;\n    z-index: 4;\n  }\n\n  \/* ============ RESPONSIVE ============ *\/\n  @media (max-width: 900px) {\n    .gal-section {\n      padding: 3rem 2rem 3.5rem;\n    }\n    .gal-intro h1 {\n      font-size: 28px;\n    }\n  }\n\n  @media (max-width: 768px) {\n    .gal-grid {\n      gap: 15px;\n    }\n    .gal-card {\n      flex: 0 0 calc((100% - 15px) \/ 2);\n    }\n    .gal-modal-overlay {\n      padding: 1.25rem;\n    }\n    .gal-modal-nav {\n      width: 36px;\n      height: 36px;\n      font-size: 22px !important;\n    }\n  }\n\n  @media (max-width: 500px) {\n    .gal-card {\n      flex: 0 0 100%;\n    }\n  }\n<\/style>\n\n<section class=\"gal-section\">\n\n  <div class=\"gal-grid\">\n\n    <a href=\"#\" class=\"gal-card\"\n       data-title=\"Hartamas White Oak\"\n       data-desc=\"A short description of this project \u2014 the space, the finish used, and any notable details worth mentioning.\"\n       data-images=\"https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-07-28-at-17.18.31-1.jpeg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-07-28-at-17.18.31-2.jpeg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-07-28-at-17.18.31-3.jpeg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-07-28-at-17.18.30.jpeg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-07-28-at-17.18.29-1.jpeg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-07-28-at-17.18.28-1.jpeg\">\n      <img decoding=\"async\" src=\"https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2026-07-28-at-17.18.31-1.jpeg\" alt=\"Hartamas White Oak\" loading=\"lazy\">\n      <span>Hartamas White Oak<\/span>\n    <\/a>\n\n    <a href=\"#\" class=\"gal-card\"\n       data-title=\"Bangi Thermo Oak\"\n       data-desc=\"A short description of this project \u2014 the space, the finish used, and any notable details worth mentioning.\"\n       data-images=\"https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2023-04-28-at-16.09.11-1.jpeg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2023-04-28-at-16.09.10.jpeg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2023-04-28-at-16.09.09.jpeg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2023-04-28-at-16.09.08.jpeg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2023-04-28-at-16.09.07.jpeg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2023-04-28-at-16.08.41.jpeg\">\n      <img decoding=\"async\" src=\"https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/WhatsApp-Image-2023-04-28-at-16.09.11-1.jpeg\" alt=\"Bangi Thermo Oak\" loading=\"lazy\">\n      <span>Bangi Thermo Oak<\/span>\n    <\/a>\n\n    <a href=\"#\" class=\"gal-card\"\n       data-title=\"Trio House Deck\"\n       data-desc=\"A short description of this project \u2014 the space, the finish used, and any notable details worth mentioning.\"\n       data-images=\"https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/ec33584f-b097-4972-93aa-f6c2688388bd.jpg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/cedbf29b-f2cb-4b26-a940-28b591813139.jpg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/adfd4d5b-7725-4124-8fdf-c5be0191000e.jpg\">\n      <img decoding=\"async\" src=\"https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/ec33584f-b097-4972-93aa-f6c2688388bd.jpg\" alt=\"Trio House Deck\" loading=\"lazy\">\n      <span>Trio House Deck<\/span>\n    <\/a>\n\n    <a href=\"#\" class=\"gal-card\"\n       data-title=\"Lazy 8\"\n       data-desc=\"A short description of this project \u2014 the space, the finish used, and any notable details worth mentioning.\"\n       data-images=\"https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/71038b0f-76a0-4873-8c7d-29a01f30602e.jpg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/6f69d1ec-a85b-4c99-a6c1-5b1754bccfbc.jpg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/67dff672-d6f0-4233-935c-e3cadee0441a.jpg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/523acf99-3024-4220-87da-f716b9b91696.jpg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/4a43f773-4b7f-4b8f-b99b-70b01342aecd.jpg\">\n      <img decoding=\"async\" src=\"https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/71038b0f-76a0-4873-8c7d-29a01f30602e.jpg\" alt=\"Lazy 8\" loading=\"lazy\">\n      <span>Lazy 8<\/span>\n    <\/a>\n\n    <a href=\"#\" class=\"gal-card\"\n       data-title=\"Aira\"\n       data-desc=\"A short description of this project \u2014 the space, the finish used, and any notable details worth mentioning.\"\n       data-images=\"https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/IMG_4685-scaled.jpg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/IMG_4688-scaled.jpg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/IMG_4678-scaled.jpg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/IMG_4679-scaled.jpg\">\n      <img decoding=\"async\" src=\"https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/IMG_4685-scaled.jpg\" alt=\"Aira\" loading=\"lazy\">\n      <span>Aira<\/span>\n    <\/a>\n\n    <a href=\"#\" class=\"gal-card\"\n       data-title=\"Balmain\"\n       data-desc=\"A short description of this project \u2014 the space, the finish used, and any notable details worth mentioning.\"\n       data-images=\"https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/8d8f6afe-955f-4f12-b836-12094945b218.jpg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/a9f14263-821c-4161-8379-2016b08db737.jpg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/fa340a87-81b3-4728-964e-331c1d964d4a.jpg, https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/d9c30197-5541-4577-90a1-1e2cf1721eb4.jpg\">\n      <img decoding=\"async\" src=\"https:\/\/perswood.com.my\/wp-content\/uploads\/2026\/08\/8d8f6afe-955f-4f12-b836-12094945b218.jpg\" alt=\"Balmain\" loading=\"lazy\">\n      <span>Balmain<\/span>\n    <\/a>\n\n  <\/div>\n\n  <div class=\"gal-modal-overlay\" id=\"galModal\">\n    <div class=\"gal-modal-content\">\n      <button type=\"button\" class=\"gal-modal-close\" id=\"galModalClose\" aria-label=\"Close\">&times;<\/button>\n      <div class=\"gal-modal-image-wrap\">\n        <img id=\"galModalImg\" alt=\"\">\n        <button type=\"button\" class=\"gal-modal-nav gal-modal-prev\" id=\"galModalPrev\" aria-label=\"Previous image\">&#8249;<\/button>\n        <button type=\"button\" class=\"gal-modal-nav gal-modal-next\" id=\"galModalNext\" aria-label=\"Next image\">&#8250;<\/button>\n        <span class=\"gal-modal-counter\" id=\"galModalCounter\"><\/span>\n      <\/div>\n      <div class=\"gal-modal-body\">\n        <h3 class=\"gal-modal-title\" id=\"galModalTitle\"><\/h3>\n        <p id=\"galModalDesc\"><\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n\n<\/section>\n\n<script>\n  (function () {\n    \/\/ Clean up leftovers from a previous render (Elementor editor re-runs this script)\n    document.querySelectorAll('body > #galModal').forEach(function (el) { el.remove(); });\n    if (window.__galKeyHandler) {\n      document.removeEventListener('keydown', window.__galKeyHandler);\n    }\n\n    const galModal = document.getElementById('galModal');\n    if (!galModal) return;\n    document.body.appendChild(galModal);\n\n    const galModalImg = document.getElementById('galModalImg');\n    const galModalTitle = document.getElementById('galModalTitle');\n    const galModalDesc = document.getElementById('galModalDesc');\n    const galModalClose = document.getElementById('galModalClose');\n    const galModalPrev = document.getElementById('galModalPrev');\n    const galModalNext = document.getElementById('galModalNext');\n    const galModalCounter = document.getElementById('galModalCounter');\n\n    let currentImages = [];\n    let currentIndex = 0;\n\n    function lockScroll() {\n      document.documentElement.style.overflow = 'hidden';\n      document.body.style.overflow = 'hidden';\n    }\n\n    function unlockScroll() {\n      document.documentElement.style.overflow = '';\n      document.body.style.overflow = '';\n    }\n\n    function updateImage() {\n      galModalImg.src = currentImages[currentIndex];\n      galModalCounter.textContent = (currentIndex + 1) + ' \/ ' + currentImages.length;\n      const showNav = currentImages.length > 1;\n      galModalPrev.style.display = showNav ? 'flex' : 'none';\n      galModalNext.style.display = showNav ? 'flex' : 'none';\n      galModalCounter.style.display = showNav ? 'block' : 'none';\n    }\n\n    document.querySelectorAll('.gal-card').forEach(function (card) {\n      card.addEventListener('click', function (e) {\n        e.preventDefault();\n        currentImages = card.dataset.images\n          ? card.dataset.images.split(',').map(function (s) { return s.trim(); }).filter(Boolean)\n          : [card.querySelector('img').src];\n        currentIndex = 0;\n        galModalTitle.textContent = card.dataset.title;\n        galModalDesc.textContent = card.dataset.desc;\n        updateImage();\n        galModal.classList.add('is-open');\n        lockScroll();\n      });\n    });\n\n    galModalPrev.addEventListener('click', function () {\n      currentIndex = (currentIndex - 1 + currentImages.length) % currentImages.length;\n      updateImage();\n    });\n\n    galModalNext.addEventListener('click', function () {\n      currentIndex = (currentIndex + 1) % currentImages.length;\n      updateImage();\n    });\n\n    function closeGalModal() {\n      galModal.classList.remove('is-open');\n      unlockScroll();\n    }\n\n    galModalClose.addEventListener('click', closeGalModal);\n\n    galModal.addEventListener('click', function (e) {\n      if (e.target === galModal) closeGalModal();\n    });\n\n    window.__galKeyHandler = function (e) {\n      if (!galModal.classList.contains('is-open')) return;\n      if (e.key === 'Escape') closeGalModal();\n      if (e.key === 'ArrowLeft') galModalPrev.click();\n      if (e.key === 'ArrowRight') galModalNext.click();\n    };\n    document.addEventListener('keydown', window.__galKeyHandler);\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>IFIT Portfolio Hartamas White Oak Bangi Thermo Oak Trio House Deck Lazy 8 Aira Balmain &times; &#8249; &#8250;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2339","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/perswood.com.my\/index.php?rest_route=\/wp\/v2\/pages\/2339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/perswood.com.my\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/perswood.com.my\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/perswood.com.my\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/perswood.com.my\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2339"}],"version-history":[{"count":85,"href":"https:\/\/perswood.com.my\/index.php?rest_route=\/wp\/v2\/pages\/2339\/revisions"}],"predecessor-version":[{"id":3300,"href":"https:\/\/perswood.com.my\/index.php?rest_route=\/wp\/v2\/pages\/2339\/revisions\/3300"}],"wp:attachment":[{"href":"https:\/\/perswood.com.my\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}