/*
Theme Name: SusThane
Theme URI: https://susthane.nl
Author: SusThane
Description: Responsive visual prototype based on the approved SusThane website PDF.
Version: 0.65.0
*/
:root{--orange:#ff5a0a;--graphite:#1e2326;--pale:#eaf7fb}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:#fff;font-family:Arial,Helvetica,sans-serif;color:#111}
.site-art{position:relative;width:100%;max-width:1600px;margin:0 auto;overflow:hidden;background:#fff}
.site-art>img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hotspot{position:absolute;display:block;z-index:5;background:transparent;border:0;text-decoration:none}
.hotspot:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.mobile-nav{display:none;position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e7e7e7;padding:10px 14px;align-items:center;justify-content:space-between}
.mobile-nav .brand{font-weight:800;color:var(--orange);font-size:18px}.mobile-nav button{border:0;background:var(--orange);color:#fff;border-radius:24px;padding:9px 14px;font-weight:700}
.mobile-menu{display:none;position:fixed;z-index:70;inset:0;background:rgba(20,24,26,.97);padding:80px 28px 28px}.mobile-menu.open{display:block}.mobile-menu a{display:block;color:#fff;font-size:24px;text-decoration:none;padding:14px 0;border-bottom:1px solid #3b4145}.mobile-menu .close{position:absolute;top:18px;right:20px;color:#fff;background:none;border:0;font-size:34px}
.video-modal{position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;padding:4vw}.video-modal.open{display:flex}.video-modal video{max-width:94vw;max-height:88vh;width:auto;height:auto;background:#000;box-shadow:0 20px 70px rgba(0,0,0,.45)}.video-close{position:fixed;top:20px;right:24px;background:#fff;border:0;border-radius:50%;width:44px;height:44px;font-size:26px;cursor:pointer}
.contact-overlay{position:absolute;inset:0;z-index:8;pointer-events:none}.contact-overlay input,.contact-overlay textarea,.contact-overlay select{position:absolute;border:0;background:transparent;color:#111;font-size:1.02vw;padding:0 .8vw;outline:none;pointer-events:auto;line-height:1.2}.contact-overlay input:focus,.contact-overlay textarea:focus,.contact-overlay select:focus{box-shadow:0 0 0 2px var(--orange) inset;border-radius:8px;background:rgba(255,255,255,.18)}
.contact-overlay .name{left:43.78%;top:36.71%;width:21.74%;height:3.93%}.contact-overlay .company{left:67.35%;top:36.71%;width:21.89%;height:3.93%}.contact-overlay .email{left:43.78%;top:44.57%;width:21.74%;height:3.93%}.contact-overlay .phone{left:67.35%;top:44.57%;width:21.89%;height:3.93%}.contact-overlay .country{left:43.78%;top:52.22%;width:21.74%;height:3.93%}.contact-overlay .interest{left:67.35%;top:52.22%;width:21.89%;height:3.93%;padding-right:2vw}.contact-overlay .message{left:43.78%;top:60.39%;width:45.39%;height:11.38%;padding:.65vw .8vw;resize:none;line-height:1.35}.contact-overlay .send{position:absolute;left:43.78%;top:73.63%;width:13.69%;height:4.65%;border:0;background:transparent;color:transparent;cursor:pointer;pointer-events:auto}
.form-status{position:absolute;left:35%;top:89%;font-size:.9vw;color:#198754;font-weight:700}
.mobile-contact{display:none;padding:24px;background:#eef9fc}.mobile-contact h2{font-size:28px;margin:0 0 16px}.mobile-contact input,.mobile-contact textarea,.mobile-contact select{width:100%;padding:12px;margin:7px 0;border:1px solid #cfd9dc;border-radius:8px;font:inherit}.mobile-contact textarea{min-height:140px}.mobile-contact button{background:var(--orange);color:#fff;border:0;border-radius:24px;padding:12px 22px;font-weight:700}

.about-v62{position:absolute;inset:0;z-index:4;pointer-events:none}.about-intro-mask{position:absolute;left:7.2%;top:24.4%;width:84.5%;height:4.4%;background:#fff}.about-stats-row{position:absolute;left:7.45%;top:29.9%;width:85.05%;height:8.1%;display:grid;grid-template-columns:repeat(3,1fr);gap:2.05%;background:#fff}.about-stat{background:#eaf7fb;border-radius:8px;padding:1.15vw 1.7vw;display:flex;flex-direction:column;justify-content:center}.about-stat strong{font-size:1.45vw;line-height:1.02;color:#ff5a0a;font-weight:800;letter-spacing:-.025em}.about-stat span{margin-top:.6vw;font-size:.92vw;line-height:1.25;color:#555;max-width:95%}.about-approach{position:absolute;left:7.45%;top:40.45%;width:87.7%;height:17.35%;border-radius:14px;background:#14191c;color:#fff;padding:2.05vw 2.25vw}.about-approach small{font-size:.78vw;color:#ff5a0a;font-weight:700}.about-approach h2{font-size:2.2vw;line-height:1;margin:.95vw 0 1.05vw;font-weight:500}.about-approach p{font-size:.96vw;line-height:1.25;margin:.45vw 0;color:#f1f1f1}.about-pillars{position:absolute;left:7.45%;top:61.15%;width:85.05%;height:13.2%;display:grid;grid-template-columns:repeat(3,1fr);gap:2.05%;background:#fff}.about-pillar{background:#eaf7fb;border-radius:10px;padding:1.65vw 1.7vw}.about-pillar h3{font-size:1.08vw;margin:0 0 1.25vw;font-weight:700;display:flex;align-items:center;gap:.9vw}.about-pillar h3 i{display:block;width:.72vw;height:.72vw;min-width:.72vw;border-radius:50%;background:#ff5a0a}.about-pillar p{font-size:.92vw;line-height:1.3;color:#555;margin:0;max-width:95%}
@media(max-width:720px){.mobile-nav{display:flex}.site-art{width:100%;overflow-x:hidden}.desktop-only-form{display:none}.mobile-contact{display:block}.site-art>img{width:100%;height:auto}.hotspot.header-hotspot{display:none}.video-modal{padding:2vw}.video-modal video{max-width:98vw;max-height:78vh}}

.video-modal video{cursor:pointer}

/* v62 Projects refinements */
.project-photo-trigger{cursor:zoom-in;z-index:7}
.photo-modal{position:fixed;z-index:110;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;padding:4vw}
.photo-modal.open{display:flex}
.photo-modal img{display:block;max-width:92vw;max-height:86vh;width:auto;height:auto;object-fit:contain;box-shadow:0 20px 70px rgba(0,0,0,.55);cursor:zoom-out;background:#111}
.photo-close{position:fixed;top:20px;right:24px;background:#fff;border:0;border-radius:50%;width:44px;height:44px;font-size:26px;cursor:pointer;z-index:112}
.projects-global-industries{position:absolute;inset:0;z-index:4;pointer-events:none}
.industry-card{position:absolute;width:24.45%;height:4.25%;background:#fff;border-radius:6px;display:flex;align-items:center;padding:0 1.15%;gap:1.0%;font-size:clamp(13px,1.08vw,17px);font-weight:500;line-height:1;color:#111;white-space:nowrap}
.industry-card i{display:block;width:.72vw;height:.72vw;min-width:8px;min-height:8px;border-radius:50%;background:var(--orange);flex:0 0 auto}
@media(max-width:720px){.industry-card{font-size:1.45vw}.industry-card i{width:.8vw;height:.8vw;min-width:4px;min-height:4px}.photo-modal{padding:2vw}.photo-modal img{max-width:98vw;max-height:80vh}}

/* v62 final visual polish */
.contact-cta-hotspot{cursor:pointer;z-index:12}
.video-modal{background:rgba(0,0,0,.86);padding:2.5vw}
.video-card{width:min(94vw,1500px);max-height:94vh;background:#1e2326;border-radius:28px;padding:20px 22px 24px;box-shadow:0 24px 80px rgba(0,0,0,.5);display:flex;flex-direction:column}
.video-card-title{color:#fff;font-size:clamp(18px,1.65vw,28px);font-weight:500;letter-spacing:.01em;padding:2px 4px 14px}
.video-stage{background:#eef0ef;border-radius:15px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:0}
.video-modal .video-stage video{display:block;max-width:100%;max-height:80vh;width:auto;height:auto;background:#eef0ef;box-shadow:none;border:0}
@media(max-width:720px){.video-card{border-radius:18px;padding:14px}.video-card-title{padding:0 2px 10px}.video-modal .video-stage video{max-height:76vh}}

/* v62.4 full-photo lightbox: always show the complete source image */
.photo-modal img{width:auto!important;height:auto!important;max-width:94vw!important;max-height:90vh!important;object-fit:contain!important;object-position:center center!important}


/* Production responsive hardening */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video{max-width:100%}
@media (max-width:1100px){.site-art{max-width:100%}.contact-overlay input,.contact-overlay textarea,.contact-overlay select{font-size:clamp(10px,1.25vw,14px)}}
@media (max-width:720px){body{overflow-x:hidden}.site-art{max-width:100vw}.site-art>img{width:100%;max-width:100%;height:auto}.photo-close,.video-close{top:12px;right:12px}.mobile-menu{overflow-y:auto}}