/* ============================================================
   TRIOMINE THEME — MAIN CSS  v2.0
   Light theme | Video hero | 5 sections | Slider | Footer
   ============================================================ */
:root {
  --green:      #3A9E1A;
  --green-l:    #5BBD2A;
  --green-pale: #EDF7E8;
  --green-line: rgba(58,158,26,0.22);
  --body:       #F4F4F2;
  --surface:    #FFFFFF;
  --surface2:   #F8F8F6;
  --text:       #1A1A1A;
  --text2:      #555550;
  --text3:      #999990;
  --border:     #E2E2DC;
  --dark:       #1A1A1A;
  --dark2:      #222222;
  --nav-h:      76px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { overflow:hidden; height:100%; }
body { font-family:'Barlow',sans-serif; background:var(--body); color:var(--text); overflow:hidden; height:100vh; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; }

/* ══════════════════════════════
   NAV
══════════════════════════════ */
#mainNav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h); padding:0 56px;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .4s, box-shadow .4s, backdrop-filter .4s;
}
/* Transparent on hero */
#mainNav.nav-transparent {
  background:transparent;
}
/* Solid after hero */
#mainNav.nav-solid {
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(14px);
  box-shadow:0 2px 20px rgba(0,0,0,0.07);
  border-bottom:1px solid var(--border);
}

/* Logo */
.nav-logo { display:flex; align-items:center; cursor:pointer; flex-shrink:0; }
.nav-logo img,
.nav-logo .custom-logo { height:80px; width:auto; display:block; } /* larger */
.nav-logo-text { font-family:'Barlow Condensed',sans-serif; font-size:28px; font-weight:800; letter-spacing:1px; color:#fff; }
.nav-logo-text em { font-style:normal; color:var(--green-l); }
/* solid state logo text */
#mainNav.nav-solid .nav-logo-text { color:var(--text); }

/* Nav links */
.nav-links { display:flex; gap:2px; list-style:none; align-items:center; }
.nav-links li a {
  display:block; padding:8px 16px;
  color:rgba(255,255,255,0.85); font-size:18px; font-weight:500;
  letter-spacing:.3px; border-radius:6px; cursor:pointer;
  position:relative; transition:color .2s; white-space:nowrap;
}
.nav-links li a::after {
  content:''; position:absolute; bottom:2px; left:16px; right:16px;
  height:2px; background:#fff; border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s cubic-bezier(.25,.46,.45,.94);
}
.nav-links li a:hover { color:#fff; }
.nav-links li a:hover::after,
.nav-links li a.active::after { transform:scaleX(1); }
.nav-links li a.active { color:#fff; font-weight:600; }

/* Solid state nav link colour */
#mainNav.nav-solid .nav-links li a { color:var(--text2); }
#mainNav.nav-solid .nav-links li a::after { background:var(--green); }
#mainNav.nav-solid .nav-links li a:hover { color:var(--green); }
#mainNav.nav-solid .nav-links li a.active { color:var(--green); font-weight:600; }

/* Hamburger */
.nav-hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav-hamburger span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:all .3s; }
#mainNav.nav-solid .nav-hamburger span { background:var(--text); }
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile overlay */
.mobile-menu {
  display:none; position:fixed; inset:0; z-index:999;
  background:rgba(255,255,255,0.98); backdrop-filter:blur(12px);
  flex-direction:column; align-items:center; justify-content:center;
}
.mobile-menu.open { display:flex; }
.mobile-close { position:absolute; top:24px; right:28px; font-size:24px; background:none; border:none; color:var(--text); cursor:pointer; }
.mobile-menu ul { list-style:none; text-align:center; }
.mobile-menu ul li { margin:14px 0; }
.mobile-menu ul li a { font-family:'Barlow Condensed',sans-serif; font-size:38px; font-weight:800; color:var(--text); cursor:pointer; transition:color .2s; }
.mobile-menu ul li a:hover { color:var(--green); }

/* ══════════════════════════════
   DOT NAV
══════════════════════════════ */
.dot-nav { position:fixed; right:28px; top:50%; transform:translateY(-50%); z-index:1000; display:flex; flex-direction:column; gap:14px; align-items:center; }
.dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.4); cursor:pointer; border:none; transition:all .35s cubic-bezier(.25,.46,.45,.94); position:relative; padding:0; }
.dot::after { content:attr(data-label); position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--green); white-space:nowrap; font-weight:600; font-family:'Barlow',sans-serif; background:#fff; padding:4px 10px; border-radius:4px; border:1px solid var(--green-line); box-shadow:0 2px 10px rgba(0,0,0,0.08); opacity:0; transition:opacity .2s; pointer-events:none; }
.dot:hover::after { opacity:1; }
.dot.active { background:var(--green); box-shadow:0 0 0 3px rgba(58,158,26,0.2); transform:scale(1.35); }
.dot:hover:not(.active) { background:rgba(255,255,255,0.7); }
/* Solid pages: darker dots */
body.page-solid .dot { background:var(--border); }
body.page-solid .dot.active { background:var(--green); }
body.page-solid .dot:hover:not(.active) { background:var(--text3); }

