(were
). :where() has zero specificity and every one of these titles has its own inline style, so they look exactly as before. ---- / :where(h1){margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit} / ---- Portable: visually hidden
for pages whose visible title is not a heading ---- */ .wtn-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
  © 2026 WIN TUN NAING — All Rights Reserved
  Website : wintunnaing.net
  Contact : win.tun.naing@outlook.com

  Designed & developed by Madderquill

  This XML template is the exclusive intellectual property of
  Win Tun Naing. Unauthorized copying, modification, distribution
  or use of this file, in whole or in part, is strictly prohibited
  without prior written permission from the author.

  Protected by copyright law. All design, code and content
  within this file belong to Win Tun Naing.
  ============================================================ */
/* wintunnaing.net — Portable site v1.2 · styles = Blogger theme <b:skin>, design unchanged.
   Changes from the theme: (1) fonts are self-hosted (/assets/fonts, SIL Open Font License) instead of
   Google Fonts — Jost 300/400/500/600/700 and Cormorant Garamond 600 (the only Cormorant weight the
   site uses); (2) 'Jost Fallback' (Arial, size-adjusted to Jost's metrics) is added after Jost in the
   stylesheet's font stacks so the font swap moves the layout less; (3) two rules at the end for <h1>. */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/jost-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jost-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jost-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/jost-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/jost-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* size-adjust measured for wintunnaing.com (same font), Jost vs Arial */
@font-face{font-family:'Jost Fallback';font-weight:400;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:95.62%;ascent-override:111.90%;descent-override:39.22%;line-gap-override:0%}
@font-face{font-family:'Jost Fallback';font-weight:500;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:99.59%;ascent-override:107.44%;descent-override:37.65%;line-gap-override:0%}
/* ============================================================
   GLOBAL RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #fff;
  --text: #1a1a1a;
  --muted: #888;
  --accent: #c8a84b;
  --silver: #c8c0b8;
  --border: #e8e8e8;
  --nav-h: 80px;
  --footer-h: 80px;
}

body, html {
  margin: 0; padding: 0;
  height: 100%; width: 100%;
  font-family:Jost,'Jost Fallback',sans-serif;
  background: #fff; color: #000;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Desktop: fixed viewport feel without position:fixed on body */
@media (min-width: 769px) {
  body, html { height: 100vh; overflow: hidden; }
}
/* Mobile: natural scroll */


/* ============================================================
   HEADER + FOOTER
   ============================================================ */
header, footer {
  height: var(--nav-h);
  width: 100%;
  background: #fff;
  z-index: 2000;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0; right: 0;
}
header { top: 0; }

footer { bottom: 0; }


