:root{--orange:#ff0000;--dark:#0d1b2e;--heading:#0d1b2e;--text:#5a6a7a;--light-bg:#f7f8fa;}
*,*::before,*::after{box-sizing:border-box;}
body{font-family:'Barlow',sans-serif;color:var(--text);margin:0;padding:0;overflow-x:hidden;}
a{text-decoration:none;}
img{max-width:100%;}

/* PAGE HERO */
.page-hero{position:relative;height:300px;background:url('https://images.unsplash.com/photo-1578575437130-527eed3abbec?w=1600&q=80') center/cover no-repeat;display:flex;align-items:center;justify-content:center;text-align:center;}
.page-hero::before{content:'';position:absolute;inset:0;background:rgba(10,25,50,.75);}
.page-hero-content{position:relative;z-index:2;}
.page-hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;color:#fff;margin:0 0 14px;font-family:'Barlow Condensed','Barlow',sans-serif;text-transform:uppercase;letter-spacing:.04em;}
.breadcrumb-wrap{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.6);}
.breadcrumb-wrap a{color:rgba(255,255,255,.6);transition:color .2s;}
.breadcrumb-wrap .current{color:var(--orange);}

/* SEC */
.sec-label{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.2em;color:var(--orange);display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.sec-label::before{content:'';display:inline-block;width:28px;height:3px;background:var(--orange);flex-shrink:0;}
.sec-heading{font-size:clamp(1.6rem,3.5vw,2.5rem);font-weight:900;color:var(--heading);line-height:1.15;margin-bottom:18px;font-family:'Barlow Condensed','Barlow',sans-serif;}

/* CASE STUDY */
.cs-page-sec{padding:90px 0;background:#fff;}

/* Filter Tabs */
.filter-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:48px;}
.filter-btn{background:none;border:1.5px solid #e0e0e0;color:var(--heading);padding:9px 22px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-radius:3px;cursor:pointer;transition:all .2s;}
.filter-btn:hover,.filter-btn.active{background:var(--orange);border-color:var(--orange);color:#fff;}

/* Portfolio Cards */
.port-card{position:relative;border-radius:4px;overflow:hidden;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.07);transition:transform .3s,box-shadow .3s;}
.port-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,.14);}
.port-card-img{position:relative;overflow:hidden;height:260px;}
.port-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.port-card:hover .port-card-img img{transform:scale(1.06);}
.port-num{position:absolute;top:16px;left:16px;background:var(--orange);color:#fff;font-size:.72rem;font-weight:800;padding:5px 12px;border-radius:2px;text-transform:uppercase;letter-spacing:.08em;}
.port-overlay{position:absolute;inset:0;background:rgba(10,25,50,0);transition:background .3s;display:flex;align-items:center;justify-content:center;}
.port-card:hover .port-overlay{background:rgba(10,25,50,.55);}
.port-overlay-link{opacity:0;transform:scale(.85);transition:all .3s;width:48px;height:48px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;}
.port-card:hover .port-overlay-link{opacity:1;transform:scale(1);}
.port-card-body{padding:20px 22px;}
.port-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.port-cat{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);}
.port-cat+.port-cat::before{content:'กค';margin-right:6px;color:var(--text);}
.port-card-body h4{font-size:1.05rem;font-weight:800;color:var(--heading);margin:0 0 12px;}
.port-more{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--orange);transition:gap .2s;}
.port-more:hover{gap:10px;color:var(--orange);}
.port-card-body h4 a{color:var(--heading);transition:color .2s;}
.port-card-body h4 a:hover{color:var(--orange);}

/* PROCESS */
.process-sec{background:var(--dark);padding:90px 0;position:relative;overflow:hidden;}
.process-sec::before{content:'';position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1540910419892-4a36d2c3266c?w=1600&q=60') center/cover;opacity:.08;}
.process-sec .sec-label{color:var(--orange);}
.process-sec .sec-heading{color:#fff;}
.process-intro{position:relative;z-index:1;}
.process-btn{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;padding:14px 28px;font-size:.82rem;font-weight:800;text-transform:uppercase;border-radius:3px;margin-top:24px;}
.process-btn:hover{background:#ff0000;color:#fff;}
.process-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:32px 28px;position:relative;transition:all .3s;z-index:1;}
.process-card:hover{background:rgba(255,255,255,.1);border-color:var(--orange);transform:translateY(-4px);}
.process-num{font-size:4rem;font-weight:900;color:rgba(255,255,255,.06);position:absolute;top:16px;right:20px;line-height:1;font-family:'Barlow Condensed',sans-serif;}
.process-num-label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--orange);margin-bottom:12px;}
.process-card h4{font-size:1.1rem;font-weight:800;color:#fff;margin-bottom:12px;}
.process-card p{font-size:.84rem;color:rgba(255,255,255,.55);line-height:1.7;margin:0;}
.process-card a{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;text-transform:uppercase;color:var(--orange);margin-top:16px;letter-spacing:.06em;}

/* PARTNERS */
.partners-sec{padding:60px 0;background:#fff;}
.partners-track{overflow:hidden;}
.partners-inner{display:flex;gap:40px;align-items:center;animation:partners-scroll 18s linear infinite;}
.partners-inner img{height:40px;width:auto;object-fit:contain;opacity:.5;filter:grayscale(100%);transition:opacity .3s,filter .3s;flex-shrink:0;}
.partners-inner img:hover{opacity:1;filter:none;}
@keyframes partners-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* TICKER */
.ticker-bar{background:var(--dark);overflow:hidden;padding:0;}
.ticker-inner{display:flex;animation:ticker 20s linear infinite;white-space:nowrap;}
.ticker-inner span{display:inline-flex;align-items:center;gap:12px;padding:14px 28px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.55);flex-shrink:0;}
.ticker-inner span i{color:var(--orange);font-size:.55rem;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* CTA */
.cta-band{background:var(--orange);padding:60px 0;}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;color:#fff;margin:0 0 8px;font-family:'Barlow Condensed',sans-serif;}
.cta-band p{color:rgba(255,255,255,.85);margin:0;font-size:.9rem;}
.btn-cta-white{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--orange);padding:14px 28px;font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-radius:3px;transition:all .2s;}
.btn-cta-white:hover{background:var(--dark);color:#fff;}



/* hidden for filter */
.port-item{transition:opacity .3s,transform .3s;}
.port-item.hidden{display:none;}