/* ══════════════════════════════
   SECTION ENGINE
══════════════════════════════ */
.sections-wrap { height:100vh; overflow:hidden; position:relative; }
.tri-section { width:100%; height:100vh; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(64px); transition:opacity .72s cubic-bezier(.25,.46,.45,.94), transform .72s cubic-bezier(.25,.46,.45,.94); pointer-events:none; overflow:hidden; }
#sec-contact.tri-section { overflow-y:scroll; overflow-x:hidden; }
/* Contact section + footer scroll together */
#sec-contact { overflow-y:auto; height:100vh; }
#sec-contact .contact-wrap { min-height:100%; }
#sec-contact .site-footer { position:relative; }
.tri-section.active { opacity:1; transform:translateY(0); pointer-events:all; z-index:2; }
.tri-section.prev   { opacity:0; transform:translateY(-64px); z-index:1; }

/* ══════════════════════════════
   SHARED HELPERS
══════════════════════════════ */
.label { display:inline-block; font-size:14px; text-transform:uppercase; color:var(--green); font-weight:700;/*margin-bottom:12px;background:var(--green-pale); padding:5px 12px; border-radius:20px; letter-spacing:4px;*/ }
.big-title { font-family:'Barlow Condensed',sans-serif; font-weight:800; line-height:.92; letter-spacing:-.01em; color:var(--text); }
.big-title em { font-style:normal; color:var(--green); }
.body-text { font-size:18px; line-height:1.8; color:#fff; font-weight:300; }
.divider { width:44px; height:3px; background:var(--green); border-radius:2px; margin:16px 0; }
.btn { display:inline-block; padding:13px 36px; background:var(--green); color:#fff; font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:600; border:none; border-radius:6px; cursor:pointer; transition:background .25s, transform .15s; font-family:'Barlow',sans-serif; }
.btn:hover { background:var(--green-l); transform:translateY(-1px); }

/* ══════════════════════════════
   S1 — HERO (Video Banner)
══════════════════════════════ */
#sec-hero { background:var(--dark); }
.hero-video-wrap { position:absolute; inset:0; overflow:hidden; }
.hero-video { width:100%; height:100%; object-fit:cover; }
.hero-video-fallback { width:100%; height:100%; background:linear-gradient(135deg, #0f2010 0%, #1a3a1a 40%, #0a1a0a 100%); }
.hero-video-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.52); }

.hero-content { position:relative; z-index:1; text-align:center; max-width:800px; padding:0 40px; }
.hero-eyebrow { font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--green-l); font-weight:700; margin-bottom:24px; display:block; }
.hero-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(80px,11vw,148px); font-weight:800; line-height:.88; color:#fff; margin-bottom:24px; }
.hero-title em { font-style:normal; /*color:var(--green-l);*/ color:#fff; display:block; }
.hero-sub { font-size:16px; line-height:1.75; color:rgba(255,255,255,0.6); margin-bottom:40px; font-weight:300; max-width:560px; margin-left:auto; margin-right:auto; }
.hero-actions { display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap; }
.btn-hero { display:inline-block; padding:15px 44px; background:var(--green); color:#fff; font-size:12px; letter-spacing:3px; text-transform:uppercase; font-weight:700; border-radius:6px; cursor:pointer; transition:background .25s, transform .15s; }
.btn-hero:hover { background:var(--green-l); transform:translateY(-1px); }
.btn-hero-outline { display:inline-block; padding:14px 44px; background:transparent; color:#fff; font-size:12px; letter-spacing:3px; text-transform:uppercase; font-weight:700; border:2px solid rgba(255,255,255,0.4); border-radius:6px; cursor:pointer; transition:all .25s; }
.btn-hero-outline:hover { border-color:#fff; background:rgba(255,255,255,0.1); }

.hero-scroll-hint { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; color:rgba(255,255,255,0.45); font-size:10px; letter-spacing:3px; text-transform:uppercase; z-index:2; }
.scroll-bar { width:1px; height:44px; background:linear-gradient(to bottom, var(--green-l), transparent); animation:triSb 1.8s ease-in-out infinite; }
@keyframes triSb { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }


/* ══════════════════════════════
   S2 — ABOUT US (new layout)
══════════════════════════════ */
#sec-about {
  background:var(--surface) url('https://triomine.dev2ezasia.com/wp-content/uploads/2026/05/TRIOMINE_MEMBER-_LOGO.svg') center center no-repeat;
  background-size:65%;
  position:relative;
}
.about-new-wrap {
  width:100%; max-width:800px;
  padding:0 60px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
  text-align:center;
}
.about-new-left {}
.about-new-title {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(40px,5vw,72px);
  font-weight:800;
  color:var(--text);
  line-height:1;
  margin-bottom:14px;
}
.about-new-title em {
  font-style:normal;
  color:var(--green);
}
.about-new-italic {
  font-size:16px;
  font-style:italic;
  color:var(--text2);
  line-height:1.7;
  font-weight:300;
}
.about-new-italic strong {
  font-weight:700;
  font-style:italic;
  color:var(--text);
}
.about-new-right {
  display:flex;
  flex-direction:column;
  gap:20px;
  text-align:center;
}
.about-new-body {
  font-size:16px;
  line-height:1.8;
  color:var(--text2);
  font-weight:300;
}
.about-new-line {
  width:56px; height:3px; background:var(--green);
  border-radius:2px; margin:16px auto 20px;
}

/* Responsive */
@media (max-width:960px) {
  .about-new-wrap {
    grid-template-columns:1fr;
    gap:32px;
    padding:80px 24px 0;
  }
}
/* ══════════════════════════════
   S3 — PORTFOLIO
══════════════════════════════ */
#sec-portfolio { background:var(--body); }
.portfolio-inner { max-width:1300px; width:100%; padding:calc(var(--nav-h) + 20px) 60px 20px; }
.p-title-big { font-size:clamp(32px,3.5vw,52px); margin-top:6px; line-height:1.1; }
.p-head { text-align:center; margin-bottom:32px; }
.p-green-line { width:56px; height:3px; background:var(--green); border-radius:2px; margin:14px auto 16px; }
.p-subtitle { font-size:18px; color:var(--text3); font-weight:300; text-align:center; }
.p-subtitle strong {font-weight:700;color:var(--text);}

.port-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.port-card { position:relative; overflow:hidden; cursor:pointer; }
.port-img-wrap { width:100%; aspect-ratio:4/5; overflow:hidden; background:var(--surface2); }
.port-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.port-card:hover .port-img-wrap img { transform:scale(1.05); }
.port-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:var(--surface3); border:2px dashed var(--border); }
.port-num { font-family:'Barlow Condensed',sans-serif; font-size:48px; font-weight:800; color:rgba(58,158,26,0.15); line-height:1; }
.port-ph-label { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--text3); font-weight:600; }
.port-card-body { padding:14px 12px 10px; background:var(--surface); }
.port-card-title { font-size:18px; font-weight:700; color:var(--text); }
/* ── TABLET + MOBILE: Portfolio horizontal swipe slider ── */
@media (max-width:1024px) {
  .portfolio-inner { padding:calc(var(--nav-h) + 20px) 0 20px; }
  .p-head { padding:0 24px; }
  .port-grid {
    display:flex !important;
    grid-template-columns:unset !important;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:0;
    scrollbar-width:none;
    padding-bottom:0;
  }
  .port-grid::-webkit-scrollbar { display:none; }
  .port-card {
    flex:0 0 340px !important;
    width:340px !important;
    scroll-snap-align:start;
    margin-right:12px;
    flex-shrink:0;
  }
  .port-card:last-child { margin-right:24px; }
  .port-card:first-child { margin-left:24px; }
  .port-img-wrap {
    aspect-ratio:3/4 !important;
    height:auto !important;
  }
  .port-img-wrap img {
    width:100%; height:100%; object-fit:cover;
  }
  .port-mobile-dots { display:flex; }
}

@media (max-width:560px) {
  .port-card {
    flex:0 0 75vw !important;
    width:75vw !important;
  }
  .port-card:first-child { margin-left:16px; }
  .port-card:last-child  { margin-right:16px; }
}

@media (max-width:380px) {
  .port-card {
    flex:0 0 85vw !important;
    width:85vw !important;
  }
}

/* ══════════════════════════════
   PORTFOLIO CARDS — hover overlay
══════════════════════════════ */
.port-card { cursor:pointer; }
.port-img-wrap { position:relative; }
.port-overlay {
  position:absolute; inset:0;
  background:rgba(58,158,26,0.85);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
}
.port-card:hover .port-overlay { opacity:1; }
.port-overlay-text {
  color:#fff; font-size:14px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
}

/* ══════════════════════════════
   PORTFOLIO MODAL — thumbnail grid
══════════════════════════════ */
.port-modal {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.port-modal.open { opacity:1; pointer-events:all; }
.port-modal-backdrop {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.8);
  cursor:pointer;
}
.port-modal-box {
  position:relative; z-index:1;
  background:#fff; border-radius:12px;
  width:92vw; max-width:1200px;
  max-height:90vh;
  display:flex; flex-direction:column;
  transform:translateY(30px);
  transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  overflow:hidden;
}
.port-modal.open .port-modal-box { transform:translateY(0); }

/* Header */
.port-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.port-modal-heading {
  font-family:'Barlow Condensed',sans-serif;
  font-size:24px; font-weight:800; color:var(--text);
}
.port-modal-close {
  background:rgba(0,0,0,0.06); border:none; border-radius:50%;
  width:36px; height:36px; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s; flex-shrink:0;
}
.port-modal-close:hover { background:rgba(0,0,0,0.15); }

/* Grid wrap — scrollable */
.port-modal-grid-wrap {
  flex:1; overflow-y:auto; padding:24px 28px;
}

/* Thumbnail grid */
.port-modal-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.port-thumb-card {
  cursor:pointer; border-radius:8px; overflow:hidden;
  background:var(--surface2);
  transition:transform .25s, box-shadow .25s;
  text-decoration:none; display:block;
}
.port-thumb-card:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 28px rgba(0,0,0,0.12);
}
.port-thumb-img {
  width:100%; aspect-ratio:4/3; overflow:hidden;
  background:var(--surface3); position:relative;
}
.port-thumb-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s;
}
.port-thumb-card:hover .port-thumb-img img { transform:scale(1.05); }
.port-thumb-img-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface3);
}
.port-thumb-img-placeholder svg { opacity:.3; }
.port-thumb-tags {
  display:flex; gap:6px; padding:10px 12px 0; flex-wrap:wrap;
}
.port-thumb-tag {
  font-size:9px; letter-spacing:1px; text-transform:uppercase;
  background:var(--green-pale); color:var(--green);
  padding:3px 8px; border-radius:4px; font-weight:600;
}
.port-thumb-title {
  font-size:14px; font-weight:700; color:var(--text);
  padding:8px 12px 14px; line-height:1.3;
}

