:root{
  --ink:#231f20;
  --brown:#403a36;
  --cream:#f8f5ed;
  --white:#fff;
  --orange:#ef8f2f;
  --orange-2:#d97724;
  --muted:#a9a19a;
  --header-h:72px;
  --shadow:0 18px 50px rgba(0,0,0,.18);
}

/* Modern back-to-top chevron; the existing Liquid Glass surface remains on desktop and mobile. */
.smk-back-to-top svg{
  position:relative;
  z-index:2;
  display:block;
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.35;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.5));
}
@media(max-width:780px){.smk-back-to-top svg{width:22px;height:22px}}

/* Desktop Liquid Glass: low blur and a lighter tint keep content visibly passing through. */
@media(min-width:781px){
  .smk-back-to-top{
    background:
      radial-gradient(circle at 28% 18%,rgba(255,255,255,.30),transparent 38%),
      linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.035) 62%,rgba(160,205,218,.04))!important;
    -webkit-backdrop-filter:blur(.25px) saturate(124%) contrast(102%)!important;
    backdrop-filter:blur(.25px) saturate(124%) contrast(102%)!important;
    border-color:rgba(255,255,255,.56)!important;
    box-shadow:0 9px 24px rgba(28,25,23,.16),inset 0 1px 0 rgba(255,255,255,.62)!important;
  }
  .smk-back-to-top::before{
    content:""!important;
    position:absolute!important;
    z-index:0!important;
    inset:0!important;
    border-radius:50%!important;
    background:radial-gradient(circle,rgba(225,247,251,.075),rgba(255,255,255,.018) 55%,transparent 79%)!important;
    -webkit-backdrop-filter:blur(4.2px) saturate(148%) contrast(104%)!important;
    backdrop-filter:blur(4.2px) saturate(148%) contrast(104%)!important;
    -webkit-mask:radial-gradient(circle,rgba(0,0,0,1) 0 24%,rgba(0,0,0,.92) 34%,rgba(0,0,0,.72) 44%,rgba(0,0,0,.46) 55%,rgba(0,0,0,.22) 65%,rgba(0,0,0,.07) 74%,transparent 84%)!important;
    mask:radial-gradient(circle,rgba(0,0,0,1) 0 24%,rgba(0,0,0,.92) 34%,rgba(0,0,0,.72) 44%,rgba(0,0,0,.46) 55%,rgba(0,0,0,.22) 65%,rgba(0,0,0,.07) 74%,transparent 84%)!important;
    opacity:.9!important;
    pointer-events:none!important;
  }
  .smk-back-to-top::after{
    content:""!important;
    position:absolute!important;
    z-index:1!important;
    inset:7%!important;
    border-radius:50%!important;
    background:radial-gradient(circle,rgba(255,255,255,.045),transparent 66%)!important;
    -webkit-backdrop-filter:blur(1.15px) saturate(138%)!important;
    backdrop-filter:blur(1.15px) saturate(138%)!important;
    -webkit-mask:radial-gradient(circle,transparent 0 37%,rgba(0,0,0,.12) 46%,rgba(0,0,0,.42) 58%,rgba(0,0,0,.18) 70%,transparent 84%)!important;
    mask:radial-gradient(circle,transparent 0 37%,rgba(0,0,0,.12) 46%,rgba(0,0,0,.42) 58%,rgba(0,0,0,.18) 70%,transparent 84%)!important;
    pointer-events:none!important;
  }
  body.smk-floating-controls-idle .smk-back-to-top{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(12px) scale(.94)!important;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{margin:0;font-family:Tahoma,"Noto Sans Thai",Arial,sans-serif;color:var(--ink);background:var(--cream);overflow-x:hidden}
body.menu-open,body.modal-open{overflow:hidden}
a{color:inherit}
button,input,textarea{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
.wrap{width:min(1180px,calc(100% - 56px));margin-inline:auto}
section{position:relative;scroll-margin-top:var(--header-h)}
.section-dark{background:var(--ink);color:#fff}
.section-light{background:var(--cream)}

.site-header{position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 42px;color:#fff;transition:.3s ease;background:linear-gradient(to bottom,rgba(0,0,0,.42),transparent)}
.site-header.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:260px}
.brand-mark{border:1px solid currentColor;padding:2px 7px;font-family:Georgia,serif;font-size:18px;line-height:1}
.brand-name{font-size:14px;white-space:nowrap}
.main-nav{display:flex;align-items:center;gap:8px}
.main-nav a,.section-nav a{position:relative;text-decoration:none;padding:10px 16px;border-radius:999px;transition:.25s ease;white-space:nowrap}
.main-nav a:hover,.main-nav a.active,.section-nav a.active{background:linear-gradient(#d6b18a,#aa764a);color:#fff;box-shadow:0 6px 15px rgba(0,0,0,.2)}
.menu-toggle{display:none;border:0;background:none;width:44px;height:44px;padding:10px}
.menu-toggle span{display:block;height:2px;background:currentColor;margin:6px 0;transition:.25s}

.hero{--hero-parallax-y:0px;min-height:100svh;background:none;isolation:isolate;overflow:hidden;padding:calc(var(--header-h) + 30px) 0 46px}
.hero::before{content:"";position:absolute;z-index:-2;inset:-5%;background:url('assets/images/hero.webp') center/cover no-repeat;transform:translate3d(0,var(--hero-parallax-y),0) scale(1.04);transform-origin:center;will-change:transform}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,.08) 42%,rgba(0,0,0,.38));z-index:-1}
.hero-topline{display:none}
.hero-grid{min-height:calc(100svh - var(--header-h) - 76px);display:grid;grid-template-columns:minmax(330px,440px) 1fr;gap:8vw;align-items:center}
.hero-card{background:#fff;color:var(--ink);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.tags{display:flex;gap:10px;margin-bottom:28px}.tags span{border:1px solid #6d5d54;border-radius:999px;padding:5px 14px;font-size:12px}.tags .tag-dark{background:var(--brown);color:#fff;border-color:var(--brown)}
.hero-card-body{display:grid;grid-template-columns:1fr 128px;gap:20px;align-items:center}
.hero-card h2{font-size:34px;line-height:1.15;margin:0 0 14px}.hero-card p{margin:0;color:#8a817b}
.door-wrap{position:relative}.door-wrap img{width:128px;height:160px;object-fit:cover}.play-button{position:absolute;left:-18px;bottom:8px;width:50px;height:50px;border-radius:50%;border:0;background:var(--orange);color:#fff;font-size:20px;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.hero-copy{align-self:center}.hero-section-nav{display:flex;justify-content:flex-end;gap:4px;margin-bottom:52px;font-size:14px}.hero-copy h1{margin:0;font-size:clamp(58px,6vw,104px);line-height:.84;letter-spacing:-.055em;text-shadow:0 4px 10px rgba(0,0,0,.25)}.hero-copy h1 span{display:block}.hero-copy h1 .serif{font-family:Georgia,serif;font-weight:400;letter-spacing:-.07em}.hero-sub{font-size:19px;margin:28px 0 30px}.hero-actions{display:flex;width:min(520px,100%)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;text-decoration:none;padding:18px 28px;min-height:60px;border:0}.btn-light{background:#eee;color:var(--ink);flex:1}.btn-orange{background:var(--orange);color:#fff;flex:1}.btn-dark{background:var(--ink);color:#fff}.btn:hover{filter:brightness(.96)}

.about{position:relative;padding:72px 0 0;overflow:hidden;background:#fff}.about:before{content:"";position:absolute;z-index:0;inset:0 0 auto;height:205px;background:linear-gradient(180deg,rgba(255,255,255,.18) 0,rgba(255,255,255,.74) 52%,#fff 100%);pointer-events:none}.about>.wrap{position:relative;z-index:1}.mobile-section-nav{display:none}.about-wrap{width:min(100% - 64px,1320px)}.about-copy{max-width:1140px;margin:auto;text-align:center;display:grid;grid-template-columns:1fr 1.35fr;align-items:center;column-gap:76px}.old-name{font-size:26px;font-weight:500;margin:0}.about-copy h2{font-size:31px;font-weight:700;color:var(--orange);margin:0}.about-copy>p:last-child{grid-column:1/-1;font-size:18px;line-height:1.5;margin:18px auto 172px;max-width:1040px}.ornament{grid-column:1/-1;position:relative;height:24px;margin:22px auto 0;display:flex;align-items:center;justify-content:space-around;width:min(1040px,88%);border-radius:999px;background:#f4d0aa}.ornament:before,.ornament:after{display:none}.ornament b{display:none}.ornament i{display:block;width:23px;height:23px;border-radius:50%;background:linear-gradient(145deg,#ffc374,#e98724 68%);box-shadow:0 3px 7px rgba(113,67,28,.24)}
.experience{background:#ec9338;min-height:400px;border-radius:48px 48px 0 0;position:relative;overflow:visible;margin-right:2%;color:#fff}.experience-copy{position:relative;z-index:2;min-height:400px;padding:0 52px}.experience-copy small{position:absolute;left:52px;top:142px;display:block;font-size:27px}.experience-copy strong{position:absolute;z-index:3;left:25%;top:-125px;display:block;font-size:clamp(170px,21vw,305px);line-height:.9;font-weight:800;letter-spacing:-.085em;color:#211e1f;white-space:nowrap}.experience-copy strong span{font-size:.72em;margin-left:14px}.experience-copy p{position:absolute;left:0;top:198px;width:72%;margin:0;text-align:center;font-size:26px;line-height:1.75}.experience img{position:absolute;z-index:4;right:-4%;bottom:-1px;width:56%;height:auto;max-height:440px;object-fit:contain;object-position:right bottom}
@media (min-width:781px){.experience-copy small{top:150px}.experience-copy p{top:220px;line-height:3}}

.services{padding:72px 0 0}.section-title{position:relative;padding-top:26px;margin-bottom:56px}.section-title .line{position:absolute;left:0;top:18px;width:230px;height:1px;background:currentColor}.section-title:after{content:"";position:absolute;left:29px;top:0;width:1px;height:84px;background:currentColor}.cross-dot{position:absolute;left:23px;top:12px;width:13px;height:13px;border-radius:50%;background:currentColor}.section-title h2{font-size:52px;margin:0 0 0 42px;letter-spacing:-.04em}.service-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding-bottom:72px}.service-card{text-align:center;padding:30px 42px 20px;min-height:420px;position:relative}.service-card+ .service-card{border-left:2px solid rgba(255,255,255,.88)}.service-card img{height:150px;width:190px;object-fit:contain;margin:0 auto 24px}.service-card h3{font-size:40px;letter-spacing:-.04em;margin:0 0 20px}.service-card p{font-size:17px;line-height:1.65;color:#f0ecea}.service-mobile-nav{display:none}.service-showcases{width:100%;border-top:1px solid rgba(255,255,255,.12)}.service-stage{position:relative;min-height:min(56.25vw,760px);display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;border-bottom:1px solid rgba(255,255,255,.14)}.service-stage-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:50px 36px;overflow:hidden}.service-stage-card img.service-stage-icon{width:150px;height:140px;object-fit:contain;margin-bottom:20px}.service-stage-card h3{font-size:40px;margin:0 0 16px;letter-spacing:-.045em}.service-stage-card p{font-size:17px;line-height:1.55;margin:0;color:#f2eeee}.service-stage-card.featured{justify-content:flex-end;align-items:flex-start;text-align:left;background-position:center;background-size:cover}.service-stage-card.featured:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,22,23,.06),rgba(25,22,23,.72))}.service-stage-card.featured>*{position:relative;z-index:1}.service-stage-card.featured img.service-stage-icon{filter:none;align-self:center;margin:auto auto 22px}.service-stage-card.featured h3{font-size:42px}.service-stage-card.consultation{background-image:url("assets/images/services/consultation.webp")}.service-stage-card.design{background-image:url("assets/images/services/design.webp")}.service-stage-card.installation{background-image:url("assets/images/services/installation.webp")}

.products{padding:76px 0 100px;background:var(--brown);color:#fff}.product-nav{display:flex;justify-content:center;gap:6px;margin:-12px 0 34px}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product-card{position:relative;border:0;border-radius:18px;background:#faf8f1;color:var(--ink);padding:60px 24px 28px;min-height:265px;text-align:center;box-shadow:0 12px 28px rgba(0,0,0,.14);transition:.25s}.product-card:hover{transform:translateY(-7px);box-shadow:0 20px 36px rgba(0,0,0,.22)}.product-card .number{position:absolute;top:22px;right:24px;font-size:16px}.product-icon{display:grid;place-items:center;height:82px;font-size:64px;font-family:Georgia,serif;font-weight:400;color:#3d3733}.product-card h3{font-size:25px;margin:10px 0 8px}.product-card p{margin:0;color:#6e6660;line-height:1.5;font-size:14px}

.projects{padding:100px 0}.project-heading{display:grid;grid-template-columns:1fr 2fr auto;align-items:end;gap:30px;margin-bottom:44px}.project-heading>p{color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:.16em}.project-heading h2{font-size:48px;line-height:1.13;margin:0}.text-button{border:0;background:none;color:var(--orange);font-weight:700;padding:12px 0}.masonry{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:280px;gap:16px}.work{border:0;padding:0;overflow:hidden;background:#ddd}.work.tall{grid-row:span 2}.work img{width:100%;height:100%;object-fit:cover;transition:.45s}.work:hover img{transform:scale(1.045)}

.customers{padding:84px 0 100px}.customer-intro{max-width:700px;font-size:20px;line-height:1.7;margin:0 0 42px 42px;color:#d6d0cc}.customer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.customer-card{position:relative;border:1px solid rgba(255,255,255,.18);padding:34px 34px 34px 78px;min-height:190px;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015))}.customer-card span{position:absolute;left:24px;top:30px;color:var(--orange);font-size:18px}.customer-card h3{font-size:28px;margin:0 0 14px}.customer-card p{margin:0;color:#c9c2be;line-height:1.65}

.contact{padding:105px 0}.contact-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px}.eyebrow{color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:.14em}.contact-lead h2{font-size:52px;line-height:1.1;margin:12px 0 24px}.contact-lead>p:not(.eyebrow){font-size:18px;line-height:1.75;color:#625b57}.contact-actions{display:flex;gap:12px;margin-top:32px}.address-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.address-card{padding:34px;background:#fff;box-shadow:0 15px 45px rgba(0,0,0,.08);display:flex;flex-direction:column}.address-card.orange{background:var(--orange);color:#fff}.address-card small{text-transform:uppercase;letter-spacing:.12em}.address-card h3{font-size:25px;margin:20px 0}.address-card p{line-height:1.75;flex:1}.address-card a{font-weight:700;text-decoration:none;margin-top:20px}
.site-footer{padding:38px 0;background:#171516;color:#fff}.site-footer .wrap{display:flex;justify-content:space-between;align-items:center}.site-footer p{margin:6px 0 0;color:#aaa}.footer-links{display:flex;gap:24px}.footer-links a{text-decoration:none;color:#ddd}

.modal{position:fixed;inset:0;z-index:2000;background:rgba(12,10,10,.94);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.25s;color:#fff}.modal.open{opacity:1;visibility:visible}.modal figure{margin:0;width:min(1100px,84vw);height:min(82vh,780px);display:flex;flex-direction:column;align-items:center;justify-content:center}.modal figure img{max-width:100%;max-height:calc(100% - 44px);object-fit:contain}.modal figcaption{padding-top:14px;color:#ddd}.modal-close{position:absolute;right:24px;top:18px;width:52px;height:52px;border:0;background:transparent;color:#fff;font-size:46px;line-height:1}.modal-arrow{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.12);color:#fff;width:54px;height:70px;font-size:48px}.modal-arrow.prev{left:16px}.modal-arrow.next{right:16px}.intro-panel{width:min(980px,90vw);background:#fff;color:var(--ink);display:grid;grid-template-columns:1.2fr .8fr;box-shadow:var(--shadow)}.intro-panel img{width:100%;height:100%;object-fit:cover}.intro-panel>div{padding:48px}.intro-panel h2{font-size:38px;margin:12px 0}.intro-panel p{line-height:1.7}.intro-panel .btn{margin-top:18px}

.reveal{opacity:0;transform:translate3d(0,42px,0);transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.3s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}.reveal.visible{opacity:1;transform:translate3d(0,0,0)}.reveal-sitewide{will-change:opacity,transform}
.reveal .smk-project-label,.reveal .capa-project-label-mobile{opacity:0;transform:translate3d(0,22px,0);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.15s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--reveal-delay,0ms) + 180ms)}
.reveal.visible .smk-project-label,.reveal.visible .capa-project-label-mobile{opacity:1;transform:translate3d(0,0,0)}

/* Project tiles rise individually, matching the image-by-image motion above
   the video while preserving every saved Canva crop and grid coordinate. */
.smk-real-screen .smk-project-tile.reveal{opacity:0;transform:translate3d(0,42px,0)!important;transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.3s cubic-bezier(.16,1,.3,1)!important;transition-delay:var(--reveal-delay,0ms)!important}
.smk-real-screen .smk-project-tile.reveal.visible{opacity:1;transform:translate3d(0,0,0)!important}
.smk-project-page .smk-project-page-dot{opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1)}
.smk-project-page.project-visible .smk-project-page-dot{opacity:1}

@media (max-width:1050px){
  .site-header{padding-inline:24px}.brand{min-width:auto}.brand-name{display:none}.main-nav a{padding:9px 11px;font-size:14px}
  .hero-grid{grid-template-columns:360px 1fr;gap:5vw}.hero-copy h1{font-size:70px}.hero-card h2{font-size:28px}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .contact-wrap{grid-template-columns:1fr}.contact-lead{max-width:760px}.address-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:780px){
  :root{--header-h:62px}
  .wrap{width:min(100% - 32px,620px)}
  .site-header{height:var(--header-h);background:#fff;color:#304154;padding:0 18px;border-bottom:1px solid #e7e7e7}.site-header.scrolled{background:#fff}.brand{visibility:hidden;width:1px;overflow:hidden}.menu-toggle{display:block;margin-left:auto}.main-nav{position:fixed;inset:var(--header-h) 0 0;background:rgba(255,255,255,.98);display:flex;flex-direction:column;align-items:stretch;padding:32px 24px;gap:6px;transform:translateX(100%);transition:.3s;box-shadow:-20px 0 45px rgba(0,0,0,.12)}.main-nav.open{transform:none}.main-nav a{font-size:22px;padding:16px 20px;color:var(--ink)}.main-nav a.active{background:linear-gradient(#e8c49c,#ae794e);color:#fff}.menu-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}.menu-toggle.active span:nth-child(2){opacity:0}.menu-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  .hero{padding:var(--header-h) 0 0;min-height:900px;background-position:center;background-size:cover}.hero-shade{background:linear-gradient(to bottom,rgba(0,0,0,.06),rgba(0,0,0,.18))}.hero-topline{display:block;position:absolute;top:calc(var(--header-h) + 18px);left:22px;z-index:2}.hero-logo{width:190px}.hero-grid{display:flex;flex-direction:column;align-items:stretch;min-height:auto;padding-top:105px;gap:18px}.hero-card{width:calc(100% - 30px);margin:auto;border-radius:20px;padding:20px}.hero-card-body{grid-template-columns:1fr 112px}.hero-card h2{font-size:25px}.door-wrap img{height:138px;width:112px}.play-button{width:42px;height:42px;font-size:17px;left:-17px}.hero-copy{display:flex;flex-direction:column;text-align:center;align-items:center;width:100%}.hero-section-nav{order:0;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px;margin:0 0 18px;font-size:18px}.hero-section-nav a{padding:10px 13px}.hero-copy h1{order:1;font-size:52px;line-height:.9;width:100%;text-align:left;margin-top:4px;padding-left:8px}.hero-copy h1 .serif{font-size:.98em}.hero-sub{order:2;font-size:15px;margin:20px 0 24px}.hero-actions{order:3;width:100%;padding:0 8px 28px}.hero-actions .btn{padding:16px 10px;min-height:58px}

  .about{padding:26px 0 0;background:#fff}.about:before{height:240px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.68) 52%,#fff 100%)}.about-wrap{width:min(100% - 24px,620px)}.mobile-section-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;font-size:18px;margin-bottom:22px}.dark-text{color:var(--ink)}.about-copy{display:block;padding:0 6px}.old-name{font-size:20px;margin-bottom:10px}.about-copy h2{font-size:23px;line-height:1.35}.about-copy>p:last-child{font-size:15px;line-height:1.65;margin:16px auto 76px}.ornament{height:14px;margin:14px auto 0;width:92%}.ornament i{width:14px;height:14px}.experience{border-radius:22px 22px 0 0;min-height:340px;margin-right:0;overflow:visible}.experience-copy{min-height:340px;padding:0 18px;overflow:visible}.experience-copy small{left:22px;top:95px;bottom:auto;font-size:20px;font-weight:500}.experience-copy strong{left:62%;top:-75px;transform:translateX(-50%);font-size:clamp(170px,44vw,195px)}.experience-copy strong span{margin-left:6px}.experience-copy p{left:4%;top:123px;bottom:auto;width:64%;font-size:13px;line-height:1.65}.experience img{right:-28%;bottom:-2px;width:94%;max-height:260px}

  .services{padding:34px 0 0}.section-title{margin-bottom:24px}.section-title h2{font-size:44px}.service-list{display:flex;flex-direction:column;padding-bottom:24px}.service-card{min-height:auto;padding:52px 10px 60px}.service-card+ .service-card{border-left:0}.service-card:not(:last-child):after{content:"";position:absolute;right:8%;top:35px;height:calc(100% - 70px);width:3px;background:#fff}.service-card:nth-of-type(3):after{right:auto;left:8%}.service-card img{height:140px;width:170px;margin-bottom:20px}.service-card h3{font-size:42px}.service-card p{font-size:16px}.service-mobile-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;font-size:18px;margin:-18px 0 6px}.service-mobile-nav a{padding:10px 14px;color:#b9b2ae}.service-mobile-nav a.active{color:#fff}.service-stage{min-height:0;display:flex;flex-direction:column}.service-stage-card{min-height:340px;padding:46px 24px}.service-stage-card.featured{min-height:520px;background-position:center}.service-stage-card img.service-stage-icon{width:130px;height:120px}.service-stage-card h3,.service-stage-card.featured h3{font-size:38px}.service-stage-card p{font-size:16px}.service-stage:nth-child(2) .service-stage-card:nth-child(2){order:-1}.service-stage:nth-child(3) .service-stage-card:nth-child(3){order:-1}

  .products{padding:38px 0 60px}.product-nav{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 18px;font-size:18px}.product-nav a{padding:10px 12px}.product-grid{grid-template-columns:1fr;gap:16px;width:min(100%,360px);margin:auto}.product-card{min-height:240px;padding-top:54px}.product-card .number{top:22px}.product-icon{font-size:58px}.product-card h3{font-size:24px}

  .projects{padding:60px 0}.project-heading{grid-template-columns:1fr;gap:12px}.project-heading h2{font-size:36px}.masonry{grid-template-columns:1fr 1fr;grid-auto-rows:210px}.work.tall{grid-row:span 2}
  .customers{padding:45px 0 62px}.customer-intro{margin:0 0 28px;font-size:17px}.customer-grid{grid-template-columns:1fr}.customer-card{padding:28px 26px 28px 66px}.customer-card h3{font-size:24px}
  .contact{padding:62px 0}.contact-lead h2{font-size:38px}.contact-actions{flex-direction:column}.contact-actions .btn{width:100%}.address-grid{grid-template-columns:1fr}.address-card{padding:28px}.site-footer .wrap{flex-direction:column;gap:24px;text-align:center}.footer-links{flex-wrap:wrap;justify-content:center}
  .modal figure{width:92vw;height:78vh}.modal-arrow{width:42px;height:58px}.modal-arrow.prev{left:2px}.modal-arrow.next{right:2px}.intro-panel{grid-template-columns:1fr;max-height:88vh;overflow:auto}.intro-panel img{height:240px}.intro-panel>div{padding:28px}.intro-panel h2{font-size:30px}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero::before{transform:scale(1.04);will-change:auto}.reveal,.reveal .smk-project-label,.reveal .capa-project-label-mobile,.smk-real-screen .smk-project-tile.reveal{opacity:1;transform:none!important;transition:none!important}.smk-project-page .smk-project-page-dot{opacity:1;transition:none}.work img,.product-card{transition:none}}

/* 2026 site-wide polish: high-contrast mobile brand and unified contact icons */
.brand-logo-real{width:74px!important;height:56px!important;filter:none!important}.brand-name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.smk-social-icon{border:0!important;border-radius:16px!important;background:#373c42!important;box-shadow:0 8px 20px rgba(30,28,27,.16);transition:transform .25s ease,background .25s ease}
.smk-social-icon svg{display:block;width:31px;height:31px;fill:#fff;overflow:visible}.smk-social-icon .icon-cut{fill:none;stroke:#373c42;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.smk-social-icon .icon-facebook{stroke:#fff;stroke-width:6}
.smk-social-row:hover .smk-social-icon,.smk-social-row:focus-visible .smk-social-icon{transform:translateY(-2px);background:#f28c28!important}.smk-social-row:hover .icon-cut:not(.icon-facebook),.smk-social-row:focus-visible .icon-cut:not(.icon-facebook){stroke:#f28c28}

/* SMK bilingual, trust and conversion additions */
.language-switch{display:flex;align-items:center;gap:7px;margin-left:auto;margin-right:18px;font-size:13px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.7)}
.language-switch a{color:inherit;text-decoration:none;padding:7px 2px;transition:color .2s ease}.language-switch a.active,.language-switch a:hover{color:#f28c28}.site-header.scrolled .language-switch{color:#6d6863}
.language-switch-desktop{display:none}
@media(min-width:781px){.language-switch-mobile{display:none!important}.main-nav .language-switch-desktop{display:flex;margin:0 0 0 10px;padding-left:16px;border-left:1px solid currentColor;color:inherit}.main-nav .language-switch-desktop a{padding:9px 2px;background:transparent!important;box-shadow:none!important;color:inherit}.main-nav .language-switch-desktop a.active,.main-nav .language-switch-desktop a[aria-current="page"],.main-nav .language-switch-desktop a:hover{background:transparent!important;box-shadow:none!important;color:#f28c28!important}.main-nav .language-switch-desktop span{opacity:.55}}
.smk-strengths-section{padding:clamp(70px,8vw,130px) 0;background:#f3f0eb;color:#24211f}.smk-strengths-heading p,.smk-quote-wrap>div>p{margin:0 0 10px;color:#df762e;font-size:12px;font-weight:700;letter-spacing:.18em}.smk-strengths-heading h2{margin:0;font-size:clamp(28px,4vw,58px);font-weight:500;letter-spacing:-.035em}.smk-strengths-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(32px,5vw,64px);border-top:1px solid #cec6bd;border-bottom:1px solid #cec6bd}.smk-strength-card{position:relative;min-height:270px;padding:36px 30px 34px;border-right:1px solid #cec6bd}.smk-strength-card:last-child{border-right:0}.smk-strength-card>span{position:absolute;right:24px;top:24px;color:#bcb3aa;font:500 28px/1 Arial,sans-serif}.smk-strength-icon{display:flex;align-items:center;justify-content:center;width:62px;height:62px;margin-bottom:44px;border:1px solid #df762e;border-radius:50%;color:#df762e;font:700 18px/1 Arial,sans-serif}.smk-strength-card h3{margin:0 0 12px;font-size:clamp(19px,1.6vw,27px);font-weight:600}.smk-strength-card p{margin:0;color:#67605a;line-height:1.8}
.smk-quote-section{padding:clamp(54px,7vw,96px) 0;background:#25211f;color:#fff}.smk-quote-wrap{display:flex;align-items:center;justify-content:space-between;gap:42px}.smk-quote-wrap h2{max-width:760px;margin:0 0 12px;font-size:clamp(27px,3.8vw,54px);font-weight:500;line-height:1.25;letter-spacing:-.03em}.smk-quote-wrap>div>span{color:#cfc7c0}.smk-quote-button{display:flex;align-items:center;justify-content:space-between;gap:26px;min-width:250px;padding:18px 22px;border-radius:999px;background:#ef8f2f;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 12px 30px rgba(239,143,47,.2);transition:transform .25s ease,background .25s ease}.smk-quote-button:hover{transform:translateY(-2px);background:#ff9c3d}.smk-quote-button b{font-size:23px}
.smk-mobile-contact-bar{display:none}
.smk-back-to-top{position:fixed;z-index:2147482400;right:22px;bottom:24px;width:58px;height:58px;border:1px solid rgba(255,255,255,.72);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(232,226,219,.5));color:#322c28;box-shadow:0 10px 28px rgba(35,29,25,.22),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(18px) saturate(175%);-webkit-backdrop-filter:blur(18px) saturate(175%);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px) scale(.92);transition:opacity .28s ease,transform .28s ease,visibility .28s ease;cursor:pointer}.smk-back-to-top::before{content:"";position:absolute;inset:4px;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.42),transparent 48%);pointer-events:none}.smk-back-to-top span{position:relative;font-size:22px;line-height:.75}.smk-back-to-top strong{position:relative;font-size:9px;line-height:1;letter-spacing:.08em}.smk-back-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}.smk-back-to-top:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(35,29,25,.28),inset 0 1px 0 #fff}.modal-open .smk-back-to-top,.menu-open .smk-back-to-top{opacity:0;pointer-events:none}
@media(max-width:780px){.language-switch{margin-left:auto;margin-right:9px;font-size:12px}.site-header:not(.scrolled) .language-switch{color:#5c5752}.smk-strengths-section{padding:64px 0}.smk-strengths-grid{grid-template-columns:1fr}.smk-strength-card{min-height:0;padding:28px 22px;border-right:0;border-bottom:1px solid #cec6bd}.smk-strength-card:last-child{border-bottom:0}.smk-strength-icon{margin-bottom:27px}.smk-quote-wrap{align-items:flex-start;flex-direction:column;gap:26px}.smk-quote-button{width:100%;min-width:0}.smk-mobile-contact-bar{position:fixed;z-index:2147482500;left:auto;right:11px;bottom:max(11px,env(safe-area-inset-bottom));width:auto;display:flex;gap:7px;padding:0;background:transparent;transition:opacity .25s ease,transform .25s ease}.smk-mobile-contact-bar a{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:43px;min-height:43px;color:#282522;text-decoration:none;line-height:1;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(255,255,255,.08));box-shadow:0 8px 22px rgba(20,18,17,.2),inset 1px 1px 0 rgba(255,255,255,.92),inset -1px -1px 0 rgba(255,255,255,.2);backdrop-filter:blur(15px) saturate(190%) contrast(108%);-webkit-backdrop-filter:blur(15px) saturate(190%) contrast(108%);overflow:hidden}.smk-mobile-contact-bar a::before{content:"";position:absolute;z-index:-1;inset:2px;border-radius:inherit;background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.62),transparent 34%),linear-gradient(155deg,rgba(255,255,255,.16),transparent 58%);pointer-events:none}.smk-mobile-contact-bar a::after{content:"";position:absolute;z-index:-1;left:12%;right:12%;top:4%;height:34%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,0));filter:blur(.3px);pointer-events:none}.smk-mobile-contact-bar a:active{transform:scale(.94)}.smk-mobile-contact-bar svg{position:relative;display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(255,255,255,.8))}.smk-mobile-line{color:#12a64a!important}.smk-mobile-phone{color:#e46f1d!important}.smk-mobile-line svg path:first-child{fill:currentColor;stroke:none}.smk-mobile-line svg path:last-child{stroke:#fff;stroke-width:1.15}.smk-mobile-contact-bar a strong{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.smk-back-to-top{right:12px;bottom:max(66px,calc(env(safe-area-inset-bottom) + 66px));width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(255,255,255,.08));border-color:rgba(255,255,255,.72);backdrop-filter:blur(15px) saturate(190%) contrast(108%);-webkit-backdrop-filter:blur(15px) saturate(190%) contrast(108%)}.smk-back-to-top span{font-size:19px}.smk-back-to-top strong{font-size:8px}.modal-open .smk-mobile-contact-bar,.menu-open .smk-mobile-contact-bar{opacity:0;pointer-events:none;transform:translateY(18px)}body{padding-bottom:61px}}
@media(max-width:780px){.site-header .brand{visibility:visible!important;width:auto!important;overflow:visible!important;display:flex!important}.site-header{padding:0 14px!important}.brand-logo-real{width:68px!important;height:54px!important}.hero-topline{display:none!important}.menu-toggle{flex:0 0 auto}.main-nav .language-switch-desktop{display:none!important}.reveal{transform:translate3d(0,30px,0)}}


/* ===== Canva typography match — v2 ===== */
:root{
  --font-canva-sans:"Noto Sans Thai","Noto Sans",Arial,sans-serif;
  --font-canva-serif:"Noto Serif","Times New Roman",serif;
}
html,body,button,input,textarea,select{font-family:var(--font-canva-sans)}
body{font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.main-nav,.section-nav,.btn,.tags,.brand-name{font-family:var(--font-canva-sans);font-weight:400}
.hero-card h2{font-family:var(--font-canva-sans);font-weight:500;letter-spacing:-.035em;line-height:1.28}
.hero-card p,.hero-sub{font-weight:300}
.hero-copy h1{font-family:var(--font-canva-sans);font-weight:700;letter-spacing:-.065em}
.hero-copy h1 .serif{font-family:var(--font-canva-serif);font-weight:700;letter-spacing:-.065em}
.about-copy h2,.experience-copy strong,.section-title h2,.service-card h3,.project-heading h2,.contact-lead h2{font-family:var(--font-canva-sans);font-weight:700}
.about-copy>p:last-child,.service-card p,.customer-card p,.contact-lead>p:not(.eyebrow),.address-card p{font-weight:400}
.product-card,.product-card h3,.product-card p{font-family:var(--font-canva-sans)}
.product-card h3{font-weight:700;letter-spacing:-.025em}
.product-card .number{font-weight:400}
.customer-card h3,.address-card h3{font-family:var(--font-canva-sans);font-weight:700}

@media (max-width:780px){
  .hero-card h2{font-weight:500;line-height:1.25}
  .hero-copy h1{font-weight:700;line-height:.92;letter-spacing:-.07em}
  .hero-copy h1 .serif{font-weight:700;letter-spacing:-.07em}
  .hero-section-nav,.mobile-section-nav,.service-mobile-nav,.product-nav{font-weight:400}
  .service-card h3{font-weight:700;letter-spacing:-.055em}
  .service-card p{font-weight:400;line-height:1.55}
  .about-copy h2{font-weight:700}
}

/* ===== Customers + CAPA full-bleed Canva sections — selective update from v2 ===== */
.canva-screen,
.canva-video-screen{
  width:100%;
  margin:0;
  padding:0;
  background:#fff;
  overflow:hidden;
  scroll-margin-top:0;
}
.canva-screen-media{
  position:relative;
  width:100%;
  margin:0;
  line-height:0;
}
.canva-screen-media>img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  margin:0;
}
.canva-nav-hotspots{
  position:absolute;
  z-index:3;
  top:0;
  right:1.5%;
  width:57.5%;
  height:10.5%;
  display:grid;
  grid-template-columns:repeat(6,1fr);
}
.canva-nav-hotspots a{
  display:block;
  min-width:0;
  border-radius:999px;
  outline-offset:-4px;
}
.canva-nav-hotspots a:focus-visible{
  outline:3px solid rgba(239,143,47,.9);
}
.canva-video-screen{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
}
.capa-video-frame{
  display:block;
  width:100%;
  height:100%;
  margin:0;
  border:0;
  background:#000;
}
.site-header{
  will-change:transform,opacity;
}
@media (min-width:781px){
  .site-header.immersive-hidden{
    transform:translateY(-105%);
    opacity:0;
    pointer-events:none;
  }
}

/* Desktop About composition: tighter typography and a clearer split between copy and house image. */
@media (min-width:781px){
  .about{padding-top:64px}

  .about-copy{
    max-width:1200px;
    grid-template-columns:.9fr 1.45fr;
    column-gap:clamp(36px,5vw,78px);
    align-items:end;
  }

  .old-name{
    font-size:clamp(24px,1.8vw,29px);
    line-height:1.25;
  }

  .about-copy h2{
    font-size:clamp(28px,2.25vw,36px);
    line-height:1.2;
    letter-spacing:-.02em;
  }

  .ornament{
    width:min(1120px,94%);
    height:18px;
    margin-top:20px;
  }

  .ornament i{width:18px;height:18px}

  .about-copy>p:last-child{
    max-width:1120px;
    font-size:clamp(18px,1.35vw,22px);
    line-height:1.65;
    margin:24px auto clamp(155px,11vw,178px);
    text-wrap:balance;
  }

  html[lang="th"] .experience-copy small{
    left:clamp(58px,4.6vw,94px);
    top:clamp(142px,7.5vw,158px);
    font-size:clamp(28px,2vw,33px);
    line-height:1.25;
    font-weight:500;
  }

  html[lang="th"] .experience-copy p{
    left:0;
    top:clamp(208px,11.5vw,235px);
    width:58%;
    font-size:clamp(23px,1.75vw,28px);
    line-height:2.15;
  }
}
@media (max-width:780px){
  .canva-nav-hotspots{display:none}
  .canva-screen{scroll-margin-top:var(--header-h)}
  .canva-video-screen{
    aspect-ratio:9/16;
    scroll-margin-top:var(--header-h);
  }
}

/* ===== CAPA project intro rebuilt as real HTML/CSS from Canva SVG ===== */
.capa-project-section{
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#fff;
  scroll-margin-top:0;
}
.capa-project-collage{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  display:grid;
  grid-template-columns:35.12% 34.83% 30.05%;
  grid-template-rows:57.05% 42.95%;
  overflow:hidden;
  background:#ece9e3;
  isolation:isolate;
}
.capa-project-media{
  position:relative;
  display:block;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:#d7d2ca;
  cursor:zoom-in;
  line-height:0;
  appearance:none;
  -webkit-appearance:none;
}
.capa-project-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(0,0,0,.12);
  opacity:0;
  transition:opacity .24s ease;
  pointer-events:none;
}
.capa-project-media img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  transform:scale(1.002);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),filter .3s ease;
}
.capa-project-skyroof{grid-column:1;grid-row:1 / span 2}
.capa-project-house{grid-column:2;grid-row:1}
.capa-project-interior{grid-column:3;grid-row:1}
.capa-project-building{grid-column:2 / span 2;grid-row:2}
.capa-project-skyroof img{object-position:50% 50%}
.capa-project-house img{object-position:88% 52%}
.capa-project-interior img{object-position:0% 50%}
.capa-project-building img{object-position:50% 51%}
.capa-view-hint{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:2;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:50%;
  color:#fff;
  background:rgba(23,21,20,.42);
  box-shadow:0 5px 20px rgba(0,0,0,.18);
  font:300 27px/1 var(--font-canva-sans);
  opacity:0;
  transform:translateY(5px);
  transition:opacity .24s ease,transform .24s ease;
  pointer-events:none;
}
.capa-project-media:hover::after,
.capa-project-media:focus-visible::after{opacity:1}
.capa-project-media:hover img,
.capa-project-media:focus-visible img{transform:scale(1.025)}
.capa-project-media:hover .capa-view-hint,
.capa-project-media:focus-visible .capa-view-hint{opacity:1;transform:none}
.capa-project-media:focus-visible{outline:4px solid #f28c28;outline-offset:-4px;z-index:4}
.capa-collage-dot{
  position:absolute;
  z-index:4;
  left:35.12%;
  top:57.05%;
  width:1.55%;
  aspect-ratio:1;
  min-width:12px;
  border-radius:50%;
  background:#fff;
  transform:translate(-50%,-50%);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  pointer-events:none;
}
.capa-project-label{
  position:absolute;
  z-index:5;
  left:2.72%;
  bottom:4.18%;
  width:31.72%;
  min-height:10.25%;
  display:flex;
  align-items:center;
  padding:1.25% 2.3%;
  background:linear-gradient(90deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.94) 52%,
    rgba(255,255,255,.62) 77%,
    rgba(255,255,255,0) 100%);
  color:#111;
  pointer-events:none;
}
.capa-project-label h2{
  margin:0;
  font-family:var(--font-canva-sans);
  font-size:clamp(17px,2.05vw,43px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.035em;
  white-space:nowrap;
}
@media (max-width:780px){
  .capa-project-section{scroll-margin-top:var(--header-h)}
  .capa-view-hint{display:none}
  .capa-project-label h2{font-size:clamp(11px,2.85vw,20px)}
  .capa-project-label{padding-inline:2%}
  .capa-collage-dot{min-width:7px}
}
@media (hover:none){
  .capa-project-media::after,.capa-view-hint{display:none}
}


/* v2 projects 8/9 server-safe enhancement; critical layout is also in index.html */
.smk-project-tile img{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.smk-project-tile:hover img,.smk-project-tile:focus-visible img{transform:scale(1.025)}
.smk-project-page-onsite.onsite-layout-3 .smk-project-tile:first-child{grid-row:1 / span 2}
.smk-project-page-onsite.onsite-layout-2 .smk-project-tile{grid-row:1 / span 2}
.smk-project-page-onsite.onsite-layout-5{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(1),
.smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(2){grid-column:1 / span 3}
.smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(3){grid-column:4 / span 3}
.smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(4){grid-column:4}
.smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(5){grid-column:5 / span 2}
.smk-project-page-onsite.onsite-layout-3 .smk-project-tile:nth-child(1) img{object-position:50% 0!important}
.smk-project-page-onsite.onsite-layout-3 .smk-project-tile:nth-child(2) img{object-position:50% 46%!important}
.smk-project-page-onsite.onsite-layout-3 .smk-project-tile:nth-child(3) img{object-position:50% 52%!important}
.smk-project-page-onsite.onsite-layout-2 .smk-project-tile:nth-child(1) img{object-position:50% 48%!important}
.smk-project-page-onsite.onsite-layout-2 .smk-project-tile:nth-child(2) img{object-position:50% 50%!important}
.smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(1) img{object-position:50% 52%!important}
.smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(2) img{object-position:50% 48%!important}
.smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(3) img{object-position:50% 50%!important}
.smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(4) img{object-position:48% 50%!important}
.smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(5) img{object-position:52% 50%!important}
.smk-project-page-onsite .smk-project-label{
  left:5%!important;
  bottom:5%!important;
  width:min(46%,560px)!important;
  max-width:none!important;
  min-height:15%!important;
  padding:1.4vw 8vw 1.4vw 2.8vw!important;
  background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 48%,rgba(255,255,255,.5) 76%,rgba(255,255,255,0) 100%)!important;
}
@media(max-width:780px){
  .smk-project-page.smk-project-page-onsite{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;height:112vw!important;min-height:440px!important;max-height:760px!important;overflow:hidden!important}
  .smk-project-page-onsite .smk-project-tile{position:relative!important;width:auto!important;height:auto!important;min-height:0!important}
  .smk-project-page-onsite.onsite-layout-3 .smk-project-tile:first-child{grid-column:1!important;grid-row:1 / span 2!important}
  .smk-project-page-onsite.onsite-layout-2 .smk-project-tile{grid-row:1 / span 2!important}
  .smk-project-page.smk-project-page-onsite.onsite-layout-5{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(1),
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(2){grid-column:1 / span 3!important}
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(3){grid-column:4 / span 3!important}
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(4){grid-column:4!important}
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(5){grid-column:5 / span 2!important}
  .smk-project-page-onsite .smk-project-label{width:min(82%,360px)!important;min-height:auto!important;padding:14px 72px 14px 18px!important}
}

/* Unified project labels: one line with the Canva-style fade to transparent. */
.smk-real-screen .smk-project-label,
.smk-real-screen .smk-hotel-title{
  left:5%!important;
  right:auto!important;
  bottom:5%!important;
  width:min(88%,1120px)!important;
  max-width:88%!important;
  min-height:15%!important;
  padding:1.35vw 13vw 1.35vw 2.8vw!important;
  background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 50%,rgba(255,255,255,.62) 76%,rgba(255,255,255,0) 100%)!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  font-size:clamp(14px,1.85vw,34px)!important;
  line-height:1.15!important;
}

/* ===== Project gallery: matched to the original Canva compositions ===== */
@media (min-width:781px){
  /* Keep every desktop project spread at the original 16:9 canvas ratio. */
  .smk-real-screen .smk-project-page{
    height:56.25vw!important;
    min-height:0!important;
    transform:none!important;
  }
  .smk-real-screen .smk-project-tile{
    transform:none!important;
  }
  .smk-real-screen .smk-project-tile>img{
    object-fit:cover!important;
    transform:none!important;
  }

  /* On-site page 1: one portrait at left, two landscapes at right. */
  .smk-project-page-onsite.onsite-layout-3{
    grid-template-columns:50% 50%!important;
    grid-template-rows:50% 50%!important;
  }
  .smk-project-page-onsite.onsite-layout-3 .smk-project-tile:nth-child(1){grid-column:1!important;grid-row:1 / span 2!important}
  .smk-project-page-onsite.onsite-layout-3 .smk-project-tile:nth-child(2){grid-column:2!important;grid-row:1!important}
  .smk-project-page-onsite.onsite-layout-3 .smk-project-tile:nth-child(3){grid-column:2!important;grid-row:2!important}
  .smk-project-page-onsite.onsite-layout-3 .smk-project-tile:nth-child(1)>img{object-position:50% 50%!important}
  .smk-project-page-onsite.onsite-layout-3 .smk-project-tile:nth-child(2)>img{object-position:50% 46%!important}
  .smk-project-page-onsite.onsite-layout-3 .smk-project-tile:nth-child(3)>img{object-position:50% 50%!important}

  /* On-site page 2: two equal full-height portraits. */
  .smk-project-page-onsite.onsite-layout-2{
    grid-template-columns:50% 50%!important;
    grid-template-rows:100%!important;
  }
  .smk-project-page-onsite.onsite-layout-2 .smk-project-tile:nth-child(1){grid-column:1!important;grid-row:1!important}
  .smk-project-page-onsite.onsite-layout-2 .smk-project-tile:nth-child(2){grid-column:2!important;grid-row:1!important}

  /* On-site page 3 needs independent row heights on each side. */
  .smk-project-page.smk-project-page-onsite.onsite-layout-5{display:block!important}
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile{position:absolute!important}
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(1){left:0!important;top:0!important;width:50%!important;height:59.4%!important}
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(2){left:0!important;top:59.4%!important;width:50%!important;height:40.6%!important}
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(3){left:50%!important;top:0!important;width:50%!important;height:50%!important}
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(4){left:50%!important;top:50%!important;width:16%!important;height:50%!important}
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(5){left:66%!important;top:50%!important;width:34%!important;height:50%!important}
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(1)>img{object-position:50% 52%!important}
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(2)>img{object-position:50% 46%!important}
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(3)>img{object-position:50% 50%!important}
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(4)>img{object-position:50% 50%!important}
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(5)>img{object-position:50% 50%!important}
  /* Keep the two cross-image name plates above every neighbouring tile. */
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(2),
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(5){
    overflow:visible!important;
    z-index:20!important;
  }
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(2) .smk-project-label,
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(5) .smk-project-label{
    z-index:30!important;
  }

  /* On-site page 4: equal top row, 37.5/62.5 bottom row. */
  .smk-project-page.smk-project-page-onsite:not(.onsite-layout-2):not(.onsite-layout-3):not(.onsite-layout-5){display:block!important}
  .smk-project-page-onsite:not(.onsite-layout-2):not(.onsite-layout-3):not(.onsite-layout-5) .smk-project-tile{position:absolute!important}
  .smk-project-page-onsite:not(.onsite-layout-2):not(.onsite-layout-3):not(.onsite-layout-5) .smk-project-tile:nth-child(1){left:0!important;top:0!important;width:50%!important;height:50%!important}
  .smk-project-page-onsite:not(.onsite-layout-2):not(.onsite-layout-3):not(.onsite-layout-5) .smk-project-tile:nth-child(2){left:50%!important;top:0!important;width:50%!important;height:50%!important}
  .smk-project-page-onsite:not(.onsite-layout-2):not(.onsite-layout-3):not(.onsite-layout-5) .smk-project-tile:nth-child(3){left:0!important;top:50%!important;width:37.5%!important;height:50%!important}
  .smk-project-page-onsite:not(.onsite-layout-2):not(.onsite-layout-3):not(.onsite-layout-5) .smk-project-tile:nth-child(4){left:37.5%!important;top:50%!important;width:62.5%!important;height:50%!important}
  /* On-site page 4: centre each name plate across both images in its row. */
  .smk-project-page-onsite:not(.onsite-layout-2):not(.onsite-layout-3):not(.onsite-layout-5) .smk-project-tile:nth-child(1),
  .smk-project-page-onsite:not(.onsite-layout-2):not(.onsite-layout-3):not(.onsite-layout-5) .smk-project-tile:nth-child(3){
    overflow:visible!important;
    z-index:20!important;
  }

  /* Canva-like name plates: translucent white fading smoothly to the right. */
  .smk-real-screen .smk-project-page .smk-project-label,
  .smk-real-screen .smk-hotel-title{
    display:flex!important;
    align-items:center!important;
    left:5.2%!important;
    right:auto!important;
    bottom:6%!important;
    width:88%!important;
    max-width:none!important;
    min-height:18%!important;
    padding:1.25vw 9vw 1.25vw 2.8vw!important;
    background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.94) 52%,rgba(255,255,255,.62) 77%,rgba(255,255,255,0) 100%)!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(5) .smk-project-label{
    left:-38%!important;
    width:132%!important;
  }
  .smk-project-page-onsite.onsite-layout-3 .smk-project-tile:nth-child(1) .smk-project-label,
  .smk-project-page-onsite.onsite-layout-2 .smk-project-label{
    bottom:3.5%!important;
    min-height:11%!important;
  }
  .smk-real-screen .smk-project-page-onsite.onsite-layout-3 .smk-project-tile:nth-child(1) .smk-project-label{
    width:36%!important;
    padding-right:5vw!important;
  }
  .smk-project-page-onsite:not(.onsite-layout-2):not(.onsite-layout-3):not(.onsite-layout-5) .smk-project-tile:nth-child(1) .smk-project-label{
    left:53%!important;
    width:94%!important;
    max-width:none!important;
    bottom:18%!important;
    z-index:30!important;
  }
  .smk-project-page-onsite:not(.onsite-layout-2):not(.onsite-layout-3):not(.onsite-layout-5) .smk-project-tile:nth-child(3) .smk-project-label{
    left:70%!important;
    width:170%!important;
    max-width:none!important;
    z-index:30!important;
  }

  /* The four portfolio spreads use equal quadrants, with compact name plates. */
  .smk-project-page-1,.smk-project-page-2,.smk-project-page-3,.smk-project-page-4{
    grid-template-columns:50% 50%!important;
    grid-template-rows:50% 50%!important;
  }
  .smk-real-screen .smk-project-page-1 .smk-project-label,
  .smk-real-screen .smk-project-page-2 .smk-project-label,
  .smk-real-screen .smk-project-page-3 .smk-project-label,
  .smk-real-screen .smk-project-page-4 .smk-project-label{
    left:5.2%!important;
    bottom:7%!important;
    width:78%!important;
    min-height:20%!important;
  }
  .smk-real-screen .smk-project-page-1 .smk-project-tile:nth-child(1) .smk-project-label{width:70%!important}
  .smk-real-screen .smk-project-page-1 .smk-project-tile:nth-child(2) .smk-project-label{width:62%!important}
  .smk-real-screen .smk-project-page-1 .smk-project-tile:nth-child(3) .smk-project-label{width:76%!important}
  .smk-real-screen .smk-project-page-1 .smk-project-tile:nth-child(4) .smk-project-label{width:72%!important}
  .smk-real-screen .smk-project-page-2 .smk-project-tile:nth-child(3) .smk-project-label{width:84%!important}
  .smk-real-screen .smk-project-page-2 .smk-project-tile:nth-child(4) .smk-project-label{width:82%!important}
  .smk-real-screen .smk-project-page-3 .smk-project-tile:nth-child(1) .smk-project-label{width:84%!important}
  .smk-real-screen .smk-project-page-3 .smk-project-tile:nth-child(2) .smk-project-label{width:78%!important}
  .smk-real-screen .smk-project-page-3 .smk-project-tile:nth-child(3) .smk-project-label{width:72%!important}
  .smk-real-screen .smk-project-page-3 .smk-project-tile:nth-child(4) .smk-project-label{width:78%!important}
  .smk-real-screen .smk-project-page-4 .smk-project-tile:nth-child(1) .smk-project-label{width:32%!important}
  .smk-real-screen .smk-project-page-4 .smk-project-tile:nth-child(2) .smk-project-label{width:36%!important}
  .smk-real-screen .smk-project-page-4 .smk-project-tile:nth-child(3) .smk-project-label{width:46%!important}
  .smk-real-screen .smk-project-page-4 .smk-project-tile:nth-child(4) .smk-project-label{width:62%!important}
  .smk-project-page-2 .smk-hotel-title{
    left:50%!important;
    top:38.5%!important;
    bottom:auto!important;
    width:24%!important;
    min-height:10%!important;
    justify-content:center!important;
    transform:translate(-50%,-50%)!important;
    padding:1.4vw 2.2vw!important;
  }
}

@media (max-width:780px){
  /* Mobile: show every on-site project image at full width in reading order. */
  .smk-real-screen .smk-project-page.smk-project-page-onsite{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  .smk-real-screen .smk-project-page.smk-project-page-onsite .smk-project-tile{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    height:78vw!important;
    min-height:280px!important;
    overflow:hidden!important;
    z-index:1!important;
  }
  /* Desktop stays clinic-left/hospital-right; mobile reads hospital before clinic. */
  .smk-project-page-onsite.onsite-layout-2 .smk-project-tile:nth-child(2){order:1!important}
  .smk-project-page-onsite.onsite-layout-2 .smk-project-tile:nth-child(1){order:2!important}
  /* Within the hospital set, introduce the project with its labelled image. */
  .smk-project-page-onsite.onsite-layout-3 .smk-project-tile:nth-child(1){order:1!important}
  .smk-project-page-onsite.onsite-layout-3 .smk-project-tile:nth-child(3){order:2!important}
  .smk-project-page-onsite.onsite-layout-3 .smk-project-tile:nth-child(2){order:3!important}
  .smk-real-screen .smk-project-page .smk-project-label,
  .smk-project-page-onsite.onsite-layout-5 .smk-project-tile:nth-child(5) .smk-project-label,
  .smk-project-page-onsite:not(.onsite-layout-2):not(.onsite-layout-3):not(.onsite-layout-5) .smk-project-tile:nth-child(3) .smk-project-label{
    left:4%!important;
    bottom:5%!important;
    width:92%!important;
    max-width:92%!important;
    min-height:auto!important;
    padding:13px 70px 13px 16px!important;
    z-index:5!important;
  }
}
@media(max-width:780px){
  .smk-real-screen .smk-project-label,
  .smk-real-screen .smk-hotel-title{
    left:4%!important;
    bottom:4%!important;
    width:fit-content!important;
    max-width:92%!important;
    min-height:auto!important;
    box-sizing:border-box!important;
    padding:13px clamp(52px,15vw,72px) 13px 16px!important;
    font-size:clamp(11px,3.25vw,17px)!important;
    line-height:1.2!important;
    white-space:normal!important;
  }
}


/* ===== Customers rebuilt from Canva SVG assets (no screenshot canvas) ===== */
.customers-real-section{position:relative;width:100%;height:56.25vw;min-height:650px;overflow:hidden;isolation:isolate;background:#f4f1ec;scroll-margin-top:0}
.customers-real-background{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 49%;transform:scale(1.012)}
.customers-real-wash{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(255,255,255,.60) 0%,rgba(255,255,255,.40) 32%,rgba(255,255,255,.32) 62%,rgba(255,255,255,.48) 100%),linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.48) 37%,rgba(255,255,255,.92) 65%,#fff 100%)}
.customers-real-content{position:relative;z-index:2;width:100%;height:100%;padding:2.5% 4.25% 4.4%;box-sizing:border-box}
.customers-real-heading{position:absolute;left:4.2%;top:5.1%;width:28.5%;padding:2.15% 0 0 1.7%;color:#fff;text-shadow:0 4px 8px rgba(0,0,0,.22)}
.customers-real-heading h2{position:relative;z-index:2;margin:0;font-family:var(--font-canva-sans);font-size:clamp(46px,4.65vw,92px);font-weight:800;line-height:.95;letter-spacing:-.055em}
.customers-real-line{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.94);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.customers-real-line::before{content:"";position:absolute;left:0;top:-1.6vw;width:2px;height:6.7vw;max-height:130px;background:rgba(255,255,255,.94)}
.customers-real-dot{position:absolute;z-index:3;left:0;top:0;width:1.35vw;min-width:13px;max-width:25px;aspect-ratio:1;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.customers-real-nav{position:absolute;z-index:5;right:3.2%;top:2.6%;display:flex;align-items:center;justify-content:flex-end;gap:clamp(0px,.35vw,7px);font-family:var(--font-canva-sans);font-size:clamp(15px,1.35vw,27px);color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.34)}
.customers-real-nav a{color:inherit;padding:.72em 1.05em}
.customers-real-nav a.active{background:linear-gradient(180deg,#e5c6a5 0%,#bd895d 100%);box-shadow:0 8px 20px rgba(69,42,21,.25),inset 0 1px 1px rgba(255,255,255,.8);text-shadow:0 2px 5px rgba(0,0,0,.2)}
.customer-logo-board{position:absolute;left:4.1%;right:4.1%;top:39.5%;bottom:6.1%;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));row-gap:1.7%;align-content:stretch}
.customer-logo-row{display:grid;align-items:center;justify-items:center;column-gap:1.4%;min-height:0}
.customer-logo-row-1,.customer-logo-row-2,.customer-logo-row-3{grid-template-columns:repeat(7,minmax(0,1fr))}
.customer-logo-row-4{grid-template-columns:repeat(8,minmax(0,1fr));column-gap:.9%}
.customer-logo-item{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:0 .35vw;box-sizing:border-box}
.customer-logo-item img{display:block;max-width:100%;max-height:88%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(255,255,255,.4))}
.customer-logo-hilltania img,.customer-logo-weera img,.customer-logo-staravenue img,.customer-logo-fooniyara img{max-height:78%}
.customer-logo-cmu img,.customer-logo-government img,.customer-logo-design119 img,.customer-logo-knot img{max-height:84%}
.customer-logo-prego img{max-height:68%}.customer-logo-link img{max-width:88%}
@media(max-width:900px){.customers-real-section{height:auto;min-height:0;padding:82px 0 44px;background:#f5f1eb}.customers-real-background{height:460px;object-position:center top;transform:none}.customers-real-wash{background:linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.82) 310px,#fff 520px)}.customers-real-content{height:auto;padding:0 20px}.customers-real-heading{position:relative;left:auto;top:auto;width:min(86%,420px);padding:38px 0 0 20px;margin:0 0 20px;color:#fff}.customers-real-heading h2{font-size:clamp(42px,12vw,68px)}.customers-real-line::before{top:-24px;height:92px}.customers-real-dot{width:16px}.customers-real-nav{position:relative;right:auto;top:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:2px;margin:8px auto 42px;font-size:17px;color:#3c3733;text-shadow:none}.customers-real-nav a{padding:9px 12px}.customer-logo-board{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:grid;grid-template-rows:none;gap:22px}.customer-logo-row,.customer-logo-row-1,.customer-logo-row-2,.customer-logo-row-3,.customer-logo-row-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}.customer-logo-item{height:105px;padding:12px;background:rgba(255,255,255,.75);border-radius:14px;box-shadow:0 8px 24px rgba(62,49,39,.08)}.customer-logo-item img{max-width:94%;max-height:82%}}
@media(max-width:430px){.customer-logo-item{height:92px}.customers-real-nav{font-size:16px}.customers-real-heading{padding-left:16px}}


/* ===== Mobile CAPA project stack + real white SMK logo ===== */
.hero-brand-lockup{display:flex;align-items:center;gap:9px;color:#fff;filter:drop-shadow(0 2px 5px rgba(0,0,0,.25))}
.hero-logo-mark{display:block;width:46px;height:auto;flex:0 0 auto}
.hero-logo-text{font-family:var(--font-canva-sans);font-size:16px;font-weight:400;line-height:1;white-space:nowrap;letter-spacing:-.02em}
.capa-project-label-mobile{display:none}
@media(max-width:780px){
  .hero-topline{left:26px;top:calc(var(--header-h) + 17px)}
  .hero-brand-lockup{gap:8px}
  .hero-logo-mark{width:43px}
  .hero-logo-text{font-size:15px;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.28)}
  .capa-project-collage{display:flex;flex-direction:column;width:100%;aspect-ratio:auto;height:auto;overflow:visible;background:#fff}
  .capa-project-media,.capa-project-skyroof,.capa-project-house,.capa-project-interior,.capa-project-building{display:block;width:100%;height:auto;aspect-ratio:4/3;grid-column:auto;grid-row:auto;flex:0 0 auto;position:relative}
  .capa-project-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}
  .capa-project-skyroof img{object-position:50% 50%}
  .capa-project-house img{object-position:70% 50%}
  .capa-project-interior img{object-position:38% 50%}
  .capa-project-building img{object-position:50% 50%}
  .capa-collage-dot,.capa-project-label{display:none}
  .capa-project-label-mobile{position:absolute;left:20px;bottom:20px;z-index:4;display:block;max-width:calc(100% - 40px);padding:13px 18px;background:rgba(255,255,255,.94);color:#151515;font-family:var(--font-canva-sans);font-size:clamp(17px,5vw,23px);font-weight:400;line-height:1.15;letter-spacing:-.03em;white-space:nowrap;box-shadow:0 4px 15px rgba(0,0,0,.08);pointer-events:none}
}


/* v2 Products2 and continuous Customers mobile grid */
@media(max-width:900px){
  .customer-logo-board{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:none!important;gap:18px 22px!important;align-items:stretch!important}
  .customer-logo-row,.customer-logo-row-1,.customer-logo-row-2,.customer-logo-row-3,.customer-logo-row-4{display:contents!important}
  .customer-logo-item{width:100%!important;min-width:0!important;margin:0!important}
}



/* ===== Mobile menu portal + permanent background fix ===== */
@media(max-width:780px){
  .site-header{z-index:100002!important;transform:none!important;opacity:1!important;pointer-events:auto!important}
  .main-nav{
    position:fixed!important;
    z-index:100004!important;
    top:var(--header-h)!important;
    right:0!important;
    bottom:auto!important;
    left:auto!important;
    width:min(86vw,370px)!important;
    height:calc(100dvh - var(--header-h))!important;
    min-height:calc(100vh - var(--header-h))!important;
    padding:26px 20px 38px!important;
    background-color:#fff!important;
    background-image:linear-gradient(180deg,#fff 0%,#fbf8f3 100%)!important;
    color:#231f20!important;
    border-left:1px solid rgba(0,0,0,.08)!important;
    box-shadow:-22px 0 50px rgba(0,0,0,.28)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(105%,0,0)!important;
    transition:transform .28s ease,opacity .2s ease,visibility .2s ease!important;
    isolation:isolate!important;
  }
  .main-nav::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg,#fff 0%,#fbf8f3 100%);
    pointer-events:none;
  }
  .main-nav.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
  }
  .mobile-menu-backdrop{
    display:block!important;
    position:fixed!important;
    z-index:100003!important;
    top:var(--header-h)!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100vw!important;
    height:calc(100dvh - var(--header-h))!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:rgba(18,15,13,.70)!important;
    -webkit-backdrop-filter:blur(2px)!important;
    backdrop-filter:blur(2px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateZ(0)!important;
    transition:opacity .22s ease,visibility .22s ease!important;
  }
  .mobile-menu-backdrop.open,
  body.menu-open .mobile-menu-backdrop{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  body.menu-open{overflow:hidden!important;touch-action:none}
}

/* ===== Embedded Google Map ===== */
.map-section{width:100%;margin:0;padding:0;background:#e8e4dd;overflow:hidden}
.map-container{position:relative;width:100%;height:clamp(520px,56.25vw,900px);min-height:520px;background:#ddd;overflow:hidden}
.map-container iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map-button-wrap{display:flex;justify-content:center;align-items:center;width:100%;padding:22px 20px 30px;background:#f58d23}
.map-button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:14px 28px;border:2px solid #231f20;border-radius:999px;background:#231f20;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 10px 24px rgba(0,0,0,.20);transition:transform .2s ease,filter .2s ease}
.map-button:hover,.map-button:focus-visible{transform:translateY(-2px);filter:brightness(1.08)}
.map-button:focus-visible{outline:4px solid #fff;outline-offset:3px}
@media(max-width:780px){
  .map-container{height:72svh;min-height:480px;max-height:720px}
  .map-button-wrap{padding:18px 18px 26px}
  .map-button{width:min(100%,380px);min-height:56px;padding:15px 20px;font-size:17px}
}

/* Mobile floating controls: compact world-class vertical order and idle hide. */
@media(max-width:780px){
  .smk-mobile-contact-bar{flex-direction:column-reverse;gap:7px}
  .smk-back-to-top{bottom:max(116px,calc(env(safe-area-inset-bottom) + 116px))}
  body.smk-floating-controls-idle .smk-mobile-contact-bar,
  body.smk-floating-controls-idle .smk-back-to-top{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(12px) scale(.94)!important}
  .smk-mobile-contact-bar,.smk-back-to-top{transition:opacity .3s ease,transform .3s ease,visibility .3s ease}
}

/* Adaptive Liquid Glass study — web approximation of optical, responsive material. */
@media(max-width:780px){
  .smk-mobile-contact-bar a,.smk-back-to-top{
    --smk-glass-light-x:28%;--smk-glass-light-y:18%;
    isolation:isolate;overflow:hidden;color:#282522!important;
    border:1px solid rgba(255,255,255,.64)!important;
    background:
      radial-gradient(circle at var(--smk-glass-light-x) var(--smk-glass-light-y),rgba(255,255,255,.52) 0,rgba(255,255,255,.18) 24%,transparent 48%),
      linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.07) 58%,rgba(90,82,75,.08))!important;
    box-shadow:
      0 9px 24px rgba(24,20,18,.19),
      inset 1px 1px 0 rgba(255,255,255,.92),
      inset -1px -1px 0 rgba(255,255,255,.13),
      inset 0 0 0 1px rgba(255,255,255,.08)!important;
    backdrop-filter:blur(13px) saturate(175%) contrast(106%) brightness(1.04)!important;
    -webkit-backdrop-filter:blur(13px) saturate(175%) contrast(106%) brightness(1.04)!important;
    transition:opacity .32s ease,visibility .32s ease,filter .32s ease,transform .55s cubic-bezier(.16,1.35,.32,1),border-radius .55s cubic-bezier(.16,1.35,.32,1),box-shadow .32s ease,background .32s ease!important;
  }
  .smk-mobile-contact-bar a::before,.smk-back-to-top::before{
    content:"";position:absolute;z-index:-1;inset:2px;border-radius:inherit;
    background:
      radial-gradient(circle at var(--smk-glass-light-x) var(--smk-glass-light-y),rgba(255,255,255,.78),transparent 28%),
      conic-gradient(from 210deg at 50% 50%,rgba(255,255,255,.34),transparent 24%,rgba(255,255,255,.08) 50%,transparent 72%,rgba(255,255,255,.26));
    opacity:.7;mix-blend-mode:screen;pointer-events:none;transition:opacity .28s ease,transform .5s cubic-bezier(.16,1.35,.32,1)
  }
  .smk-mobile-contact-bar a::after,.smk-back-to-top::after{
    content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;
    box-shadow:inset 0 1.5px 1px rgba(255,255,255,.72),inset 1.5px 0 1px rgba(255,255,255,.34),inset 0 -1.5px 1px rgba(36,31,28,.13);
    background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.22) 39%,transparent 57%);
    transform:translateX(-32%);transition:transform .6s cubic-bezier(.16,1,.3,1)
  }
  .smk-mobile-contact-bar a.smk-glass-pressed,.smk-back-to-top.smk-glass-pressed{
    transform:scale(1.08,.94)!important;border-radius:46% 54% 48% 52%!important;
    box-shadow:0 5px 16px rgba(24,20,18,.16),inset 0 0 9px rgba(255,255,255,.5)!important
  }
  .smk-mobile-contact-bar a.smk-glass-pressed::before,.smk-back-to-top.smk-glass-pressed::before{opacity:1;transform:scale(1.22)}
  .smk-mobile-contact-bar a.smk-glass-pressed::after,.smk-back-to-top.smk-glass-pressed::after{transform:translateX(28%)}
  .smk-mobile-line{color:#10a64b!important;background:
    radial-gradient(circle at var(--smk-glass-light-x) var(--smk-glass-light-y),rgba(255,255,255,.5),transparent 42%),
    linear-gradient(145deg,rgba(22,188,83,.24),rgba(11,128,56,.09))!important}
  .smk-mobile-phone{color:#292522!important}
  body.smk-glass-over-dark .smk-mobile-contact-bar a,body.smk-glass-over-dark .smk-back-to-top{
    color:#fff!important;border-color:rgba(255,255,255,.42)!important;
    background:radial-gradient(circle at var(--smk-glass-light-x) var(--smk-glass-light-y),rgba(255,255,255,.3),transparent 40%),linear-gradient(145deg,rgba(22,22,22,.28),rgba(6,6,6,.13))!important;
    box-shadow:0 10px 27px rgba(0,0,0,.34),inset 1px 1px 0 rgba(255,255,255,.58),inset -1px -1px 0 rgba(0,0,0,.16)!important
  }
  body.smk-glass-over-dark .smk-mobile-line{color:#36d66f!important}
  body.smk-floating-controls-idle .smk-mobile-contact-bar a,
  body.smk-floating-controls-idle .smk-back-to-top{filter:blur(1.5px) saturate(80%);transform:translateY(9px) scale(.72)!important}
}
@media(max-width:780px) and (prefers-reduced-transparency:reduce){
  .smk-mobile-contact-bar a,.smk-back-to-top{background:rgba(246,243,240,.94)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body.smk-glass-over-dark .smk-mobile-contact-bar a,body.smk-glass-over-dark .smk-back-to-top{background:rgba(32,30,29,.94)!important}
}
@media(max-width:780px) and (prefers-reduced-motion:reduce){
  .smk-mobile-contact-bar a,.smk-back-to-top{transition:opacity .15s linear,visibility .15s linear!important}
  .smk-mobile-contact-bar a.smk-glass-pressed,.smk-back-to-top.smk-glass-pressed{transform:none!important}
}
@media(forced-colors:active){.smk-mobile-contact-bar a,.smk-back-to-top{border:2px solid ButtonText!important;background:ButtonFace!important;color:ButtonText!important}}

/* Refined preview: clean glass face without an inner ring; clearer LINE mark. */
@media(max-width:780px){
  .smk-mobile-contact-bar a,.smk-back-to-top{
    box-shadow:0 9px 24px rgba(24,20,18,.19),inset 0 1px 0 rgba(255,255,255,.72)!important
  }
  .smk-mobile-contact-bar a::before,.smk-back-to-top::before{
    inset:0;background:radial-gradient(circle at var(--smk-glass-light-x) var(--smk-glass-light-y),rgba(255,255,255,.64),transparent 35%);opacity:.62
  }
  .smk-mobile-contact-bar a::after,.smk-back-to-top::after{
    inset:0;box-shadow:none;background:linear-gradient(115deg,transparent 24%,rgba(255,255,255,.2) 43%,transparent 60%)
  }
  .smk-mobile-line svg{width:27px;height:27px}
  .smk-mobile-line svg path:last-child{display:none}
  .smk-mobile-contact-bar a.smk-mobile-line strong{
    position:absolute!important;z-index:3!important;left:50%!important;top:46%!important;width:auto!important;height:auto!important;
    margin:0!important;padding:0!important;overflow:visible!important;clip:auto!important;white-space:nowrap!important;border:0!important;
    transform:translate(-50%,-50%)!important;font-size:0!important;line-height:1!important;color:#fff!important;text-shadow:0 1px 1px rgba(0,80,32,.24)
  }
  .smk-mobile-contact-bar a.smk-mobile-line strong::after{content:"LINE";font-family:Arial,sans-serif;font-size:7px;font-weight:700;letter-spacing:-.28px}
  body.smk-glass-over-dark .smk-mobile-contact-bar a,body.smk-glass-over-dark .smk-back-to-top{
    box-shadow:0 10px 27px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.5)!important
  }
  .smk-mobile-contact-bar a.smk-mobile-line{color:#292522!important;background:radial-gradient(circle at var(--smk-glass-light-x) var(--smk-glass-light-y),rgba(255,255,255,.52) 0,rgba(255,255,255,.18) 24%,transparent 48%),linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.07) 58%,rgba(90,82,75,.08))!important}
  .smk-mobile-contact-bar a.smk-mobile-line strong{color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.28)!important}
  body.smk-glass-over-dark .smk-mobile-contact-bar a.smk-mobile-line{color:#fff!important}
  body.smk-glass-over-dark .smk-mobile-contact-bar a.smk-mobile-line strong{color:#292522!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important}
}

/* Water-clear study: subtle spectral refraction, not an opaque blue fill. */
@media(max-width:780px){
  .smk-mobile-contact-bar a,.smk-back-to-top{
    background:
      radial-gradient(circle at var(--smk-glass-light-x) var(--smk-glass-light-y),rgba(255,255,255,.58) 0,rgba(255,255,255,.16) 25%,transparent 47%),
      radial-gradient(circle at 78% 78%,rgba(111,205,232,.14),transparent 43%),
      linear-gradient(132deg,rgba(174,225,239,.13),rgba(255,255,255,.055) 47%,rgba(188,167,232,.09))!important;
    border-color:rgba(219,244,250,.7)!important;
    box-shadow:0 9px 24px rgba(20,34,39,.18),inset 0 1px 0 rgba(255,255,255,.78),inset 1px 0 0 rgba(153,224,239,.2)!important
  }
  .smk-mobile-contact-bar a::after,.smk-back-to-top::after{
    background:linear-gradient(112deg,transparent 20%,rgba(146,224,241,.2) 36%,rgba(255,255,255,.3) 44%,rgba(205,175,239,.16) 52%,transparent 67%)
  }
  .smk-mobile-contact-bar a.smk-mobile-line{
    color:rgba(43,139,165,.88)!important;
    background:radial-gradient(circle at var(--smk-glass-light-x) var(--smk-glass-light-y),rgba(255,255,255,.6),transparent 42%),linear-gradient(138deg,rgba(119,211,232,.2),rgba(255,255,255,.06) 48%,rgba(177,159,229,.11))!important
  }
  .smk-mobile-contact-bar a.smk-mobile-line strong{color:#fff!important;text-shadow:0 1px 2px rgba(20,74,88,.48)!important}
  body.smk-glass-over-dark .smk-mobile-contact-bar a,body.smk-glass-over-dark .smk-back-to-top{
    background:radial-gradient(circle at var(--smk-glass-light-x) var(--smk-glass-light-y),rgba(255,255,255,.36),transparent 40%),radial-gradient(circle at 76% 78%,rgba(98,202,232,.16),transparent 44%),linear-gradient(138deg,rgba(116,196,219,.13),rgba(10,12,14,.16) 52%,rgba(169,147,218,.1))!important;
    border-color:rgba(204,239,247,.48)!important;box-shadow:0 10px 27px rgba(0,0,0,.34),inset 0 1px 0 rgba(235,251,255,.55),inset 1px 0 0 rgba(112,211,235,.2)!important
  }
  body.smk-glass-over-dark .smk-mobile-contact-bar a.smk-mobile-line{color:rgba(211,246,252,.94)!important}
  body.smk-glass-over-dark .smk-mobile-contact-bar a.smk-mobile-line strong{color:#203137!important;text-shadow:0 1px 0 rgba(255,255,255,.55)!important}
}

/* Experimental soft lensing: refract only the curved outer volume. */
@media(max-width:780px){
  .smk-mobile-contact-bar a::before,.smk-back-to-top::before{
    inset:-3px;border-radius:50%;opacity:.7;background:transparent;
    backdrop-filter:blur(1.2px) saturate(225%) contrast(116%) brightness(1.06);
    -webkit-backdrop-filter:blur(1.2px) saturate(225%) contrast(116%) brightness(1.06);
    -webkit-mask:radial-gradient(circle at 50% 50%,transparent 47%,rgba(0,0,0,.12) 57%,rgba(0,0,0,.82) 77%,transparent 100%);
    mask:radial-gradient(circle at 50% 50%,transparent 47%,rgba(0,0,0,.12) 57%,rgba(0,0,0,.82) 77%,transparent 100%);
    transform:scale(1.025);
    transition:opacity .28s ease,transform .52s cubic-bezier(.16,1.2,.3,1)
  }
  .smk-mobile-contact-bar a.smk-glass-pressed::before,.smk-back-to-top.smk-glass-pressed::before{
    opacity:.95;transform:scale(1.09,1.03)
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .smk-mobile-contact-bar a::before,.smk-back-to-top::before{background:radial-gradient(circle at var(--smk-glass-light-x) var(--smk-glass-light-y),rgba(255,255,255,.48),transparent 42%);-webkit-mask:none;mask:none}
  }
}

/* Transparent LINE lens: outlined speech bubble with no opaque center. */
@media(max-width:780px){
  .smk-mobile-contact-bar a.smk-mobile-line{color:#292522!important}
  .smk-mobile-contact-bar a.smk-mobile-line svg path:first-child{
    fill:rgba(255,255,255,.1)!important;stroke:currentColor!important;stroke-width:1.45!important
  }
  .smk-mobile-contact-bar a.smk-mobile-line strong{color:#292522!important;text-shadow:0 1px 0 rgba(255,255,255,.58)!important}
  body.smk-glass-over-dark .smk-mobile-contact-bar a.smk-mobile-line{color:rgba(244,250,252,.96)!important}
  body.smk-glass-over-dark .smk-mobile-contact-bar a.smk-mobile-line svg path:first-child{fill:rgba(255,255,255,.075)!important}
  body.smk-glass-over-dark .smk-mobile-contact-bar a.smk-mobile-line strong{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.48)!important}
}

/* iOS/WebKit fix: masked backdrop layers can be composited as square tiles. */
@supports (-webkit-touch-callout:none){
  @media(max-width:780px){
    .smk-mobile-contact-bar a,.smk-back-to-top,
    .smk-mobile-contact-bar a.smk-mobile-line,
    body.smk-glass-over-dark .smk-mobile-contact-bar a,
    body.smk-glass-over-dark .smk-back-to-top,
    body.smk-glass-over-dark .smk-mobile-contact-bar a.smk-mobile-line{
      background:radial-gradient(circle at var(--smk-glass-light-x) var(--smk-glass-light-y),rgba(255,255,255,.2),transparent 42%),linear-gradient(145deg,rgba(255,255,255,.055),rgba(174,225,239,.025) 55%,rgba(188,167,232,.025))!important;
      -webkit-backdrop-filter:blur(.65px) saturate(132%) contrast(103%)!important;
      backdrop-filter:blur(.65px) saturate(132%) contrast(103%)!important;
      border-color:rgba(222,245,250,.58)!important;
      box-shadow:0 7px 18px rgba(18,24,27,.14),inset 0 1px 0 rgba(255,255,255,.46)!important
    }
    .smk-mobile-contact-bar a::before,.smk-back-to-top::before{
      inset:0!important;border-radius:inherit!important;
      -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
      -webkit-mask:none!important;mask:none!important;
      background:radial-gradient(circle at var(--smk-glass-light-x) var(--smk-glass-light-y),rgba(255,255,255,.22),rgba(180,229,241,.035) 34%,transparent 58%)!important;
      transform:none!important;opacity:.28!important
    }
    .smk-mobile-contact-bar a::after,.smk-back-to-top::after{opacity:.34!important}
    .smk-mobile-contact-bar a.smk-glass-pressed::before,.smk-back-to-top.smk-glass-pressed::before{
      transform:scale(1.08)!important;opacity:.86!important
    }
  }
}

/* High-resolution Products overview rebuilt from the original SVG sources. */
.product-overview-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,12,11,.05),rgba(13,12,11,.02) 36%,rgba(13,12,11,.24));pointer-events:none}
.product-overview-number,.product-overview-copy{position:absolute;z-index:2;color:#fff;font-family:var(--font-canva-sans);text-shadow:0 2px 7px rgba(0,0,0,.5);pointer-events:none}
.product-overview-number{top:10%;right:8%;font-size:clamp(14px,1.22vw,24px);font-weight:400;line-height:1}
.product-overview-copy{left:7%;right:7%;top:50%;display:flex;flex-direction:column;align-items:center;gap:.5em;transform:translateY(-40%);text-align:center;line-height:1.18}
.product-overview-copy strong{font-size:clamp(18px,1.7vw,34px);font-weight:800;letter-spacing:-.04em}
.product-overview-copy small{font-size:clamp(12px,1.05vw,21px);font-weight:400;line-height:1.38}
.product-overview-card[data-product="doors"] img{object-position:center 53%}.product-overview-card[data-product="partition"] img{object-position:center 52%}.product-overview-card[data-product="slat"] img{object-position:center 50%}.product-overview-card[data-product="curve"] img{object-position:center 52%}.product-overview-card[data-product="rail"] img{object-position:center 48%}.product-overview-card[data-product="roof"] img{object-position:center 54%}.product-overview-card[data-product="fence"] img{object-position:center 50%}.product-overview-card[data-product="auto"] img{object-position:center 50%}
@media(max-width:780px){.product-overview-number{font-size:17px}.product-overview-copy{gap:8px;transform:translateY(-38%)}.product-overview-copy strong{font-size:clamp(24px,7vw,30px)}.product-overview-copy small{font-size:clamp(16px,4.5vw,19px)}}

/* Android refinement: remove directional upper-left inner shadow. */
@media(max-width:780px){
  .smk-mobile-contact-bar a,.smk-back-to-top,
  .smk-mobile-contact-bar a.smk-mobile-line,
  body.smk-glass-over-dark .smk-mobile-contact-bar a,
  body.smk-glass-over-dark .smk-back-to-top,
  body.smk-glass-over-dark .smk-mobile-contact-bar a.smk-mobile-line{
    background:radial-gradient(circle at 50% 50%,rgba(226,247,251,.085),rgba(255,255,255,.025) 38%,transparent 70%),rgba(255,255,255,.01)!important
  }
  .smk-mobile-contact-bar a::after,.smk-back-to-top::after{display:none!important}
  .smk-mobile-contact-bar a::before,.smk-back-to-top::before{
    background:radial-gradient(circle at 50% 50%,rgba(224,246,250,.085),rgba(255,255,255,.018) 62%,transparent 100%)!important
  }
}

/* True see-through face on all mobile browsers; platform rules only change the edge lensing method. */
@media(max-width:780px){
  .smk-mobile-contact-bar a,.smk-back-to-top,
  .smk-mobile-contact-bar a.smk-mobile-line,
  body.smk-glass-over-dark .smk-mobile-contact-bar a,
  body.smk-glass-over-dark .smk-back-to-top,
  body.smk-glass-over-dark .smk-mobile-contact-bar a.smk-mobile-line{
    background:radial-gradient(circle at var(--smk-glass-light-x) var(--smk-glass-light-y),rgba(255,255,255,.18),transparent 41%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(174,225,239,.018) 55%,rgba(188,167,232,.02))!important;
    -webkit-backdrop-filter:blur(.65px) saturate(132%) contrast(103%)!important;
    backdrop-filter:blur(.65px) saturate(132%) contrast(103%)!important;
    border-color:rgba(222,245,250,.56)!important;
    box-shadow:0 7px 18px rgba(18,24,27,.14),inset 0 1px 0 rgba(255,255,255,.43)!important
  }
}

/* Clear outer edge fading into a softly blurred center. */
@media(max-width:780px){
  .smk-mobile-contact-bar a,.smk-back-to-top,
  .smk-mobile-contact-bar a.smk-mobile-line,
  body.smk-glass-over-dark .smk-mobile-contact-bar a,
  body.smk-glass-over-dark .smk-back-to-top,
  body.smk-glass-over-dark .smk-mobile-contact-bar a.smk-mobile-line{
    background:radial-gradient(circle at var(--smk-glass-light-x) var(--smk-glass-light-y),rgba(255,255,255,.1),transparent 34%),rgba(255,255,255,.012)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important
  }
  .smk-mobile-contact-bar a::before,.smk-back-to-top::before{
    inset:19%!important;border-radius:50%!important;
    -webkit-mask:none!important;mask:none!important;
    -webkit-backdrop-filter:blur(2.35px) saturate(145%) contrast(104%)!important;
    backdrop-filter:blur(2.35px) saturate(145%) contrast(104%)!important;
    background:radial-gradient(circle,rgba(225,247,251,.09),rgba(255,255,255,.025) 68%,transparent 100%)!important;
    opacity:.78!important;transform:none!important
  }
  .smk-mobile-contact-bar a.smk-glass-pressed::before,.smk-back-to-top.smk-glass-pressed::before{
    transform:scale(1.12)!important;opacity:.94!important
  }
  .modal.open .modal-close{
    z-index:20!important;display:flex!important;align-items:center!important;justify-content:center!important;
    top:max(12px,env(safe-area-inset-top))!important;right:max(12px,env(safe-area-inset-right))!important;
    width:48px!important;height:48px!important;padding:0!important;border:1px solid rgba(255,255,255,.62)!important;border-radius:50%!important;
    background:rgba(18,17,17,.68)!important;color:#fff!important;font-size:36px!important;line-height:1!important;
    box-shadow:0 8px 22px rgba(0,0,0,.34)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;
    opacity:1!important;visibility:visible!important;pointer-events:auto!important
  }
  #galleryModal.open figure{padding-top:56px;box-sizing:border-box}
}

/* Final iPhone compositing guard and visible gallery close position below fixed header. */
@media(max-width:780px){
  .modal.open .modal-close{top:calc(var(--header-h) + 14px)!important;right:max(12px,env(safe-area-inset-right))!important}
}
@supports (-webkit-touch-callout:none){
  @media(max-width:780px){
    .smk-mobile-contact-bar a::before,.smk-mobile-contact-bar a::after,
    .smk-back-to-top::before,.smk-back-to-top::after{display:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;-webkit-mask:none!important;mask:none!important}
    .smk-mobile-contact-bar a,.smk-back-to-top,
    .smk-mobile-contact-bar a.smk-mobile-line,
    body.smk-glass-over-dark .smk-mobile-contact-bar a,
    body.smk-glass-over-dark .smk-back-to-top,
    body.smk-glass-over-dark .smk-mobile-contact-bar a.smk-mobile-line{
      background:radial-gradient(circle at 50% 50%,rgba(225,245,249,.1),rgba(255,255,255,.035) 38%,transparent 72%),rgba(255,255,255,.012)!important;
      -webkit-backdrop-filter:none!important;backdrop-filter:none!important
    }
  }
}
/* Mobile uses the fixed header hamburger; hide repeated in-page navigation bars. */
@media (max-width:780px){
  .hero-section-nav,
  .mobile-section-nav,
  .service-mobile-nav,
  .products-canva-nav,
  .customers-real-nav{
    display:none!important;
  }
}

/* Mobile project name plates: size the fade panel to the text, not the tile. */
@media (max-width:780px){
  .smk-real-screen .smk-project-page .smk-project-label,
  .smk-real-screen .smk-project-page .smk-hotel-title{
    display:flex!important;
    width:fit-content!important;
    max-width:92%!important;
    min-width:0!important;
    min-height:auto!important;
    box-sizing:border-box!important;
    padding:13px clamp(52px,15vw,72px) 13px 16px!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .smk-real-screen .smk-project-page .smk-hotel-title{
    left:4%!important;
    right:auto!important;
    top:25%!important;
    bottom:auto!important;
    height:auto!important;
    transform:translateY(-135%)!important;
    text-align:left!important;
  }
}

/* One continuous hero image through the About transition.
   The About section overlaps the extended hero, so the original image keeps
   flowing downward and fades to white without painting a second copy. */
:root{--smk-about-image-overlap:190px}
.hero{min-height:calc(100svh + var(--smk-about-image-overlap))}
.about{
  z-index:1;
  margin-top:calc(-1 * var(--smk-about-image-overlap));
  padding-top:112px;
  background:linear-gradient(180deg,transparent 0 var(--smk-about-image-overlap),#fff var(--smk-about-image-overlap))
}
.about:before{
  height:var(--smk-about-image-overlap);
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 22%,rgba(255,255,255,.78) 68%,#fff 100%)
}
@media (max-width:780px){
  .hero{min-height:calc(900px + var(--smk-about-image-overlap))}
  .about{
    margin-top:calc(-1 * var(--smk-about-image-overlap));
    padding-top:100px;
    background:linear-gradient(180deg,transparent 0 var(--smk-about-image-overlap),#fff var(--smk-about-image-overlap))
  }
  .about:before{
    height:var(--smk-about-image-overlap);
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.12) 18%,rgba(255,255,255,.74) 66%,#fff 100%)
  }
}

/* Match the mobile CAPA title plate to the compact fading project plates. */
@media (max-width:780px){
  .capa-project-label-mobile{
    display:flex!important;
    align-items:center!important;
    left:4%!important;
    right:auto!important;
    bottom:4%!important;
    width:fit-content!important;
    max-width:92%!important;
    min-width:0!important;
    min-height:auto!important;
    box-sizing:border-box!important;
    padding:13px clamp(52px,15vw,72px) 13px 16px!important;
    background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.94) 52%,rgba(255,255,255,.62) 77%,rgba(255,255,255,0) 100%)!important;
    color:#151515!important;
    font-size:clamp(11px,3.25vw,17px)!important;
    line-height:1.18!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    box-shadow:none!important;
  }
}
@media (max-width: 780px) {
  html[lang="en"] .experience-copy small {
    left: 22px;
    top: 95px;
    bottom: auto;
    transform: none;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;
  }

  html[lang="en"] .experience-copy strong {
    left: 62%;
    top: -30px;
    transform: translateX(-50%);
    font-size: clamp(112px, 30vw, 136px);
    letter-spacing: -0.065em;
    white-space: nowrap;
  }

  html[lang="en"] .experience-copy strong span {
    margin-left: 8px;
    font-size: 0.65em;
    letter-spacing: -0.04em;
  }
}

/* Thai mobile About copy: use deliberate line breaks so names are never split. */
@media (max-width:780px){
  html[lang="th"] .about-copy h2{
    font-size:clamp(18px,5.5vw,23px);
    line-height:1.25;
    letter-spacing:-.025em;
    white-space:nowrap;
  }

  html[lang="th"] .about-copy .old-name{
    font-size:clamp(22px,6vw,25px);
    line-height:1.25;
  }

  html[lang="th"] .about-copy .about-history{
    max-width:100%;
    font-size:clamp(15px,4.25vw,18px);
    line-height:1.65;
    word-break:keep-all;
    overflow-wrap:normal;
    text-wrap:pretty;
  }

  html[lang="th"] .about-history-line{display:block}
  html[lang="th"] .about-nowrap{white-space:nowrap}

  html[lang="th"] .experience-copy small{
    top:78px;
    font-size:24px;
    font-weight:600;
    line-height:1.25;
  }

  html[lang="th"] .experience-copy p{
    top:116px;
    width:74%;
    font-size:15px;
    line-height:1.55;
  }
}