@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--bg:#f4f3f0;--white:#fff;--ink:#232323;--muted:#7b8388;--line:#d9d9d4;--dark:#4c4c4c;--deep:#111;--soft:#e9eeef;--warm:#d9d4ca;--bronze:#8b6b4a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans Thai','Inter',sans-serif;line-height:1.65}a{color:inherit}.nav{height:88px;background:#f7f7f5;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 9%;position:sticky;top:0;z-index:50}.brand{text-decoration:none;font:700 24px/1 'Inter',sans-serif;letter-spacing:.12em}.brand small{display:block;font:400 13px/1.4 'Inter',sans-serif;color:var(--muted);letter-spacing:0;margin-top:10px}.menu{display:flex;align-items:center;gap:32px}.menu a{text-decoration:none;color:#8b949b;font-weight:600}.menu a:hover{color:#111}.btn{display:inline-block;border:1px solid #333;padding:12px 26px;text-decoration:none;font-weight:600;background:transparent}.btn.dark{background:#111;color:#fff;border-color:#111}.nav .btn.dark{padding:16px 28px;color:#fff}.hero{display:grid;grid-template-columns:53% 47%;min-height:720px}.hero-copy{background:#4d4d4d;color:#fff;padding:70px 9vw 80px}.eyebrow{font-size:14px;color:#71806f;margin-bottom:22px;letter-spacing:.02em}.eyebrow:before{content:'';display:inline-block;width:42px;height:1px;background:#98a28f;margin-right:14px;vertical-align:middle}.hero h1{font-size:64px;line-height:1.17;margin:0 0 38px;max-width:760px}.lead{font-size:19px;color:#f2f2f2;max-width:730px}.hero-media{position:relative;background:#e7eef2;overflow:hidden}.house{position:absolute;right:8%;bottom:70px;width:70%;height:56%;background:#f6f2ee;box-shadow:0 28px 42px rgba(0,0,0,.14)}.house:before{content:'';position:absolute;left:10%;bottom:0;width:90px;height:46%;background:repeating-linear-gradient(90deg,#7a654c 0 10px,#9a7049 10px 20px)}.house:after{content:'';position:absolute;left:46%;bottom:0;width:70px;height:54%;background:#30241f}.hero-media:before{content:'';position:absolute;right:0;top:170px;width:80%;height:70px;background:#8b6b4a;transform:skewY(-5deg)}.product-feature{display:grid;grid-template-columns:54% 46%;min-height:650px}.product-left{background:#4d4d4d;color:#fff;padding:72px 9vw}.product-left h2{font-size:30px;line-height:1.45;margin:0 0 42px}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid #ddd;box-shadow:0 18px 30px rgba(0,0,0,.08)}.product-card{min-height:380px;padding:42px 36px 34px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;color:#454545;border-right:1px solid #ddd;background:#fff}.product-card:last-child{border-right:0}.product-card h3{font-size:21px;font-weight:400}.more{background:#aaa;color:white;text-align:center;padding:10px 12px}.product-img{height:90px;margin-bottom:26px}.door-img{width:54px;background:#9a7049;margin-left:12px}.window-img{width:76px;border:7px solid #222}.fence-img{width:100px;background:repeating-linear-gradient(90deg,#333 0 7px,transparent 7px 16px);border-bottom:7px solid #333}.product-photo{position:relative;background:#f5f5f5}.door-scene{position:absolute;inset:12% 10%;background:#eee;box-shadow:0 25px 45px rgba(0,0,0,.12)}.door-scene:after{content:'';position:absolute;right:12%;bottom:0;width:105px;height:70%;background:#2b2928}.section{padding:96px 9%}.container{max-width:1280px;margin:auto}.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.image-frame{height:470px;background:#fff;box-shadow:0 1px 0 var(--line);position:relative}.building:after{display:none}h1,h2,h3{letter-spacing:-.03em}h2{font-size:42px;line-height:1.25;margin:0 0 24px}.number-list{border-top:1px solid var(--line);margin-top:42px}.num-row{display:grid;grid-template-columns:80px 1fr;gap:28px;border-bottom:1px solid var(--line);padding:24px 0}.num{font-size:44px;color:#a4a8a8}.muted{color:var(--muted)}.award-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}.award-card{padding:34px;border-right:1px solid var(--line);background:#fff}.award-card:nth-child(3n){border-right:0}.award-year{font-size:13px;color:#6c7969;text-transform:uppercase;letter-spacing:.12em}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.project-card{background:#fff;text-decoration:none;border:1px solid var(--line);padding:0 0 24px}.project-card h3,.project-card p{padding:0 24px}.project-thumb{height:230px;background:#ddd;position:relative}.tower{background:repeating-linear-gradient(90deg,#eef 0 48px,#9cc 48px 58px)}.mall{background:#d8d3c9}.hotel{background:#d9e0d2}.footer{background:#333;color:#fff;display:flex;justify-content:space-between;padding:42px 9%;color:#ddd}.page-hero{padding:80px 9%;background:#4d4d4d;color:#fff}.page-hero h1{font-size:56px;line-height:1.15;margin:0;max-width:900px}.page-hero p{max-width:760px;color:#eee;font-size:18px}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.cat-card,.detail-card{background:#fff;border:1px solid var(--line);padding:34px;text-decoration:none}.placeholder{height:240px;background:#f0efec;border:1px solid var(--line);margin-bottom:24px;position:relative}.placeholder.door:after{content:'';position:absolute;left:42%;bottom:25px;width:70px;height:150px;background:#7c5b3e}.placeholder.window:after{content:'';position:absolute;left:30%;top:55px;width:140px;height:120px;border:8px solid #222}.placeholder.fence:after{content:'';position:absolute;left:22%;top:70px;width:190px;height:100px;background:repeating-linear-gradient(90deg,#333 0 8px,transparent 8px 18px);border-bottom:8px solid #333}.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}.product-render{height:520px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}.product-render .door-shape{width:170px;height:350px;background:repeating-linear-gradient(90deg,#5d432d 0 28px,#7d5b3e 28px 56px);box-shadow:0 20px 40px rgba(0,0,0,.15)}.swatches{display:flex;gap:14px;margin:20px 0}.sw{width:42px;height:42px;border-radius:50%;background:#6b625e}.sw:nth-child(2){background:#8b6339}.sw:nth-child(3){background:#c99762}.sw:nth-child(4){background:#96613e}.spec-table{width:100%;border-collapse:collapse;margin-top:24px;background:#fff}.spec-table td{border:1px solid var(--line);padding:14px}.tabs{display:flex;gap:0;margin-top:35px}.tabs a{background:#eee;padding:14px 24px;text-decoration:none;border-right:1px solid #fff}.tabs a.active{background:#333;color:white}.filter-bar{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0}.filter-bar a{text-decoration:none;border:1px solid var(--line);padding:9px 18px;background:#fff}.project-list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.project-item{background:#fff;border:1px solid var(--line);padding:20px;text-decoration:none;min-height:180px}.project-item .tag{font-size:11px;color:#71806f;text-transform:uppercase;letter-spacing:.12em}@media(max-width:900px){.nav{height:auto;align-items:flex-start;gap:18px;padding:20px}.menu{flex-wrap:wrap;gap:14px}.hero,.product-feature,.split,.product-detail{grid-template-columns:1fr}.hero h1{font-size:42px}.card-grid,.award-grid,.project-grid,.project-list{grid-template-columns:1fr}.product-grid{grid-template-columns:1fr}.product-card{border-right:0;border-bottom:1px solid #ddd}.section{padding:60px 24px}.page-hero{padding:60px 24px}}
.contact-list p{border-bottom:1px solid var(--line);padding:16px 0;margin:0}.contact-panel{background:#f4f3f0;border:1px solid var(--line);padding:42px}.contact-panel ul{margin:20px 0 0;padding-left:22px;color:var(--muted)}.contact-panel li{margin-bottom:12px}

/* ═══════════════════════════════════════════════════
   MOBILE-FIRST RESPONSIVE UPGRADE
   Targets: 768px (tablet) and 480px (phone)
═══════════════════════════════════════════════════ */

/* ── HAM BURGER NAV ─────────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #232323;
  transition: all 0.25s ease;
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ── TABLET (≤ 900px) — already handled above but reinforce ── */
@media (max-width: 900px) {
  /* Nav */
  .nav { padding: 0 5%; height: auto; flex-wrap: wrap; }
  .brand { padding: 18px 0; }
  .nav-toggle { display: flex; padding: 18px 0; }
  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0;
    border-top: 1px solid #d9d9d4;
    padding: 12px 0 16px;
  }
  .menu.open { display: flex; }
  .menu a {
    padding: 12px 0;
    font-size: 14px;
    border-bottom: 1px solid #d9d9d4;
    color: #232323;
    width: 100%;
  }
  .menu a:last-child { border-bottom: none; }
  .menu .btn, .menu .btn.dark, .nav .btn.dark {
    margin: 8px 0 0;
    padding: 12px 20px;
    display: inline-block;
    width: auto;
    align-self: flex-start;
  }

  /* Typography */
  h1 { font-size: 36px !important; }
  h2 { font-size: 26px !important; }
  h3 { font-size: 18px !important; }

  /* Hero */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { padding: 56px 6%; }
  .hero-media { min-height: 280px; }
  .hero h1 { font-size: 36px !important; margin-bottom: 20px; }
  .lead { font-size: 15px; }

  /* Product feature */
  .product-feature { grid-template-columns: 1fr; min-height: auto; }
  .product-left { padding: 52px 6%; }
  .product-left h2 { font-size: 24px !important; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: auto; padding: 28px 24px; border-right: none; border-bottom: 1px solid #d9d9d4; }
  .product-photo { min-height: 240px; }

  /* Grids */
  .award-grid { grid-template-columns: 1fr; }
  .award-card { border-right: none; border-bottom: 1px solid #d9d9d4; }
  .award-card:last-child { border-bottom: none; }
  .project-grid { grid-template-columns: 1fr 1fr; gap: 1px; }
  .project-list { grid-template-columns: 1fr 1fr; }
  .card-grid { grid-template-columns: 1fr; gap: 1px; }
  .cat-card, .detail-card { padding: 24px; }

  /* Split layout */
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split .image-frame { height: 260px; }

  /* Section padding */
  .section { padding: 56px 6%; }
  .container { max-width: 100%; }
  .page-hero { padding: 52px 6%; }
  .page-hero h1 { font-size: 32px !important; }
  .page-hero p { font-size: 14px; }

  /* Footer */
  .footer { flex-direction: column; gap: 20px; padding: 36px 6%; text-align: center; }

  /* Number list */
  .num-row { grid-template-columns: 52px 1fr; gap: 16px; }
  .num { font-size: 32px; }

  /* Contact */
  .contact-panel { padding: 28px 22px; }
}

/* ── PHONE (≤ 480px) ─────────────────────────────── */
@media (max-width: 480px) {
  /* Nav */
  .nav { padding: 0 4%; }
  .brand { font-size: 14px; }
  .brand small { font-size: 9px; }

  /* Typography */
  h1 { font-size: 28px !important; line-height: 1.2 !important; }
  h2 { font-size: 22px !important; }

  /* Hero */
  .hero-copy { padding: 44px 4%; }
  .lead { font-size: 14px; }

  /* Buttons */
  .btn { padding: 11px 20px; font-size: 12px; letter-spacing: 0.08em; }

  /* Grids → all single column */
  .project-grid { grid-template-columns: 1fr; }
  .project-list { grid-template-columns: 1fr; }
  .award-grid { grid-template-columns: 1fr; }

  /* Section */
  .section { padding: 44px 4%; }
  .page-hero { padding: 44px 4%; }
  .page-hero h1 { font-size: 26px !important; }

  /* Num row */
  .num-row { grid-template-columns: 40px 1fr; gap: 12px; }
  .num { font-size: 26px; }
  .num-row p { font-size: 14px; }

  /* Product detail */
  .product-detail { grid-template-columns: 1fr; }
  .product-render { height: 280px; }

  /* Filter bar */
  .filter-bar { gap: 6px; }
  .filter-bar a { padding: 7px 12px; font-size: 11px; }

  /* Footer */
  .footer { padding: 28px 4%; }
}

/* ── PAGE-SPECIFIC MOBILE: classic.html / modern.html ─ */
@media (max-width: 900px) {
  /* Product hero split */
  .prod-hero { grid-template-columns: 1fr; min-height: auto; }
  .prod-stage { min-height: 320px; }
  .prod-info { padding: 44px 6%; }
  .prod-title { font-size: 32px !important; }

  /* USP strips */
  .usp-strip { grid-template-columns: 1fr; }
  .usp-c { padding: 24px 20px; }

  /* Gallery */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-section { padding: 52px 5%; }
  .gallery-thumb { height: 160px; }

  /* Proof bar */
  .proof-bar { grid-template-columns: repeat(2, 1fr); gap: 1px; background: #333; }
  .proof-i { padding: 20px 10px; border-right: none; border-bottom: 1px solid #444; }
  .proof-n { font-size: 28px; }

  /* Refs */
  .refs-grid { grid-template-columns: 1fr; }
  .refs-section { padding: 44px 5%; }

  /* CTA dark */
  .cta-dark { grid-template-columns: 1fr; padding: 44px 5%; gap: 24px; }
  .cta-btns { flex-direction: row; flex-wrap: wrap; }

  /* Tabs */
  .tabs-section { padding: 52px 5%; }
  .d-tabs { overflow-x: auto; white-space: nowrap; }
  .spec-row { grid-template-columns: 120px 1fr; font-size: 13px; }
  .spec-k { font-size: 10px; }
  .feat-row { grid-template-columns: 52px 1fr; gap: 12px; }
  .feat-n { font-size: 28px; }

  /* Style row wraps nicely */
  .style-row { gap: 6px; }
  .style-btn { padding: 8px 12px; font-size: 11px; }

  /* Swatch rows */
  .swatch-row { gap: 8px; }
  .sw { width: 30px; height: 30px; }

  /* Door page: hero */
  .door-hero { grid-template-columns: 1fr; min-height: auto; }
  .door-hero-copy { padding: 52px 5% 44px; }
  .door-hero-media { min-height: 280px; }
  .door-hero-copy h1 { font-size: 36px !important; }
}

@media (max-width: 480px) {
  /* Gallery → 1 column */
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-thumb { height: 140px; }
  .g-door { width: 52px; height: 110px; }

  /* Proof bar → 2x2 */
  .proof-bar { grid-template-columns: 1fr 1fr; }

  /* Acc grid → 1 col */
  .acc-grid { grid-template-columns: 1fr; max-width: 100%; }

  /* Style row scroll */
  .style-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }

  /* Swatch */
  .sw { width: 28px; height: 28px; }

  .prod-info { padding: 36px 4%; }
  .prod-title { font-size: 26px !important; }
  .prod-sub { font-size: 11px; letter-spacing: 0.14em; }
}

/* ═══════════════════════════════════════════════════
   PROJECT CAROUSEL
   Replace .image-frame.building with .proj-carousel
═══════════════════════════════════════════════════ */

.proj-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #e8e5df;
  overflow: hidden;
  user-select: none;
}

/* ── Slides track ── */
.carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.42s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}

/* ── Individual slide ── */
.carousel-slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Placeholder background — each slot a slightly different shade */
.carousel-slide:nth-child(1) { background: #ddd9d2; }
.carousel-slide:nth-child(2) { background: #d4d0c9; }
.carousel-slide:nth-child(3) { background: #ccc8c0; }

/* Placeholder label */
.carousel-slide::before {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.2);
  font-weight: 400;
}

/* When a real image is added — <img> inside slide */
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

/* ── Arrow buttons ── */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.92);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, opacity 0.2s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  padding: 0;
}
.carousel-arrow:hover { background: #fff; }
.carousel-arrow.disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.carousel-arrow.prev { left: 14px; }
.carousel-arrow.next { right: 14px; }
.carousel-arrow svg {
  width: 18px;
  height: 18px;
  stroke: #232323;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Dot indicators ── */
.carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 10;
}
.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  border: none;
  padding: 0;
}
.carousel-dot.on {
  background: #fff;
  transform: scale(1.3);
}

/* ── Slide counter badge ── */
.carousel-counter {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  z-index: 10;
}

/* ── "Add photo" instruction label (visible only when no img inside) ── */
.carousel-add-label {
  position: absolute;
  bottom: 36px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.18);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  z-index: 2;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .proj-carousel { aspect-ratio: 3/2; }
  .carousel-arrow { width: 36px; height: 36px; }
  .carousel-arrow svg { width: 14px; height: 14px; }
}
@media (max-width: 480px) {
  .proj-carousel { aspect-ratio: 4/3; }
  .carousel-arrow.prev { left: 8px; }
  .carousel-arrow.next { right: 8px; }
}

