:root{
  --ink:#17191a;--soft:#62676a;--paper:#f3f1ed;--white:#fff;
  --sand:#c7bda9;--line:rgba(23,25,26,.14);--max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans Thai","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%}
.skip{position:fixed;top:-60px;left:16px;background:#fff;padding:10px 14px;z-index:999}.skip:focus{top:16px}
.wrap{width:min(calc(100% - 96px),var(--max));margin:auto}
.site-header{position:absolute;z-index:50;top:0;left:0;right:0;height:82px;padding:0 max(32px,4.5vw);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#fff;border-bottom:1px solid rgba(255,255,255,.18)}
.logo{display:flex;align-items:baseline;gap:13px;width:max-content}.logo-main{font:600 20px/1 "DM Sans",sans-serif;letter-spacing:-.06em}.logo-main span{font-weight:400}.logo small{font:500 8px/1 "DM Sans";letter-spacing:.24em;opacity:.58}
.nav{display:flex;gap:34px}.nav a,.consult{font-size:13px;font-weight:400}.nav a{opacity:.78}.nav a:hover{opacity:1}.consult{justify-self:end;border-bottom:1px solid rgba(255,255,255,.4);padding:8px 0}
.menu,.mobile-nav{display:none}
.hero{position:relative;height:94svh;min-height:720px;max-height:980px;color:#fff;overflow:hidden;background:#121618}
.hero-photo,.contact-photo,.card-media,.project-media{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-photo{background-image:url("https://static.wixstatic.com/media/11062b_1f80fe71d337437ba7bccd45d0f86737~mv2.jpg/v1/fill/w_2200,h_1400,al_c,q_90/Modern%20White%20House.jpg");background-position:center 60%;transform:scale(1.015)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,17,20,.78) 0%,rgba(12,17,20,.48) 38%,rgba(12,17,20,.08) 76%),linear-gradient(0deg,rgba(8,10,12,.48),transparent 45%)}
.hero-inner{position:absolute;left:max(5.5vw,70px);bottom:13%;width:min(680px,52vw)}
.kicker,.section-label{font:600 10px/1.2 "DM Sans";letter-spacing:.25em}.kicker{color:#d7ccba;margin:0 0 24px}
.hero h1{font-size:clamp(60px,6.6vw,106px);line-height:.92;letter-spacing:-.055em;font-weight:400;margin:0;max-width:760px}
.hero h1 span{font-weight:300;color:#ded8ce}
.lead{font-size:clamp(15px,1.1vw,18px);line-height:1.85;font-weight:300;color:rgba(255,255,255,.78);max-width:640px;margin:28px 0 34px}
.hero-actions{display:flex;align-items:center;gap:28px}.button{display:inline-flex;min-height:50px;align-items:center;justify-content:center;padding:0 23px;font-size:13px;font-weight:500}.button.light{background:#f5f2ec;color:#161819}.button.outline{border:1px solid rgba(255,255,255,.42);color:#fff}.text-link{font-size:13px;border-bottom:1px solid rgba(255,255,255,.45);padding:9px 0}.text-link span{margin-left:9px}
.hero-index{position:absolute;right:max(5vw,60px);bottom:38px;display:flex;gap:26px;font:500 9px/1 "DM Sans";letter-spacing:.18em;color:rgba(255,255,255,.55)}
.manifesto{padding:130px 0 136px}.manifesto-grid{display:grid;grid-template-columns:28% 72%;gap:30px}.section-label{margin:8px 0 0;color:#8c8374}
.manifesto h2,.service-head h2,.portfolio h2,.trust h2,.contact h2{margin:0;font-size:clamp(46px,5.1vw,82px);line-height:1.02;letter-spacing:-.052em;font-weight:400}
.manifesto-copy{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:48px;max-width:850px}.manifesto-copy p{font-size:15px;line-height:1.85;color:var(--soft);margin:0}
.split-showcase{display:grid;grid-template-columns:1fr 1fr;min-height:760px}
.showcase-card{position:relative;overflow:hidden;color:#fff;min-height:760px}.showcase-card .card-media{transition:transform .8s cubic-bezier(.2,.7,.2,1)}.showcase-card:hover .card-media{transform:scale(1.025)}
.home-media{background-image:url("https://static.wixstatic.com/media/11062b_c80914045a7943749f7807c5ff4663ee~mv2.jpg/v1/fill/w_1200,h_1200,al_c,q_88/Elegant%20Bathroom%20Interior.jpg")}
.auto-media{background-image:url("https://static.wixstatic.com/media/11062b_89dfc90ed062491abe894fae4e491da1~mv2.jpg/v1/fill/w_1200,h_1200,al_c,q_88/Modern%20Luxury%20Car.jpg")}
.card-gradient{position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,11,12,.85),rgba(9,11,12,.08) 68%)}
.card-content{position:absolute;left:8%;right:8%;bottom:8%}.card-content>p:first-child{font:600 9px/1 "DM Sans";letter-spacing:.22em;opacity:.7}
.card-content h3{font:400 clamp(54px,5vw,82px)/.88 "DM Sans";letter-spacing:-.055em;margin:18px 0}.card-content .desc{font-size:14px;line-height:1.65;max-width:440px;color:rgba(255,255,255,.76)}
.card-content ul{display:flex;gap:10px 22px;flex-wrap:wrap;list-style:none;padding:0;margin:24px 0}.card-content li{font-size:12px;color:rgba(255,255,255,.72)}
.card-content>a{font-size:12px;border-bottom:1px solid rgba(255,255,255,.42);padding-bottom:7px}
.service-list{padding:138px 0 150px}.service-head{display:grid;grid-template-columns:25% 45% 30%;align-items:end;margin-bottom:70px}.service-head>p:last-child{font-size:14px;line-height:1.8;color:var(--soft);max-width:360px;margin:0 0 5px}
.rows{border-top:1px solid var(--line)}.row{min-height:96px;display:grid;grid-template-columns:10% 42% 1fr 30px;align-items:center;border-bottom:1px solid var(--line);transition:padding .25s,background .25s}.row:hover{padding:0 12px;background:rgba(255,255,255,.35)}
.row span{font:500 10px/1 "DM Sans";color:#948a7b}.row strong{font-size:20px;font-weight:400}.row em{font:400 12px/1.3 "DM Sans";font-style:normal;color:#777d7f}.row b{font:400 16px/1 "DM Sans"}
.portfolio{padding:132px 0;background:#191b1d;color:#fff}.portfolio .section-label{color:#a79c8a}.portfolio-head{display:grid;grid-template-columns:28% 72%;margin-bottom:70px}.portfolio-head>div{display:grid;grid-template-columns:1.4fr .6fr;gap:50px;align-items:end}.portfolio-head p:last-child{font-size:14px;line-height:1.75;color:rgba(255,255,255,.56);margin:0 0 6px}
.portfolio-grid{width:min(calc(100% - 70px),1580px);margin:auto;display:grid;grid-template-columns:1.35fr .75fr;grid-template-rows:420px 420px;gap:14px}
.project{position:relative;overflow:hidden;background:#282b2d}.project-a{grid-row:1/3}.project-media{transition:transform .8s cubic-bezier(.2,.7,.2,1)}.project:hover .project-media{transform:scale(1.025)}
.house-project{background-image:url("https://static.wixstatic.com/media/11062b_1f80fe71d337437ba7bccd45d0f86737~mv2.jpg/v1/fill/w_1400,h_1600,al_c,q_88/Modern%20White%20House.jpg")}
.interior-project{background-image:url("https://static.wixstatic.com/media/11062b_c80914045a7943749f7807c5ff4663ee~mv2.jpg/v1/fill/w_900,h_700,al_c,q_88/Elegant%20Bathroom%20Interior.jpg")}
.car-project{background-image:url("https://static.wixstatic.com/media/29572b_ea7c7d68a32e49a9b19086fbd5974109~mv2.png/v1/fill/w_900,h_700,al_c,q_88/IMG_4810_HEIC.png")}
.project:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,7,8,.68),transparent 52%)}
.project-caption{position:absolute;z-index:2;left:30px;right:30px;bottom:28px}.project-caption span{font:600 9px/1 "DM Sans";letter-spacing:.2em;color:#c8bead}.project-caption h3{font:400 34px/1 "DM Sans";letter-spacing:-.04em;margin:8px 0 3px}.project-caption p{font-size:12px;color:rgba(255,255,255,.66);margin:0}
.trust{padding:140px 0 0}.trust-grid{display:grid;grid-template-columns:46% 54%;gap:60px}.trust .section-label{margin-bottom:24px}.trust h2{font-size:clamp(44px,4.4vw,72px)}
.trust-points{border-top:1px solid var(--line)}.trust-points article{display:grid;grid-template-columns:58px 1fr 1fr;gap:16px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start}.trust-points span{font:500 10px/1 "DM Sans";color:#9b907f;margin-top:6px}.trust-points h3{font-size:18px;font-weight:400;margin:0}.trust-points p{font-size:13px;line-height:1.7;color:var(--soft);margin:0}
.brandline{margin-top:130px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-height:116px;display:flex;align-items:center;justify-content:space-around;font:500 clamp(18px,2vw,30px)/1 "DM Sans";letter-spacing:-.035em;color:#787d7e}
.contact{position:relative;margin-top:0;min-height:720px;color:#fff;display:flex;align-items:center}.contact-photo{background-image:url("https://static.wixstatic.com/media/11062b_1f80fe71d337437ba7bccd45d0f86737~mv2.jpg/v1/fill/w_2200,h_1400,al_c,q_88/Modern%20White%20House.jpg");background-position:center 45%}
.contact-shade{position:absolute;inset:0;background:rgba(12,15,16,.72)}.contact-inner{position:relative}.contact .section-label{color:#c4b9a7;margin-bottom:24px}.contact h2{font-size:clamp(58px,6vw,94px);max-width:900px}.contact-inner>p:not(.section-label){font-size:15px;line-height:1.8;color:rgba(255,255,255,.66);max-width:600px;margin:30px 0}.contact-actions{display:flex;gap:12px}
footer{padding:70px 0 30px;background:#111315;color:#fff}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:60px}.footer-brand strong{font:600 22px/1 "DM Sans";letter-spacing:-.06em}.footer-brand strong span{font-weight:400}.footer-brand p,footer p{font-size:12px;line-height:1.75;color:rgba(255,255,255,.52)}footer small{font:600 9px/1 "DM Sans";letter-spacing:.2em;color:#9f9585}.footline{border-top:1px solid rgba(255,255,255,.12);margin-top:55px;padding-top:22px;display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.4)}

@media(max-width:900px){
 .wrap{width:min(calc(100% - 44px),var(--max))}
 .site-header{height:70px;padding:0 20px;grid-template-columns:1fr auto}.nav,.consult{display:none}.logo small{display:none}.menu{display:grid;width:44px;height:44px;border:0;background:transparent;padding:13px;gap:6px}.menu i{height:1px;background:#fff;width:100%}
 .mobile-nav{position:fixed;z-index:45;inset:0;background:#17191a;color:#fff;padding:105px 24px 30px;flex-direction:column;gap:18px}.mobile-nav.open{display:flex}.mobile-nav a{font-size:31px;font-weight:300;border-bottom:1px solid rgba(255,255,255,.14);padding:0 0 14px}
 .hero{height:100svh;min-height:650px;max-height:850px}.hero-photo{background-position:63% center}.hero-shade{background:linear-gradient(90deg,rgba(10,14,16,.84),rgba(10,14,16,.22)),linear-gradient(0deg,rgba(7,9,10,.6),transparent 50%)}
 .hero-inner{left:22px;right:22px;bottom:max(62px,calc(45px + env(safe-area-inset-bottom)));width:auto}.kicker{font-size:9px;margin-bottom:18px}.hero h1{font-size:clamp(46px,13.4vw,64px);line-height:.96}.lead{font-size:14px;line-height:1.7;margin:22px 0 26px;max-width:520px}.hero-index{display:none}.hero-actions{gap:18px}.button{min-height:48px}
 .manifesto{padding:88px 0 92px}.manifesto-grid,.portfolio-head,.trust-grid{grid-template-columns:1fr;gap:30px}.manifesto h2,.service-head h2,.portfolio h2,.trust h2{font-size:clamp(40px,10.5vw,58px)}.manifesto-copy{grid-template-columns:1fr;gap:17px;margin-top:32px}
 .split-showcase{grid-template-columns:1fr}.showcase-card{min-height:620px}.card-content{left:24px;right:24px;bottom:32px}.card-content h3{font-size:58px}
 .service-list{padding:92px 0}.service-head{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:42px}.service-head>p:last-child{max-width:520px}.row{min-height:86px;grid-template-columns:42px 1fr 25px}.row em{display:none}.row strong{font-size:17px}
 .portfolio{padding:92px 0}.portfolio-head{margin-bottom:38px}.portfolio-head>div{grid-template-columns:1fr;gap:24px}.portfolio-grid{width:calc(100% - 28px);grid-template-columns:1fr;grid-template-rows:500px 300px 300px}.project-a{grid-row:auto}.project-caption{left:20px;right:20px;bottom:20px}
 .trust{padding:92px 0 0}.trust-grid{gap:45px}.trust-points article{grid-template-columns:40px 1fr}.trust-points p{grid-column:2}.brandline{margin-top:80px;min-height:92px;gap:30px;justify-content:flex-start;overflow:auto;padding:0 22px}.brandline span{white-space:nowrap}
 .contact{min-height:650px}.contact h2{font-size:clamp(46px,13vw,68px)}.contact-actions{flex-direction:column;align-items:stretch}.contact-actions .button{width:100%}
 .footer-grid{grid-template-columns:1fr;gap:35px}.footline{margin-top:40px}
}
@media(max-width:430px){
 .hero h1 br{display:none}.hero h1 span{display:block;margin-top:4px}.hero-actions{align-items:flex-start}.hero-actions .text-link{padding-top:14px}
 .showcase-card{min-height:570px}.card-content h3{font-size:52px}.card-content ul{gap:8px 16px}
 .portfolio-grid{grid-template-rows:420px 270px 270px}
 .project-caption h3{font-size:28px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.showcase-card .card-media,.project-media{transition:none}}

/* v0.5 — client pitch / conversion polish */
.lead-sub{display:inline-block;margin-top:7px;color:rgba(255,255,255,.62);font-size:.92em}
.decision-strip{padding:110px 0;background:#e8e3da}
.decision-grid{display:grid;grid-template-columns:34% 66%;gap:50px}
.decision-grid h2{font-size:clamp(40px,4vw,64px);line-height:1.03;letter-spacing:-.05em;font-weight:400;margin:18px 0 0}
.decision-options{border-top:1px solid var(--line)}
.decision-options a{min-height:82px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px}
.decision-options span{font:500 9px/1 "DM Sans";color:#958b7b}
.decision-options strong{font-size:17px;font-weight:400}
.decision-options b{font-size:11px;font-weight:400;color:#74797b}
.floating-contact{position:fixed;right:22px;bottom:22px;z-index:60;background:#f5f2ec;color:#17191a;box-shadow:0 12px 35px rgba(0,0,0,.18);min-height:52px;padding:0 18px;display:flex;align-items:center;gap:11px;font-size:12px}
.floating-contact span{font-weight:600}.floating-contact strong{font:500 11px/1 "DM Sans"}
@media(max-width:900px){
 .decision-strip{padding:78px 0}.decision-grid{grid-template-columns:1fr;gap:35px}
 .floating-contact{right:14px;bottom:max(14px,env(safe-area-inset-bottom));min-height:48px}
}
@media(max-width:430px){
 .decision-options a{grid-template-columns:34px 1fr;min-height:78px}
 .decision-options b{grid-column:2;margin-top:-14px;margin-bottom:14px}
 .floating-contact{left:14px;right:14px;justify-content:center}
}

/* =========================================================
   v0.6 — CLIENT PITCH VISUAL KILL PASS
   ========================================================= */
:root{--pitch-pad:max(24px,5.5vw)}
body{font-synthesis:none}
.site-header{backdrop-filter:saturate(110%);transition:background .25s ease}
.hero{min-height:700px}
.hero-photo{filter:saturate(.86) contrast(1.03)}
.hero-shade{
 background:
 linear-gradient(90deg,rgba(10,14,16,.84) 0%,rgba(10,14,16,.56) 35%,rgba(10,14,16,.10) 73%),
 linear-gradient(0deg,rgba(8,10,12,.58) 0%,transparent 48%)
}
.hero-inner{left:var(--pitch-pad);bottom:11.5%;width:min(720px,56vw)}
.kicker{display:flex;align-items:center;gap:11px;color:rgba(255,255,255,.62)}
.kicker span{color:#d7ccba}
.hero h1{font-size:clamp(58px,6.15vw,98px);line-height:.96;max-width:720px}
.hero h1 span{color:#e4ddd2}
.lead{max-width:660px;margin-top:26px;margin-bottom:28px}
.lead-sub{margin-top:5px}
.hero-proof{display:flex;align-items:center;gap:11px;margin-top:29px;font:500 8px/1 "DM Sans";letter-spacing:.17em;color:rgba(255,255,255,.48)}
.hero-proof i{display:block;width:18px;height:1px;background:rgba(255,255,255,.25)}
.hero-index{right:var(--pitch-pad)}
.manifesto{padding-top:120px;padding-bottom:125px}
.manifesto h2{max-width:800px}
.manifesto-copy{margin-top:42px}
.showcase-card{min-height:720px}
.card-content{bottom:7%}
.card-content h3{margin-top:15px;margin-bottom:20px}
.service-list{padding-top:125px;padding-bottom:135px}
.service-head{margin-bottom:58px}
.row{min-height:90px}
.portfolio{padding-top:120px;padding-bottom:125px}
.portfolio-head{margin-bottom:56px}
.project-caption{bottom:25px}
.project-caption h3{font-size:clamp(28px,2.4vw,38px)}
.trust{padding-top:125px}
.brandline{margin-top:115px}
.decision-strip{padding-top:98px;padding-bottom:100px}
.contact{min-height:680px}
.contact h2{line-height:.98}
footer{padding-top:62px}
.floating-contact{border-radius:2px;transition:transform .2s ease,box-shadow .2s ease}
.floating-contact:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.24)}

@media(max-width:900px){
 .hero{min-height:680px}
 .hero-inner{left:22px;right:22px;bottom:max(54px,calc(38px + env(safe-area-inset-bottom)));width:auto}
 .hero h1{font-size:clamp(45px,11.8vw,61px);line-height:.99;letter-spacing:-.048em}
 .lead{margin:20px 0 23px;line-height:1.65}
 .hero-proof{margin-top:23px;gap:8px;letter-spacing:.12em}
 .manifesto{padding:80px 0 86px}
 .split-showcase .showcase-card{min-height:590px}
 .service-list,.portfolio{padding-top:84px;padding-bottom:88px}
 .trust{padding-top:84px}
 .brandline{margin-top:72px}
 .decision-strip{padding:72px 0}
 .contact{min-height:620px}
}
@media(max-width:430px){
 .site-header{height:66px}
 .hero{min-height:650px}
 .hero-photo{background-position:67% center}
 .hero-inner{bottom:max(64px,calc(48px + env(safe-area-inset-bottom)))}
 .hero h1{font-size:clamp(42px,12vw,51px);line-height:1.01}
 .kicker{font-size:8px;letter-spacing:.18em}
 .lead{font-size:13.5px}
 .hero-actions{gap:14px}
 .hero-actions .button{padding:0 17px;font-size:12px}
 .hero-proof{font-size:7px;flex-wrap:wrap}
 .hero-proof i{width:12px}
 .manifesto h2,.service-head h2,.portfolio h2,.trust h2{font-size:clamp(38px,10vw,48px);line-height:1.05}
 .manifesto-copy p{font-size:14px}
 .showcase-card{min-height:550px}
 .card-content h3{font-size:48px}
 .service-head{margin-bottom:34px}
 .row{min-height:80px}
 .row strong{font-size:16px}
 .portfolio-grid{width:calc(100% - 20px);gap:10px;grid-template-rows:390px 250px 250px}
 .project-caption{left:18px;right:18px;bottom:18px}
 .project-caption h3{font-size:27px}
 .trust-points article{padding:25px 0}
 .contact{min-height:590px}
 .contact h2{font-size:clamp(43px,12vw,54px)}
 .floating-contact{bottom:max(10px,env(safe-area-inset-bottom))}
}
@media(max-width:370px){
 .hero h1{font-size:41px}
 .lead{font-size:13px}
 .hero-proof span:last-child{width:100%;margin-top:3px}
 .hero-proof i:last-of-type{display:none}
 .card-content h3{font-size:44px}
}

/* =========================================================
   DEVELOPMENT VERSION STAMP — remove before final production
   ========================================================= */
.dev-build-stamp{
  position:fixed;
  top:82px;
  right:14px;
  z-index:99999;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:6px;
  background:rgba(177,56,39,.94);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  color:#fff;
  font-family:"DM Sans","IBM Plex Sans Thai",sans-serif;
  line-height:1;
  pointer-events:none;
  user-select:none;
  backdrop-filter:blur(8px);
}
.dev-build-stamp span{
  font-size:9px;
  font-weight:600;
  letter-spacing:.12em;
  opacity:.82;
}
.dev-build-stamp strong{
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
}
@media(max-width:900px){
  .dev-build-stamp{
    top:74px;
    right:10px;
    padding:7px 9px;
    gap:6px;
  }
  .dev-build-stamp span{font-size:8px}
  .dev-build-stamp strong{font-size:13px}
}

/* =========================================================
   v0.6.2 — Thai hero headline collision fix
   Thai tone marks / ascenders need more vertical breathing room.
   ========================================================= */
.hero h1{
  line-height:1.09;
  letter-spacing:-.038em;
}
.hero h1 span{
  display:inline-block;
}
@media(max-width:900px){
  .hero h1{
    line-height:1.10;
    letter-spacing:-.035em;
  }
}
@media(max-width:430px){
  .hero h1{
    line-height:1.11;
    letter-spacing:-.032em;
  }
}
@media(max-width:370px){
  .hero h1{
    line-height:1.12;
  }
}

/* =========================================================
   v0.6.3 — HARD FIX: Thai hero title uses separate line boxes
   ========================================================= */
.hero h1{
  line-height:1 !important;
  letter-spacing:-.032em !important;
  overflow:visible;
}
.hero h1 .hero-line{
  display:block !important;
  position:relative;
  line-height:1.18 !important;
  overflow:visible;
}
.hero h1 .hero-line-1{
  padding-bottom:.13em;
  margin-bottom:.03em;
}
.hero h1 .hero-line-2{
  color:#e4ddd2;
}
@media(max-width:900px){
  .hero h1 .hero-line{
    line-height:1.20 !important;
  }
  .hero h1 .hero-line-1{
    padding-bottom:.15em;
    margin-bottom:.04em;
  }
}
@media(max-width:430px){
  .hero h1 .hero-line{
    line-height:1.22 !important;
  }
}

/* =========================================================
   v0.7 — DEV tools + Portfolio Admin Demo bridge
   ========================================================= */
.dev-tools{
  position:fixed;
  top:82px;
  right:14px;
  z-index:99999;
  display:flex;
  align-items:center;
  gap:8px;
}
.dev-tools .dev-build-stamp{
  position:static;
  top:auto;
  right:auto;
}
.dev-admin-link{
  display:flex;
  align-items:center;
  height:34px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:6px;
  background:rgba(20,24,28,.90);
  box-shadow:0 8px 24px rgba(0,0,0,.20);
  color:#fff;
  font:600 9px/1 "DM Sans","IBM Plex Sans Thai",sans-serif;
  letter-spacing:.10em;
  text-decoration:none;
  backdrop-filter:blur(8px);
}
.dev-admin-link:hover{background:rgba(20,24,28,.98)}
.project-demo{
  outline:1px solid rgba(177,56,39,.34);
  outline-offset:-1px;
}
.project-demo .project-caption span::before{
  content:"LIVE DEMO · ";
  color:#d8a394;
}
.demo-project-media{
  background-position:center;
  background-size:cover;
  background-color:#c9c1b7;
}
@media(max-width:900px){
  .dev-tools{top:74px;right:10px;gap:6px}
  .dev-admin-link{height:32px;padding:0 9px;font-size:8px}
}
@media(max-width:560px){
  .dev-tools{align-items:flex-end;flex-direction:column}
  .dev-admin-link{display:none}
}

/* =========================================================
   v0.8 — BMPOPS REAL WORK / CLIENT PITCH
   ========================================================= */
.showcase-card.real-work-auto{
  background-image:
    linear-gradient(0deg,rgba(10,13,15,.72),rgba(10,13,15,.06) 60%),
    url("portfolio/ford-detail.jpg") !important;
  background-size:cover !important;
  background-position:center !important;
}
.portfolio-grid{
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  grid-auto-rows:240px !important;
  gap:12px !important;
}
.portfolio-grid .project{
  position:relative;
  min-height:0 !important;
  overflow:hidden;
  grid-column:span 4;
  grid-row:span 2;
}
.portfolio-grid .project-feature{
  grid-column:span 8;
  grid-row:span 3;
}
.portfolio-grid .project-wide{
  grid-column:span 8;
}
.portfolio-grid .project-media{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-size:cover !important;
  background-position:center !important;
  transform:scale(1.001);
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s ease;
}
.portfolio-grid .project::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(8,10,12,.74) 0%,rgba(8,10,12,.10) 52%,transparent 72%);
  pointer-events:none;
}
.portfolio-grid .project:hover .project-media{transform:scale(1.035)}
.portfolio-grid .project-caption{z-index:2}
.portfolio-grid .project-caption span{color:#d9cdbf}
.portfolio-grid .project-caption p{color:rgba(255,255,255,.70)}
.portfolio-grid .project-real:first-child .project-media{background-position:center 58% !important}
.portfolio-grid .project-real:nth-child(2) .project-media{background-position:center 44% !important}
.portfolio-grid .project-real:nth-child(3) .project-media{background-position:center 48% !important}
.portfolio-grid .project-real:nth-child(4) .project-media{background-position:center 48% !important}
.portfolio-grid .project-real:nth-child(5) .project-media{background-position:center 48% !important}
.portfolio-grid .project-real:nth-child(6) .project-media{background-position:center 48% !important}
@media(max-width:900px){
  .portfolio-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:300px !important;
    width:calc(100% - 32px) !important;
  }
  .portfolio-grid .project,
  .portfolio-grid .project-feature,
  .portfolio-grid .project-wide{
    grid-column:span 1 !important;
    grid-row:span 1 !important;
  }
  .portfolio-grid .project-feature{grid-column:1/-1 !important;grid-row:span 2 !important}
}
@media(max-width:560px){
  .portfolio-grid{
    grid-template-columns:1fr !important;
    grid-auto-rows:390px !important;
    width:calc(100% - 20px) !important;
    gap:10px !important;
  }
  .portfolio-grid .project,
  .portfolio-grid .project-feature,
  .portfolio-grid .project-wide{
    grid-column:1 !important;
    grid-row:span 1 !important;
  }
  .portfolio-grid .project-feature{grid-row:span 1 !important}
}