.nav-container {
  width: calc(100% - 120px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
header .nav-container { border-bottom: 1px solid #000; }
footer .nav-container { border-top: 1px solid #000; }

.logo-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.logo-vline { width: 1px; height: 22px; background: linear-gradient(to bottom, transparent, #bbb, transparent); }
.logo-name { font-size: 12px; font-weight: 600; color: #111; letter-spacing: 0.12em; text-transform: uppercase; font-family:Jost,'Jost Fallback',sans-serif; }

nav ul { list-style: none; display: flex; gap: 25px; margin: 0; padding: 0; }
nav ul li a {
  text-decoration: none; color: #000;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 2px; cursor: pointer;
  font-family:Jost,'Jost Fallback',sans-serif;
}
nav ul li a:hover { opacity: 0.6; }

/* ============================================================
   PAGE SECTIONS — all hidden by default
   ============================================================ */
.main-content {
  position: absolute;
  top: var(--nav-h);
  bottom: var(--footer-h);
  left: 0; right: 0;
  padding: 40px 60px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  background: #fff;
  display: none;
}


/* ============================================================
   HOME PAGE — hero slider
   ============================================================ */
#home-page {
  height: calc(100vh - 160px) !important;
  display: none;
  padding: 40px 60px !important;
  overflow: hidden !important;
}
#home-page.active { display: flex !important; }
#hero-slider { width: 100%; height: 100%; position: relative; overflow: hidden; flex: 1; }
.home-slide { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; position: absolute; top: 0; left: 0; display: none; }
.home-slide:first-child { display: block; }

/* ============================================================
   PROJECTS MAIN PAGE — Mondrian grid
   ============================================================ */
#projects-page { padding: 40px 60px; top: var(--nav-h); bottom: var(--footer-h); left: 0; right: 0; overflow: hidden; box-sizing: border-box; background: #fff; }


.grid-wrap {
  display: grid;
  grid-template-columns: 62fr 38fr;
  grid-template-rows: 65fr 35fr;
  gap: 20px;
  width: 100%;
  height: calc(100vh - 240px);
  min-height: 400px;
}
.cell { position: relative; overflow: hidden; cursor: pointer; display: flex; align-items: flex-end; }
.cell-viz { grid-column: 1; grid-row: 1 / 3; background: #e8e8e8; }
.cell-conceptual { grid-column: 2; grid-row: 1; background: #e8e8e8; }
.cell-bim { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 62fr 38fr; gap: 20px; background: #fff; align-items: stretch; }
.sub-cell { position: relative; overflow: hidden; display: flex; align-items: flex-end; cursor: pointer; }
.sub-cell-bim { background: #e8e8e8; }
.sub-cell-details { background: #e8e8e8; }
.cell-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; display: block; pointer-events: none; }
.cell::after, .sub-cell::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.04); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.cell:hover::after, .sub-cell:hover::after { opacity: 1; }
.label { position: absolute; bottom: 0; left: 0; padding: 28px 32px; z-index: 2; pointer-events: none; }
.sub-cell .label { padding: 20px; }
.label-title { display: block; font-family: 'Georgia', serif; font-size: 18px; font-weight: normal; color: #e8e4de; letter-spacing: 0.01em; margin-bottom: 4px; }
.sub-cell .label-title { font-size: 13px; }
.label-sub { display: block; font-family: Arial, sans-serif; font-size: 11px; color: #b0a89e; letter-spacing: 0.06em; margin-bottom: 10px; }
.label-line { display: block; width: 24px; height: 1px; background: #c8b89a; margin-top: 2px; }
.cell-viz::before, .cell-conceptual::before, .sub-cell::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(20,18,16,0.65) 100%); z-index: 1; pointer-events: none; }

/* ============================================================
   VISUALIZATION PAGE
   ============================================================ */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; }
.gallery-item img { width: 100%; height: 22vh; object-fit: cover; cursor: pointer; display: block; }
.item-title { padding: 10px 0; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; text-align: center; font-family:Jost,'Jost Fallback',sans-serif; }

.flow-item { border-bottom: 0.5px solid #f5f3f0; }
.flow-item:last-child { border-bottom: none; }
.flow-img { width: 100%; height: auto; max-height: 70vh; object-fit: cover; display: block; }
.flow-caption { padding: 10px 0 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.flow-name { font-size: 11px; font-weight: 500; color: #555; letter-spacing: 0.08em; text-transform: uppercase; font-family:Jost,'Jost Fallback',sans-serif; }
.flow-num { font-size: 9px; color: #767676; letter-spacing: 0.06em; font-family:Jost,'Jost Fallback',sans-serif; margin-top: 3px; }

/* ============================================================
   CONCEPTUAL PAGE — Piles
   ============================================================ */
.piles-area {
  padding: 50px 0 30px;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  min-height: 420px;
  overflow: visible;
  position: relative;
}

.pile { position: relative; width: 340px; height: 380px; flex-shrink: 0; cursor: pointer; }

.frame {
  position: absolute;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 3px 8px rgba(0,0,0,0.08), 0 8px 18px rgba(0,0,0,0.05);
  transition: all 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.frame .f-img { display: block; margin: 10px 10px 0; background: linear-gradient(135deg, #d8d2cc, #c5bfb8); }
.frame.ls .f-img { width: 240px; height: 165px; }
.frame.vt .f-img { width: 155px; height: 210px; }
.frame .f-lbl { font-size: 7px; font-weight: 400; color: #767676; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; padding: 5px 6px 8px; white-space: nowrap; }

.pile-info { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; }
.pile-name { display: block; font-size: 9px; font-weight: 600; color: #767676; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 3px; }
.pile-count { display: block; font-size: 8px; font-weight: 300; color: #767676; letter-spacing: 0.06em; }
.pile-hint { display: block; font-size: 7px; color: #767676; letter-spacing: 0.04em; margin-top: 2px; }

/* Pile 1 — Arc Fan */
.pile-1 .f1 { top:100px; left:40px; transform:rotate(-5deg); z-index:1; }
.pile-1 .f2 { top:78px;  left:40px; transform:rotate(-1deg); z-index:2; }
.pile-1 .f3 { top:58px;  left:40px; transform:rotate(4deg);  z-index:3; }
.pile-1.open .f1 { transform:rotate(-30deg) translateX(-160px) translateY(20px); box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:1; }
.pile-1.open .f2 { transform:rotate(0deg) translateY(-28px); box-shadow:0 12px 28px rgba(0,0,0,0.14); z-index:3; }
.pile-1.open .f3 { transform:rotate(30deg) translateX(160px) translateY(20px); box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:1; }

/* Pile 2 — Slide Reveal */
.pile-2 .f1 { top:100px; left:40px; transform:rotate(-4deg); z-index:1; }
.pile-2 .f2 { top:78px;  left:40px; transform:rotate(-1deg); z-index:2; }
.pile-2 .f3 { top:58px;  left:40px; transform:rotate(3deg);  z-index:3; }
.pile-2.open .f1 { transform:rotate(-4deg) translateY(150px); box-shadow:0 8px 20px rgba(0,0,0,0.10); z-index:1; transition-delay:0s; }
.pile-2.open .f2 { transform:rotate(-1deg) translateY(72px);  box-shadow:0 10px 24px rgba(0,0,0,0.11); z-index:2; transition-delay:0.06s; }
.pile-2.open .f3 { transform:rotate(3deg)  translateY(0px);   box-shadow:0 12px 28px rgba(0,0,0,0.13); z-index:3; transition-delay:0.12s; }

/* Pile 3 — Scatter */
.pile-3 .f1 { top:100px; left:40px; transform:rotate(-5deg); z-index:1; }
.pile-3 .f2 { top:78px;  left:40px; transform:rotate(-1deg); z-index:2; }
.pile-3 .f3 { top:58px;  left:40px; transform:rotate(4deg);  z-index:3; }
.pile-3.open .f1 { transform:rotate(-24deg) translateX(-150px) translateY(50px); box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:1; }
.pile-3.open .f2 { transform:rotate(8deg)   translateX(20px)   translateY(-50px); box-shadow:0 12px 28px rgba(0,0,0,0.14); z-index:3; }
.pile-3.open .f3 { transform:rotate(26deg)  translateX(150px)  translateY(35px);  box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:1; }

/* Also support hover on desktop for instant feel */
.pile-1:hover .f1 { transform:rotate(-30deg) translateX(-160px) translateY(20px); box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:1; }
.pile-1:hover .f2 { transform:rotate(0deg) translateY(-28px); box-shadow:0 12px 28px rgba(0,0,0,0.14); z-index:3; }
.pile-1:hover .f3 { transform:rotate(30deg) translateX(160px) translateY(20px); box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:1; }
.pile-2:hover .f1 { transform:rotate(-4deg) translateY(150px); box-shadow:0 8px 20px rgba(0,0,0,0.10); z-index:1; }
.pile-2:hover .f2 { transform:rotate(-1deg) translateY(72px);  box-shadow:0 10px 24px rgba(0,0,0,0.11); z-index:2; }
.pile-2:hover .f3 { transform:rotate(3deg)  translateY(0px);   box-shadow:0 12px 28px rgba(0,0,0,0.13); z-index:3; }
.pile-3:hover .f1 { transform:rotate(-24deg) translateX(-150px) translateY(50px); box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:1; }
.pile-3:hover .f2 { transform:rotate(8deg)   translateX(20px)   translateY(-50px); box-shadow:0 12px 28px rgba(0,0,0,0.14); z-index:3; }
.pile-3:hover .f3 { transform:rotate(26deg)  translateX(150px)  translateY(35px);  box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:1; }

.discover-hint { text-align:center; padding:0 0 20px; font-size:8px; font-weight:400; color:#767676; letter-spacing:0.1em; text-transform:uppercase; }

/* ============================================================
   BIM PAGE — ISO Skyline
   ============================================================ */
.iso-scene { width:100%; background:#fff; overflow:hidden; height:calc(100vh - var(--nav-h) - var(--footer-h) - 52px); min-height:460px; }
.iso-svg { width:100%; height:100%; display:block; }


.f-top   { fill:rgba(248,249,250,.65); stroke:rgba(50,50,50,.85); stroke-width:1; transition:fill .2s,stroke .2s; }
.f-left  { fill:rgba(240,242,245,.55); stroke:rgba(50,50,50,.85); stroke-width:1; transition:fill .2s,stroke .2s; }
.f-right { fill:rgba(230,235,240,.45); stroke:rgba(50,50,50,.85); stroke-width:1; transition:fill .2s,stroke .2s; }
.b-lbl   { font-family:Arial; font-size:9.5px; font-weight:500; letter-spacing:1.5px; fill:rgba(90,105,125,.85); text-transform:uppercase; transition:all .2s; }

.sky-building { cursor:pointer; }
.sky-building:hover .f-top   { fill:rgba(200,215,245,.45); stroke:rgba(53,122,232,.95); }
.sky-building:hover .f-left  { fill:rgba(165,190,230,.35); stroke:rgba(53,122,232,.95); }
.sky-building:hover .f-right { fill:rgba(145,170,215,.28); stroke:rgba(53,122,232,.95); }
.sky-building:hover .b-lbl   { fill:var(--text); font-weight:bold; }

/* ============================================================
   DETAIL DRAWINGS PAGE — Slideshow
   ============================================================ */
.slideshow-wrap { position:relative; width:100%; height:420px; background:#f5f5f5; overflow:hidden; }
.slide { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.6s ease; }
.slide.active { opacity:1; pointer-events:auto; }
.slide-img { width:100%; height:100%; object-fit:cover; display:block; }
.slide-placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:#111; }
.slide-placeholder span { font-size:10px; font-weight:400; color:rgba(255,255,255,0.2); letter-spacing:0.2em; text-transform:uppercase; }

@keyframes fly-from-top    { from { transform:translateY(-100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes fly-from-right  { from { transform:translateX(100%);  opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes fly-from-bottom { from { transform:translateY(100%);  opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes fly-from-left   { from { transform:translateX(-100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes fly-from-bl     { from { transform:translate(-60%,60%);  opacity:0; } to { transform:translate(0,0); opacity:1; } }
@keyframes fly-from-tr     { from { transform:translate(60%,-60%);  opacity:0; } to { transform:translate(0,0); opacity:1; } }

.slide.active.fly-top    .slide-placeholder, .slide.active.fly-top    .slide-img { animation:fly-from-top    0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
.slide.active.fly-right  .slide-placeholder, .slide.active.fly-right  .slide-img { animation:fly-from-right  0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
.slide.active.fly-bottom .slide-placeholder, .slide.active.fly-bottom .slide-img { animation:fly-from-bottom 0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
.slide.active.fly-left   .slide-placeholder, .slide.active.fly-left   .slide-img { animation:fly-from-left   0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
.slide.active.fly-bl     .slide-placeholder, .slide.active.fly-bl     .slide-img { animation:fly-from-bl     0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
.slide.active.fly-tr     .slide-placeholder, .slide.active.fly-tr     .slide-img { animation:fly-from-tr     0.7s cubic-bezier(0.22,1,0.36,1) forwards; }

.dir-hint { position:absolute; top:14px; left:20px; font-size:8px; font-weight:400; color:rgba(255,255,255,0.35); letter-spacing:0.08em; text-transform:lowercase; z-index:10; animation:hint-fade 2s ease forwards; }
@keyframes hint-fade { 0%{opacity:0;} 20%{opacity:1;} 70%{opacity:1;} 100%{opacity:0;} }
.slide-counter { position:absolute; top:14px; right:20px; font-size:9px; font-weight:400; color:rgba(255,255,255,0.4); letter-spacing:0.1em; z-index:10; }
.progress-bar-wrap { position:absolute; bottom:0; left:0; right:0; height:2px; background:rgba(255,255,255,0.1); z-index:10; }
.progress-bar { height:100%; width:0%; background:linear-gradient(90deg,#888,#ccc,#888); transition:width 0.1s linear; }
.dots-wrap { position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:10; }
.dot { width:28px; height:2px; background:rgba(255,255,255,0.25); cursor:pointer; transition:background 0.3s; border:none; padding:0; }
.dot.active { background:rgba(255,255,255,0.8); }

.info-section { padding:32px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:40px; border-bottom:1px solid #f0f0f0; }
.info-left { flex:1; }
.info-badge { display:inline-block; font-size:8px; font-weight:600; color:#6b6b6b; letter-spacing:0.1em; text-transform:uppercase; padding:4px 12px; border:0.5px solid #ddd; border-radius:20px; margin-bottom:16px; }
.info-title { font-size:16px; font-weight:600; color:#111; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:12px; }
.info-desc { font-size:11px; font-weight:300; color:#666; line-height:1.8; max-width:520px; }
.info-desc span { color:#767676; }
.request-btn { flex-shrink:0; background:#111; color:#fff; border:none; padding:14px 28px; font-size:9px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; transition:background .2s; white-space:nowrap; align-self:center; }
.request-btn:hover { background:#333; }
.info-note { padding:16px 0 20px; text-align:center; font-size:8px; font-weight:300; color:#767676; letter-spacing:0.06em; display:flex; align-items:center; justify-content:center; gap:8px; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { height:52px; display:flex; align-items:center; justify-content:center; gap:10px; border-top:1px solid var(--border); background:#fff; }
.pagination a, .pg-btn { width:26px; height:26px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--muted); text-decoration:none; transition:all 0.2s; cursor:pointer; background:#fff; }
.pagination a.pg-active, .pg-btn.active { background:var(--text); color:#fff; border-color:var(--text); }
.pg-btn.inactive { color:#767676; }
.pagination .arr, .pg-arrow { border:none; font-size:13px; width:auto; background:none; cursor:pointer; color:#767676; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
#lightbox { position:fixed; top:0; left:0; width:100vw; height:100vh; background:#fff; z-index:9999; display:none; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; }
#lb-bg { position:absolute; width:100%; height:100%; cursor:pointer; top:0; left:0; z-index:9999; }
#lb-top { position:absolute; top:0; left:0; right:0; padding:14px 24px; text-align:center; z-index:10002; border-bottom:1px solid #f0f0f0; background:rgba(255,255,255,0.98); display:flex; align-items:center; justify-content:center; }
#lb-title { font-family:Jost,'Jost Fallback',sans-serif; font-size:10px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:#111; }
#lb-img { max-width:62%; max-height:72%; cursor:pointer; z-index:10001; display:block; }
#lb-desc { position:absolute; bottom:52px; left:0; right:0; padding:8px 40px; text-align:center; z-index:10002; font-family:Jost,'Jost Fallback',sans-serif; font-size:11px; font-weight:300; color:#6b6b6b; line-height:1.6; background:#fff; }
#lb-bottom { position:absolute; bottom:0; left:0; right:0; padding:14px 24px; text-align:center; z-index:10002; border-top:1px solid #f0f0f0; background:rgba(255,255,255,0.98); }
#lb-counter { font-family:Jost,'Jost Fallback',sans-serif; font-size:9px; color:#767676; letter-spacing:0.12em; }

/* BIM lightbox */
.lb-overlay { display:none; position:fixed; inset:0; background:rgba(255,255,255,.97); z-index:1000; flex-direction:column; }
.lb-overlay.lb-open { display:flex; }
.lb-header { display:flex; align-items:center; justify-content:space-between; padding:18px 32px; border-bottom:1px solid var(--border); flex-shrink:0; }
.lb-title { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.lb-title span { color:var(--text); font-weight:700; }
.lb-close { background:none; border:1px solid var(--border); color:var(--muted); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; }
.lb-body { flex:1; display:flex; align-items:center; justify-content:center; position:relative; padding:24px 80px; overflow:hidden; }
.lb-img-wrap { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.lb-arrow { position:absolute; top:50%; transform:translateY(-50%); background:none; border:1px solid var(--border); color:var(--muted); width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; }
.lb-arrow.lb-prev { left:20px; } .lb-arrow.lb-next { right:20px; }
.lb-footer { padding:14px 32px; display:flex; align-items:center; justify-content:center; gap:8px; flex-shrink:0; }
.lb-dot { width:6px; height:6px; border-radius:50%; background:#ddd; cursor:pointer; border:none; }
.lb-dot.lb-dot-active { background:var(--text); }
.lb-placeholder { text-align:center; }
.lb-placeholder-num { font-size:48px; font-weight:300; color:#949494; }
.lb-placeholder-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-top:4px; }

/* ============================================================
   ABOUT + CONTACT + TERMS — kept from original
   ============================================================ */
.brand-panels { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px; padding-top:16px; border-top:none; text-align:left; }
.brand-silver-line { height:1px; background:linear-gradient(90deg, transparent, #888, #bbb, #e0e0e0, #bbb, #888, transparent); margin-bottom:14px; }
.brand-gold-line { height:1px; background:linear-gradient(90deg, transparent, #8B6914, #C9A84C, #F0D080, #C9A84C, #8B6914, transparent); margin-bottom:14px; }
.brand-role { font-size:8px; color:#767676; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:4px; }
.brand-name { font-size:13px; font-weight:600; color:#111; letter-spacing:0.04em; margin-bottom:8px; }
.brand-desc { font-size:11px; font-weight:400; color:#6b6b6b; line-height:1.7; margin-bottom:10px; }
.brand-link { font-size:10px; color:#111; border-bottom:0.5px solid #ccc; padding-bottom:1px; display:inline-block; text-decoration:none; letter-spacing:0.04em; cursor:pointer; }
.brand-link:hover { opacity:0.6; }

.contact-form input, .contact-form textarea { font-size:11px; font-weight:400; padding:12px 14px; border:0.5px solid #d8d6d2; border-radius:1px; outline:none; background:#fff; color:#333; width:100%; box-sizing:border-box; transition:border-color 0.2s; }
.contact-form input:focus, .contact-form textarea:focus { border-color:#999; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color:#767676; font-weight:300; }
.contact-form input.invalid { border-color:#e0a0a0; background:#fffafa; }
.field-error { font-size:9px; color:#cc4444; letter-spacing:0.04em; margin-top:-6px; margin-bottom:8px; display:none; padding-left:2px; }
.submit-btn { width:100%; padding:16px; background:#000; color:#fff; font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; border:none; border-radius:25px; cursor:pointer; transition:background 0.2s; margin-top:6px; }
.submit-btn:hover { background:#333; }
.submit-btn:disabled { background:#999; cursor:not-allowed; }
.form-success { display:none; text-align:center; padding:40px 20px; }
.success-icon { width:48px; height:48px; border-radius:50%; background:#111; color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.success-title { font-size:14px; font-weight:600; color:#111; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:10px; }
.success-text { font-size:11px; font-weight:400; color:#6b6b6b; line-height:1.9; letter-spacing:0.03em; }
.silver-divider { height:1px; background:linear-gradient(90deg,transparent,#d0d0d0,#eee,#d0d0d0,transparent); margin:16px auto; max-width:200px; }
.form-error { display:none; text-align:center; padding:10px 14px; background:#fff5f5; border:0.5px solid #ffcccc; border-radius:2px; font-size:10px; color:#cc0000; margin-top:10px; letter-spacing:0.03em; line-height:1.6; }
.botcheck { display:none !important; visibility:hidden !important; }
.wtn-hc { display:flex; justify-content:center; max-width:100%; overflow:hidden; min-height:78px; margin-top:22px; }
#contact-page .wtn-hc { margin:22px 0 22px; }
/* Document request pop-up (Resume / Detail Drawings) — light version of the wintunnaing.com print enquiry pop-up */
#wtn-req { position:fixed; inset:0; z-index:3500; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; padding:20px; overflow-y:auto; }
#wtn-req.open { display:flex; }
.wtn-req-box { background:#fff; border:1px solid #e2e0dc; padding:34px 36px; max-width:520px; width:100%; box-sizing:border-box; text-align:left; font-family:Jost,'Jost Fallback',sans-serif; margin:auto; }
.wtn-req-type { font-size:10px; letter-spacing:0.3em; color:#767676; text-transform:uppercase; margin-bottom:10px; text-align:center; }
.wtn-req-title { font-size:18px; letter-spacing:0.2em; color:#111; text-transform:uppercase; margin-bottom:16px; text-align:center; font-weight:500; }
.wtn-req-sum { font-size:12px; line-height:1.8; color:#555; border-top:0.5px solid #e2e0dc; border-bottom:0.5px solid #e2e0dc; padding:12px 0; margin-bottom:16px; text-align:center; }
.wtn-req-sum b { color:#111; font-weight:500; }
.wtn-req-docs { display:flex; gap:22px; justify-content:center; margin-bottom:14px; font-size:12px; color:#333; letter-spacing:0.04em; }
.wtn-req-docs label { display:flex; align-items:center; gap:7px; cursor:pointer; }
#wtn-req .wtn-req-docs input { width:16px; height:16px; margin:0; padding:0; accent-color:#111; cursor:pointer; }
.wtn-req-row { display:flex; gap:10px; }
.wtn-req-row > * { flex:1; min-width:0; }
#wtn-req input[type=text], #wtn-req input[type=email], #wtn-req input[type=tel], #wtn-req textarea { width:100%; box-sizing:border-box; background:#fff; border:0.5px solid #d8d6d2; border-radius:1px; color:#111; font:400 12px Jost,sans-serif; padding:10px 12px; margin-bottom:10px; outline:none; }
#wtn-req input:focus, #wtn-req textarea:focus { border-color:#767676; }
#wtn-req input::placeholder, #wtn-req textarea::placeholder { color:#767676; font-weight:300; }
#wtn-req textarea { min-height:80px; resize:vertical; }
#wtn-req .botcheck { display:none; }
#wtn-req .wtn-hc { margin:4px 0 8px; }
.wtn-req-msg { font-size:11px; color:#555; line-height:1.7; min-height:20px; margin:4px 0 12px; text-align:center; }
.wtn-req-msg.err { color:#cc0000; }
.wtn-req-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.wtn-req-btn { border:1px solid #111; background:#111; padding:10px 20px; font-size:11px; letter-spacing:0.14em; color:#fff; text-transform:uppercase; cursor:pointer; font-weight:500; }
.wtn-req-btn:hover { background:#333; border-color:#333; }
.wtn-req-btn.ghost { background:#fff; border-color:#c8c6c2; color:#555; }
.wtn-req-btn.ghost:hover { background:#f6f5f3; }
.wtn-req-btn:focus-visible { outline:2px solid #111; outline-offset:2px; }
.wtn-req-cta { text-align:center; margin:30px 0 6px; }
.wtn-req-line { font-size:12px; color:#555; text-align:center; margin:-14px 0 30px; font-family:Jost,'Jost Fallback',sans-serif; font-weight:300; }
.wtn-req-link { background:none; border:0; padding:0; font:inherit; font-weight:500; color:#111; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.wtn-req-link:focus-visible { outline:2px solid #111; outline-offset:2px; }
.hidden-section { display:none !important; }

/* ── IMAGE FADE IN — prevents pop/flash when images load ── */
.cell-img, .gallery-item img, .home-slide, .flow-img, #lb-img {
  animation: img-fadein 0.3s ease forwards;
}
@keyframes img-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

  /* Coming Soon frame */
  .coming-soon-frame {
    width:100%; aspect-ratio:16/9; background:#fff;
    border:1px solid #e8e8e8; border-radius:4px;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px;
  }
  .coming-soon-frame .cs-title {
    font-family:Jost,'Jost Fallback',sans-serif; font-size:10px; font-weight:500;
    letter-spacing:0.15em; text-transform:uppercase; color:#767676;
  }
  .coming-soon-frame .cs-line {
    width:30px; height:1px; background:#e8e8e8;
  }
  .empty-frame {
    width:100%; aspect-ratio:16/9; background:#fff;
    border:1px solid #f0f0f0; border-radius:4px;
  }

  /* ── LIGHTBOX & GALLERY CLICKS — always enabled ── */
#lb-img, .flow-img, .gallery-item img, .frame img, #bim-svg image {
  pointer-events: auto !important;
  cursor: pointer !important;
}
   ============================================================ */

/* ── Tablet (max 1024px) ── */
@media (max-width: 1024px) {
  .main-content { padding:24px 30px; }
  .grid-wrap { grid-template-columns:1fr 1fr; grid-template-rows:auto; height:auto; gap:12px; }
  .cell { min-height:180px; }
  .cell:first-child { grid-column:1 / -1; }
  #vis-grid, #con-cat-grid, #con-grid { grid-template-columns:repeat(2,1fr) !important; }
  .iso-scene { overflow:hidden !important; width:100% !important; height:calc(100vh - 200px); min-height:500px; display:flex; align-items:center; justify-content:center; }
  .iso-svg { width:110%; height:auto; min-width:unset; display:block; margin-left:-5%; }
}


/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
  .wtn-req-box { padding:26px 20px; }
  .wtn-req-row { display:block; }
  /* ── merged from earlier mobile blocks ── */
  body, html { height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; position: static !important; }
  header { position: sticky !important; top: 0 !important; }
  footer { position: static !important; }
  .main-content {
    position: static !important;
    top: auto !important; bottom: auto !important;
    left: auto !important; right: auto !important;
    height: auto !important;
    padding: 15px !important;
    overflow-y: visible !important;
    display: none;
  }
  #projects-page { padding:15px !important; height:auto !important; overflow:visible !important; }
  .iso-scene { position:relative !important; width:100% !important; height:0 !important; padding-bottom:56% !important; min-height:unset !important; overflow:hidden !important; display:block !important; }
  .iso-svg { position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; }


  /* iOS Safari fix — keep body/html fixed but use -webkit-fill-available */
  body, html {
    height: -webkit-fill-available !important;
    height: 100dvh !important;
  }

  /* SMOOTH SCROLL */
  * { -webkit-tap-highlight-color: transparent; }
  .main-content { -webkit-overflow-scrolling: touch !important; scroll-behavior: smooth !important; }
  body { -webkit-overflow-scrolling: touch !important; }

  /* NAV */
  .nav-container { width:calc(100% - 30px); padding:0; }
  .logo-name { font-size:9px; white-space:nowrap; letter-spacing:0.05em; }
  .logo-wrap { gap:5px; }
  nav ul { gap:8px; }
  nav ul li a { font-size:8.5px; letter-spacing:0.8px; }

  /* FOOTER */
  footer .nav-container { width:calc(100% - 30px) !important; padding:0 !important; border-top:1px solid #000 !important; }

  /* ── STANDARD MOBILE LAYOUT ── */
  header { position:fixed !important; top:0 !important; left:0 !important; right:0 !important; z-index:3000 !important; }
  footer { position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; z-index:3000 !important; }
  body   { padding-top:80px !important; padding-bottom:80px !important; overflow-y:auto !important; overscroll-behavior-y:contain !important; }
  .main-content { position:static !important; top:auto !important; bottom:auto !important; left:auto !important; right:auto !important; height:auto !important; overflow-y:visible !important; padding:15px !important; box-sizing:border-box !important; }

  /* ALL PAGES */
  .main-content {
    padding:15px !important;
    box-sizing:border-box !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  /* HOME PAGE */
  #home-page {
    padding:15px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    height:calc(100dvh - 160px) !important;
  }
  #home-page.active { display:flex !important; flex-direction:column !important; }
  #home-page #hero-slider { width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; border-radius:4px !important; overflow:hidden !important; flex:1 !important; position:relative !important; }
  #home-page .home-slide { width:100% !important; height:100% !important; object-fit:cover !important; position:absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important; margin:0 !important; border-radius:4px !important; }

  /* PROJECTS PAGE — No gap fix */
  #projects-page {
    padding:15px !important;
    height:calc(100dvh - 160px) !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    position:fixed !important;
    top:80px !important;
    left:0 !important;
    right:0 !important;
    bottom:80px !important;
  }
  .grid-wrap {
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
    gap:15px !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  .cell {
    width:100% !important;
    flex:1 1 0 !important;
    min-height:0 !important;
    border-radius:4px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .cell-viz        { flex:2.2 1 0 !important; }
  .cell-conceptual { flex:1.8 1 0 !important; }
  .cell-bim {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:15px !important;
    background:#fff !important;
    width:100% !important;
    flex:1.2 1 0 !important;
    min-height:0 !important;
  }
  .sub-cell {
    min-height:0 !important;
    height:100% !important;
    border-radius:4px !important;
    overflow:hidden !important;
  }
  .cell-label { font-size:13px !important; }
  .cell-sub   { font-size:10px !important; }

  /* BIM PAGE — using padding-bottom trick below */

  /* VIS/CONCEPTUAL GRID */
  #vis-grid, #con-cat-grid, #con-grid {
    grid-template-columns:repeat(2,1fr) !important;
    gap:15px !important; width:100% !important; box-sizing:border-box !important;
  }
  .gallery-item { width:100% !important; box-sizing:border-box !important; }
  .gallery-item img { width:100% !important; height:150px !important; object-fit:cover; display:block; }
  .item-title { font-size:9px !important; letter-spacing:0.06em !important; }

  /* SUB PAGE */
  #sub-page { padding:15px !important; }
  #sub-title { font-size:20px !important; }
  #sub-desc { font-size:11px !important; }
  .flow-img { width:100% !important; max-height:260px; object-fit:cover; }
  #sub-grid { grid-template-columns:repeat(2,1fr) !important; gap:15px !important; }


  /* ABOUT */
  #about-page p { text-align:justify !important; }
  .brand-name, .brand-title, .brand-link { text-align:center !important; }
  .page-wrapper { padding:0; }
  .brand-panels { grid-template-columns:1fr !important; gap:20px !important; }

  /* CONTACT */
  #contactForm div[style*='grid-template-columns:1fr 1fr'] { display:block !important; }
  #contactForm div[style*='grid-template-columns:1fr 1fr'] input { width:100% !important; margin-bottom:12px; box-sizing:border-box; }
  #contactForm div[style*='grid-template-columns:1fr 2fr'] { display:block !important; }
  #contactForm div[style*='grid-template-columns:1fr 2fr'] input { width:100% !important; margin-bottom:12px; box-sizing:border-box; }

  /* CONCEPTUAL PILES */
  .piles-area { flex-direction:column !important; align-items:center !important; gap:30px !important; }
  .pile { transform:none !important; }

  /* DETAIL DRAWINGS */
  .slideshow-wrap { height:260px !important; }
  .info-section { flex-direction:column !important; gap:16px !important; }

  /* INDICATORS */
  #vis-page-indicator, #con-cat-indicator { padding:10px 0 !important; }

  /* LIGHTBOX MOBILE FIXES */
  /* BIM THUMBS — 2 columns, no overflow */
  #sub-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; width:100% !important; box-sizing:border-box !important; overflow:hidden !important; }
  .gallery-item { width:100% !important; box-sizing:border-box !important; overflow:hidden !important; }
  .coming-soon-frame, .empty-frame { height:120px !important; width:100% !important; box-sizing:border-box !important; }
  /* BIM SVG — aspect ratio container trick */
  #bim-page { padding:15px !important; overflow:hidden !important; height:auto !important; }
  .iso-scene {
    position:relative !important;
    width:100% !important;
    height:0 !important;
    padding-bottom:56% !important;
    min-height:unset !important;
    max-height:unset !important;
    overflow:hidden !important;
    display:block !important;
    align-items:unset !important;
    justify-content:unset !important;
  }
  .iso-svg {
    position:absolute !important;
    top:0 !important; left:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    display:block !important;
  }

  .cell .cell-img,
  .sub-cell .cell-img { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; }
}
  /* LIGHTBOX MOBILE */
  #lb-top    { padding:6px 44px 6px 16px !important; min-height:unset !important; }
  #lb-desc { position:absolute; bottom:52px; left:0; right:0; padding:8px 40px; text-align:center; z-index:10002; font-family:Jost,'Jost Fallback',sans-serif; font-size:11px; font-weight:300; color:#6b6b6b; line-height:1.6; background:#fff; }
#lb-bottom { display:block !important; position:static !important; border-top:none !important; padding:6px 0 !important; background:transparent !important; text-align:center !important; }
  /* LIGHTBOX MOBILE */
  #lightbox  { flex-direction:column !important; justify-content:center !important; align-items:center !important; }
  #lb-top    { width:100% !important; padding:10px 44px 10px 16px !important; flex-shrink:0 !important; }
  #lb-img    { max-width:96% !important; max-height:60dvh !important; margin:8px auto !important; display:block !important; }
  #lb-desc { position:absolute; bottom:52px; left:0; right:0; padding:8px 40px; text-align:center; z-index:10002; font-family:Jost,'Jost Fallback',sans-serif; font-size:11px; font-weight:300; color:#6b6b6b; line-height:1.6; background:#fff; }
#lb-bottom { display:block !important; width:100% !important; padding:8px 0 !important; border-top:none !important; background:transparent !important; text-align:center !important; flex-shrink:0 !important; position:static !important; }

/* ── Small Mobile (max 480px) ── */
@media (max-width: 480px) {
  .nav-container { width:calc(100% - 24px); padding:0; }
  .main-content { padding:12px !important; }
  #home-page { padding:12px !important; }
  footer .nav-container { width:calc(100% - 24px) !important; border-top:1px solid #000 !important; }
  nav ul li a { font-size:7.5px; letter-spacing:0.5px; }
  .logo-name { font-size:8px; }
  #vis-grid, #con-cat-grid, #con-grid { grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
  .grid-wrap { gap:12px !important; }
  .cell-bim { gap:12px !important; }
  .gallery-item img { height:120px !important; }
  #sub-title { font-size:17px !important; }
  .cell { min-height:160px !important; }
  .sub-cell { min-height:160px !important; }
  .slideshow-wrap { height:220px !important; }
  .pile { transform:scale(0.75); }
}

/* ---- Portable: section titles are <h1> (were <div>). :where() has zero specificity and every one of
   these titles has its own inline style, so they look exactly as before. ---- */
:where(h1){margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit}
/* ---- Portable: visually hidden <h1> for pages whose visible title is not a heading ---- */
.wtn-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}