.proj-carousel.has-images .carousel-add-label{display:none;}

/* ═══════════════════════════════════════════════════
   PROJECT CARD — HOVER THUMBNAIL
═══════════════════════════════════════════════════ */

/* Make project-item relative so thumbnail can overlay */
.project-item {
  position: relative;
  overflow: hidden;
}

/* Thumbnail — hidden by default, slides up on hover */
.project-thumb-hover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 0;
}

/* Dark overlay on top of thumbnail so text stays readable */
.project-thumb-hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 24, 0.52);
}

/* On hover — show thumbnail */
.project-item:hover .project-thumb-hover {
  opacity: 1;
  transform: scale(1);
}

/* Keep text above the thumbnail */
.project-item .tag,
.project-item h3,
.project-item p {
  position: relative;
  z-index: 1;
}

/* Change text color on hover so it's readable over the image */
.project-item:hover .tag    { color: rgba(212, 166, 64, 0.9); }
.project-item:hover h3      { color: #ffffff; }
.project-item:hover p.muted { color: rgba(255, 255, 255, 0.6); }

/* ── PROJECT-CARD (index.html selected projects) hover thumb ── */
.project-thumb {
  position: relative;
  overflow: hidden;
}

.project-card:hover .project-thumb-hover {
  opacity: 1;
  transform: scale(1);
}

.project-card h3,
.project-card p {
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}

.project-card:hover h3      { color: #232323; }
.project-card:hover p.muted { color: #8b6b3a; }

/* ═══════════════════════════════════════════════════
   HERO — FULL BLEED IMAGE
═══════════════════════════════════════════════════ */

/* Override old split-grid hero */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Remove old grid */
  grid-template-columns: unset !important;
}

/* Background image layer */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('images/hero-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Dark gradient overlay — heavier bottom-left for text legibility */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.05) 100%
  );
  z-index: 1;
}

/* Text block — bottom-left */
.hero .hero-copy {
  position: relative;
  z-index: 2;
  padding: 0 7% 72px;
  max-width: 640px;
  background: none;
  color: #fff;
  /* Remove old flex column settings that conflict */
  display: block;
}

.hero .hero-copy .eyebrow {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}
.hero .hero-copy .eyebrow::before {
  background: rgba(255, 255, 255, 0.5);
}

.hero .hero-copy h1 {
  color: #ffffff;
  font-size: clamp(32px, 4.5vw, 62px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
}

.hero .hero-copy .lead {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  line-height: 1.85;
  margin-bottom: 32px;
  max-width: 480px;
}

.hero .hero-copy .btn {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  background: transparent;
}
.hero .hero-copy .btn:hover {
  background: #fff;
  color: #232323;
  border-color: #fff;
}
.hero .hero-copy .btn.dark {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.hero .hero-copy .btn.dark:hover {
  background: #fff;
  color: #232323;
}

/* Hide the old .hero-media and .house — no longer needed */
.hero-media, .house { display: none !important; }

/* ── Mobile ── */
@media (max-width: 900px) {
  .hero { height: 80vh; min-height: 500px; align-items: flex-end; }
  .hero .hero-copy { padding: 0 5% 52px; max-width: 100%; }
  .hero .hero-copy h1 { font-size: 28px; }
}
@media (max-width: 480px) {
  .hero { height: 75vh; min-height: 440px; }
  .hero .hero-copy { padding: 0 4% 40px; }
  .hero .hero-copy h1 { font-size: 24px; }
  .hero .hero-copy .lead { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════
   ABOUT SECTION — full-height image split
═══════════════════════════════════════════════════ */
#about.section {
  padding: 0;
}
#about .container {
  padding: 0;
  max-width: 100%;
}
#about .split {
  grid-template-columns: 48% 52%;
  gap: 0;
  align-items: stretch;
}
#about .split > *:first-child {
  min-height: 600px;
}
#about .split > *:last-child {
  padding: 80px 7% 80px 6%;
}
#about .image-frame.building {
  height: 100%;
  min-height: 600px;
}