/* Loading spinner */
.port-modal-loading {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; padding:60px 0;
  color:var(--text3); font-size:13px; letter-spacing:1px;
}
.port-modal-spinner {
  width:36px; height:36px; border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--green);
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Empty state */
.port-modal-empty {
  text-align:center; padding:60px 20px;
	font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--green-pale);
    color: var(--green);
    border-radius: 4px;
    font-weight: 600;
}

@media (max-width:768px) {
  .port-modal-grid { grid-template-columns:repeat(2,1fr); }
  .port-modal-box { width:96vw; max-height:92vh; }
  .port-modal-grid-wrap { padding:16px; }
}
@media (max-width:480px) {
  .port-modal-grid { grid-template-columns:1fr; }
}

/* ══════════════════════════════
   S4 — OUR CLIENTS (3-row ticker)
══════════════════════════════ */
#sec-clients { background:var(--surface); }
.clients-inner {
  max-width:100%; width:100%;
  padding:calc(var(--nav-h) + 4px) 0 4px;
  display:flex; flex-direction:column; align-items:center;
  gap:0;
}
.clients-header { text-align:center; margin-bottom:36px; }
.clients-main-title {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(34px,4vw,54px); font-weight:800; color:var(--text); margin-bottom:10px;
}
.clients-main-title em { font-style:normal; color:var(--green); }
.clients-green-line { width:56px; height:3px; background:var(--green); border-radius:2px; margin:0 auto; }
.clients-subtitle {
  font-size:18px;
  color:var(--text2);
  font-weight:300;
  margin-top:14px;
  text-align:center;
}

/* Each ticker row */
.ticker-row {
  width:100%; overflow:hidden;
  padding:4px 0;
  margin:0;
  mask-image:linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.ticker-row:hover .ticker-track { animation-play-state:paused; }

/* The scrolling track */
.ticker-track {
  display:flex; gap:0; width:max-content;
}
.ticker-left {
  animation:tickerLeft var(--speed, 30s) linear infinite;
}
.ticker-right {
  animation:tickerRight var(--speed, 35s) linear infinite;
}

@keyframes tickerLeft {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
@keyframes tickerRight {
  0%   { transform:translateX(-50%); }
  100% { transform:translateX(0); }
}

/* Each logo item */
.ticker-item {
  flex-shrink:0;
  width:180px; height:120px;
  display:flex; align-items:center; justify-content:center;
  padding:4px 12px;
  border:none;
  background:transparent;
  margin-right:0;
  overflow:visible;
  transition:opacity .25s;
}
.ticker-item img {
  max-height:150px; max-width:170px;
  width:auto; height:150px;
  object-fit:contain;
  transition:filter .3s, opacity .3s;
}
.ticker-item:hover {
  background:transparent;
  opacity:1;
}
.ticker-item:hover img {
  filter:grayscale(0%) opacity(1);
}
.ticker-item span {
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--border);
}

/* ══════════════════════════════
   S5 — CONTACT US
══════════════════════════════ */
#sec-contact { background:var(--surface); overflow-y:scroll; align-items:flex-start; height:100vh; display:block; }
.contact-wrap { width:100%; display:flex; flex-direction:column; padding-top:var(--nav-h); }

/* Dark "We work all over" top banner */
.contact-dark {
  background:var(--dark);
  clip-path:polygon(0 8%, 100% 0%, 100% 100%, 0% 100%);
  padding:80px 0 10px;
  width:100%;
}
.contact-dark-inner { max-width:1100px; margin:0 auto; padding:0 60px; text-align:center; }
.contact-dark-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(36px,4vw,56px); font-weight:800; color:#fff; margin-bottom:14px; }
.contact-dark-title em { font-style:normal; color:var(--green-l); }
.contact-dark-line { width:56px; height:1px; background:rgba(255,255,255,0.3); margin:0 auto 18px; }
.contact-dark-sub { font-size:18px; color:rgba(255,255,255,0.55); font-weight:300; margin-bottom:48px; }

.offices-row { display:grid; grid-template-columns:1fr 1fr; gap:0; max-width:960px; margin:0 auto; text-align:left; align-items:start; }
.office-card { display:flex; gap:20px; align-items:flex-start; padding:0 48px; }
.office-card:first-child { border-right:1px solid rgba(255,255,255,0.1); }
.office-icon { width: 80px; display:flex; align-items:flex-start; padding-top:4px; }
.office-city { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:700; color:var(--green-l); letter-spacing:1px; margin-bottom:8px; text-transform:uppercase; }
.office-addr { font-size:13px; color:rgba(255,255,255,0.55); line-height:1.75; font-weight:300; margin-top:4px; }

/* Contact form area below dark banner */
.contact-form-section { background:var(--dark); padding:0 0 56px; width:100%; }
.contact-form-inner { max-width:1100px; margin:0 auto; padding:0 60px; display:grid; grid-template-columns:1fr 1.4fr; gap:72px; align-items:flex-start; }
.contact-form-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(36px,4vw,54px); font-weight:800; color:#fff; margin-bottom:12px; margin-top:8px; }
.contact-form-title em { font-style:normal; color:#fff; }
.social-row { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.social-row a { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--text2); font-weight:600; padding:7px 14px; border:1px solid var(--border); border-radius:4px; transition:all .2s; }
.social-row a:hover { color:var(--green); border-color:var(--green-line); background:var(--green-pale); }

/* Form */
.cform { display:flex; flex-direction:column; gap:14px; }
.crow { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cfield { display:flex; flex-direction:column; gap:6px; }
.cfield label { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--text3); font-weight:600; }
.cfield input, .cfield textarea { background:var(--body); border:1px solid var(--border); padding:11px 13px; color:var(--text); font-family:'Barlow',sans-serif; font-size:14px; outline:none; transition:border-color .2s; resize:none; border-radius:6px; }
.cfield input:focus, .cfield textarea:focus { border-color:var(--green); background:#fff; }
.cfield input::placeholder, .cfield textarea::placeholder { color:var(--border); }
.form-btn { width:100%; padding:13px; font-size:12px; letter-spacing:2px; }
.form-msg { padding:10px 14px; border-radius:6px; font-size:13px; font-weight:500; }
.form-msg.success { background:var(--green-pale); color:var(--green); }
.form-msg.error   { background:#feeded; color:#c0392b; }

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
.site-footer { background:#1A1A1A; color:rgba(255,255,255,0.6); position:relative; z-index:10; }
.footer-top { max-width:1200px; margin:0 auto; padding:60px 56px 40px; display:grid; grid-template-columns:1.3fr 1.2fr 0.8fr 0.8fr; gap:48px;border-top:1px solid rgba(255,255,255,0.25); }
.footer-col {}
.footer-logo { margin-bottom:16px; }
.footer-logo img,
.footer-logo .custom-logo { height:60px; width:auto; filter:brightness(0) invert(1); }
.footer-logo-text { font-family:'Barlow Condensed',sans-serif; font-size:24px; font-weight:800; color:#fff; }
.footer-logo-text em { font-style:normal; color:var(--green-l); }
.footer-about { font-size:16px; line-height:1.75; color:rgba(255,255,255,0.55); font-weight:300; margin-bottom:20px; }
.footer-social { display:flex; gap:12px; }
.footer-social a { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.5); transition:all .25s; }
.footer-social a:hover { border-color:var(--green); color:var(--green-l); }
.footer-heading { font-size:14px; letter-spacing:3px; text-transform:uppercase; font-weight:700; color:#ffffff; margin-bottom:20px; }
.footer-contact-block p { font-size:16px; color:rgba(255,255,255,0.55); line-height:1.7; font-weight:300; }
.footer-contact-block a { color:rgba(255,255,255,0.55); transition:color .2s; }
.footer-contact-block a:hover { color:var(--green-l); }
.footer-contact-label { font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--green-l); font-weight:600; margin-bottom:5px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links li a { font-size:16px; color:rgba(255,255,255,0.55); transition:color .2s; cursor:pointer; display:flex; align-items:center; gap:6px; }
.footer-links li a::before { }
.footer-links li a:hover { color:var(--green-l); }
.footer-links li a:hover::before { }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding:20px 56px; max-width:100%; }
.footer-bottom p { font-size:14px; color:rgba(255,255,255,0.3); text-align:center; }
<!-- ══════════════════════════════════
     SITE FOOTER — 4 column layout
══════════════════════════════════ -->
<footer class="site-footer" role="contentinfo">
  <div class="footer-top">

    <!-- Col 1: About -->
    <div class="footer-col">
      <div class="footer-logo">
        <?php if (has_custom_logo()): the_custom_logo();
        else: ?><span class="footer-logo-text">TRIO<em>MINE</em></span><?php endif; ?>
      </div>
      <p class="footer-about"><?php echo esc_html(get_theme_mod('footer_about','Triomine is a full-service creative and marketing agency with offices in Singapore and Kuala Lumpur. We bring brands to life through strategy, creativity and technology.')); ?></p>
      <div class="footer-social">
        <?php if ($ig = get_theme_mod('instagram','https://www.instagram.com/triominemedia')): ?>
        <a href="<?php echo esc_url($ig); ?>" target="_blank" rel="noopener" aria-label="Instagram">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".5" fill="currentColor"/></svg>
        </a><?php endif; ?>
        <?php if ($fb = get_theme_mod('facebook','https://www.facebook.com/Triomine/')): ?>
        <a href="<?php echo esc_url($fb); ?>" target="_blank" rel="noopener" aria-label="Facebook">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
        </a><?php endif; ?>
      </div>
    </div>

    <!-- Col 2: Contact Info -->
    <div class="footer-col">
      <h4 class="footer-heading"><?php _e('Contact Info','triomine'); ?></h4>
      <div class="footer-contact-block">
        <div class="footer-contact-label"><?php _e('SINGAPORE','triomine'); ?></div>
        <p><?php echo nl2br(esc_html(get_theme_mod('sg_addr','76 Playfair Road, LHK2, #04-06 Lobby 3, Singapore 367996'))); ?></p>
        <p><strong><?php echo esc_html(get_theme_mod('sg_phone','+65 6257 3225')); ?></strong></p>
      </div>
      <div class="footer-contact-block" style="margin-top:16px;">
        <div class="footer-contact-label"><?php _e('KUALA LUMPUR','triomine'); ?></div>
        <p><?php echo nl2br(esc_html(get_theme_mod('kl_addr','C1-32-01, No.689, Jalan Cheras, Taman Midah, Cheras, KL 56000, Malaysia'))); ?></p>
      </div>
      <div class="footer-contact-block" style="margin-top:16px;">
        <div class="footer-contact-label"><?php _e('EMAIL','triomine'); ?></div>
        <p><a href="mailto:<?php echo esc_attr(get_theme_mod('sg_email','info@triomine.com')); ?>"><?php echo esc_html(get_theme_mod('sg_email','info@triomine.com')); ?></a></p>
		  <p><strong><?php echo esc_html(get_theme_mod('kl_phone','+60 12 728 1328')); ?></strong></p>
      </div>
    </div>

    <!-- Col 3: Quick Links -->
    <div class="footer-col">
      <h4 class="footer-heading"><?php _e('Quick Links','triomine'); ?></h4>
      <ul class="footer-links">
        <li><a data-goto="0"><?php _e('Home','triomine'); ?></a></li>
        <li><a data-goto="1"><?php _e('About Us','triomine'); ?></a></li>
        <li><a data-goto="2"><?php _e('Portfolio','triomine'); ?></a></li>
        <li><a data-goto="3"><?php _e('Our Clients','triomine'); ?></a></li>
        <li><a data-goto="4"><?php _e('Contact Us','triomine'); ?></a></li>
      </ul>
    </div>

    <!-- Col 4: Services -->
    <div class="footer-col">
      <h4 class="footer-heading"><?php _e('Our Services','triomine'); ?></h4>
      <ul class="footer-links">
        <li><a><?php _e('Branding &amp; Identity','triomine'); ?></a></li>
        <li><a><?php _e('Advertising &amp; PR','triomine'); ?></a></li>
        <li><a><?php _e('Digital &amp; Social','triomine'); ?></a></li>
        <li><a><?php _e('Web &amp; Mobile Apps','triomine'); ?></a></li>
      </ul>
    </div>

  </div><!-- /footer-top -->

  <div class="footer-bottom">
    <p><?php echo wp_kses_post(get_theme_mod('footer_copy','© 2026 TRIOMINE · A member of 2EZ Asia · All rights reserved')); ?></p>
  </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>


/* ══════════════════════════════
   FOOTER FORCE DARK
══════════════════════════════ */
.site-footer { background:#1A1A1A !important; }
.footer-top,
.footer-bottom { background:#1A1A1A !important; }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width:1024px) {
  .port-grid { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr 1fr; gap:36px; }
	#sec-about {background-size:unset;}
}

@media (max-width:960px) {
  #mainNav { padding:0 20px; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .dot-nav { right:12px; }
  .about-wrap { padding:80px 24px 20px; }
  .pillars-top { grid-template-columns:1fr; gap:20px; }
  .pillars-bot { grid-template-columns:1fr; width:100%; gap:20px; }
  .portfolio-inner { padding:80px 0 20px; }
  .p-head { padding:0 24px; }
  .port-grid { grid-template-columns:repeat(2,1fr); }
  .clients-inner { padding:80px 24px 10px; }
  .slider-item, .slider-placeholder { flex:0 0 calc(100%/3); }
  .stats-bar { flex-wrap:wrap; }
  .stat-box { flex:0 0 50%; border-bottom:1px solid var(--border); }
  .contact-dark { clip-path:polygon(0 4%,100% 0%,100% 100%,0 100%); padding:60px 0 10px;margin-bottom:-1px;position:relative;z-index:1; }
  .contact-dark-inner { padding:0 24px; }
  .offices-row { grid-template-columns:1fr; gap:28px; }
  .office-card:first-child { border-right:none; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:28px; }
  .office-card { padding:0 10px; }
  .contact-form-inner { grid-template-columns:1fr; gap:36px; padding:0 24px; }
  .footer-top { grid-template-columns:1fr 1fr; padding:40px 24px 28px; gap:28px; }
  .footer-bottom { padding:16px 24px; }
}

@media (max-width:560px) {
  .port-grid { grid-template-columns:1fr; }
  .slider-item, .slider-placeholder { flex:0 0 calc(100%/2); }
  .crow { grid-template-columns:1fr; }
  .stat-box { flex:0 0 100%; }
  .footer-top { grid-template-columns:1fr; }
  .nav-logo img, .nav-logo .custom-logo { height:44px; }
}