/* ── Remove building placeholder stripes when real image is present ── */
#about .image-frame.building::before,
.split .image-frame.building::before {
  display: none !important;
  content: none !important;
}

/* ── Kill ALL building placeholder pseudo-elements when image present ── */
#about .image-frame.building::before,
#about .image-frame.building::after,
.split .image-frame.building::before,
.split .image-frame.building::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* ═══════════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════════ */
.lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: lb-fade 0.2s ease;
}
.lb-overlay.open { display: flex; }
@keyframes lb-fade { from { opacity:0; } to { opacity:1; } }

.lb-img-wrap {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.lb-img-wrap img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  display: block;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  animation: lb-zoom 0.25s ease;
  cursor: default;
}
@keyframes lb-zoom { from { transform:scale(0.92); opacity:0; } to { transform:scale(1); opacity:1; } }

.lb-close {
  position: fixed;
  top: 20px; right: 24px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  z-index: 10000;
  border-radius: 0;
  font-family: sans-serif;
}
.lb-close:hover { background: rgba(255,255,255,0.22); }

.lb-prev, .lb-next {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  z-index: 10000;
  border-radius: 0;
}
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,0.22); }
.lb-prev.hidden, .lb-next.hidden { display: none; }

.lb-counter {
  position: fixed;
  bottom: 20px; left: 0; right: 0;
  text-align: center;
  font-size: 12px; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  z-index: 10000;
}

/* Make all lightbox-eligible images show zoom cursor */
.lb-trigger { cursor: zoom-in !important; }


/* ═══════════════════════════════════════════════════
   MOBILE FIXES — ABOUT SECTION
═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Stack about section to single column */
  #about .split,
  .section .split,
  .split {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Image frame — show as banner on top, reasonable height */
  #about .image-frame.building,
  .split .image-frame.building {
    height: 280px !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  /* Text side — full width with proper padding */
  #about .split > *:last-child,
  .split > *:last-child {
    padding: 36px 5% !important;
    width: 100% !important;
  }

  /* Product feature stacks */
  .product-feature {
    grid-template-columns: 1fr !important;
  }
  .product-photo {
    height: 280px !important;
    min-height: 0 !important;
  }
}

@media (max-width: 480px) {
  #about .image-frame.building,
  .split .image-frame.building {
    height: 220px !important;
  }
  .product-photo {
    height: 220px !important;
  }
}