/* About Us Hero Section */
.about-us-hero {
  position: relative;
  background: #222 url('../images/orangsunduwan.png') center 30%/cover no-repeat;
  min-height: 680px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}
.about-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(10,20,40,0.82) 0%,rgba(10,20,40,0.38) 60%,rgba(10,20,40,0.08) 100%);
  z-index: 1;
}
.about-us-hero.light{background:#fff}
.about-us-hero.light .about-overlay{display:none}
.about-us-hero.light .about-content{color:var(--text)}
.about-us-hero.light .about-content h2{color:var(--text)}
.about-us-hero.light .about-content p{color:var(--text);text-shadow:none}
.about-us-hero.light .about-content .btn{background:var(--accent2);color:#fff}
.about-container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 3.5rem 2rem 0 2rem;
  min-height: 520px;
}
.about-content {
  flex: 1 1 420px;
  max-width: 480px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.2rem;
  margin-top: -3rem;
}
.about-content h2 {
  font-family: 'Bakbak One', sans-serif;
  font-size: 2.6rem;
  font-weight: 400;
  margin: 0 0 0.5rem 0;
  color: #fff;
}
.about-content p {
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 0.2rem 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.about-content .muted {
  color: #e0e6ed;
  opacity: 0.92;
}
.about-content .btn {
  margin-top: 0.8rem;
  background: #fff;
  color: var(--accent2,#1aaf5d);
  font-weight: 700;
  border-radius: 10px;
  padding: 0.7rem 1.6rem;
  box-shadow: 0 4px 18px rgba(2,6,23,.10);
  font-size: 1.08rem;
}
.about-team-photos {
  flex: 1 1 420px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
  padding-top: 0;
  height: 650px;
  perspective: 1200px;
}
.about-team-photos img {
  width: 680px;
  height: 820px;
  object-fit: contain;
  background: transparent;
  display: block;
  margin-bottom: -120px;
  position: relative;
  box-shadow: none;
  border-radius: 0;
  margin-left: -270px;
  margin-right: -270px;
  z-index: 8;
}

.about-team-photos img.ceo-parallax {
  opacity: 0;
  will-change: transform, filter;
  overflow: hidden;
  clip-path: inset(0 0 0 220px);
  backface-visibility: hidden;
}

.about-team-photos img.ceo-parallax[data-parallax-id="2"] {
  z-index: 10;
  margin-left: -210px;
  margin-right: -210px;
}


/* Fade in when visible via reveal intersection observer */
.about-team-photos img.ceo-parallax.visible {
  animation: fadeInImage 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.about-team-photos img.ceo-parallax.visible[data-parallax-id="1"] {
  animation-delay: 0.2s;
}

.about-team-photos img.ceo-parallax.visible[data-parallax-id="2"] {
  animation-delay: 0.5s;
}

.about-team-photos img.ceo-parallax.visible[data-parallax-id="3"] {
  animation-delay: 0.8s;
}

@keyframes fadeInImage {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.about-team-photos img:nth-child(2) {
  z-index: 10;
  margin-left: -210px;
  margin-right: -210px;
}

@media (max-width: 1100px) {
  .about-team-photos img { width: 320px; height: 400px; margin-left: -120px; margin-right: -120px; margin-bottom: -135px; }
  .about-team-photos img:nth-child(2) { margin-left: -90px; margin-right: -90px; }
}
@media (max-width: 700px) {
  .about-team-photos img { width: 140px; height: 200px; margin-left: -40px; margin-right: -40px; margin-bottom: -60px; }
  .about-team-photos img:nth-child(2) { margin-left: -25px; margin-right: -25px; }
}
@media (max-width: 1100px) {
  .about-team-photos img { width: 140px; height: 210px; margin-left: -28px; margin-right: -28px; }
}
@media (max-width: 700px) {
  .about-team-photos img { width: 80px; height: 120px; margin-left: -10px; margin-right: -10px; }
}
@media (max-width: 1100px) {
  .about-team-photos img { width: 140px; height: 210px; margin-left: -12px; margin-right: -12px; }
}
@media (max-width: 700px) {
  .about-team-photos img { width: 80px; height: 120px; margin-left: -4px; margin-right: -4px; }
}
.wave-divider {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: 120px;
  z-index: 3;
  pointer-events: none;
}
.wave-divider path{fill:#0f3d32}
/* Core Values follows the About wave; use same background to remove white seam */
.core-values-section{
  position: relative;
  margin-top:-60px;
  margin-left: -2rem;
  margin-right: -2rem;
  padding:calc(3rem + 60px) 2rem 200px 2rem;
  color:#fff;
  width: calc(100% + 4rem);
}

.core-values-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/backgroundbaru.jpg') center/cover no-repeat;
  background-attachment: fixed;
  z-index: 1;
  pointer-events: none;
}

.core-values-section .wrap {
  position: relative;
  z-index: 2;
}
.core-values-section h2,
.core-values-section li{color:#fff}
@media (max-width: 900px){
  .core-values-section{background-attachment:scroll} /* mobile fix: fixed sering diabaikan */
  /* All fixed-background sections — disable parallax on mobile/tablet (iOS/Android ignore fixed) */
  .services-overview,
  .products,
  .projects-showcase,
  .projects,
  .ceo-quote-section,
  .news-preview,
  .projects-hero {
    background-attachment: scroll;
  }
  .projects-section-services {
    background-attachment: scroll !important;
  }
}
@media (max-width: 1100px) {
  .about-container { flex-direction: column; align-items: stretch; padding-top: 2.2rem; min-height: 0; }
  .about-content { max-width: 100%; align-items: center; text-align: center; gap: 0.6rem; margin-top: -1.6rem; }
  .about-content h2 { margin-top: -4.5rem; }
  .about-content p:first-of-type { margin-top: 10rem; margin-bottom: 0; }
  .about-content p:nth-of-type(2) { margin-top: 0.3rem; margin-bottom: 0; }
  .about-content .btn { margin-top: 3.6rem; }
  .about-team-photos { justify-content: center; margin-top: 2.2rem; }
}
@media (max-width: 599px) {
  .about-content p { font-size: 0.95rem; }
}
@media (max-width: 700px) {
  .about-team-photos img { width: 110px; height: 180px; }
  .about-container { padding: 1.2rem 0.5rem 0.5rem 0.5rem; }
}
:root{
  --primary:#0d5a3d;
  --accent2:#2fb24a;
  --accent:#FF7A00;
  --bg:#F6F7FB;
  --text:#1F2937;
  --wrap:1100px;
}
*{box-sizing:border-box}
html{overflow-x:hidden;width:100%}
body{font-family:Inter,system-ui,Arial,sans-serif;color:var(--text);margin:0;padding:0;background:var(--bg);line-height:1.5;overflow-x:hidden;width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:2rem}
.site-header{background:transparent;position:absolute;top:0;left:0;width:100%;z-index:60;transition:background .24s ease,color .24s ease,box-shadow .24s ease}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;max-width:1400px;margin:0 auto;padding:1rem 2rem}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--accent2);z-index:70;flex-shrink:0}
.logo{width:55px;height:auto;display:block;object-fit:contain;transition:width 0.3s ease}

/* Larger logo on tablet and up */
@media(min-width:768px){
  .logo{width:90px}
}

/* Desktop logo */
@media(min-width:1024px){
  .logo{width:120px}
}

/* Extra-large on very wide screens */
@media(min-width:1400px){
  .logo{width:150px}
}
.brand-name{font-weight:700;font-family:Poppins,Inter,system-ui;color:var(--accent2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.site-header.scrolled .brand{color:var(--accent2)}
.site-header.scrolled .brand-name{color:var(--accent2)}
.nav{display:flex;align-items:center;gap:0.6rem}
.nav a{margin-left:0.8rem;text-decoration:none;color:#fff;font-weight:600;font-size:.95rem;opacity:0.95;padding:.5rem .8rem;border-radius:8px;transition:all .22s ease;position:relative;font-family:Poppins,system-ui}
.nav a:first-child{margin-left:0}
.nav a:hover:not(.cta){background:rgba(255,255,255,.15);opacity:1;transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.2)}
.nav .cta{background:#fff;color:var(--text);padding:.35rem .85rem;border-radius:10px;box-shadow:0 6px 20px rgba(2,6,23,.08);font-weight:700;font-family:Poppins,system-ui}
.nav .cta:hover{transform:translateY(-2px)}

/* Hero (electrical style) */
.hero-electrical{background:linear-gradient(180deg,rgba(11,61,145,1),rgba(7,30,65,1));color:#fff;position:relative;padding:0}
.hero-electrical .hero-inner{min-height:100vh;display:flex;flex-direction:column;gap:1.6rem;align-items:center;justify-content:center;z-index:90}
.hero-content{max-width:820px}
.hero-title{font-family:Poppins,Inter,system-ui;font-weight:800;font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.08;margin:0;color:#fff}

/* Our Services heading font */
.services-overview h2,
.services-page-title{
  font-family:'Bakbak One', sans-serif;
  font-weight:400;
}
.highlight{color:inherit;position:relative;display:inline-block;overflow:visible;transition:color .7s cubic-bezier(.2,.9,.2,1)}
.highlight.colorized{color:var(--accent2)}

/* CEO Section highlight - colorize text */
.ceo-highlight{color:#0B3D91;transition:color 0.7s cubic-bezier(.2,.9,.2,1);position:relative;display:inline-block;overflow:visible}
.ceo-highlight.animate-underline{color:#0d8c47;font-weight:700}

/* Inline SVG underline styles - path stroke will be animated to create a drawn effect */
.highlight .highlight-underline{position:absolute;left:50%;transform:translateX(-50%);width:120%;height:48px;bottom:-12px;pointer-events:none;overflow:visible}
.highlight .highlight-underline path{stroke:var(--accent2);stroke-width:6;stroke-linecap:round;fill:none;stroke-dasharray:340;stroke-dashoffset:340;opacity:0}
.ceo-highlight .highlight-underline{position:absolute;left:50%;transform:translateX(-50%);width:120%;height:48px;bottom:-12px;pointer-events:none;overflow:visible}
.ceo-highlight .highlight-underline path{stroke:var(--accent2);stroke-width:6;stroke-linecap:round;fill:none;stroke-dasharray:340;stroke-dashoffset:340;opacity:0}
.highlight.animate-underline .highlight-underline path,
.reveal.visible .highlight:not(.ceo-highlight) .highlight-underline path{stroke-dashoffset:0;opacity:1}
.ceo-highlight.animate-underline .highlight-underline path{stroke-dashoffset:0;opacity:1}
.tagline{opacity:.95;max-width:680px}
.hero-visual img{max-width:420px;width:100%;height:auto}  
.hero-ctas{margin-top:1rem}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:8px;text-decoration:none}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff}

.type-wrap{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:middle;width:0;box-sizing:content-box;transition:width .06s linear}
.type-caret{display:inline-block;width:8px;height:1.05em;background:var(--accent2);margin-left:8px;vertical-align:middle}
.hero-title{margin-top:1.2rem}

@media(min-width:900px){
  .hero-inner{flex-direction:row;align-items:center;justify-content:space-between}
  .hero h1{font-size:3rem}
}

/* Cards */
.services-overview{padding:6rem 0;background-image:url('/assets/images/backgroundutama.jpeg');background-size:cover;background-position:center;background-attachment:fixed;position:relative;min-height:750px;width:100%;max-width:none;margin:0;overflow:hidden}
.services-overview::before{display:none}
.services-overview > *{position:relative;z-index:1}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.card{background:#fff;padding:1.4rem;border-radius:8px;box-shadow:0 8px 24px rgba(15,23,42,.06);transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(15,23,42,.12)}

/* Services Overview - Hero Style Boxes */
.services-overview h2,
.services-overview .services-grid{
  position:relative;
  z-index:2;
}

.services-overview h2{color:#fff;text-align:left;margin:0;padding:0;display:block;font-family:'Bakbak One', sans-serif;font-weight:400;font-size:clamp(2.6rem,5vw,3.6rem);letter-spacing:0.2px}
.services-headline{max-width:1400px;margin:0 auto 2rem;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.btn-view-all{display:inline-flex;align-items:center;justify-content:center;padding:0.85rem 1.6rem;background:#fff;color:#0b64c8;font-weight:800;border-radius:999px;font-size:0.95rem;letter-spacing:0.3px;text-decoration:none;box-shadow:0 10px 25px rgba(2,6,23,0.18);transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease}
.btn-view-all:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(2,6,23,0.25);background:#0b64c8;color:#fff}

/* Services page */
.services-page{background:var(--bg);padding-top:120px}
.services-container{max-width:1200px;margin:0 auto;padding:0 2rem;box-sizing:border-box}
.services-hero{padding:4rem 0 3rem;background:linear-gradient(135deg,rgba(13,90,61,0.85),rgba(13,90,61,0.7)),url('/assets/images/services2.jpeg') center/cover no-repeat;color:#fff;position:relative;overflow:hidden}
.services-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.22),rgba(0,0,0,0));pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.2fr 0.9fr;gap:2.5rem;align-items:center;position:relative;z-index:1}
.hero-copy h1{font-family:'Bakbak One',sans-serif;font-size:clamp(2.4rem,4vw,3.4rem);margin:0 0 1rem}
.hero-copy .lead{font-size:1.05rem;max-width:720px;margin:0 0 1.6rem;color:rgba(255,255,255,0.9)}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.btn.primary{display:inline-flex;align-items:center;justify-content:center;padding:0.95rem 1.5rem;background:#fff;color:#0d5a3d;font-weight:800;border-radius:12px;font-size:1rem;letter-spacing:0.2px;text-decoration:none;box-shadow:0 10px 28px rgba(0,0,0,0.18);transition:transform 0.2s ease,box-shadow 0.2s ease}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,0.22)}
.btn.ghost{display:inline-flex;align-items:center;justify-content:center;padding:0.9rem 1.35rem;border:1.5px solid rgba(255,255,255,0.7);color:#fff;font-weight:700;border-radius:12px;text-decoration:none;backdrop-filter:blur(4px);transition:transform 0.2s ease,background 0.2s ease,border-color 0.2s ease}
.btn.ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,0.1);border-color:#fff}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0.8rem;margin-top:0.6rem}
.hero-stats .stat{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);border-radius:14px;padding:0.9rem 1rem;backdrop-filter:blur(6px)}
.hero-stats .value{display:block;font-size:1.6rem;font-weight:800;color:#fff}
.hero-stats .label{display:block;font-size:0.9rem;color:rgba(255,255,255,0.82)}
.hero-visual{position:relative;display:flex;justify-content:flex-end}
.hero-card{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.28);max-width:520px;width:100%;isolation:isolate;transform:translateY(0);animation:floatIn 0.9s ease forwards}
.hero-card img{width:100%;height:100%;object-fit:cover;display:block;min-height:320px}
.hero-card-overlay{position:absolute;inset:auto 0 0 0;padding:1rem 1.2rem;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 100%);color:#fff;font-weight:700}

.services-section{padding:4rem 0 2rem}
.section-head{max-width:820px;margin:0 auto 2rem;text-align:center}
.eyebrow{text-transform:uppercase;letter-spacing:0.3em;font-size:0.8rem;font-weight:800;color:var(--accent2);margin:0 0 0.5rem;display:block}
.services-section h2{margin:0 0 0.6rem;font-family:'Bakbak One',sans-serif;font-size:clamp(2rem,3vw,2.6rem);color:var(--text)}
.services-section .muted{color:rgba(31,41,55,0.78);margin:0}
.services-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;align-items:stretch}
.service-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 16px 40px rgba(15,23,42,0.12);display:flex;flex-direction:column;transform:translateY(14px);opacity:0;animation:fadeUp 0.9s ease forwards;animation-delay:var(--delay,0s)}
.service-card .image-wrap{position:relative;overflow:hidden;height:200px}
.service-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.7s ease}
.service-card:hover img{transform:scale(1.08)}
.service-body{padding:1.2rem 1.2rem 1.4rem;display:flex;flex-direction:column;gap:0.6rem}
.service-body h3{margin:0;font-size:1.1rem;color:var(--text)}
.service-body p{margin:0;color:rgba(31,41,55,0.82);line-height:1.55}
.service-card .tags{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:auto}
.service-card .tags span{padding:0.35rem 0.65rem;border-radius:999px;background:rgba(13,90,61,0.08);color:#0d5a3d;font-weight:700;font-size:0.85rem}

.need-help-bar{margin:4rem 0 0;padding:2.4rem 0;background:linear-gradient(120deg,rgba(13,90,61,0.9),rgba(13,90,61,0.75));color:#fff}
.need-help-grid{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.need-help-grid h3{margin:0 0 0.4rem;font-size:1.6rem;color:#fff}
.need-help-grid .muted{color:rgba(255,255,255,0.85);margin:0}
.need-actions{display:flex;gap:0.8rem;flex-wrap:wrap}

.float-in{will-change:transform,opacity}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.products h2{color:#fff;text-align:left;margin:0;padding:0;display:block;font-family:'Bakbak One', sans-serif;font-weight:400;font-size:clamp(2.6rem,5vw,3.6rem);letter-spacing:0.2px}
.products-headline{max-width:1400px;margin:0 auto 2rem;padding:0 2rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.vision-mission h2{color:#fff}
.news-preview h2{color:#fff}
.products > p{color:#fff}

.services-overview .wrap{max-width:none;padding:0}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-top:0;margin-bottom:0;width:100%;padding:0 2rem;position:relative;z-index:1;max-width:1400px;margin-left:auto;margin-right:auto;align-items:stretch}

.service-hero{
  position:relative;
  border-radius:16px;
  overflow:visible;
  background:transparent;
  display:block;
  min-height:620px;
  opacity:1; /* outer element stays visible for observation */
}

/* make outer container a flex column so inner wrapper can stretch to equal heights */
.service-hero{display:flex;flex-direction:column;height:100%}

.service-hero.visible:nth-child(1){transition-delay:.08s}
.service-hero.visible:nth-child(2){transition-delay:.12s}
.service-hero.visible:nth-child(3){transition-delay:.16s}
.service-hero.visible:nth-child(4){transition-delay:.20s}
.service-hero.visible:nth-child(5){transition-delay:.24s}
.service-hero.visible:nth-child(6){transition-delay:.28s}
.service-hero.visible:nth-child(7){transition-delay:.32s}
.service-hero.visible:nth-child(8){transition-delay:.36s}
.service-hero.visible:nth-child(9){transition-delay:.40s}


.service-hero-inner{
  position:relative;
  border-radius:18px;
  overflow:visible;
  background:transparent;
  box-shadow:none;
  transition:transform 1.3s cubic-bezier(.22,.9,.3,1),opacity 1.1s ease,box-shadow .4s ease,border-color .4s ease;
  transform:translateX(0) translateY(0);
  will-change:transform,opacity;
  width:100%;
}

/* ensure inner wrapper fills the outer card so all cards have consistent height */
.service-hero-inner{display:flex;flex-direction:column;height:100%}

.service-hero-image{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  overflow:visible;
  background:transparent;
  flex-shrink:0;
  display:flex;
  justify-content:center;
  align-items:center;
}

.service-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1s cubic-bezier(.18,.9,.28,1),filter 1s ease;
}

/* 3D Stacked Card Flip Effect */
.service-image-stack{
  position:relative;
  width:min(88%, 280px);
  aspect-ratio:3/4;
  overflow:visible;
  background:transparent;
  flex-shrink:0;
  perspective:1200px;
  transform-style:preserve-3d;
  cursor:default;
  margin:0 auto 4px;
  user-select:none;
  -webkit-user-select:none;
}

.stack-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.7s cubic-bezier(.34,.1,.68,.55), opacity 0.7s ease, z-index 0.1s ease;
  transform-origin:center;
  border-radius:16px;
  border:6px solid #fff;
  box-shadow:0 18px 36px rgba(2,6,23,.18), 0 2px 0 rgba(255,255,255,.45) inset;
  background:#fff;
  pointer-events:none;
  will-change:transform,opacity;
  user-select:none;
  -webkit-user-select:none;
}

.stack-image.is-front{
  pointer-events:auto;
  cursor:pointer;
}

.stack-image.is-moving{
  pointer-events:none;
  z-index:6;
}

/* Layer positions */
.stack-image.pos-front{
  z-index:3;
  transform:translateZ(0) rotateY(0deg) rotateZ(0deg) scale(1);
  opacity:1;
}

.stack-image.pos-mid{
  z-index:2;
  transform:translate(-44px,10px) translateZ(-30px) rotateY(-10deg) rotateZ(-7deg) scale(0.95);
  opacity:0.92;
}

.stack-image.pos-back{
  z-index:1;
  transform:translate(46px,16px) translateZ(-60px) rotateY(10deg) rotateZ(8deg) scale(0.9);
  opacity:0.84;
}

/* Flipped state - rotate card dramatically */
.service-image-stack.flipped{
  animation:none;
}

/* Human-like card move: lift, swing, then slide to back */
.service-image-stack.flipped .stack-image.is-moving{
  animation:cardHandMove 1.7s ease-in-out;
  transform-origin:20% 80%;
}

@keyframes cardFlip{
  0%{
    transform:rotateY(0deg) rotateX(0deg) scale(1);
  }
  50%{
    transform:rotateY(95deg) rotateX(5deg) scale(0.98);
  }
  100%{
    transform:rotateY(0deg) rotateX(0deg) scale(1);
  }
}

@keyframes cardHandMove{
  0%{
    transform:translateZ(0) rotateY(0deg) rotateZ(0deg) scale(1);
  }
  35%{
    transform:translate(-6px,-32px) translateZ(125px) rotateX(16deg) rotateY(-8deg) rotateZ(-6deg) scale(1.05);
  }
  70%{
    transform:translate(24px,-4px) translateZ(75px) rotateX(10deg) rotateY(20deg) rotateZ(6deg) scale(1.01);
  }
  100%{
    transform:translate(46px,16px) translateZ(-60px) rotateY(10deg) rotateZ(8deg) scale(0.9);
  }
}


/* Products card grid */
.products{padding:3.5rem 0 6rem;background-image:url('/assets/images/backgroundutama.jpeg');background-size:cover;background-position:center;background-attachment:fixed;position:relative;min-height:750px;width:100%;max-width:none;margin:0;overflow:hidden}
.products::before{display:none}
.products{position:relative}
.products-header{display:flex;align-items:center;justify-content:flex-end;gap:1rem;position:relative;z-index:1;margin-bottom:1.4rem}
.products-header .view-all{background:#fff;color:var(--text);padding:.6rem .9rem;border-radius:12px;box-shadow:0 8px 20px rgba(2,6,23,.06);font-weight:700}
.products > p{color:#fff;max-width:1400px;margin:0 auto 2rem;padding:0 2rem;position:relative;z-index:1;text-align:left;display:block}
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-top:1.4rem;width:100%;padding:0 2rem;position:relative;z-index:1;max-width:1400px;margin-left:auto;margin-right:auto}

.product-card{position:relative;border-radius:18px;overflow:hidden;height:520px;background-size:cover;background-position:center center;box-shadow:0 16px 48px rgba(2,6,23,.06);display:block;opacity:0;transform:translateY(20px);transition:transform 1.3s cubic-bezier(.22,.9,.3,1),opacity 1.1s ease,box-shadow .4s ease;will-change:transform,opacity}

.product-card:nth-child(odd){transform:translateX(-60px) translateY(20px)}
.product-card:nth-child(even){transform:translateX(60px) translateY(20px)}

.product-card.visible{opacity:1;transform:translateX(0) translateY(0)}

.product-card.visible:nth-child(1){transition-delay:.08s}
.product-card.visible:nth-child(2){transition-delay:.16s}
.product-card.visible:nth-child(3){transition-delay:.24s}
.product-card.visible:nth-child(4){transition-delay:.32s}
.product-card.visible:nth-child(5){transition-delay:.40s}
.product-card.visible:nth-child(6){transition-delay:.48s}
.product-card.visible:nth-child(7){transition-delay:.56s}
.product-card.visible:nth-child(8){transition-delay:.64s}
.product-card.visible:nth-child(9){transition-delay:.72s}

.product-card:hover{transform:translateY(-12px) scale(1.01);box-shadow:0 48px 96px rgba(2,6,23,.14)}
.card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.8));z-index:1}
.card-content{position:relative;z-index:2;padding:2rem;padding-top:7.5rem;display:flex;flex-direction:column;justify-content:flex-start;height:100%;color:#fff}
.product-badge{position:absolute;top:1rem;left:1rem;width:80px;height:80px;border-radius:50%;background:var(--accent2);display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 12px 28px rgba(2,6,23,.2)}
.product-badge::after{content:'';width:44px;height:22px;background:rgba(255,255,255,.95);border-radius:6px}
.product-card h3{margin:0 0 0.4rem 0;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.1}
.product-card .sub{font-weight:700;font-style:italic;margin:0;color:rgba(255,255,255,.95);margin-bottom:1.2rem}
.product-card .desc{margin-top:0;color:rgba(255,255,255,.95);font-size:0.98rem;line-height:1.4}
@media(max-width:599px){
  .products-grid{
    grid-template-columns:1fr;
    gap:1.5rem;
    padding:0 1rem;
  }
  .product-card{
    height:auto;
    min-height:300px;
    max-width:100%;
    margin:0 auto;
  }
  .card-content{
    padding:1.5rem;
    padding-top:5rem;
  }
  .product-badge{
    width:60px;
    height:60px;
    top:0.8rem;
    left:0.8rem;
  }
  .product-badge::after{
    width:32px;
    height:16px;
  }
  .product-card h3{
    font-size:1.4rem;
    margin-bottom:0.5rem;
  }
  .product-card .sub{
    font-size:0.9rem;
    margin-bottom:0.8rem;
  }
  .product-card .desc{
    font-size:0.88rem;
    line-height:1.45;
  }
  .products-header{align-items:flex-start}
  
  /* Products headline mobile */
  .products-headline{
    padding:0 1rem;
    margin-bottom:1rem;
    align-items:center;
    flex-wrap:nowrap;
  }
  .products h2{
    font-size:2rem;
    text-align:left;
    flex:1 1 auto;
    min-width:0;
  }
  .btn-view-all{
    padding:0.65rem 1.2rem;
    font-size:0.85rem;
    flex-shrink:0;
  }
  .products > p{
    padding:0 1rem;
    margin:0 auto 1.5rem;
    font-size:0.95rem;
    line-height:1.5;
  }
}

.service-hero:hover .service-hero-image img{
  transform:scale(1.04);
  filter:brightness(1.06) saturate(1.03);
}

.service-hero-content{
  padding:1.2rem 1.5rem 1.3rem;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  position:relative;
  overflow:hidden;
  background:#ffffff;
  border-radius:24px;
  border:3px solid #10f97b;
  box-shadow:0 0 20px rgba(16,249,123,0.4), 0 0 40px rgba(16,249,123,0.2), 0 24px 50px rgba(2,6,23,.08);
  margin-top:10px;
  z-index:4;
  width:100%;
  align-self:stretch;
  min-height:0;
  gap:0.4rem;
}

.service-hero-content::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle at 15% 20%, rgba(16,249,123,.06), transparent 50%), radial-gradient(circle at 85% 80%, rgba(16,249,123,.04), transparent 50%);
  opacity:1;
  transition:opacity .4s ease;
  pointer-events:none;
}

.service-hero-content::after{
  content:'';
  position:absolute;
  left:2.5rem;
  top:1rem;
  width:88px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,#10f97b,#0dd968);
  opacity:0;
  box-shadow:0 2px 8px rgba(16,249,123,0.3);
}

.service-hero:hover .service-hero-content::before{
  opacity:1;
}

.service-hero h3{
  margin:0 0 0.25rem;
  color:#0a7a42;
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-0.2px;
  line-height:1.25;
  text-align:left;
  transition:color .32s ease;
  position:relative;
  z-index:1;
}

.service-hero:hover h3{
  color:#0dd968;
  text-shadow:0 0 12px rgba(16,249,123,0.3);
}

.service-hero p{
  margin:0;
  color:#334155;
  line-height:1.55;
  font-size:1.05rem;
  letter-spacing:0.1px;
  transition:color .32s ease;
  position:relative;
  z-index:1;
  text-align:left;
}

.service-hero:hover p{
  color:var(--text);
}

.service-hero-inner:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 56px rgba(11,61,145,.14),0 0 40px rgba(47,178,74,.1);
  border-color:rgba(47,178,74,.2);
}

/* initial entry offsets for direction: slide from sides into final position
  Note: JS applies the direction classes (`from-left`/`from-right`) to the
  inner wrapper `.service-hero-inner` so we animate the inner element here.
*/
.service-hero-inner.from-left{transform:translateX(-40vw) translateY(6px); opacity:0}
.service-hero-inner.from-right{transform:translateX(40vw) translateY(6px); opacity:0}

/* when scrolled into view: slide inner wrapper to natural position and become visible */
.service-hero.visible .service-hero-inner{opacity:1;transform:translateX(0) translateY(0)}

/* brief pop used by JS to create a stronger overshoot then settle (applies to inner wrapper) */
.service-hero-inner.pop{transform:translateX(0) translateY(0) scale(1.02);transition:transform .18s cubic-bezier(.2,1.05,.3,1)}


@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(32px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width:768px){
  .services-grid{
    grid-template-columns:1fr;
    gap: 1.25rem;
    padding:0 1rem;
  }
  .service-hero{
    height:auto;
    min-height:0;
    max-width:100%;
    margin:0 auto;
  }
  .service-hero-inner{
    height:auto;
  }
  .service-hero-image{
    height:200px;
  }
  .service-hero-content{
    flex:0 0 auto;
    min-height: auto;
    padding: 1.5rem;
  }
  .service-hero h3{
    font-size:1.1rem;
    margin:0 0 0.5rem;
  }
  .service-hero p{
    font-size:0.9rem;
    line-height:1.5;
  }
  
  /* Services headline and button alignment */
  .services-headline{
    padding:0 1rem;
    margin-bottom:1.5rem;
    align-items:center;
  }
  .services-overview h2{
    font-size:2rem;
    text-align:left;
  }
  .btn-view-all{
    padding:0.65rem 1.2rem;
    font-size:0.85rem;
    flex-shrink:0;
  }
}

/* Force 3 columns on screens wide enough to fit them properly */
@media(min-width:1100px){
  .services-grid{grid-template-columns:repeat(3,1fr)}
}

/* Desktop: Reduce whitespace in service cards */
@media(min-width:1024px){
  .service-hero{
    height:auto;
  }
  .service-hero-content{
    padding:1.1rem 1.4rem 1.2rem;
  }
  .service-hero h3{
    margin:0 0 0.35rem;
    font-size:1.3rem;
  }
  .service-hero p{
    font-size:1.05rem;
    line-height:1.55;
  }
}




/* Projects Page Carousel Showcase */
.projects-showcase{padding:4rem 0 6rem;background:url('../images/backgroundbaru.jpg') center/cover;position:relative;z-index:10;overflow:visible;background-attachment:fixed;margin-top:-120px}
.projects-showcase::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.4);pointer-events:none;display:none}

.projects-showcase .projects-carousel-wrapper{display:grid;grid-template-columns:32px 520px 1fr;gap:2rem;max-width:1200px;margin:0 auto;padding:0 2rem;align-items:center;min-height:620px;position:relative;width:100%}

/* Navigation dots on the left */
.projects-showcase .projects-nav-dots{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:0;position:relative;width:32px;padding:24px 0;height:100%}
.projects-showcase .projects-nav-dots::before{content:'';position:absolute;top:24px;bottom:24px;left:50%;transform:translateX(-50%);width:2px;background:#fff;z-index:0;opacity:0.7}
.projects-showcase .projects-nav-dot{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,0.5);border:none;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-size:0;font-weight:700;color:transparent;position:relative;z-index:1;flex-shrink:0;margin:0;padding:0;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.projects-showcase .projects-nav-dot.active{width:40px;height:40px;background:#2fb24a;box-shadow:0 0 25px rgba(47,178,74,0.5);font-size:0.95rem;color:#fff}
.projects-showcase .projects-nav-dot:hover:not(.active){background:rgba(255,255,255,0.8);box-shadow:0 6px 16px rgba(0,0,0,0.2)}

/* Main project display */
.projects-showcase .projects-main{position:relative;overflow:visible;min-height:520px;display:flex;flex-direction:column;justify-content:flex-start;background:transparent;grid-column:2}
.projects-showcase #project-main-title{color:#fff;font-size:2rem;font-weight:700;margin:0 0 1rem;line-height:1.3;font-family:'Bakbak One', sans-serif}
.projects-showcase #project-main-description{color:rgba(255,255,255,0.9);font-size:1rem;line-height:1.7;margin:0 0 1.5rem;max-width:480px}
.projects-showcase #project-meta-info{display:flex;gap:1.5rem;font-size:0.9rem;color:rgba(255,255,255,0.8) !important}
.projects-showcase #project-meta-info > div{display:flex;align-items:center;gap:0.5rem}

/* Preview cards carousel (right side) */
.projects-showcase .projects-preview-carousel{position:relative;width:100%;height:560px;grid-column:3;overflow:hidden;background:transparent}
.projects-showcase .preview-cards-container{--preview-guard:200px;display:flex;flex-direction:row;gap:24px;scroll-behavior:smooth;transition:transform .5s ease-out;width:max-content;align-items:center;will-change:transform;padding:32px 48px 32px 200px;clip-path:inset(0 0 0 200px);overflow:visible;height:100%}

/* Individual preview cards */
.projects-showcase .preview-card{background-color:#000;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.3),0 2px 8px rgba(0,0,0,0.2);cursor:pointer;transition:all .5s cubic-bezier(0.4,0,0.2,1);border:1px solid rgba(255,255,255,0.1);height:420px;width:260px;flex-shrink:0;position:relative;background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important}
.projects-showcase .preview-card::before{content:'';position:absolute;right:-1px;top:0;bottom:0;width:4px;background:linear-gradient(180deg, rgba(47,178,74,0.3) 0%, rgba(47,178,74,0.6) 50%, rgba(47,178,74,0.3) 100%);border-radius:0 8px 8px 0;pointer-events:none;transition:width .3s ease;z-index:3}
.projects-showcase .preview-card.active::before{width:6px;background:linear-gradient(180deg, rgba(47,178,74,0.5) 0%, rgba(47,178,74,0.8) 50%, rgba(47,178,74,0.5) 100%);box-shadow:0 0 12px rgba(47,178,74,0.4)}
.projects-showcase .preview-card:hover{transform:translateY(-12px);box-shadow:0 16px 48px rgba(0,0,0,0.4),0 4px 16px rgba(0,0,0,0.3);border-color:rgba(255,255,255,0.2)}
.projects-showcase .preview-card.active{transform:scale(1.08);box-shadow:0 20px 60px rgba(0,0,0,0.5);z-index:5;border-color:rgba(47,178,74,0.6)}
.projects-showcase .preview-card.active:hover{transform:scale(1.08) translateY(-8px)}
.projects-showcase .preview-card .preview-card-content{padding:1.1rem;display:flex;flex-direction:column;justify-content:flex-end;position:absolute;bottom:0;left:0;right:0;z-index:2;background:linear-gradient(to top,rgba(0,0,0,0.95) 0%,rgba(0,0,0,0.5) 60%,transparent 100%);height:100%;width:100%}
.projects-showcase .preview-title{margin:0;font-size:1rem;font-weight:700;color:#fff;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:240px}
.projects-showcase .preview-location{margin:0.5rem 0 0 0;color:rgba(255,255,255,0.8);font-size:0.85rem;font-weight:600}

/* Carousel navigation buttons */
.projects-showcase .projects-carousel-btn{background:rgba(255,255,255,0.9);border:none;width:48px;height:48px;border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;color:#333;position:absolute;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,0.2);top:50%;transform:translateY(-50%)}
.projects-showcase .projects-carousel-btn:hover{background:rgba(255,255,255,1);transform:translateY(-50%) scale(1.08);box-shadow:0 6px 16px rgba(0,0,0,0.3)}
.projects-showcase .projects-carousel-btn svg{stroke:#333;stroke-width:2}
.projects-showcase .projects-prev{left:16px}
.projects-showcase .projects-next{right:16px}

@media(max-width:1200px){
  .projects-showcase .projects-carousel-wrapper{grid-template-columns:28px 400px 1fr;gap:1.5rem;padding:0 1.5rem}
  .projects-showcase #project-main-title{font-size:1.6rem}
  .projects-showcase #project-main-description{font-size:0.95rem}
}

@media(max-width:1024px){
  .projects-showcase .projects-carousel-wrapper{grid-template-columns:1fr;min-height:auto;gap:3rem}
  .projects-showcase .projects-nav-dots{flex-direction:row;justify-content:center;width:100%;height:auto;padding:0}
  .projects-showcase .projects-nav-dots::before{display:none}
  .projects-showcase .projects-main{grid-column:1;justify-content:center}
  .projects-showcase .projects-preview-carousel{grid-column:1;height:auto;min-height:500px}
}

/* Projects Featured Hero Layout - Match Screenshot Style */
.projects-showcase-featured{margin-top:-120px;position:relative;z-index:20}
.projects-hero-image{position:relative;width:100%;height:700px;background-size:cover !important;background-position:center !important;display:flex;align-items:flex-end;padding:0;background-color:#333}
.projects-hero-image::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);z-index:1}

.latest-badge{position:absolute;top:30px;left:30px;background:#ff9800;color:#fff;padding:0.7rem 1.5rem;border-radius:10px;font-weight:700;font-size:1rem;z-index:25;box-shadow:0 4px 12px rgba(255,152,0,0.4)}

.projects-hero-nav{position:absolute;width:64px;height:64px;border-radius:50%;background:#4caf50;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;top:50%;transform:translateY(-50%);z-index:25;box-shadow:0 4px 16px rgba(0,0,0,0.3)}
.projects-hero-nav.prev{left:40px}
.projects-hero-nav.next{right:40px}
.projects-hero-nav:hover{background:#4caf50;transform:translateY(-50%) scale(1.1);box-shadow:0 6px 20px rgba(76,175,80,0.5)}

.projects-hero-card{position:relative;z-index:20;background:#fff;border-radius:20px;padding:2rem 3rem;max-width:1300px;width:calc(100% - 4rem);margin:0 auto;margin-bottom:-60px;box-shadow:0 -8px 30px rgba(0,0,0,0.15)}
.project-hero-meta{display:flex;gap:2rem;margin-bottom:1.2rem;flex-wrap:wrap;align-items:center}
.project-hero-date,.project-hero-tags{display:inline-flex;align-items:center;gap:0.7rem;font-size:1rem;font-weight:600}
.project-hero-date{color:#ff9800}
.project-hero-tags{color:#0d5a3d}
.project-hero-date svg,.project-hero-tags svg{flex-shrink:0;width:20px;height:20px}
.projects-hero-card h2{font-size:2.5rem;font-weight:700;margin:0;line-height:1.25;color:#0d5a3d;font-family:'Bakbak One', sans-serif}

.projects-grid-section{padding:4rem 2rem;background:linear-gradient(180deg, #f8f9fa 0%, #fff 100%)}
.projects-grid-section .wrap{max-width:1200px}
.projects-grid-title{font-size:1.8rem;font-weight:700;margin-bottom:2rem;color:#0d5a3d;text-align:center}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:2rem}
.project-card{position:relative;width:100%;height:340px;border-radius:12px;overflow:hidden;background-size:cover !important;background-position:center !important;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 24px rgba(0,0,0,0.15);border:1px solid rgba(13,90,61,0.1)}
.project-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);z-index:1}
.project-card-overlay{position:absolute;bottom:0;left:0;right:0;padding:1.5rem;color:#fff;z-index:2;transform:translateY(0);transition:transform .3s ease}
.project-card-date{display:inline-block;background:rgba(47,178,74,0.9);padding:0.4rem 0.8rem;border-radius:6px;font-size:0.8rem;font-weight:600;margin-bottom:0.8rem}
.project-card-title{font-size:1.15rem;font-weight:700;margin:0 0 0.5rem;line-height:1.3;font-family:'Bakbak One',sans-serif}
.project-card-location{font-size:0.9rem;margin:0;color:rgba(255,255,255,0.9)}
.project-card:hover{transform:translateY(-8px);box-shadow:0 16px 40px rgba(0,0,0,0.25)}
.project-card:hover .project-card-overlay{transform:translateY(-8px)}

@media(max-width:1024px){
  .projects-showcase-featured{margin-top:-80px}
  .projects-hero-image{height:500px;padding:0 1.5rem 1.5rem}
  .projects-hero-card{padding:1.8rem 2rem}
  .projects-hero-card h2{font-size:1.8rem}
  .projects-hero-nav{width:48px;height:48px}
  .projects-hero-nav.prev{left:20px}
  .projects-hero-nav.next{right:20px}
}

@media(max-width:768px){
  .projects-showcase{padding:2rem 0 4rem}
  .projects-showcase .projects-carousel-wrapper{padding:0 1rem}
  .projects-showcase #project-main-title{font-size:1.3rem}
  .projects-showcase #project-main-description{font-size:0.9rem}
  .projects-showcase .preview-card{height:clamp(300px,89.7vw,380px);width:clamp(190px,56.4vw,240px)}
  .projects-showcase .projects-carousel-btn{width:40px;height:40px}
  .projects-showcase-featured{margin-top:-60px}
  .projects-hero-image{height:400px;padding:0 1rem 1rem}
  .projects-hero-card{padding:1.5rem;border-radius:12px}
  .projects-hero-card h2{font-size:1.4rem}
  .project-hero-meta{flex-direction:column;align-items:flex-start;gap:0.8rem}
  .latest-badge{top:15px;left:15px;padding:0.5rem 1rem;font-size:0.85rem}
  .projects-hero-nav{width:44px;height:44px}
  .projects-hero-nav.prev{left:15px}
  .projects-hero-nav.next{right:15px}
  .projects-grid{grid-template-columns:1fr;gap:1.5rem}
  .project-card{height:280px}
}
.projects-carousel{position:relative;background:transparent;border-radius:12px;padding:0;box-shadow:none;margin-top:-160px}
.projects-slides{border-radius:0;position:relative}
.project-slide{display:none;opacity:0;transition:opacity .5s ease;border-radius:12px;overflow:hidden;position:relative;height:600px;background-size:cover;background-position:center;background-repeat:no-repeat}
.project-slide.active{display:block;opacity:1;animation:fadeInSlide .5s ease}
@keyframes fadeInSlide{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.project-slide-image{display:none}
.project-badge{position:absolute;top:15px;left:15px;background:#ff7a00;color:#fff;padding:0.4rem 1rem;border-radius:6px;font-weight:700;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.5px;z-index:2}
.project-slide-info{position:absolute;bottom:0;left:0;right:0;background:#fff;padding:2rem;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.15);border-top:none;min-height:auto;z-index:2;margin:1.5rem}
.project-meta{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}
.project-date{display:flex;align-items:center;gap:0.5rem;color:#00365a;font-weight:600;font-size:0.95rem}
.project-date svg{color:#ff7a00;flex-shrink:0}
.project-tags{display:flex;align-items:flex-start;gap:0.5rem;color:#666;font-size:0.85rem}
.project-tags svg{color:#2fb24a;flex-shrink:0;margin-top:2px}
.project-tags span{flex:1}
.project-slide-title{font-size:1.7rem;font-weight:700;color:#00365a;margin:0;font-family:'Bakbak One',sans-serif}
.projects-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:#2fb24a;border:none;width:50px;height:50px;border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;z-index:10;box-shadow:0 4px 16px rgba(47,178,74,0.4)}
.projects-carousel-nav.prev{left:20px}
.projects-carousel-nav.next{right:20px}
.projects-carousel-nav:hover{background:#27a03f;transform:scale(1.1);box-shadow:0 6px 16px rgba(47,178,74,0.4)}
.projects-carousel-nav:active{transform:scale(0.95)}
.projects-carousel-indicators{display:flex;justify-content:center;gap:0.8rem;margin-top:2rem}
.projects-carousel-indicators .indicator{width:12px;height:12px;border-radius:50%;background:rgba(0,54,90,0.2);border:none;cursor:pointer;transition:all .3s ease;padding:0}
.projects-carousel-indicators .indicator.active{background:#2fb24a;width:32px;border-radius:6px}
.projects-carousel-indicators .indicator:hover{background:rgba(47,178,74,0.5)}

@media(max-width:768px){
  .projects-showcase{margin-top:-120px}
  .projects-carousel{padding:1rem}
  .projects-carousel-nav{width:44px;height:44px}
  .project-slide-image{height:400px}
  .project-slide-info{padding:1.5rem}
  .project-slide-title{font-size:1.4rem}
  .project-meta{gap:0.6rem}
}

/* Projects carousel - horizontal slide layout */
.projects{padding:0 0 5rem 0;background-image:url('../images/services1.jpg');background-size:cover;background-position:center;background-attachment:fixed;position:relative;width:100%;max-width:none;margin:0;overflow:visible;transition:background-image .6s ease-out}
.projects::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%);pointer-events:none}
.projects > *{position:relative;z-index:1}
.projects-headline{width:100vw;margin-left:calc(-50vw + 50%);margin-bottom:3rem;padding:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;text-align:center;background:rgba(0,0,0,0.4);backdrop-filter:blur(12px);position:relative}
.projects h2{font-family:'Bakbak One', sans-serif;color:#fff;text-align:center;margin:0;display:block;font-weight:400;font-size:clamp(2.6rem,5vw,3.6rem);letter-spacing:0.2px}
.projects-title-wrapper{position:relative;display:inline-block}
.projects-title-wrapper h2{position:relative;z-index:2}
.projects .btn-view-all{margin:2rem auto 0;display:block;text-align:center;width:fit-content}
.projects .wrap{max-width:none;width:100%;padding:0;margin:0}
.projects .projects-carousel-wrapper{display:grid;grid-template-columns:32px 450px 1fr;gap:6rem;max-width:none;width:100%;margin:0;padding:0 2rem 0 0;align-items:center;min-height:620px;position:relative}

/* Navigation dots on the left */
.projects .projects-nav-dots{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:0;position:relative;left:-6px;top:0;width:52px;padding:24px 0;height:100%}
.projects .projects-nav-dots::before{content:'';position:absolute;top:24px;bottom:24px;left:50%;transform:translateX(-50%);width:2px;background:#fff;z-index:0;opacity:0.7}
.projects .projects-nav-dot{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,0.5);border:none;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-size:0;font-weight:700;color:transparent;position:relative;z-index:1;flex-shrink:0;margin:0;padding:0;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.projects .projects-nav-dot.active{width:40px;height:40px;background:#2fb24a;box-shadow:0 0 25px rgba(47,178,74,0.5);font-size:0.95rem;color:#fff}
.projects .projects-nav-dot:hover:not(.active){background:rgba(255,255,255,0.8);box-shadow:0 6px 16px rgba(0,0,0,0.2)}

/* Main project display (left/center side) */
.projects .projects-main{position:relative;border-radius:0;overflow:visible;min-height:520px;display:flex;align-items:flex-start;box-shadow:none;grid-column:2;background:transparent}
.projects .projects-background{display:none}
.projects .projects-content{position:relative;z-index:2;padding:2.2rem 0 2.2rem 0;max-width:450px;width:auto;background:transparent;margin-left:-2rem}
.projects .projects-content .project-title{color:#fff;font-size:2.2rem;font-weight:700;margin:0 0 1.2rem;line-height:1.3;font-family:'Bakbak One', sans-serif}
.projects .projects-content .project-year{color:#5fbd74;font-size:0.95rem;font-weight:700;margin:0.5rem 0 0.8rem}
.projects .projects-content .project-description{color:rgba(255,255,255,0.95);font-size:1.05rem;line-height:1.7;margin:0 0 2rem;max-width:300px}
.projects .projects-content .btn{background:#fff;color:var(--primary);padding:.9rem 2rem;border-radius:8px;text-decoration:none;font-weight:700;display:inline-block;transition:all .3s ease}
.projects .projects-content .btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,255,255,0.2)}

/* Keep Home Projects layout stable when slide text changes */
@media (min-width: 769px){
  .projects .projects-main{
    min-height: var(--projects-main-lock-height, 520px);
  }

  .projects .projects-content{
    min-height: var(--projects-content-lock-height, auto);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .projects .projects-content .project-description{margin-bottom: 1.2rem;}

  .projects .projects-content .btn{
    margin-top: auto;
    align-self: flex-start;
  }
}

/* Preview cards carousel (right side) */
.projects .projects-preview-carousel{display:grid;grid-template-columns:repeat(2,52px);grid-template-rows:auto auto;align-items:start;justify-content:flex-start;justify-items:start;overflow:hidden;background:transparent;width:100%;max-width:none;position:relative;min-height:540px;padding:32px 0 32px 0;gap:1.5rem;margin-left:0;padding-left:0}
.projects .projects-preview-carousel::before{content:'';position:absolute;left:-120px;top:0;bottom:0;width:2px;background:transparent}
.projects .preview-cards-container{--preview-guard:180px;display:flex;flex-direction:row;gap:2rem;animation:slideInCards .5s ease-out;scroll-behavior:smooth;transition:transform .5s ease-out;width:max-content;align-items:stretch;will-change:transform;grid-column:1/-1;grid-row:1;padding:32px 48px 32px var(--preview-guard);min-width:0;overflow:visible;clip-path:inset(0 0 0 var(--preview-guard))}

@keyframes slideInCards {
  from{opacity:0}
  to{opacity:1}
}

/* Individual preview cards */
.projects .preview-card{background-color:#000;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.3),0 2px 8px rgba(0,0,0,0.2);cursor:pointer;transition:all .5s cubic-bezier(0.4,0,0.2,1);border:1px solid rgba(255,255,255,0.1);height:420px;position:relative;width:260px;flex-shrink:0;opacity:1;background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important}
.projects .preview-card::before{display:none;content:'';position:absolute;right:-1px;top:0;bottom:0;width:4px;background:linear-gradient(180deg, rgba(47,178,74,0.3) 0%, rgba(47,178,74,0.6) 50%, rgba(47,178,74,0.3) 100%);border-radius:0 8px 8px 0;pointer-events:none;transition:width .3s ease;z-index:3}
.projects .preview-card.active::before{width:6px;background:linear-gradient(180deg, rgba(47,178,74,0.5) 0%, rgba(47,178,74,0.8) 50%, rgba(47,178,74,0.5) 100%);box-shadow:0 0 12px rgba(47,178,74,0.4)}
.projects .preview-card.fade-out{opacity:1 !important;pointer-events:auto;transform:none !important;visibility:visible}
.projects .preview-card:hover{transform:translateY(-12px);box-shadow:0 16px 48px rgba(0,0,0,0.4),0 4px 16px rgba(0,0,0,0.3);border-color:rgba(255,255,255,0.2)}
.projects .preview-card.active{transform:scale(1.08);box-shadow:0 20px 60px rgba(0,0,0,0.5);z-index:5;border-color:rgba(47,178,74,0.6)}
.projects .preview-card.active:hover{transform:scale(1.08) translateY(-8px)}
.projects .preview-card .preview-card-content{padding:1.1rem;display:flex;flex-direction:column;justify-content:flex-end;position:absolute;bottom:0;left:0;right:0;z-index:2;background:linear-gradient(to top,rgba(0,0,0,0.95) 0%,rgba(0,0,0,0.5) 60%,transparent 100%)}
.projects .preview-card .preview-title{margin:0 0 .4rem 0;font-size:0.95rem;font-weight:700;color:#fff;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.projects .preview-card .preview-location{margin:0;color:rgba(255,255,255,0.9);font-size:0.85rem;font-weight:600}
.projects .preview-card .preview-location:first-of-type{color:#5fbd74;margin-top:0.3rem;font-size:0.8rem}

/* Carousel navigation buttons */
.projects .carousel-nav-btn{background:rgba(255,255,255,0.95);border:none;width:42px;height:42px;border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;color:#333;position:relative;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,0.2);margin:0 0.5rem;grid-row:2}
.projects .carousel-nav-btn:hover{background:rgba(255,255,255,1);transform:scale(1.08);box-shadow:0 6px 16px rgba(0,0,0,0.3)}
.projects .carousel-nav-btn.prev{grid-column:1}
.projects .carousel-nav-btn.next{grid-column:2}




@media(max-width:1200px){
  .projects .projects-carousel-wrapper{grid-template-columns:50px 1fr 300px;gap:2rem}
  .projects .projects-content{padding:2.5rem}
}

@media(max-width:1100px){
  .projects .project-preview{display:none}
  .projects .projects-container{flex-direction:column}
}
@media(max-width:1100px){
  .projects .project-slide-image{height:280px}
  .projects .project-slide-content{padding:2.5rem}
  .projects .projects-carousel-wrapper{padding:2rem 2rem}
  .projects .projects-nav-prev{left:2rem}
  .projects .projects-nav-next{right:2rem}
}
@media(max-width:768px){
  /* Hide navigation dots on mobile */
  .projects .projects-nav-dots{display:none}
  
  /* Mobile layout: stack vertically */
  .projects .projects-carousel-wrapper{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    gap:2rem;
    padding:0 1rem;
    min-height:auto;
  }
  
  /* Main content at top - full width */
  .projects .projects-main{
    grid-column:1;
    grid-row:1;
    width:100%;
    max-width:100%;
    min-height:auto;
  }
  
  .projects .projects-content{
    margin-left:0;
    padding:1.5rem 0;
    max-width:100%;
  }
  
  .projects .projects-content .project-title{
    font-size:1.8rem;
  }
  
  .projects .projects-content .project-description{
    font-size:0.95rem;
    max-width:100%;
    margin-bottom:1.5rem;
  }
  
  /* Preview cards at bottom - smaller */
  .projects .projects-preview-carousel{
    grid-column:1;
    grid-row:2;
    width:100%;
    min-height:auto;
    padding:2rem 0;
    gap:2rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    align-items:center;
    justify-items:center;
  }
  
  .projects .preview-cards-container{
    grid-column:1 / -1;
    grid-row:1;
    --preview-guard:0;
    gap:1rem;
    padding:0 1rem;
    clip-path:none;
    width:100%;
  }
  
  .projects .preview-card{
    width:clamp(170px,51.3vw,220px);
    height:clamp(240px,71.8vw,310px);
  }
  
  .projects .preview-card .preview-card-content{
    padding:0.8rem;
  }
  
  .projects .preview-card .preview-title{
    font-size:0.85rem;
  }
  
  .projects .preview-card .preview-location{
    font-size:0.75rem;
  }
  
  /* Navigation buttons - side by side and centered below cards */
  .projects .carousel-nav-btn{
    width:52px;
    height:52px;
    position:static;
    margin:0 0.8rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    grid-row:2;
  }
  
  .projects .carousel-nav-btn.prev,
  .projects .carousel-nav-btn.next{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .projects .carousel-nav-btn.prev{
    grid-column:1;
  }

  .projects .carousel-nav-btn.next{
    grid-column:2;
  }
  
  /* Make SVG icons larger on mobile */
  .projects .carousel-nav-btn svg{
    width:32px;
    height:32px;
    stroke-width:2;
  }

  /* Clients - mobile layout only */
  .clients{
    padding:2rem 0;
    background-attachment:scroll;
  }

  .clients .wrap{
    margin-bottom:1rem;
  }

  .clients h2{
    font-size:2rem;
    text-align:center;
  }

  .clients-carousel{
    display:grid;
    grid-template-columns:auto auto;
    grid-template-rows:auto auto;
    gap:1rem;
    padding:0 1rem;
    justify-content:center;
    align-items:center;
  }

  .clients-container{
    grid-column:1 / -1;
    grid-row:1;
    width:160px;
    max-width:160px;
    min-width:160px;
    margin:0 auto;
  }

  .carousel-nav{
    width:52px;
    height:52px;
    background:rgba(255,255,255,0.95);
    border:none;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
  }

  .carousel-nav svg{
    width:36px !important;
    height:36px !important;
    stroke-width:2.5;
  }

  .carousel-prev{
    grid-column:1;
    grid-row:2;
  }

  .carousel-next{
    grid-column:2;
    grid-row:2;
  }

  .clients-grid{
    gap:1.5rem;
  }

  .clients-grid img{
    width:160px !important;
    height:160px !important;
    opacity:0.35;
    filter:grayscale(1);
    transition:opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
  }

  .clients-grid img.is-active{
    opacity:1;
    filter:grayscale(0);
    transform:scale(1.08);
  }

  .carousel-dots{
    display:none !important;
  }
}
.align-right{text-align:right}

/* Clients */
.clients{padding:1rem 0 2.4rem 0;background-image:url('/assets/images/background client.jpg');background-size:cover;background-position:center;background-attachment:fixed;position:relative}
.clients::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.4),rgba(255,255,255,0.35));pointer-events:none}
.clients .wrap{display:flex;align-items:center;justify-content:center;margin-bottom:1.6rem;position:relative;z-index:1}
.clients h2{font-family:'Bakbak One', sans-serif;font-weight:400;font-size:clamp(2.6rem,5vw,3.6rem);color:#0B3D91;margin:0}
.clients-carousel{display:flex;align-items:center;justify-content:center;width:100%;padding:0 1.5rem;gap:2rem;position:relative;z-index:1}
.carousel-nav{background:#f0f0f0;border:none;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#333;transition:all 0.3s ease;flex-shrink:0;font-size:1.2rem;font-weight:bold}
.carousel-nav:hover{background:#e0e0e0;color:#000}
.carousel-nav:active{transform:scale(0.95)}

/* Mobile carousel buttons - more visible */
@media(max-width:1023px){
  .carousel-nav{
    width:52px;
    height:52px;
    background:#0B3D91;
    color:#fff;
    font-size:1.5rem;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
  }
  
  .carousel-nav:hover{
    background:#0d5a3d;
    transform:scale(1.05);
  }
  
  .carousel-nav:active{
    transform:scale(0.95);
  }
  
  .clients-carousel{
    padding:0 1rem;
    gap:1rem;
  }
}
.clients-container{position:relative;overflow:hidden;flex:0 0 auto;width:180px;max-width:180px;min-width:180px;margin:0 auto;user-select:none;z-index:1}
.clients-grid{display:flex;gap:3rem;align-items:center;animation:none;animation-play-state:running;overflow:visible;justify-content:flex-start;will-change:transform;user-select:none;transition:transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.clients-grid img{width:180px;height:180px;border-radius:0;object-fit:contain;filter:grayscale(.02);opacity:.85;flex-shrink:0;user-select:none;pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none}
.clients-grid img:hover{opacity:1;filter:grayscale(0)}
.clients-grid img:nth-child(5n+1),
.clients-grid img:nth-child(5n+2){width:180px;height:180px}
.carousel-dots{display:flex;justify-content:center;gap:0.8rem;margin-top:1.25rem}
.carousel-dots .dot{width:12px;height:12px;border-radius:50%;border:none;background:#d9d9d9;cursor:pointer;transition:all 0.22s ease;box-shadow:0 1px 2px rgba(0,0,0,0.06)}
.carousel-dots .dot:focus{outline:none;box-shadow:0 0 0 4px rgba(51,51,51,0.06)}
.carousel-dots .dot.active{background:#222;width:14px;height:14px;box-shadow:0 2px 6px rgba(0,0,0,0.08)}
.carousel-dots .dot:hover{background:#bfbfbf}

@media (min-width: 769px){
  .clients-container{
    width: 636px;
    max-width: 636px;
    min-width: 636px;
  }
}

/* Products */
.product{background:#fff;padding:1rem;border-radius:8px;box-shadow:0 6px 18px rgba(2,6,23,0.04);text-align:center}
.product img{max-width:80px;margin:0 auto 0.6rem;display:block}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 320px;gap:1.6rem;align-items:center;margin-top:1rem}
.about-image img{width:100%;border-radius:8px;object-fit:cover}
.contact-line{display:flex;align-items:flex-start;gap:0.75rem;margin:0.5rem 0 0.75rem 0;color:#fff}
.contact-line .contact-text{display:inline;color:#fff;line-height:1.5;white-space:normal}
.contact-line .contact-text a{color:#fff;text-decoration:underline;text-underline-offset:3px;transition:opacity .2s}
.contact-line .contact-text a:hover,.contact-line .contact-text a:focus{opacity:.75}
/* Prevent wrapping for phone and email */
.contact-line.no-wrap .contact-text{white-space:nowrap}
.contact-line a{color:#2fb24a;font-weight:700;text-decoration:none}
.contact-line a:hover{text-decoration:underline}
.contact-icon{width:46px;height:46px;border:2px solid rgba(255,255,255,0.6);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#2fb24a;background:rgba(255,255,255,0.06);box-shadow:0 6px 16px rgba(0,0,0,0.15);transition:transform .2s ease,box-shadow .2s ease}
.contact-icon svg{display:block}
.contact-line:hover .contact-icon{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,0.2)}

/* Vision & Mission */
.vision-mission{padding:10rem 0 6rem 0;background-color:#0d2b1a;background-image:url('/assets/images/backgroundutama.jpeg');background-size:cover;background-position:center;background-attachment:fixed;position:relative}.vision-mission::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.05) 100%);pointer-events:none}

.vision-mission{position:relative}
.vision-mission-intro, .vision-mission-grid{position:relative;z-index:1}
.wrap-full{max-width:100%;padding:0 1.5rem}
.vision-mission-intro{text-align:center;margin-bottom:3.2rem;padding:0 2rem}
.vision-mission-intro h2{font-family:'Bakbak One', sans-serif;font-size:2.6rem;font-weight:400;margin:0 0 0.8rem;color:#fff;letter-spacing:-0.5px}
.section-desc{font-size:1.1rem;color:#fff;margin:0;opacity:0.9}
.vision-mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;position:relative;max-width:1400px;margin:0 auto}
.vision-mission-card{background:#fff;border-radius:0;overflow:hidden;box-shadow:-16px 0 32px rgba(2,6,23,0.08),0 12px 32px rgba(2,6,23,0.12);border-left:6px solid var(--accent2,#1aaf5d);position:relative;padding:0;display:flex;flex-direction:column}
.vision-mission-card:first-child{border-radius:16px 0 0 16px}
.vision-mission-card:last-child{border-radius:0 16px 16px 0;box-shadow:16px 0 32px rgba(2,6,23,0.08),0 12px 32px rgba(2,6,23,0.12)}
.vision-mission-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(47,178,74,0.02) 0%,transparent 100%);pointer-events:none}
.vision-mission-card:hover{transform:translateY(-8px);box-shadow:-16px 8px 40px rgba(2,6,23,0.12),0 20px 48px rgba(2,6,23,0.16)}
.vision-mission-card:last-child:hover{box-shadow:16px 8px 40px rgba(2,6,23,0.12),0 20px 48px rgba(2,6,23,0.16)}

/* Slide in from sides - entire card animates - SLOWER */
.vision-mission-card.from-left{transform:translateX(-40vw);opacity:0}
.vision-mission-card.from-right{transform:translateX(40vw);opacity:0}
.vision-mission-card.reveal.visible{opacity:1;transform:translateX(0) translateY(0);transition:transform 1.4s cubic-bezier(.2,.9,.2,1),opacity 1.4s ease}

.vision-card.reveal.visible{transition-delay:.15s}
.mission-card.reveal.visible{transition-delay:.35s}

/* Connector lines from Vision/Mission to CEO box */
.vm-connector-wrap{position:relative;height:0;margin:-90px 0 -40px 0;z-index:2;pointer-events:none;overflow:visible}
.vm-connector{position:absolute;left:0;right:0;top:0;width:100%;height:140px;filter:drop-shadow(0 6px 14px rgba(0,0,0,0.22))}
.vm-connector path{stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2s ease-out}

/* Animate lines when visible - left and right first, then center */
.vm-connector-wrap.visible .vm-line-left{stroke-dashoffset:0}
.vm-connector-wrap.visible .vm-line-right{stroke-dashoffset:0}
.vm-connector-wrap.visible .vm-line-center{stroke-dashoffset:0;transition-delay:1.5s}

/* Inner wrapper - just layout, no transform */
.vision-mission-inner{padding:2.8rem 2.6rem;display:flex;flex-direction:column;height:100%;position:relative;z-index:1}

.vision-mission-icon{width:60px;height:60px;background:linear-gradient(135deg,rgba(47,178,74,0.15),rgba(47,178,74,0.08));border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--accent2,#1aaf5d);margin-bottom:1.2rem;position:relative;z-index:1}
.vision-mission-icon svg{width:32px;height:32px;stroke:var(--accent2,#1aaf5d)}
.vision-mission-header{margin-bottom:1.2rem;position:relative;z-index:1}
.vision-mission-title{margin:0;font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:600;color:var(--accent2,#1aaf5d);letter-spacing:-0.5px;font-style:italic}
.vision-mission-body{flex:1;display:flex;flex-direction:column;position:relative;z-index:1}
.vision-mission-body p{font-size:1.05rem;line-height:1.75;color:var(--text);margin:0 0 1.8rem}
.vision-mission-body p:last-of-type{margin-bottom:0}
/* Initially hide text that will animate in */
.vision-mission-body .reveal-text-stagger-1,
.vision-mission-body .reveal-text-stagger-2{opacity:0 !important}
/* After animation, show it */
.vision-card.reveal.visible .reveal-text-stagger-1,
.mission-card.reveal.visible .reveal-text-stagger-2{opacity:0.92 !important}
.vision-mission-image-placeholder{width:100%;height:460px;background:linear-gradient(135deg,rgba(47,178,74,0.12) 0%,rgba(47,178,74,0.06) 50%,transparent 100%),linear-gradient(to bottom,rgba(47,178,74,0.04),rgba(47,178,74,0.02));border-radius:12px;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:0.9rem;margin-top:auto;border:1px solid rgba(47,178,74,0.2);position:relative;overflow:hidden}
.vision-mission-image-placeholder img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.vision-mission-image-placeholder::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(47,178,74,0.08),transparent 50%);pointer-events:none}

/* Text animations - handled by JavaScript */
.reveal-text-stagger-1,.reveal-text-stagger-2,.ceo-typing-text{opacity:0 !important;display:block;min-height:1.5em}

/* Vision/Mission title animation - appears immediately with box slide */
.vision-mission-title{opacity:0;position:relative;display:block}
.vision-card.reveal.visible .vision-mission-title{animation:smoothTitleReveal .5s cubic-bezier(.25,.46,.45,.94) forwards;animation-delay:0s}
.mission-card.reveal.visible .vision-mission-title{animation:smoothTitleReveal .5s cubic-bezier(.25,.46,.45,.94) forwards;animation-delay:0s}

@keyframes smoothTitleReveal{
  0%{opacity:0;transform:translateX(-8px)}
  100%{opacity:1;transform:translateX(0)}
}

@keyframes underlineDrawCTA{
  0%{stroke-dashoffset:300}
  100%{stroke-dashoffset:0}
}

@media(max-width:900px){
  .vision-mission{padding:4.5rem 0;background-attachment:scroll}
  .vision-mission-intro h2{font-size:2rem}
  .wrap-full{padding:0 1rem}
  .vision-mission-grid{grid-template-columns:1fr;gap:1.8rem}
  .vision-mission-card{border-radius:16px}
  .vision-mission-card:first-child{border-radius:16px}
  .vision-mission-card:last-child{border-radius:16px}
  .vision-mission-card:first-child, .vision-mission-card:last-child{box-shadow:0 12px 32px rgba(2,6,23,0.12)}
  .vision-mission-card:hover,.vision-mission-card:last-child:hover{box-shadow:0 20px 48px rgba(2,6,23,0.16)}
  .vision-mission-inner{padding:2rem 1.8rem}
  .vision-mission-body p{margin:0 0 1rem}
  .vision-mission-image-placeholder{height:280px;margin-top:0.5rem}
  .vision-mission-title{font-size:1.6rem}
}

/* CEO Quote Section */
.ceo-quote-section{padding:7rem 0;background-image:url('/assets/images/backgroundutama.jpeg');background-size:cover;background-position:center;background-attachment:fixed;position:relative}.ceo-quote-section::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.05) 100%);pointer-events:none}

.ceo-quote-section{position:relative}
.ceo-quote-section .wrap{position:relative;z-index:1}
.ceo-quote-container{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;background:#fff;border-radius:20px;padding:4rem;border:3px solid #000;box-shadow:0 20px 60px rgba(2,6,23,0.12);position:relative;overflow:visible;min-height:450px;gap:2rem}
.ceo-quote-container::before{content:'';position:absolute;inset:0;background:transparent;border-radius:20px;pointer-events:none}
.ceo-quote-container:hover{box-shadow:0 30px 80px rgba(2,6,23,0.16);transform:translateY(-6px);transition:all .4s cubic-bezier(.2,.9,.2,1)}

.ceo-logo-top-left{position:absolute;top:-30px;left:0;width:70px;height:auto;z-index:3}
.ceo-logo{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.08))}

.ceo-quote-center{grid-column:1 / 3;position:relative;z-index:2;text-align:left;max-width:none;margin-left:0;padding:0;height:auto;display:flex;flex-direction:column;justify-content:flex-start;gap:1.5rem}
.ceo-section-title{font-size:1.8rem;font-weight:700;color:var(--primary,#0B3D91);margin:0 0 1.5rem;font-family:Poppins,system-ui;line-height:1.3;text-align:left}
.ceo-quote-text{margin:0;font-size:1.35rem;font-style:italic;line-height:1.9;color:#003366;font-weight:600;text-align:left;flex-grow:0}
.ceo-quote-text p{margin:0;color:#0d8c47;text-align:left}

.ceo-typing-text{display:block;min-height:8em;color:#0d8c47 !important;opacity:1 !important;word-wrap:break-word;font-weight:600;white-space:pre-wrap}

@keyframes fadeInQuote{
  0%{opacity:0;transform:translateY(12px)}
  100%{opacity:1;transform:translateY(0)}
}

.ceo-info-bottom-right{position:relative;bottom:0;right:0;display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center;z-index:3;grid-column:3}
.ceo-image-wrapper{width:160px;height:160px;border-radius:12px;overflow:hidden;box-shadow:0 12px 32px rgba(2,6,23,0.16);border:3px solid #000;background:#ff8c00}
.ceo-image{width:100%;height:100%;object-fit:cover;display:block;object-position:center 35%}

.ceo-info{display:flex;flex-direction:column;gap:0.3rem}
.ceo-name{margin:0;font-size:1.3rem;font-weight:700;color:var(--text);font-family:Poppins,system-ui}
.ceo-title{margin:0;font-size:0.95rem;color:#6b7280;font-weight:500}

/* Slide in from bottom animation */
.ceo-quote-container.from-bottom{transform:translateY(40px);opacity:0}
.ceo-quote-container.reveal.visible{opacity:1;transform:translateY(0);transition:transform 1s cubic-bezier(.2,.9,.2,1),opacity 1s ease}

@media(max-width:900px){
  .ceo-quote-section{padding:4rem 0}
  .ceo-quote-container{grid-template-columns:1fr;gap:2.5rem;padding:2rem;border-radius:16px;min-height:auto}
  .ceo-logo-top-left{position:relative;top:0;left:0;width:90px;margin-bottom:1rem}
  .ceo-quote-center{grid-column:1;padding-left:0;padding-top:0}
  .ceo-section-title{font-size:1.5rem}
  .ceo-quote-text{font-size:1.15rem}
  .ceo-info-bottom-right{position:relative;bottom:0;right:0;width:100%;grid-column:1}
  .ceo-image-wrapper{width:150px;height:150px}
}



/* Systems Section */
.systems-section{padding:8rem 0;background:url('/assets/images/services4.jpeg') center center/cover no-repeat;position:relative}
.systems-section::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,61,145,.7) 0%,rgba(47,178,74,.5) 100%);z-index:1}
.systems-content-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;max-width:1400px;margin:0 auto;padding:0 2rem;position:relative;z-index:2}
.systems-left{flex:1;position:relative;z-index:3}
.systems-title{font-family:'Bakbak One', sans-serif;font-size:2.2rem;font-weight:400;color:var(--accent);margin:0 0 0.5rem 0}
.systems-subtitle{font-size:1.2rem;color:#fff;margin:0 0 2rem 0;opacity:0.95}
.systems-cert-box{background:#fff;border-radius:20px;padding:2.5rem;box-shadow:0 20px 60px rgba(2,6,23,.2);border:2px solid var(--accent)}
.systems-list{display:flex;flex-direction:column;gap:1.8rem}
.iso-item{display:flex;gap:1.2rem;align-items:flex-start}
.iso-dash{color:var(--accent);font-size:1.8rem;font-weight:700;flex-shrink:0;margin-top:0.2rem}
.iso-text h3{margin:0 0 0.8rem 0;color:var(--primary);font-size:1.2rem;font-weight:700}
.iso-text p{margin:0;color:#475569;font-size:0.95rem;line-height:1.7}
.systems-right{display:flex;align-items:center;justify-content:center;position:relative;z-index:4;margin-left:-380px;margin-top:-90px}
.iso-badge{max-width:320px;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 8px 20px rgba(2,6,23,.2));border:3px solid var(--accent);border-radius:16px;padding:12px;background:#fff}
@media(max-width:1000px){
  .systems-content-wrapper{grid-template-columns:1fr;gap:2rem;padding:0 1.5rem}
  .systems-right{justify-content:center;margin-top:2rem;margin-left:0}
  .iso-badge{max-width:250px}
}
@media(max-width:600px){
  .systems-section{padding:3rem 0}
  .systems-title{font-size:1.8rem}
  .systems-subtitle{font-size:1rem;margin-bottom:1.5rem}
  .systems-cert-box{padding:1.8rem;border-radius:16px;margin-bottom:2rem}
  .systems-right{margin-top:0;margin-left:0}
  .iso-badge{max-width:180px;display:block;margin:0 auto}
  .iso-item{gap:0.8rem}
  .iso-text h3{font-size:1.1rem}
  .iso-text p{font-size:0.9rem;line-height:1.6}
}

/* Company Description Section */
.company-description {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
  position: relative;
  z-index: 5;
  margin-top: 0;
}

.company-headline {
  font-family: 'Poppins', sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #06264a;
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

.company-subheadline {
  font-size: 1.8rem;
  font-weight: 600;
  color: #e65100;
  margin: 0 0 2rem 0;
}

.company-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #334155;
  margin: 0 0 2.5rem 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.btn-company-cta {
  display: inline-block;
  background: #ff7a00;
  color: #fff;
  padding: 1rem 3rem;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3);
}

.btn-company-cta:hover {
  background: #e66d00;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 122, 0, 0.4);
}

/* Meet the Teams Section */
.meet-teams-section {
  position: relative;
  background: url('../images/backgroundbaru.jpg') center/cover no-repeat;
  padding: 200px 2rem 180px 2rem;
  z-index: 9;
}

.meet-teams-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.meet-teams-title {
  font-family: 'Poppins', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  margin: 0 0 60px 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.2);
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  width: 100%;
}

.team-member {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  min-height: 240px;
  border: 3px solid #1a1a1a;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.team-member::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 24px;
  padding: 3px;
  background: linear-gradient(135deg, #ff9800, #0b3d91, #76c043, #2196F3);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  animation: borderRotate 3s linear infinite;
  z-index: -1;
  transition: opacity 0.3s ease;
}

@keyframes borderRotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.team-member:hover::before {
  opacity: 1;
}

.team-member:hover {
  box-shadow: 0 20px 60px rgba(11, 61, 145, 0.3), 0 0 40px rgba(11, 61, 145, 0.1);
  border-color: transparent;
}

.team-photo-wrapper {
  position: relative;
  width: 450px;
  height: 260px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  overflow: hidden;
  z-index: 2;
  background: #ffffff;
  border-right: 2px solid #1a1a1a;
}

.team-photo-wrapper.orange-bg {
  background: linear-gradient(135deg, #ff9800 0%, #ff6f00 100%) !important;
  transition: all 0.4s ease;
}

.team-member:hover .team-photo-wrapper.orange-bg {
  background: linear-gradient(135deg, #ffa726 0%, #ff8a00 100%) !important;
}

.team-photo-wrapper.blue-bg {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%) !important;
  transition: all 0.4s ease;
}

.team-member:hover .team-photo-wrapper.blue-bg {
  background: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%) !important;
}

.team-photo-wrapper.green-bg {
  background: linear-gradient(135deg, #76c043 0%, #5ea834 100%) !important;
  transition: all 0.4s ease;
}

.team-member:hover .team-photo-wrapper.green-bg {
  background: linear-gradient(135deg, #8bc34a 0%, #689f38 100%) !important;
}

.team-photo-wrapper.darkblue-bg {
  background: linear-gradient(135deg, #1e3a5f 0%, #0d2847 100%) !important;
  transition: all 0.4s ease;
}

.team-member:hover .team-photo-wrapper.darkblue-bg {
  background: linear-gradient(135deg, #2c5282 0%, #1a365d 100%) !important;
}

.team-photo-wrapper::before {
  content: none;
}

.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 75%;
  display: block;
  position: relative;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-member:hover .team-photo {
  transform: scale(1.05);
}

.team-info {
  padding: 50px 50px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.team-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, #0b3d91 0%, #1a5fbf 50%, #0b3d91 100%);
  background-size: 100% 200%;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: gradientFlow 3s ease infinite;
}

@keyframes gradientFlow {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 0% 100%; }
}

.team-member:hover .team-info::before {
  opacity: 1;
  box-shadow: 0 0 20px rgba(11, 61, 145, 0.5);
}

.team-info::after {
  content: '';
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(11, 61, 145, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  transition: all 0.4s ease;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-10px, -10px); }
}

.team-member:hover .team-info::after {
  bottom: -20px;
  right: -20px;
  background: radial-gradient(circle, rgba(11, 61, 145, 0.12) 0%, rgba(255, 152, 0, 0.05) 50%, transparent 70%);
  box-shadow: 0 0 60px rgba(11, 61, 145, 0.2);
}

.team-name {
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 15px 0;
  line-height: 1.3;
  word-spacing: 100vw;
  letter-spacing: -0.5px;
  transition: all 0.3s ease;
  position: relative;
  padding-left: 0;
  padding: 15px 20px;
  background: linear-gradient(135deg, #0b3d91 0%, #1a5fbf 100%);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(11, 61, 145, 0.3);
}

@keyframes shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.team-member:hover .team-name {
  box-shadow: 0 6px 20px rgba(11, 61, 145, 0.5);
  transform: translateX(5px);
}

/* Color variations for text backgrounds */
.team-info.orange-text .team-name {
  background: linear-gradient(135deg, #ff9800 0%, #ff6f00 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
}

.team-member:hover .team-info.orange-text .team-name {
  box-shadow: 0 6px 20px rgba(255, 152, 0, 0.5);
}

.team-info.orange-text .team-info::before {
  background: linear-gradient(180deg, #ff9800 0%, #ff6f00 50%, #ff9800 100%);
}

.team-info.orange-text .team-role::before {
  background: linear-gradient(90deg, #ff9800 0%, #ff6f00 50%, transparent 100%);
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.3);
}

.team-info.blue-text .team-name {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}

.team-member:hover .team-info.blue-text .team-name {
  box-shadow: 0 6px 20px rgba(33, 150, 243, 0.5);
}

.team-info.blue-text .team-info::before {
  background: linear-gradient(180deg, #2196F3 0%, #1976D2 50%, #2196F3 100%);
}

.team-info.blue-text .team-role::before {
  background: linear-gradient(90deg, #2196F3 0%, #1976D2 50%, transparent 100%);
  box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
}

.team-info.green-text .team-name {
  background: linear-gradient(135deg, #76c043 0%, #5ea834 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(118, 192, 67, 0.3);
}

.team-member:hover .team-info.green-text .team-name {
  box-shadow: 0 6px 20px rgba(118, 192, 67, 0.5);
}

.team-info.green-text .team-info::before {
  background: linear-gradient(180deg, #76c043 0%, #5ea834 50%, #76c043 100%);
}

.team-info.green-text .team-role::before {
  background: linear-gradient(90deg, #76c043 0%, #5ea834 50%, transparent 100%);
  box-shadow: 0 0 10px rgba(118, 192, 67, 0.3);
}

.team-info.darkblue-text .team-name {
  background: linear-gradient(135deg, #1e3a5f 0%, #0d2847 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(30, 58, 95, 0.3);
}

.team-member:hover .team-info.darkblue-text .team-name {
  box-shadow: 0 6px 20px rgba(30, 58, 95, 0.5);
}

.team-info.darkblue-text .team-info::before {
  background: linear-gradient(180deg, #1e3a5f 0%, #0d2847 50%, #1e3a5f 100%);
}

.team-info.darkblue-text .team-role::before {
  background: linear-gradient(90deg, #1e3a5f 0%, #0d2847 50%, transparent 100%);
  box-shadow: 0 0 10px rgba(30, 58, 95, 0.3);
}

.team-role {
  font-size: 1.1rem;
  color: #8b95a5;
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  position: relative;
  padding-top: 12px;
  padding-left: 25px;
  text-transform: uppercase;
  font-size: 0.95rem;
}

.team-role::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #0b3d91 0%, #ff9800 50%, transparent 100%);
  background-size: 200% 100%;
  transition: all 0.3s ease;
  animation: lineShine 2s linear infinite;
  box-shadow: 0 0 10px rgba(11, 61, 145, 0.3);
}

@keyframes lineShine {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

.team-member:hover .team-role {
  color: #6b7580;
  transform: translateX(3px);
}

.team-member:hover .team-role::before {
  width: 80px;
  box-shadow: 0 0 20px rgba(11, 61, 145, 0.6), 0 0 40px rgba(255, 152, 0, 0.3);
}

@media (max-width: 968px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .team-member {
    flex-direction: column;
  }
  
  .team-photo-wrapper {
    width: 100%;
    height: 280px;
  }
  
  .meet-teams-title {
    font-size: 2.2rem;
    margin-bottom: 50px;
  }
  
  .team-name {
    font-size: 1.4rem;
  }
  
  .team-role {
    font-size: 0.95rem;
  }
}

@media (max-width: 968px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .team-photo-wrapper {
    max-width: 320px;
    height: 320px;
  }
  
  .meet-teams-title {
    font-size: 2.2rem;
    margin-bottom: 50px;
  }
  
  .team-name {
    font-size: 1.3rem;
  }
  
  .team-role {
    font-size: 0.95rem;
  }
}

@media (max-width: 768px) {
  .company-description {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0 1.5rem;
    z-index: 2;
  }

  .vision-mission {
    margin-top: 30px;
  }
  
  .company-headline {
    font-size: 2rem;
    margin-top: 30px !important;
  }
  
  .company-subheadline {
    font-size: 1.3rem;
    margin-top: 20px !important;
  }
  
  .company-text {
    font-size: 0.95rem;
    margin-top: 20px !important;
  }
}

/* Contact CTA (Need Help?) */
.contact-cta{padding:0;position:relative;margin-bottom:0;overflow:hidden;min-height:650px;background:transparent;width:100%}
.contact-cta::before{content:'';position:absolute;inset:0;background:transparent;z-index:1;pointer-events:none}

/* Contact CTA Background Section - with Need Help heading */
.contact-cta-bg{position:relative;z-index:1;height:650px;display:flex;align-items:center;justify-content:flex-start;padding:0 4rem;overflow:hidden;background:url('/assets/images/backgroundneedhelp.jpeg') center 50%/cover no-repeat}
.contact-cta-bg::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.35);z-index:1}
.contact-cta-content{position:relative;z-index:2;color:#fff;max-width:600px;width:100%}
.contact-cta-content h2{font-size:3.8rem;margin:0 0 1.5rem 0;font-weight:900;color:#fff;line-height:1.1;font-family:'Poppins',sans-serif;letter-spacing:-1px;white-space:nowrap}
.contact-cta-content p{font-size:2.2rem;margin:0;color:rgba(255,255,255,0.98);line-height:1.3;font-weight:600}
.contact-cta-content .highlight-cta{color:var(--accent2,#1aaf5d);font-weight:800;position:relative;display:inline-block}
.contact-cta-content .highlight-underline{position:absolute;width:100%;height:40px;bottom:-8px;left:0;overflow:visible;pointer-events:none}
.contact-cta-content .highlight-underline path{stroke-dasharray:300;stroke-dashoffset:300;opacity:0}
.contact-cta-content .highlight-cta.animate-underline .highlight-underline path{stroke-dashoffset:0;opacity:1;animation:underlineDrawCTA 1.5s cubic-bezier(0.25,0.46,0.45,0.94) forwards}
.contact-cta-content .highlight-cta:hover .highlight-underline path{stroke-dashoffset:0;opacity:1;animation:underlineDrawCTA 1.5s cubic-bezier(0.25,0.46,0.45,0.94) forwards}

/* Floating contact form - positioned absolutely on right side */
.contact-form-floating{position:absolute;top:80px;right:50px;width:100%;max-width:700px;z-index:20;background:url('/assets/images/backgroundbaru.jpg') center center/cover;border-radius:24px;box-shadow:0 30px 80px rgba(2,6,23,0.35);overflow:hidden}

/* Footer content area - below form, full width */
.contact-footer-content{display:flex;flex-direction:column;gap:0;position:relative;z-index:2;padding:3rem 2rem 2rem 2rem;width:100%;margin:0;background:url('/assets/images/background footer.jpg') center bottom/cover no-repeat;overflow:hidden;box-sizing:border-box}

.contact-footer-content::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,30,44,0.65) 0%, rgba(6,30,44,0.75) 60%, rgba(6,30,44,0.85) 100%);z-index:1;pointer-events:none}

/* Top row: Contact Info | Locations | Logo (3-column grid) */
.footer-top-row{display:grid;grid-template-columns:auto auto 1fr;gap:4rem;align-items:flex-start;padding:0 2rem;color:#fff;max-width:1400px;margin:0;position:relative;z-index:2;justify-content:start}

/* Bottom row: Certification logos (full width, left side) */
.footer-certifications{display:flex;flex-direction:row;align-items:center;gap:2rem;padding:5rem 2rem 0 2rem;border-top:1px solid rgba(255,255,255,0.1);margin-top:5rem;max-width:1400px;margin-left:0;margin-right:auto;position:relative;z-index:2;justify-content:space-between;width:100%}

.cert-logos-box{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:1.2rem;background:#fff;border-top:4px solid var(--accent2,#1aaf5d);border-radius:6px;padding:1.2rem;max-width:500px}
.cert-logos-box img{max-height:70px;width:auto;object-fit:contain;flex-shrink:0;transition:opacity 0.3s ease}
.cert-logos-box img:hover{opacity:0.8}
.cert-logos-box a{flex-shrink:0}

/* Footer copyright text */
.footer-copyright{display:flex;align-items:center;justify-content:flex-start;flex:1;padding:4rem 2rem 0 2rem;color:rgba(255,255,255,0.65);font-size:0.95rem;text-align:left}
.footer-copyright p{margin:0;color:rgba(255,255,255,0.65);font-size:0.95rem;line-height:1.6}

/* Left side - Need Help heading - DEPRECATED */
.contact-cta-left{color:#fff;display:flex;flex-direction:column;justify-content:flex-start;display:none}
.contact-cta-left h2{font-size:4.8rem;margin:0 0 2rem;font-weight:700;color:#fff;line-height:1.1;font-family:'Cormorant Garamond',serif;white-space:nowrap;overflow:visible}
.contact-cta-left .lead{font-size:1.8rem;margin:0;color:rgba(255,255,255,.95);line-height:1.7;white-space:nowrap;overflow:visible}
.highlight-green{color:var(--accent2);font-weight:700}

/* Right side - footer info grid (Contact + Locations + Logo) - make bigger - DEPRECATED */
.contact-footer-info{display:none}

.contact-form-panel{background:linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.5)), url('/assets/images/backgroundbaru.jpg') center/cover;padding:3.5rem;border-radius:0;box-shadow:none;width:100%;max-width:none;backdrop-filter:blur(8px)}
.contact-form-panel h3{margin:0 0 1.2rem;color:#fff;font-size:2rem;font-weight:800;letter-spacing:-0.5px}
.contact-form-panel .muted{color:rgba(255,255,255,.92);font-size:1.05rem;margin:0 0 2.5rem;line-height:1.7}
.contact-form label{display:block;margin-bottom:2rem;color:#fff;font-weight:600;font-size:1rem}
.contact-form label span{display:block;margin-bottom:0.8rem;color:#fff;font-weight:600;font-size:0.98rem}
.contact-form input,.contact-form textarea{width:100%;padding:1.2rem 1.4rem;border:2px solid rgba(255,255,255,0.3);border-radius:12px;font-family:inherit;font-size:1rem;background:rgba(255,255,255,0.95);color:#333;transition:all 0.3s ease}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#aaa}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.2)}
.contact-form button{background:#fff;color:#0b64c8;padding:1.4rem 3rem;border:none;border-radius:12px;font-weight:800;font-size:1.1rem;cursor:pointer;transition:all 0.3s ease;box-shadow:0 6px 20px rgba(2,6,23,.25);width:100%;letter-spacing:0.5px}
.contact-form button:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(2,6,23,.35)}

/* Contact info blocks - make bigger */
.contact-info-block h4{font-size:1.3rem;margin:0 0 1.2rem;color:#fff;font-weight:700}
.contact-info-block p{margin:0.8rem 0;color:rgba(255,255,255,.95);font-size:1rem;line-height:1.7}
.contact-info-block a{color:rgba(255,255,255,.95);text-decoration:none;transition:color 0.3s ease}
.contact-info-block a:hover{color:#fff}

/* First contact info block - phone and email */
.footer-top-row .contact-info-block:nth-child(1){min-width:380px}

/* Wrap Locations text so it doesn't overlap the form */
.footer-top-row .contact-info-block:nth-child(2){max-width:280px;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;margin-right:28px;transform:translateX(-12px)}

/* Logo in footer - make bigger */
.contact-cta-logo{display:none;align-items:center;justify-content:center;height:100%;position:relative;z-index:2}
.contact-cta-logo img{max-width:280px;height:auto;display:block}

/* Mid-range desktop: 1024px - 1365px (fix footer layout for 1366×768) */
@media (min-width: 1024px) and (max-width: 1400px) {
  .contact-form-floating {
    max-width: 420px;
    right: 100px;
    top: 50px;
  }
  .footer-top-row {
    gap: 1rem;
    grid-template-columns: auto auto 1fr;
  }
  .footer-top-row .contact-info-block:nth-child(1) {
    min-width: 260px;
  }
  .footer-top-row .contact-info-block:nth-child(2) {
    max-width: 180px;
    margin-right: 0;
    margin-left: -80px;
  }
  .contact-info-block h4 {
    font-size: 1.1rem;
  }
  .contact-info-block p {
    font-size: 0.9rem;
  }
}

@media (min-width: 1360px) and (max-width: 1370px) and (min-height: 740px) and (max-height: 780px) {
  .contact-form-floating {
    max-width: 520px;
    right: 80px;
  }
  .footer-top-row .contact-info-block:nth-child(2) {
    max-width: 280px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    margin-left: 10px;
    margin-right: 0;
    transform: translateX(0);
  }
}

@media(max-width:1100px){
  .contact-footer-content{grid-template-columns:1fr;gap:2rem;padding:2rem 2rem 3rem 2rem}
  .footer-top-row{grid-template-columns:1fr 1fr;gap:2rem}
  .contact-cta-content h2{font-size:4rem}
  .contact-cta-content p{font-size:1.7rem}
  .contact-form-floating{top:50px;right:30px;max-width:620px}
}

@media(max-width:768px){
  .contact-cta{padding:0;min-height:auto;position:relative}
  
  /* Need Help section - extend bottom to allow form overlap */
  .contact-cta-bg{
    height:auto;
    padding:1.5rem 1rem 20rem 1rem;
    background-position:center 50%;
    background-attachment: scroll;
    position:relative;
    text-align:center;
  }
  
  .contact-cta-content h2{font-size:clamp(2.8rem,9.7vw,4.2rem) !important;font-weight:900 !important;margin-top:-1rem !important;margin:0 auto !important;white-space:normal}
  .contact-cta-content p{font-size:clamp(1.4rem,4.9vw,2.1rem) !important;font-weight:600 !important;margin:0 auto !important}
  
  /* Contact form floating between Need Help and Footer - positioned higher */
  .contact-form-floating{
    position:absolute;
    top:auto !important;
    right:auto !important;
    bottom:900px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    max-width:500px;
    margin:0;
    background:transparent;
    border-radius:16px;
    overflow:visible;
    z-index:30;
    box-shadow:none;
  }
  
  /* Form panel with proper background */
  .contact-form-panel{
    padding:2rem 1.5rem;
    background:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)), url('/assets/images/backgroundbaru.jpg') center/cover;
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,0.3);
    backdrop-filter:blur(10px);
  }
  
  /* Footer needs top padding to accommodate floating form - increased padding */
  .contact-footer-content{
    flex-direction:column;
    gap:0;
    padding:0 1.5rem 40rem 1.5rem;
    width:100%;
  }
  
  /* Push footer content down without affecting parent container */
  .footer-top-row{
    transform:translateY(600px);
  }
  
  .footer-top-row{grid-template-columns:1fr;gap:1.5rem}
  .footer-certifications{padding-top:3rem;flex-direction:column !important;justify-content:flex-start !important;align-items:center !important}
  .cert-logos-box{transform:translateY(400px) !important}
  .footer-copyright{justify-content:center !important;flex:none;width:100%;text-align:center !important;transform:translateY(720px) !important}
  .contact-form label{margin-bottom:1.5rem}
  .contact-cta-logo{justify-content:center;margin-top:1rem}
  .contact-info-block h4{font-size:1.1rem}
  .contact-info-block p{font-size:0.9rem}
  .cert-logos-box{gap:0.75rem;padding:0.9rem;max-width:100%;flex-wrap:wrap}
  .cert-logos-box img{max-height:48px}
  .cert-logos-box a{flex-shrink:0;width:48px !important;height:48px !important}
  /* Reset desktop nudge for Locations on mobile */
  .footer-top-row .contact-info-block:nth-child(2){transform:none;margin-right:0}
}

/* Sliding animation for client logos - DISABLED, using JS control instead */
@keyframes slideClients {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.news-preview{padding:3rem 0;background-image:url('/assets/images/backgroundutama.jpeg');background-size:cover;background-position:center;background-attachment:fixed;position:relative;width:100%;max-width:none}.news-preview::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.05) 100%);pointer-events:none}

.news-preview > *{position:relative;z-index:1}
.news-preview a{color:#fff}
/* Ensure the top-right button keeps readable text on white background */
.news-preview .btn-view-all{color:#0b64c8;background:#fff}
.site-footer{background:#2d7a4a;border-top:none;padding:3rem 0;margin-top:0;color:#fff;text-align:center}
.site-footer .wrap{max-width:1400px;padding:0 2rem}
.site-footer p{margin:0;color:rgba(255,255,255,0.95);font-size:1.1rem;font-weight:500}
.contact-form{display:grid;gap:.8rem;max-width:600px}
label{display:block}
input,textarea{width:100%;padding:.6rem;border:1px solid #d1d5db;border-radius:6px}

/* Accessibility / skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;left:auto;top:0;width:auto;height:auto;padding:.6rem 1rem;background:#000;color:#fff;z-index:9999}

/* Mobile nav - only show on mobile */
.nav-toggle{display:none}
.nav-toggle .hamburger{width:24px;height:2px;background:#fff;display:block;position:relative;transition:all 0.3s ease}
.nav-toggle .hamburger:before,.nav-toggle .hamburger:after{content:'';position:absolute;left:0;width:24px;height:2px;background:#fff;transition:all 0.3s ease}
.nav-toggle .hamburger:before{top:-7px}
.nav-toggle .hamburger:after{top:7px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Hide phone box on desktop */
.nav-phone-box{display:none}

/* Mobile layout */
@media(max-width:1023px){
  .site-header{position:fixed;width:100%;top:0;left:0;z-index:200;padding:0.45rem 0}
  .header-inner{padding:0 1rem;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:none;gap:0.75rem;min-height:64px;position:relative}
  
  /* Logo smaller on mobile */
  .logo{width:150px !important;max-height:55px;display:block;object-fit:contain}
  
  /* Brand positioning - far left */
  .brand{position:relative;display:flex;align-items:center;margin-right:auto}
  
  /* Show hamburger on mobile only - absolute position right */
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0.5rem 0.6rem;position:absolute;right:1rem;top:50%;transform:translateY(-50%);z-index:210;flex-shrink:0;height:48px;cursor:pointer}
  
  
  /* Mobile nav drawer */
  .nav{
    position:fixed;
    right:0;
    top:0;
    height:100vh;
    width:85%;
    max-width:320px;
    background:#0d5a3d;
    padding:5rem 0 0 0;
    transform:translateX(110%);
    transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:-8px 0 32px rgba(2,6,23,0.2);
    z-index:150;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  
  body.nav-open .nav{
    transform:translateX(0);
  }
  
  @keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
  }
  
  .nav a:not(.cta){
    display:block;
    width:100%;
    margin:0;
    padding:1rem 2rem;
    font-family:Poppins,system-ui;
    color:#fff;
    font-size:1.1rem;
    font-weight:600;
    border-bottom:1px solid rgba(255,255,255,0.15);
    transition:all 0.2s ease;
    text-align:left;
    flex-shrink:0;
  }

  .nav a:not(.cta):visited,
  .nav a:not(.cta):active,
  .nav a:not(.cta):focus{
    color:#fff !important;
  }
  
  .nav a:first-child{
    margin-top:0;
  }
  
  .nav a:not(.cta):hover{
    color:#fff;
    padding-left:2.5rem;
    background:rgba(255,255,255,0.1);
  }
  
  /* Contact button - sticky at bottom, always visible */
  .nav .cta{
    display:block;
    width:100%;
    margin-top:auto;
    padding:1.2rem 2rem;
    background:#fff;
    color:#0d5a3d !important;
    border-radius:0;
    border-bottom:none;
    text-align:center;
    font-family:Poppins,system-ui;
    font-weight:700;
    position:sticky;
    bottom:0;
    flex-shrink:0;
    box-shadow:0 -4px 12px rgba(0,0,0,0.1);
  }
  
  .nav .cta:hover{
    background:#f0f0f0;
    padding-left:2rem;
  }
  
  /* Phone box in nav drawer - below contact */
  .nav-phone-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background: rgba(255,255,255,0.1);
    margin: 0;
  }
  .nav-phone-box a {
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    font-family: Poppins, system-ui;
  }
  .nav-phone-box a:hover {
    text-decoration: underline;
  }

  /* Hamburger animation when open */
  body.nav-open .nav-toggle {
    background: #0d5a3d;
    border-radius: 8px;
    border: none;
  }
  body.nav-open .nav-toggle .hamburger{
    background:transparent;
  }
  body.nav-open .nav-toggle .hamburger:before{
    transform:rotate(45deg);
    top:0;
    background: #fff;
  }
  body.nav-open .nav-toggle .hamburger:after{
    transform:rotate(-45deg);
    top:0;
    background: #fff;
  }
  
  /* Keep nav link colors white in mobile drawer even when header is scrolled */
  .site-header.scrolled .nav a:not(.cta){
    color:#fff !important;
  }
  .site-header.scrolled .nav .cta{
    color:#fff !important;
    background:#0d5a3d !important;
  }
  
  /* Hero text - centered and positioned below logo */
  .hero-electrical .hero-inner{
    justify-content:flex-start !important;
    padding-top:120px !important;
  }
  .hero-content{
    text-align:center !important;
    width:100%;
    padding:0 1rem;
    margin-top:-1.5rem;
  }
  .hero-title{
    text-align:center !important;
    display:block;
  }
}

/* Desktop layout: hide hamburger, show nav normally */
@media(min-width:1024px){
  .nav-toggle{display:none}
  .site-header{position:absolute;top:0;left:0;width:100%;z-index:60;background:transparent}
  .header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;max-width:1400px;margin:0 auto;padding:1rem 2rem}
  .brand{flex-shrink:0}
  .nav{display:flex;align-items:center;gap:0.6rem;margin-left:auto}

  /* Footer order on desktop: logos left, copyright right */
  .footer-certifications{flex-direction:row-reverse;justify-content:space-between}
  .footer-copyright{justify-content:flex-end;text-align:right}
  
  /* All nav links same style - no special CTA button */
  .nav a,
  .nav a:link,
  .nav a:visited {
    color: #fff !important;
    background: transparent !important;
    padding: .5rem .8rem;
    font-weight: 600;
    box-shadow: none !important;
  }
  .nav a:hover {
    background: rgba(255,255,255,.15) !important;
  }
  
  /* Hide phone box on desktop */
  .nav-phone-box {
    display: none !important;
  }
}

/* Sticky header */
.site-header.scrolled{position:fixed;top:0;left:0;background:#0d5a3d;color:#fff;box-shadow:0 6px 26px rgba(2,6,23,.12);backdrop-filter:saturate(120%) blur(6px)}
.site-header.scrolled .nav a{color:#fff;font-family:Poppins,system-ui}
.site-header.scrolled .nav .cta{color:#0d5a3d;background:#fff}
.site-header.scrolled .nav .cta{font-family:Poppins,system-ui}
.site-header.scrolled .nav-toggle .hamburger,.site-header.scrolled .nav-toggle .hamburger:before,.site-header.scrolled .nav-toggle .hamburger:after{background:#fff}

/* Desktop scrolled header - nav links white */
@media (min-width: 1024px) {
  .site-header.scrolled .nav a,
  .site-header.scrolled .nav a:not(.cta),
  .site-header.scrolled .nav a:link,
  .site-header.scrolled .nav a:visited {
    color: #fff !important;
  }
  .site-header.scrolled .nav .cta,
  .site-header.scrolled .nav a.cta {
    color: #0d5a3d !important;
    background: #fff !important;
  }
}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* Scroll reveal utility (used for Let’s Work Together + floating contact + footer entities) */
.scroll-reveal{opacity:0;transition:transform 1.15s cubic-bezier(.22,.9,.24,1);will-change:transform}
.scroll-reveal.sr-up{transform:translateY(28px)}
.scroll-reveal.sr-left{transform:translateX(-34px)}
.scroll-reveal.sr-right{transform:translateX(34px)}
.scroll-reveal.visible{opacity:1;transform:translate(0,0)}
.scroll-reveal.sr-delay-1{transition-delay:.12s}
.scroll-reveal.sr-delay-2{transition-delay:.24s}
.scroll-reveal.sr-delay-3{transition-delay:.36s}
.scroll-reveal.sr-delay-4{transition-delay:.48s}
.scroll-reveal.sr-delay-5{transition-delay:.6s}

@media (prefers-reduced-motion: reduce){
  .scroll-reveal,
  .reveal{transition:none !important;transform:none !important;opacity:1 !important}
}

/* Hero micro-animations */
.hero-content.reveal{transition-delay:.06s}
.hero-visual.reveal img{transform:translateY(8px);transition:transform .6s ease}
.reveal.visible .hero-visual img{transform:none}

@media(min-width:900px){.hero h1{font-size:3.2rem}}

/* Minor utilities */
.muted{color:#6b7280}
.wrap h2{margin-top:0}
.news-item{background:#fff;padding:1rem;border-radius:8px;margin-bottom:.8rem;box-shadow:0 6px 18px rgba(11,61,145,.04)}

/* News carousel styles - horizontally scrollable, snap-style cards */
/* News header */
/* News section heading and grid - match projects/products layout pattern */
.news-preview{padding:6rem 0;background-image:url('/assets/images/backgroundutama.jpeg');background-size:cover;background-position:center;background-attachment:fixed;position:relative;width:100%;max-width:none;margin:0;overflow:hidden}
.news-preview::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.05) 100%);pointer-events:none}
.news-preview > *{position:relative;z-index:1}

/* Projects section on services page - different background */
.projects-section-services{background-image:url('/assets/images/backgroundprojectz.jpg') !important;background-size:cover !important;background-position:center !important;background-attachment:fixed !important}
.projects-section-services::before{background:linear-gradient(180deg,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.2) 100%) !important}

.news-headline{max-width:1400px;margin:0 auto 2rem;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.news-preview h2{font-family:'Bakbak One', sans-serif;color:#fff;text-align:left;margin:0;display:block;font-weight:400;font-size:clamp(2.6rem,5vw,3.6rem);letter-spacing:0.2px}

/* News grid matching reference: 3 equal-height cards */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(320px,1fr));gap:2.4rem;margin:1.6rem auto 0;align-items:stretch;max-width:1400px;padding:0 2rem;position:relative;z-index:1}
.news-grid .news-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 28px 70px rgba(2,6,23,0.09);display:flex;flex-direction:column;height:520px}
.news-grid .news-thumb{width:100%;height:56%;object-fit:cover;display:block;border-top-left-radius:14px;border-top-right-radius:14px}
.news-grid .news-body{padding:32px;display:flex;flex-direction:column;justify-content:space-between;flex:1}
.news-grid .news-body .title{font-size:1.25rem;color:var(--primary);font-weight:800;line-height:1.18;margin:0 0 0.6rem}
.news-grid .news-body .read-more{display:inline-block;margin-top:0.6rem;color:var(--accent2);font-weight:800;text-decoration:none;font-size:.88rem;letter-spacing:.6px;transition:color 0.3s ease}
.news-grid .news-body .read-more:hover{color:#00a9e0}
.news-grid .news-divider{height:1px;background:rgba(15,23,42,0.04);margin-top:1rem}
.news-grid .news-meta{font-size:0.9rem;color:#9aa3ad;padding-top:18px;border-top:1px solid rgba(15,23,42,0.03);margin-top:18px}

/* small visual accent for featured cards */
.news-grid .news-card.featured{border-left:6px solid var(--accent2)}

.project-card-title a{
  color: inherit;
  text-decoration: none;
}

.project-card-title a:hover{
  text-decoration: underline;
}

.featured-news-link{
  display: block;
  height: 100%;
}

.featured-news-link img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-showcase-link{
  display: block;
  height: 100%;
}

.project-showcase-title a{
  color: inherit;
  text-decoration: none;
}

.project-showcase-title a:hover{
  text-decoration: underline;
}

.news-article{
  padding: 4rem 0 2rem;
  background: #fff;
}

.news-article .wrap{
  max-width: 920px;
}

.news-article-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: #9aa3ad;
  margin-bottom: 1.5rem;
}

.news-meta-sep{
  color: #cbd5e1;
}

.news-hero-meta{
  margin: 0 0 1rem 0;
}

.news-hero-meta-text{
  font-size: 0.95rem;
  color: #e0e6ed;
  letter-spacing: 0.3px;
  margin: 0;
}

@media (max-width: 768px){
  .news-hero-meta-text{
    font-size: 0.75rem;
    letter-spacing: 0.2px;
  }

  .services-hero-content{
    min-height: 280px;
    justify-content: space-between;
  }

  .news-hero-meta{
    order: 3;
    margin: 0.5rem 0 0 0;
  }

  .services-hero-content h1{
    font-size: clamp(1.8rem, 4vw, 3rem) !important;
    margin-bottom: 0.5rem;
  }

  .services-hero-content .lead-text{
    font-size: clamp(0.85rem, 1.5vw, 1rem) !important;
    margin-bottom: 0.5rem;
  }

  .news-article{
    padding: 1.5rem 0 2rem;
  }
}

.news-article-body p{
  font-size: 1.05rem;
  line-height: 1.85;
  color: #334155;
  margin: 0 0 1.5rem 0;
}

.news-article-body h2{
  font-size: 1.5rem;
  margin: 2rem 0 1rem;
  color: #0b3d91;
}

.news-article-image{
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 2rem 0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.news-article-gallery{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 2rem 0;
}

.news-article-gallery img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

@media (max-width: 768px){
  .news-article-gallery{
    grid-template-columns: 1fr;
  }
}

.news-article-back{
  display: inline-block;
  margin-top: 1rem;
  color: #0b64c8;
  text-decoration: none;
  font-weight: 700;
}

.news-article-back:hover{
  text-decoration: underline;
}

.news-comments{
  padding: 2rem 0 4rem;
  background: #f7f9fc;
}

.news-comments .wrap{
  max-width: 920px;
}

@media(max-width:1100px){
  .news-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:720px){
  .news-grid{grid-template-columns:1fr;padding:0 1rem;margin:0 auto;max-width:100%;display:flex;flex-direction:column;align-items:center}
  .news-grid .news-card{height:auto;width:100%;max-width:400px}
  .news-grid .news-thumb{height:220px}
  .news-grid .news-body{padding:20px}
  .news-headline{padding:0 1rem}
}

/* remove older left-thumbnail rules (overridden by the grid styles above) */
.news-card .meta{display:block;color:#6b7280;font-size:0.9rem;margin-bottom:0.8rem}
.news-card p{margin:0;color:#475569}

/* Compact layout for narrow screens */
@media(max-width:899px){
  /* stack image on top for small screens */
  .news-card{flex-direction:column;align-items:stretch}
  .news-card .news-thumb{width:100%;height:220px}
  .news-card .meta{position:static;margin-bottom:0.6rem;box-shadow:none}
}

@media(max-width:599px){
  .news-headline{padding:0 1rem;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}
  .news-preview h2{font-size:2rem}
  .news-grid{padding:0 1rem;gap:1.5rem}
  .news-grid .news-card{min-width:auto;max-width:100%;width:100%}
  .news-grid .news-thumb{height:160px}
  .news-grid .news-body{padding:16px}
  .news-grid .news-body .title{font-size:1.1rem}
  .news-viewall{margin:0;padding:0.6rem 1rem;font-size:0.9rem}
}

/* Highlight style for latest cards */
.news-card.featured{border-left:6px solid var(--accent2);box-shadow:0 30px 70px rgba(2,6,23,0.10);transform:translateY(-6px)}

/* View all button under news carousel */
.news-viewall{display:inline-block;margin:1.2rem auto 0 auto;padding:.8rem 1.2rem;border-radius:12px;background:var(--primary);color:#fff;font-weight:700;text-decoration:none;box-shadow:0 12px 30px rgba(2,6,23,0.12);border:3px solid rgba(255,255,255,0.06)}
.news-viewall:hover{background:var(--accent2);border-color:rgba(255,255,255,0.12);transform:translateY(-2px)}
.news-viewall-wrapper{display:flex;justify-content:center}

/* Grid fallback for non-scroll devices */
@media(min-width:900px){
  .news-carousel{padding:1rem 0}
}

/* Video hero styles */
.hero{position:relative;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-overlay{position:relative;z-index:2}
.hero-electrical::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,30,65,.5),rgba(7,30,65,.6));z-index:1}
.hero-inner{position:relative;z-index:3}

/* Feature box base styles (not strip positioning) */
.feature-box{background:linear-gradient(180deg,rgba(2,6,23,0.45),rgba(2,6,23,0.25));padding:2rem;border-radius:18px;display:flex;flex-direction:column;align-items:center;text-align:center;backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 46px rgba(2,6,23,.28);color:#fff;min-height:280px}
.feature-box .feature-icon,
.feature-box img[src*="electric_testing"],
.feature-box img[src*="sirim-iqnet-logo"]{
  /* Make all feature-strip icons share the same visual height and centered alignment */
  height:84px;
  width:auto;
  display:block;
  margin:0 auto .6rem;
  object-fit:contain;
  flex-shrink:0;
}

/* Smaller icons on narrow screens to maintain layout */
@media(max-width:899px){
  .feature-box .feature-icon,
  .feature-box img[src*="electric_testing"],
  .feature-box img[src*="sirim-iqnet-logo"]{
    height:56px;
  }
}
.feature-box h3{margin:.4rem 0;color:#fff;flex-grow:1;display:flex;align-items:center;justify-content:center}
.feature-box .muted{font-size:.95rem;color:rgba(255,255,255,.85);margin-top:auto}

/* Proximity focus state - pop the nearest box forward */
.feature-box{transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s cubic-bezier(.2,.9,.2,1),filter .28s ease;transform-origin:center;cursor:default}
.feature-box.feature-focus{transform:translateY(-12px) scale(1.03);box-shadow:0 32px 64px rgba(2,6,23,.36);z-index:60;filter:brightness(1.03)}
.feature-box:not(.feature-focus){transition:transform .28s ease,filter .28s ease;transform:none;filter:blur(0px)}

/* make sure the focus appearance is subtle on small screens */
@media(max-width:899px){
  .feature-box.feature-focus{transform:translateY(-6px) scale(1.02);box-shadow:0 18px 40px rgba(2,6,23,.28)}
  .hero-electrical .hero-inner{min-height:60vh;padding:1.2rem 0}
}

/* ensure content below hero isn't hidden under the overlapping feature strip */
/* removed large fixed top padding (caused big empty gap); layout uses normal section padding now */
/* .services-overview{padding-top:220px} */

/* Keep hero headline to one line on larger screens (Jonoco-like look) */
@media(min-width:900px){
  .hero-title{white-space:nowrap;overflow:visible}
  .hero-content{max-width:920px}
}

/* slightly tweak underline position so it sits under the highlighted word (handled above with animation rules) */

/* Services Slider */
.services-slider-container{position:relative;display:block;align-items:center;gap:1rem;margin:0;padding:0;animation:none}
.cards--slider{display:block;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);overflow:visible;scroll-behavior:auto;gap:0;padding:0;-webkit-overflow-scrolling:unset}

@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(32px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* Services Page Redesign - Clean 9-item grid */
.services-main{background:url('/assets/images/backgroundbaru.jpg') center/cover fixed;padding-top:0;min-height:100vh;position:relative}

/* Hero Section */

.services-page-hero{background:linear-gradient(135deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('/assets/images/projecthero.jpeg') center/cover no-repeat;padding:8rem 2rem 16rem;text-align:center;position:relative;overflow:visible;margin-top:0;padding-top:8rem}
.services-page-hero::before{content:'';position:absolute;top:-50%;left:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(255,255,255,0.08),transparent 70%);border-radius:50%;animation:float 20s infinite ease-in-out}
.services-page-hero::after{content:'';position:absolute;bottom:-30%;right:-5%;width:500px;height:500px;background:radial-gradient(circle,rgba(47,178,74,0.12),transparent 65%);border-radius:50%;animation:float 25s infinite ease-in-out reverse}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(1.05)}}
.services-hero-content{position:relative;z-index:2;max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.services-hero-content h1{font-family:'Bakbak One',sans-serif;font-size:clamp(2.8rem,5vw,4.2rem);color:#fff;margin:0 0 1rem;text-shadow:0 4px 20px rgba(0,0,0,0.3)}
.services-hero-content .lead-text{font-size:clamp(1.05rem,2vw,1.3rem);color:rgba(255,255,255,0.92);max-width:900px;margin:0 auto;line-height:1.6}

/* Products/Equipment Page Hero */
.products-page-hero{background:linear-gradient(135deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('/assets/images/homeequip.jpeg') center/cover no-repeat;padding:8rem 2rem 4.5rem;text-align:center;position:relative;overflow:visible;margin-top:0;padding-top:8rem}
.products-page-hero::before{content:'';position:absolute;top:-50%;left:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(255,255,255,0.08),transparent 70%);border-radius:50%;animation:float 20s infinite ease-in-out}
.products-page-hero::after{content:'';position:absolute;bottom:-30%;right:-5%;width:500px;height:500px;background:radial-gradient(circle,rgba(47,178,74,0.12),transparent 65%);border-radius:50%;animation:float 25s infinite ease-in-out reverse}
.products-hero-content{position:relative;z-index:2;max-width:900px;margin:0 auto}
.products-hero-content h1{font-family:'Bakbak One',sans-serif;font-size:clamp(2.8rem,5vw,4.2rem);color:#fff;margin:0 0 1rem;text-shadow:0 4px 20px rgba(0,0,0,0.3)}
.products-hero-content .lead-text{font-size:clamp(1.05rem,2vw,1.3rem);color:rgba(255,255,255,0.92);max-width:720px;margin:0 auto;line-height:1.6}

/* Floating Intro Section */
.services-intro-floating{max-width:1200px;margin:0 auto;padding:0 2rem;position:relative;z-index:10}

.intro-card{background:#fff;border-radius:16px;box-shadow:0 12px 48px rgba(0,0,0,0.15);padding:3rem 3.5rem;margin-top:-5rem;position:relative;text-align:center}

.intro-card h2{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:700;color:var(--text);margin:0 0 1.2rem;line-height:1.3}

.intro-card p{font-size:1.05rem;color:rgba(31,41,55,0.85);line-height:1.8;margin:0;max-width:900px;margin-left:auto;margin-right:auto}

@media (min-width: 1024px){
  .services-page-hero{
    padding-bottom:10.5rem;
  }
  
  .products-page-hero{
    padding-bottom:9rem;
  }
}

@media (max-width: 768px){
  .services-page-hero{
    padding: 4rem 2rem 8rem;
    padding-top: 4rem;
  }

  .products-page-hero{
    padding: 4rem 2rem 6rem;
    padding-top: 4rem;
  }
}

/* Mobile optimization for intro card */
@media(max-width:1023px){
  .services-intro-floating{
    padding:0 1rem;
    margin-top:0;
  }
  
  .intro-card{
    margin-top:-3.5rem !important;
    padding:2rem 1.5rem;
    margin-bottom:2rem;
  }
  
  .intro-card h2{
    font-size:1.5rem;
  }
  
  .intro-card p{
    font-size:0.95rem;
  }
  
  /* Reduce negative margin on services section for mobile */
  .services-full-section{
    margin-top:-4.25rem !important;
    padding:2rem 1rem;
  }
}

/* Services Grid Section */
.services-full-section{padding:4rem 2rem;max-width:1200px;margin:0 auto;position:relative;margin-top:-6rem}

/* Service Row - Compact Alternating Design */
.service-row{display:grid;grid-template-columns:45% 1fr;gap:2.5rem;align-items:center;margin-bottom:3rem;background:transparent;border-radius:0;overflow:visible;box-shadow:none;transition:none}

/* Service rows with reveal class - keep visible from start */
.service-row.reveal{opacity:1 !important;transform:translateY(0) !important;transition:none !important}

/* Keep images and backgrounds always visible even with .reveal class */
.service-row.reveal .service-row-image,
.service-row.reveal .service-row-image img,
.service-row.reveal .service-row-image::after,
.service-row.reveal .service-badge{opacity:1 !important;visibility:visible !important}

.service-row.visible{opacity:1}

.service-row:nth-child(1){box-shadow:none;z-index:10}
.service-row:nth-child(2){transition-delay:0s}
.service-row:nth-child(3){transition-delay:0s}
.service-row:nth-child(4){transition-delay:0s}
.service-row:nth-child(5){transition-delay:0s}
.service-row:nth-child(6){transition-delay:0s}
.service-row:nth-child(7){transition-delay:0s}
.service-row:nth-child(8){transition-delay:0s}
.service-row:nth-child(9){transition-delay:0s}

.service-row:hover{transform:translateY(-4px);box-shadow:none;transition:transform 0.3s ease}

/* Reverse layout for alternating */
.service-row-reverse{grid-template-columns:1fr 45%}
.service-row-reverse .service-row-image{order:2;margin:0 18px 22px 4px}
.service-row-reverse .service-row-image::after{transform:translate(-18px,18px);border-radius:20px 20px 72px 20px;background:#ff7a00;box-shadow:0 16px 34px rgba(255,122,0,0.28)}
.service-row-reverse .service-row-content{order:1}

/* Service 2 - Light blue styling */
.service-row:nth-child(2) .service-row-image::after{background:#00a9e0;box-shadow:0 16px 34px rgba(0,169,224,0.28)}
.service-row:nth-child(2) .service-icon{background:#00a9e0;box-shadow:0 10px 28px rgba(0,169,224,0.25)}

/* Service 3 - Light green styling */
.service-row:nth-child(3) .service-row-image::after{background:#34d399;box-shadow:0 16px 34px rgba(52,211,153,0.28)}
.service-row:nth-child(3) .service-icon{background:#34d399;box-shadow:0 10px 28px rgba(52,211,153,0.25)}

/* Service 5 - Light blue styling */
.service-row:nth-child(5) .service-row-image::after{background:#00a9e0;box-shadow:0 16px 34px rgba(0,169,224,0.28)}
.service-row:nth-child(5) .service-icon{background:#00a9e0;box-shadow:0 10px 28px rgba(0,169,224,0.25)}

/* Service 6 - Light green styling */
.service-row:nth-child(6) .service-row-image::after{background:#34d399;box-shadow:0 16px 34px rgba(52,211,153,0.28)}
.service-row:nth-child(6) .service-icon{background:#34d399;box-shadow:0 10px 28px rgba(52,211,153,0.25)}

/* Service 8 - Light blue styling */
.service-row:nth-child(8) .service-row-image::after{background:#00a9e0;box-shadow:0 16px 34px rgba(0,169,224,0.28)}
.service-row:nth-child(8) .service-icon{background:#00a9e0;box-shadow:0 10px 28px rgba(0,169,224,0.25)}

/* Service 9 - Light green styling */
.service-row:nth-child(9) .service-row-image::after{background:#34d399;box-shadow:0 16px 34px rgba(52,211,153,0.28)}
.service-row:nth-child(9) .service-icon{background:#34d399;box-shadow:0 10px 28px rgba(52,211,153,0.25)}

/* Image Section - Compact */
.service-row-image{position:relative;height:280px;overflow:visible;margin:0 18px 18px 0;transition:none;opacity:1 !important;visibility:visible !important}

.service-row-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1);border-radius:16px 16px 64px 16px;box-shadow:0 10px 28px rgba(0,0,0,0.22);opacity:1 !important;visibility:visible !important}

/* Orange offset card behind image (bottom-right rounded) - ALWAYS VISIBLE */
.service-row-image::after{content:"" !important;position:absolute;inset:0;transform:translate(18px,18px) !important;background:var(--accent,#ff7a00);border-radius:20px 20px 72px 20px;z-index:-1;box-shadow:0 16px 34px rgba(0,0,0,0.18);opacity:1 !important;visibility:visible !important;pointer-events:none;display:block !important;transition:none !important;will-change:auto}

/* Force background boxes to always show - override ANY parent rules */
.service-row .service-row-image::after,
.service-row.reveal .service-row-image::after,
.service-row-reverse .service-row-image::after,
.service-row-reverse.reveal .service-row-image::after{opacity:1 !important;visibility:visible !important;display:block !important;transform:translate(18px,18px) !important}

.service-row-reverse .service-row-image::after{transform:translate(-18px,18px) !important}

.service-row:hover .service-row-image img{transform:scale(1.08)}

.service-badge{position:absolute;top:1rem;left:1rem;background:rgba(13,90,61,0.92);color:#fff;width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;backdrop-filter:blur(8px);box-shadow:0 4px 12px rgba(0,0,0,0.2);transition:none;opacity:1 !important;visibility:visible !important}

/* Content Section - Compact */
.service-row-content{padding:2rem;display:flex;flex-direction:column;gap:0.8rem}

.service-row-content h3{font-size:1.4rem;font-weight:700;color:#fff;margin:0;line-height:1.3;text-shadow:0 4px 16px rgba(0,0,0,0.4);opacity:0;transform:translateX(80px);transition:opacity 0.8s ease-out,transform 0.8s ease-out}

.service-row-content p{font-size:0.95rem;color:rgba(255,255,255,0.92);line-height:1.7;margin:0;text-shadow:0 3px 12px rgba(0,0,0,0.35);opacity:0;transform:translateX(80px);transition:opacity 0.8s ease-out,transform 0.8s ease-out}

.service-row-content ul{font-size:0.95rem;color:#fff;line-height:1.7;margin:0;padding-left:1.5rem;text-shadow:0 3px 12px rgba(0,0,0,0.35);opacity:0;transform:translateX(80px);transition:opacity 0.8s ease-out,transform 0.8s ease-out}

.service-row-content ul li{margin-bottom:0.5rem;color:#fff}

/* Equipment page title styling */
.equipment-main .service-row-content h3{color:#ff7a00}

.service-icon{width:54px;height:54px;border-radius:50%;background:var(--accent,#ff7a00);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,0.18);margin-bottom:0.75rem;transition:background-color 0.3s ease;cursor:pointer}

.service-icon:hover{filter:brightness(0.85)}

/* Text animation when service row is visible - slide from RIGHT */
.service-row.visible .service-row-content h3{opacity:1;transform:translateX(0);transition-delay:0.2s}
.service-row.visible .service-row-content p{opacity:1;transform:translateX(0);transition-delay:0.4s}
.service-row.visible .service-row-content ul{opacity:1;transform:translateX(0);transition-delay:0.4s}

/* Reverse rows - text slides from LEFT */
.service-row-reverse .service-row-content h3{transform:translateX(-80px)}
.service-row-reverse .service-row-content p{transform:translateX(-80px)}
.service-row-reverse .service-row-content ul{transform:translateX(-80px)}

.service-icon svg{width:28px;height:28px}

/* Mobile responsive */
@media(max-width:768px){
  .intro-card{padding:2rem 1.5rem;margin-top:-3rem}
  .intro-card h2{font-size:1.5rem;margin-bottom:1rem}
  .intro-card p{font-size:0.95rem}
  .services-full-section{padding:3rem 1.5rem}
  .service-row,.service-row-reverse{grid-template-columns:1fr;gap:0;margin-bottom:2rem;background:transparent;box-shadow:none;border-radius:0}
  .service-row-reverse .service-row-image{order:unset;margin:0 14px 16px 8px}
  .service-row-reverse .service-row-content{order:unset}
  .service-row-image{height:220px;overflow:visible;margin:0 12px 18px 0}
  .service-row-content{padding:1.5rem}
  .service-row-content h3{font-size:1.2rem}
  .service-row-content p{font-size:0.9rem}
}

/* Need Help CTA Section */
.services-cta-section{background:linear-gradient(120deg,rgba(13,90,61,0.95),rgba(15,77,52,0.9)),url('/assets/images/backgroundbaru.jpg') center/cover;padding:4rem 2rem;margin-top:3rem;position:relative;overflow:hidden}
.services-cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,rgba(47,178,74,0.15),transparent 60%);pointer-events:none}
.services-cta-content{max-width:800px;margin:0 auto;text-align:center;position:relative;z-index:2}
.services-cta-content h2{font-family:'Bakbak One',sans-serif;font-size:clamp(2rem,4vw,2.8rem);color:#fff;margin:0 0 0.8rem}
.services-cta-content p{font-size:1.1rem;color:rgba(255,255,255,0.9);margin:0 0 2rem}
.cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn-cta{display:inline-flex;align-items:center;justify-content:center;padding:1rem 2rem;border-radius:14px;font-weight:700;font-size:1rem;text-decoration:none;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.3s ease,background 0.3s ease}
.btn-cta.primary{background:#fff;color:#0d5a3d;box-shadow:0 10px 30px rgba(0,0,0,0.2)}
.btn-cta.primary:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 16px 40px rgba(0,0,0,0.28);background:#f0f0f0}
.btn-cta.secondary{border:2px solid rgba(255,255,255,0.7);color:#fff;background:rgba(255,255,255,0.08);backdrop-filter:blur(8px)}
.btn-cta.secondary:hover{transform:translateY(-4px) scale(1.05);border-color:#fff;background:rgba(255,255,255,0.15)}

/* Projects Page Styling */
.projects-hero{background:linear-gradient(135deg,rgba(0,0,0,0.55),rgba(0,0,0,0.55)),url('/assets/images/gambarbackgroundprojectservicespage.jpg') center/cover no-repeat;padding:10rem 2rem;text-align:center;position:relative;overflow:hidden;margin-top:-80px;padding-top:calc(10rem + 80px);background-attachment:fixed}
.projects-hero::before{display:none}
.projects-hero-overlay{display:none}
.projects-hero-content{color:#fff;z-index:2;position:relative}
.projects-hero-content h1{font-size:3.5rem;font-weight:700;margin:0 0 2rem;text-shadow:0 4px 16px rgba(0,0,0,0.4)}
.projects-stats{margin:3rem 0;padding:2rem 0}
.stats-number{font-size:6rem;font-weight:700;color:#7dff5f;line-height:1;margin-bottom:1rem;text-shadow:0 4px 16px rgba(0,0,0,0.4)}
.stats-label{font-size:1.3rem;letter-spacing:0.15em;font-weight:600;color:#fff}
.projects-cta-buttons{display:flex;gap:2rem;justify-content:center;margin-top:3rem;flex-wrap:wrap}
.projects-cta-buttons .btn{padding:1rem 2.5rem;font-size:1.1rem}
.projects-cta-buttons .btn-secondary{background:transparent;border:2px solid #fff;color:#fff}
.projects-cta-buttons .btn-secondary:hover{background:#fff;color:#000}

.projects-filter-section{padding:5rem 2rem;background:#f8f9fa;text-align:center}
.projects-filters{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;padding:0 1rem}
.filter-btn{padding:0.8rem 1.5rem;background:#003d7a;color:#fff;border:none;border-radius:25px;cursor:pointer;font-weight:600;transition:all 0.3s ease;font-size:0.95rem}
.filter-btn:hover{background:#00539e;transform:translateY(-2px)}
.filter-btn.active{background:#7dff5f;color:#003d7a}

.projects-grid-section{padding:6rem 2rem}
.projects-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;max-width:1000px;margin:0 auto}
.project-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,0.12);transition:all 0.3s ease;display:flex;flex-direction:column}
.project-card:hover{box-shadow:0 10px 30px rgba(0,0,0,0.18);transform:translateY(-3px)}
.project-image-wrapper{width:100%;height:250px;overflow:hidden;border-radius:12px 12px 0 0}
.project-image-wrapper img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease}
.project-card:hover .project-image-wrapper img{transform:scale(1.05)}
.project-content{padding:1.8rem;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.project-content h3{font-size:1.2rem;font-weight:700;color:#003d7a;margin:0 0 1rem;line-height:1.3;word-wrap:break-word}
.project-tags{display:flex;gap:0.6rem;flex-wrap:wrap;margin-top:auto}
.project-tag{background:#ff7a00;color:#fff;padding:0.45rem 0.9rem;border-radius:18px;font-size:0.8rem;font-weight:600;white-space:nowrap}

@media(min-width:640px){
  .projects-grid{grid-template-columns:repeat(2,1fr);gap:2rem;max-width:100%}
  .projects-grid-section{padding:6rem 1.5rem}
  .project-image-wrapper{height:280px}
}

@media(min-width:768px){
  .projects-hero-content h1{font-size:4.5rem}
  .stats-number{font-size:6rem}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .project-image-wrapper{height:300px}
  .project-content h3{font-size:1.3rem}
  .projects-grid-section{padding:6rem 2rem}
}

@media(min-width:1024px){
  .projects-hero-content h1{font-size:5rem}
  .stats-number{font-size:7rem}
  .projects-grid{grid-template-columns:repeat(3,1fr);gap:2.5rem;max-width:1200px}
  .project-image-wrapper{height:250px}
  .project-content h3{font-size:1.2rem}
}

/* Mobile responsive */
@media(max-width:640px){
  .projects-hero{padding:6rem 1.5rem;padding-top:calc(6rem + 80px)}
  .projects-hero-content h1{font-size:2.5rem}
  .stats-number{font-size:4rem}
  .projects-filter-section{padding:3rem 1rem}
  .projects-filters{padding:0 0.5rem}
  .filter-btn{padding:0.7rem 1.2rem;font-size:0.85rem}
}

@media(min-width:641px) and (max-width:768px){
  .projects-hero{padding:8rem 2rem;padding-top:calc(8rem + 80px)}
  .projects-hero-content h1{font-size:3rem}
  .stats-number{font-size:5rem}
  .filter-btn{padding:0.75rem 1.3rem;font-size:0.9rem}
}

@media(min-width:769px){
  .projects-hero-content h1{font-size:3.5rem}
  .stats-number{font-size:6rem}
}

/* Featured Project Highlight Section */
.featured-project-section {
  position: relative;
  margin-top: -100px;
  padding: 80px 2rem 80px 2rem;
  margin-bottom: 0;
  z-index: 10;
  min-height: 700px;
}

.featured-project-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/background client.jpg') center/cover no-repeat;
  background-attachment: fixed;
  border-radius: 0;
  z-index: 1;
  pointer-events: none;
}

.about-page-section::before {
  background: url('../images/background footer.jpg') center/cover no-repeat;
}

.about-page-section {
  padding-bottom: 40px;
  min-height: auto;
}

.about-page-section .company-headline,
.about-page-section .company-text {
  color: #fff;
}

.about-journey-section {
  position: relative;
  padding: 0 0 70px;
  background: #000 url('../images/aboutusjourney.jpg') top left repeat;
  background-size: 520px auto;
  background-color: #000;
  min-height: 900px;
  width: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.about-journey-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
  pointer-events: none;
}

.journey-main-title {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 100px;
  letter-spacing: 0.18em;
  color: #ffffff;
  margin: 0;
  padding: 80px 24px 40px;
  line-height: 1;
  text-transform: uppercase;
}

.about-zodiac-timeline {
  width: min(980px, 94vw);
  margin: 0 auto;
  margin-top: -216px;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.zodiac-svg {
  position: relative;
  z-index: 4; /* ensure text and lines sit above the photos */
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.zodiac-line {
  fill: none;
  stroke: rgba(255,255,255,0.25);
  stroke-width: 0.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Flowing colour segments ── */
.zodiac-seg {
  fill: none;
  stroke-width: 1.0;
  stroke-linecap: round;
  stroke-dashoffset: var(--seg-len, 60);
  stroke-dasharray: var(--seg-len, 60);
  transition: stroke-dashoffset 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}
.zodiac-seg.is-active {
  stroke-dashoffset: 0;
  opacity: 1;
}
/* Per-segment colour + individual drop-shadow glow */
.zodiac-seg.seg-1  { stroke: #ffffff;   --seg-len: 58.52; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px rgba(180,220,255,0.9)); }
.zodiac-seg.seg-2  { stroke: #dff0ff;   --seg-len: 53.85; filter: drop-shadow(0 0 3px #dff0ff) drop-shadow(0 0 7px rgba(150,210,255,0.85)); }
.zodiac-seg.seg-3  { stroke: #b8d8ff;   --seg-len: 58.52; filter: drop-shadow(0 0 3px #b8d8ff) drop-shadow(0 0 8px rgba(120,190,255,0.8)); }
.zodiac-seg.seg-4  { stroke: #96c8ff;   --seg-len: 53.85; filter: drop-shadow(0 0 3px #96c8ff) drop-shadow(0 0 8px rgba(100,180,255,0.8)); }
.zodiac-seg.seg-5  { stroke: #7ab8ff;   --seg-len: 58.52; filter: drop-shadow(0 0 3px #7ab8ff) drop-shadow(0 0 9px rgba(80,165,255,0.8)); }
.zodiac-seg.seg-6  { stroke: #60aaff;   --seg-len: 58.52; filter: drop-shadow(0 0 3px #60aaff) drop-shadow(0 0 9px rgba(60,150,255,0.8)); }
.zodiac-seg.seg-7  { stroke: #7ab8ff;   --seg-len: 58.52; filter: drop-shadow(0 0 3px #7ab8ff) drop-shadow(0 0 9px rgba(80,165,255,0.8)); }
.zodiac-seg.seg-8  { stroke: #96c8ff;   --seg-len: 58.52; filter: drop-shadow(0 0 3px #96c8ff) drop-shadow(0 0 8px rgba(100,180,255,0.8)); }
.zodiac-seg.seg-9  { stroke: #b8d8ff;   --seg-len: 58.52; filter: drop-shadow(0 0 3px #b8d8ff) drop-shadow(0 0 8px rgba(120,190,255,0.85)); }
.zodiac-seg.seg-10 { stroke: #dff0ff;   --seg-len: 58.52; filter: drop-shadow(0 0 3px #dff0ff) drop-shadow(0 0 7px rgba(180,220,255,0.9)); }

.zodiac-dot {
  fill: #ffffff;
  stroke: none;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.5));
  transition: fill 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}
/* Active star — blazing neon glow + scale up */
.zodiac-dot.is-active {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.35);
}
.zodiac-dot.dot-1.is-active  { fill: #ffffff;  filter: drop-shadow(0 0 3px #fff)     drop-shadow(0 0 9px rgba(255,255,255,1))  drop-shadow(0 0 20px rgba(220,240,255,0.9)); }
.zodiac-dot.dot-2.is-active  { fill: #00CFFF;  filter: drop-shadow(0 0 3px #00CFFF)  drop-shadow(0 0 9px rgba(0,207,255,1))    drop-shadow(0 0 20px rgba(0,207,255,0.8)); }
.zodiac-dot.dot-3.is-active  { fill: #FFE600;  filter: drop-shadow(0 0 3px #FFE600)  drop-shadow(0 0 9px rgba(255,230,0,1))    drop-shadow(0 0 20px rgba(255,230,0,0.8)); }
.zodiac-dot.dot-4.is-active  { fill: #FF7A00;  filter: drop-shadow(0 0 3px #FF7A00)  drop-shadow(0 0 9px rgba(255,122,0,1))    drop-shadow(0 0 20px rgba(255,122,0,0.8)); }
.zodiac-dot.dot-5.is-active  { fill: #FF2D55;  filter: drop-shadow(0 0 3px #FF2D55)  drop-shadow(0 0 9px rgba(255,45,85,1))    drop-shadow(0 0 20px rgba(255,45,85,0.8)); }
.zodiac-dot.dot-6.is-active  { fill: #39FF14;  filter: drop-shadow(0 0 3px #39FF14)  drop-shadow(0 0 9px rgba(57,255,20,1))    drop-shadow(0 0 20px rgba(57,255,20,0.8)); }
.zodiac-dot.dot-7.is-active  { fill: #FF00CC;  filter: drop-shadow(0 0 3px #FF00CC)  drop-shadow(0 0 9px rgba(255,0,204,1))    drop-shadow(0 0 20px rgba(255,0,204,0.8)); }
.zodiac-dot.dot-8.is-active  { fill: #BF00FF;  filter: drop-shadow(0 0 3px #BF00FF)  drop-shadow(0 0 9px rgba(191,0,255,1))    drop-shadow(0 0 20px rgba(191,0,255,0.8)); }
.zodiac-dot.dot-9.is-active  { fill: #00FFD1;  filter: drop-shadow(0 0 3px #00FFD1)  drop-shadow(0 0 9px rgba(0,255,209,1))    drop-shadow(0 0 20px rgba(0,255,209,0.8)); }
.zodiac-dot.dot-10.is-active { fill: #AAFF00;  filter: drop-shadow(0 0 3px #AAFF00)  drop-shadow(0 0 9px rgba(170,255,0,1))    drop-shadow(0 0 20px rgba(170,255,0,0.8)); }
.zodiac-dot.dot-11.is-active { fill: #FF6B6B;  filter: drop-shadow(0 0 3px #FF6B6B)  drop-shadow(0 0 9px rgba(255,107,107,1))  drop-shadow(0 0 20px rgba(255,107,107,0.8)); }

.dot-1 { animation-delay: 0s; }
.dot-2 { animation-delay: 0.16s; }
.dot-3 { animation-delay: 0.32s; }
.dot-4 { animation-delay: 0.48s; }
.dot-5 { animation-delay: 0.64s; }
.dot-6 { animation-delay: 0.8s; }
.dot-7 { animation-delay: 0.96s; }
.dot-8 { animation-delay: 1.12s; }
.dot-9 { animation-delay: 1.28s; }
.dot-10 { animation-delay: 1.44s; }
.dot-11 { animation-delay: 1.6s; }

.zodiac-year {
  font-family: 'Poppins', sans-serif;
  font-size: 4px;
  font-weight: 600;
  fill: #ffffff;
  letter-spacing: 0.2px;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.35);
  stroke-width: 0.35;
  text-shadow: 0 0 8px rgba(255,255,255,0.45);
}

.zodiac-year-note-block {
  fill: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 1.8px;
  font-weight: 400;
  letter-spacing: 0;
  stroke: rgba(0,0,0,0.45);
  stroke-width: 0.18;
  paint-order: stroke;
  opacity: 0;
}

.zodiac-2016-img,
.zodiac-2017-img,
.zodiac-2018-img,
.zodiac-2019-img,
.zodiac-2020-img,
.zodiac-2021-img,
.zodiac-2022-img,
.zodiac-2023-img,
.zodiac-2024-img,
.zodiac-2025-img,
.zodiac-2026-img {
  position: absolute;
  width: 40%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  z-index: 3;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}

/* Right-side images (cx=60) */
.zodiac-2016-img { left: -10%; top: 7%; }
.zodiac-2018-img { left: -10%; top: 25%; }
.zodiac-2020-img { left: -10%; top: 41%; }
.zodiac-2022-img { left: -10%; top: 59%; }
.zodiac-2024-img { left: -10%; top: 77%; }
.zodiac-2026-img { left: -10%; top: 94%; }

/* Left-side images (cx=40) */
.zodiac-2017-img { right: -10%; top: 16%; }
.zodiac-2019-img { right: -10%; top: 33%; }
.zodiac-2021-img { right: -10%; top: 50%; }
.zodiac-2023-img { right: -10%; top: 68%; }
.zodiac-2025-img { right: -10%; top: 86%; }

/* ── Zodiac scroll animations ── */
/* Right-column images: slide from left (direction → right) */
.zodiac-2016-img,
.zodiac-2018-img,
.zodiac-2020-img,
.zodiac-2022-img,
.zodiac-2024-img,
.zodiac-2026-img {
  opacity: 0;
  transform: translateX(-70px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Left-column images: slide from right (direction → left) */
.zodiac-2017-img,
.zodiac-2019-img,
.zodiac-2021-img,
.zodiac-2023-img,
.zodiac-2025-img {
  opacity: 0;
  transform: translateX(70px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* All images revealed on scroll */
.zodiac-2016-img.in-view, .zodiac-2017-img.in-view,
.zodiac-2018-img.in-view, .zodiac-2019-img.in-view,
.zodiac-2020-img.in-view, .zodiac-2021-img.in-view,
.zodiac-2022-img.in-view, .zodiac-2023-img.in-view,
.zodiac-2024-img.in-view, .zodiac-2025-img.in-view,
.zodiac-2026-img.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* All new year text blocks hidden by default */
.zodiac-year-note-2018-desktop, .zodiac-year-note-2018-1366, .zodiac-year-note-2018-mobile,
.zodiac-year-note-2019-desktop, .zodiac-year-note-2019-1366, .zodiac-year-note-2019-mobile,
.zodiac-year-note-2020-desktop, .zodiac-year-note-2020-1366, .zodiac-year-note-2020-mobile,
.zodiac-year-note-2021-desktop, .zodiac-year-note-2021-1366, .zodiac-year-note-2021-mobile,
.zodiac-year-note-2022-desktop, .zodiac-year-note-2022-1366, .zodiac-year-note-2022-mobile,
.zodiac-year-note-2023-desktop, .zodiac-year-note-2023-1366, .zodiac-year-note-2023-mobile,
.zodiac-year-note-2024-desktop, .zodiac-year-note-2024-1366, .zodiac-year-note-2024-mobile,
.zodiac-year-note-2025-desktop, .zodiac-year-note-2025-1366, .zodiac-year-note-2025-mobile,
.zodiac-year-note-2026-desktop, .zodiac-year-note-2026-1366, .zodiac-year-note-2026-mobile {
  display: none;
}

.zodiac-year-note-2017-desktop,
.zodiac-year-note-2017-1366,
.zodiac-year-note-2017-mobile {
  display: none;
}

.zodiac-year-note-mobile {
  display: none;
}

.zodiac-year-note-1366 {
  display: none;
}

@media (min-width: 1600px) {
  .zodiac-year-note-desktop {
    display: inline !important;
    font-size: 2.1px;
    transform: translate(-11px, 3px);
  }

  .zodiac-year-note-2017-desktop {
    display: inline !important;
    font-size: 2.1px;
    transform: translate(11px, 3px);
  }

  /* All right-side years 2018-2026 (cx=60) */
  .zodiac-year-note-2018-desktop,
  .zodiac-year-note-2020-desktop,
  .zodiac-year-note-2022-desktop,
  .zodiac-year-note-2024-desktop,
  .zodiac-year-note-2026-desktop {
    display: inline !important;
    font-size: 2.1px;
    transform: translate(-11px, 3px);
  }

  /* All left-side years 2019-2025 (cx=40) */
  .zodiac-year-note-2019-desktop,
  .zodiac-year-note-2021-desktop,
  .zodiac-year-note-2023-desktop,
  .zodiac-year-note-2025-desktop {
    display: inline !important;
    font-size: 2.1px;
    transform: translate(11px, 3px);
  }

  .zodiac-year-note-1366,
  .zodiac-year-note-mobile,
  .zodiac-year-note-2017-1366,
  .zodiac-year-note-2017-mobile,
  .zodiac-year-note-2018-1366, .zodiac-year-note-2018-mobile,
  .zodiac-year-note-2019-1366, .zodiac-year-note-2019-mobile,
  .zodiac-year-note-2020-1366, .zodiac-year-note-2020-mobile,
  .zodiac-year-note-2021-1366, .zodiac-year-note-2021-mobile,
  .zodiac-year-note-2022-1366, .zodiac-year-note-2022-mobile,
  .zodiac-year-note-2023-1366, .zodiac-year-note-2023-mobile,
  .zodiac-year-note-2024-1366, .zodiac-year-note-2024-mobile,
  .zodiac-year-note-2025-1366, .zodiac-year-note-2025-mobile,
  .zodiac-year-note-2026-1366, .zodiac-year-note-2026-mobile {
    display: none !important;
  }

  @keyframes zodiac-text-right-1600 {
    from { opacity: 0; transform: translate(39px, 3px); }
    to   { opacity: 1; transform: translate(-11px, 3px); }
  }
  @keyframes zodiac-text-left-1600 {
    from { opacity: 0; transform: translate(-39px, 3px); }
    to   { opacity: 1; transform: translate(11px, 3px); }
  }
  text[text-anchor="end"].zodiac-year-note-block.in-view {
    animation: zodiac-text-right-1600 0.8s ease forwards;
  }
  text[text-anchor="start"].zodiac-year-note-block.in-view {
    animation: zodiac-text-left-1600 0.8s ease forwards;
  }
}

@media (min-width: 1024px) and (max-width: 1599px) {
  .zodiac-year-note-desktop,
  .zodiac-year-note-mobile,
  .zodiac-year-note-2017-desktop,
  .zodiac-year-note-2017-mobile,
  .zodiac-year-note-2018-desktop, .zodiac-year-note-2018-mobile,
  .zodiac-year-note-2019-desktop, .zodiac-year-note-2019-mobile,
  .zodiac-year-note-2020-desktop, .zodiac-year-note-2020-mobile,
  .zodiac-year-note-2021-desktop, .zodiac-year-note-2021-mobile,
  .zodiac-year-note-2022-desktop, .zodiac-year-note-2022-mobile,
  .zodiac-year-note-2023-desktop, .zodiac-year-note-2023-mobile,
  .zodiac-year-note-2024-desktop, .zodiac-year-note-2024-mobile,
  .zodiac-year-note-2025-desktop, .zodiac-year-note-2025-mobile,
  .zodiac-year-note-2026-desktop, .zodiac-year-note-2026-mobile {
    display: none !important;
  }

  .zodiac-year-note-1366 {
    display: inline !important;
    font-size: 1.72px;
    transform: translate(-14px, 3px);
  }

  .zodiac-year-note-2017-1366 {
    display: inline !important;
    font-size: 1.72px;
    transform: translate(14px, 3px);
  }

  /* Right-side 1366 years */
  .zodiac-year-note-2018-1366,
  .zodiac-year-note-2020-1366,
  .zodiac-year-note-2022-1366,
  .zodiac-year-note-2024-1366,
  .zodiac-year-note-2026-1366 {
    display: inline !important;
    font-size: 1.72px;
    transform: translate(-14px, 3px);
  }

  /* Left-side 1366 years */
  .zodiac-year-note-2019-1366,
  .zodiac-year-note-2021-1366,
  .zodiac-year-note-2023-1366,
  .zodiac-year-note-2025-1366 {
    display: inline !important;
    font-size: 1.72px;
    transform: translate(14px, 3px);
  }

  @keyframes zodiac-text-right-1366 {
    from { opacity: 0; transform: translate(36px, 3px); }
    to   { opacity: 1; transform: translate(-14px, 3px); }
  }
  @keyframes zodiac-text-left-1366 {
    from { opacity: 0; transform: translate(-36px, 3px); }
    to   { opacity: 1; transform: translate(14px, 3px); }
  }
  text[text-anchor="end"].zodiac-year-note-block.in-view {
    animation: zodiac-text-right-1366 0.8s ease forwards;
  }
  text[text-anchor="start"].zodiac-year-note-block.in-view {
    animation: zodiac-text-left-1366 0.8s ease forwards;
  }

  .journey-main-title {
    font-size: 72px;
    letter-spacing: 0.05em;
  }
}

@keyframes zodiacLineGlow {
  0%, 100% {
    opacity: 0.8;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.85)) drop-shadow(0 0 8px rgba(255,255,255,0.28));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(255,255,255,1)) drop-shadow(0 0 14px rgba(255,255,255,0.48));
  }
}

@keyframes zodiacDotTwinkle {
  0%, 100% {
    opacity: 0.82;
    transform: scale(0.96);
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.86)) drop-shadow(0 0 10px rgba(255,255,255,0.34));
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px rgba(255,255,255,1)) drop-shadow(0 0 16px rgba(255,255,255,0.58));
  }
}

/* Contact page: extend featured background to include map */
.contact-featured-section {
  padding-bottom: 40px;
  min-height: auto;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .contact-featured-section {
    padding-bottom: 520px;
    min-height: 1200px;
    overflow: hidden;
  }

  .contact-featured-section::before {
    background-attachment: scroll;
  }

  .about-journey-section {
    padding: 10px 0 50px;
    min-height: 500px;
    background-attachment: scroll;
    background-size: 320px auto;
    margin-bottom: 0;
  }

  .journey-main-title {
    font-size: 36px;
    letter-spacing: 0.01em;
    padding: 40px 16px 24px;
  }

  .about-zodiac-timeline {
    width: min(560px, 92vw);
    margin-top: -108px;
  }

  .zodiac-2016-img,
  .zodiac-2017-img,
  .zodiac-2018-img,
  .zodiac-2019-img,
  .zodiac-2020-img,
  .zodiac-2021-img,
  .zodiac-2022-img,
  .zodiac-2023-img,
  .zodiac-2024-img,
  .zodiac-2025-img,
  .zodiac-2026-img {
    width: 36%;
    border-radius: 12px;
  }

  /* Mobile right-side positions */
  .zodiac-2016-img { left: 3%; top: 7%; width: 42%; }
  .zodiac-2018-img { left: 3%; top: 24%; width: 42%; }
  .zodiac-2020-img { left: 3%; top: 40%; width: 42%; }
  .zodiac-2022-img { left: 3%; top: 58%; width: 42%; }
  .zodiac-2024-img { left: 3%; top: 76%; width: 42%; }
  .zodiac-2026-img { left: 3%; top: 93%; width: 42%; }

  /* Mobile left-side positions */
  .zodiac-2017-img { right: 1%; top: 16%; width: 42%; }
  .zodiac-2019-img { right: 1%; top: 32%; width: 42%; }
  .zodiac-2021-img { right: 1%; top: 49%; width: 42%; }
  .zodiac-2023-img { right: 1%; top: 67%; width: 42%; }
  .zodiac-2025-img { right: 1%; top: 85%; width: 42%; }

  .zodiac-year-note-block {
    font-size: 2.8px;
    transform: translate(0, 10px);
  }

  .zodiac-year-note-desktop,
  .zodiac-year-note-2017-desktop, .zodiac-year-note-2017-1366,
  .zodiac-year-note-2018-desktop, .zodiac-year-note-2018-1366,
  .zodiac-year-note-2019-desktop, .zodiac-year-note-2019-1366,
  .zodiac-year-note-2020-desktop, .zodiac-year-note-2020-1366,
  .zodiac-year-note-2021-desktop, .zodiac-year-note-2021-1366,
  .zodiac-year-note-2022-desktop, .zodiac-year-note-2022-1366,
  .zodiac-year-note-2023-desktop, .zodiac-year-note-2023-1366,
  .zodiac-year-note-2024-desktop, .zodiac-year-note-2024-1366,
  .zodiac-year-note-2025-desktop, .zodiac-year-note-2025-1366,
  .zodiac-year-note-2026-desktop, .zodiac-year-note-2026-1366 {
    display: none;
  }

  .zodiac-year-note-mobile { display: inline; transform: translate(-2px, 4px); }
  .zodiac-year-note-2017-mobile { display: inline; transform: translate(6px, -1px); }

  /* Right-side mobile years */
  .zodiac-year-note-2018-mobile { display: inline; transform: translate(-2px, -1px); }
  .zodiac-year-note-2020-mobile,
  .zodiac-year-note-2022-mobile,
  .zodiac-year-note-2024-mobile,
  .zodiac-year-note-2026-mobile { display: inline; transform: translate(-2px, 4px); }

  /* Left-side mobile years */
  .zodiac-year-note-2019-mobile,
  .zodiac-year-note-2021-mobile,
  .zodiac-year-note-2023-mobile,
  .zodiac-year-note-2025-mobile { display: inline; transform: translate(6px, -1px); }

  @keyframes zodiac-text-right-mobile-2018 {
    from { opacity: 0; transform: translate(8px, -1px); }
    to   { opacity: 1; transform: translate(-2px, -1px); }
  }
  text[text-anchor="end"].zodiac-year-note-block.zodiac-year-note-2018-mobile.in-view {
    animation: zodiac-text-right-mobile-2018 0.8s ease forwards;
  }
  @keyframes zodiac-text-right-mobile {
    from { opacity: 0; transform: translate(8px, 4px); }
    to   { opacity: 1; transform: translate(-2px, 4px); }
  }
  @keyframes zodiac-text-right-mobile-2016 {
    from { opacity: 0; transform: translate(8px, 4px); }
    to   { opacity: 1; transform: translate(-2px, 4px); }
  }
  text[text-anchor="end"].zodiac-year-note-block.zodiac-year-note-mobile.in-view {
    animation: zodiac-text-right-mobile-2016 0.8s ease forwards;
  }
  @keyframes zodiac-text-left-mobile-2017 {
    from { opacity: 0; transform: translate(-4px, -1px); }
    to   { opacity: 1; transform: translate(6px, -1px); }
  }
  text[text-anchor="start"].zodiac-year-note-block.zodiac-year-note-2017-mobile.in-view {
    animation: zodiac-text-left-mobile-2017 0.8s ease forwards;
  }
  @keyframes zodiac-text-left-mobile {
    from { opacity: 0; transform: translate(-4px, -1px); }
    to   { opacity: 1; transform: translate(6px, -1px); }
  }
  text[text-anchor="end"].zodiac-year-note-block.in-view {
    animation: zodiac-text-right-mobile 0.8s ease forwards;
  }
  text[text-anchor="start"].zodiac-year-note-block.in-view {
    animation: zodiac-text-left-mobile 0.8s ease forwards;
  }

  .zodiac-year {
    font-size: 4.8px;
  }
}

.featured-project-container {
  max-width: 1280px;
  margin: -120px auto 0 auto;
  position: relative;
  padding: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
}

.featured-project-image {
  width: 100%;
  height: 600px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.featured-project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.featured-project-image img.is-swapping {
  opacity: 0.2;
  transform: translateX(-18px) scale(1.02);
}

.featured-project-card {
  overflow: hidden;
  position: relative;
}

/* Slide-out animations for IMAGE only */
.featured-project-image img.slide-out-left {
  animation: slideOutLeft 0.45s ease-in-out forwards;
}

.featured-project-image img.slide-out-right {
  animation: slideOutRight 0.45s ease-in-out forwards;
}

/* Slide-in animations for IMAGE only */
.featured-project-image img.slide-in-left {
  animation: slideInLeft 0.5s ease-in-out forwards;
}

.featured-project-image img.slide-in-right {
  animation: slideInRight 0.5s ease-in-out forwards;
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.latest-badge {
  position: absolute;
  top: 2rem;
  left: 2rem;
  background: #ff7a00;
  color: #fff;
  padding: 0.6rem 1.5rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(255,122,0,0.3);
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(125,255,95,0.95);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
    z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.carousel-arrow:hover {
  background: rgb(125,255,95);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.carousel-arrow.left {
  left: 2rem;
}

.carousel-arrow.right {
  right: 2rem;
}

.carousel-arrow svg {
  color: #0d5a3d;
}

/* Modern Carousel Dots Navigation */
.featured-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  position: relative;
  z-index: 12;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 24px;
  max-width: 420px;
  margin: 16px auto 0 auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(125, 255, 95, 0.4);
  background: transparent;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding: 0;
  outline: none;
  flex-shrink: 0;
}

.carousel-dot::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.3s ease;
}

/* Team Directors Section */
.directors-container {
  background: url('../images/backgroundbaru.jpg') center/cover no-repeat;
  border-radius: 20px;
  padding: 50px 0px 0px 0px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  max-width: 1200px;
  margin: -170px auto 0 auto;
  position: relative;
  z-index: 5;
}

.team-directors-header {
  text-align: left;
  margin-bottom: 30px;
  position: relative;
  left: 0;
}

.logo-section {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  height: auto;
  padding: 20px 0;
  margin-left: 180px;
}

.directors-logo {
  max-width: 150px;
  height: 170px;
  flex-shrink: 0;
  transform: scaleX(1.5);
  transform-origin: right center;
  object-fit: contain;
}

.logo-text {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  margin: 0 0 0 -15px;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0;
  transform: scaleX(2);
  transform-origin: left center;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.directors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.director-card {
  background: #f0f0f0;
  border-radius: 0;
  overflow: hidden;
  text-align: center;
  box-shadow: none;
  border-right: 1px solid #e0e0e0;
  transition: background-color 0.3s ease;
  position: relative;
}

.director-card:hover {
  background-color: #ff9800;
}

.director-card:first-child::before,
.director-card:last-child::before {
  display: none;
}

.director-card:last-child {
  border-right: none;
}

.director-image {
  width: 100%;
  height: 450px;
  background: #e0e0e0;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.director-card:hover .director-image {
  background-color: #ff9800;
}

.director-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.director-info {
  padding: 35px 20px 40px 20px;
  transition: background-color 0.3s ease;
  position: relative;
  background: rgba(0, 0, 0, 0.15);
}

.director-card:hover .director-info {
  background-color: #ff9800;
}

.director-name {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0d5a3d;
  margin: 0 0 8px 0;
}

.director-title {
  font-size: 0.9rem;
  color: #555;
  margin: 0;
}

@media (max-width: 900px) {
  .directors-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .directors-logo {
    max-width: 220px;
  }
}


.carousel-dot:hover {
  border-color: rgba(125, 255, 95, 0.8);
  transform: scale(1.2);
}

.carousel-dot:hover::before {
  background: rgba(125, 255, 95, 0.1);
}

.carousel-dot.active {
  background: rgb(125, 255, 95);
  border-color: rgb(125, 255, 95);
  width: 32px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(125, 255, 95, 0.5);
}

.carousel-dot.active::before {
  background: rgba(125, 255, 95, 0.15);
}

/* Featured Project Card - Overlapping Image */
.featured-project-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  padding: 2.5rem 3rem;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%, 0);
  right: auto;
  width: calc(100% - 4rem);
  max-width: 1200px;
  z-index: 15;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.featured-project-card.is-swapping {
  opacity: 0.2;
  transform: translate(-50%, 8px);
}

.project-card-meta {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  color: #666;
}

.project-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.project-slide-counter {
  font-size: 0.85rem;
  font-weight: 600;
  color: #999;
  letter-spacing: 0.05em;
  margin-left: auto;
}

/* New Extra Section between Featured and News */
.projects-extra-section {
  position: relative;
  padding: 280px 0 120px;
  background: url('../images/poweringexcel.jpeg') center center no-repeat;
  background-size: cover;
  min-height: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 0;
}

.projects-extra-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.projects-extra-section .wrap {
  position: relative;
  z-index: 2;
}

.projects-generator-section {
  position: relative;
  padding: 0;
  background: url('../images/bubble-Photoroom.jpg') center center no-repeat;
  background-size: cover;
  min-height: 780px;
  display: block;
  width: 100%;
  margin-bottom: 0;
  overflow: hidden;
}

.projects-generator-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 1;
}

.projects-major-label {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-family: 'Archivo Black', 'League Spartan', sans-serif;
  font-size: 48px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 10px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  text-indent: 10px;
}

.projects-major-sub {
  position: absolute;
  top: 74%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 37px;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.3;
  pointer-events: none;
}

.projects-generator-section .wrap {
  position: relative;
  z-index: 2;
  overflow: visible;
  width: 100%;
}

/* static wrapper — holds the mask; does NOT rotate */
.projects-year-orbit-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1600px, 100vw);
  height: 1400px;   /* extends well below section so full circle can spin */
  pointer-events: none;
  z-index: 2;
  /* Fixed fade zone: visible top arc, fade at equator, invisible bottom arc */
  -webkit-mask-image: linear-gradient(to bottom,
    black 0%,
    black 48%,
    rgba(0,0,0,0.05) 52%,
    transparent 55%);
  mask-image: linear-gradient(to bottom,
    black 0%,
    black 48%,
    rgba(0,0,0,0.05) 52%,
    transparent 55%);
}

/* rotating point — positioned at the orbit centre (= dividing line between zones) */
.projects-year-orbit {
  position: absolute;
  left: 50%;
  top: 700px;   /* orbit centre sits at dividing line */
  width: 0;
  height: 0;
  animation: projects-orbit-rotate 45s linear infinite;
}

/* Pause orbit animation when section not visible (performance optimization) */
.projects-generator-section.orbit-paused .projects-year-orbit {
  animation-play-state: paused;
}

.projects-generator-section.orbit-paused .projects-year-orbit .year-text {
  animation-play-state: paused;
}

.projects-year-orbit .year-node {
  position: absolute;
  left: 0;
  top: 0;
  width: 260px;
  height: 268px;
  margin: -134px 0 0 -130px;
  /* Organic blob base shape */
  border-radius: 48% 52% 55% 45% / 52% 44% 56% 48%;
  /* Transparent dark interior like real soap bubble */
  background:
    radial-gradient(ellipse 70% 50% at 32% 28%, rgba(255,255,255,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(8,16,36,0.42) 0%, rgba(4,10,26,0.62) 100%);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 54px;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.5);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.35),
    inset 0 0 40px rgba(0,0,0,0.25);
  overflow: visible;
  isolation: isolate;
  pointer-events: auto;
  animation: projects-blob-morph 7s ease-in-out infinite;
  transition: background 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
  cursor: pointer;
}

/* Hover: bubble becomes solid white, text black, rim black */
.projects-year-orbit .year-node:hover {
  background: rgba(255, 255, 255, 0.96);
  color: #0b1b2a;
  text-shadow: none;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    inset 0 0 0 3px rgba(0,0,0,0.85);
  cursor: pointer;
}

.projects-year-orbit .year-node:hover::before {
  background: conic-gradient(from 0deg,
    rgba(0,0,0,0.9),
    rgba(0,0,0,0.4),
    rgba(0,0,0,0.9),
    rgba(0,0,0,0.4),
    rgba(0,0,0,0.9)
  );
  filter: none;
  animation: none;
  opacity: 1;
}

.projects-year-orbit .year-node:hover::after {
  opacity: 0;
}

/* ── Year reveal panel (match-and-move) ─────────────────────── */
.year-panel {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #0b1b2a;
  clip-path: circle(0px at 50% 50%);
  pointer-events: none;
}

.year-panel.is-open {
  pointer-events: auto;
}

/* Header floats on top of the columns */
.yp-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 36px;
  z-index: 2;
  pointer-events: none;
}

.yp-year-badge {
  position: relative;
  isolation: isolate;
  width: 130px;
  height: 134px;
  border-radius: 48% 52% 55% 45% / 52% 44% 56% 48%;
  background:
    radial-gradient(ellipse 70% 50% at 32% 28%, rgba(255,255,255,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(8,16,36,0.42) 0%, rgba(4,10,26,0.62) 100%);
  color: #fff;
  font-family: 'Archivo Black', sans-serif;
  font-size: 30px;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.5);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 0 40px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.3s ease 0.4s;
  flex-shrink: 0;
  pointer-events: none;
  animation: projects-blob-morph 7s ease-in-out infinite;
}

.yp-year-badge::before,
.yp-year-badge::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.yp-year-badge::before {
  inset: -3px;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,0.95),
    rgba(255,255,255,0.4),
    rgba(255,255,255,0.95),
    rgba(255,255,255,0.4),
    rgba(255,255,255,0.95)
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  filter: blur(1px) drop-shadow(0 0 6px rgba(255,255,255,0.9)) drop-shadow(0 0 14px rgba(255,255,255,0.6));
  animation: projects-iridescent-hue 3s linear infinite;
  z-index: 2;
}

.yp-year-badge::after {
  inset: 0;
  background:
    radial-gradient(ellipse 30% 18% at 30% 22%, rgba(255,255,255,0.82) 0%, transparent 100%),
    radial-gradient(ellipse 18% 10% at 65% 72%, rgba(255,255,255,0.28) 0%, transparent 100%);
  z-index: 3;
}

.year-panel.is-open .yp-year-badge {
  opacity: 1;
}

.year-panel-close {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #111;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease 0.55s, background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  pointer-events: auto;
}

.year-panel.is-open .year-panel-close {
  opacity: 1;
}

.year-panel-close:hover {
  background: #e0e0e0;
  transform: scale(1.08);
}

/* Columns fill the entire panel */
.yp-columns {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0;
  transition: opacity 0.35s ease 0.65s;
}

.year-panel.is-open .yp-columns {
  opacity: 1;
}

.yp-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 28px;
  text-align: center;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.yp-col:hover {
  filter: brightness(1.12);
}

.yp-col-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 49px;
  line-height: 1.35;
  display: block;
  cursor: pointer;
}

.yp-col:hover .yp-col-title {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ── Project detail panel (wipe in on column click) ─────────── */
.yp-detail {
  position: absolute;
  inset: 0;
  z-index: 5;
  clip-path: inset(0 100% 0 0);
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
}

.yp-detail.is-open {
  pointer-events: auto;
}

.yp-detail-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 36px;
  z-index: 2;
  pointer-events: none;
}

.yp-detail-badge {
  width: 130px;
  height: 134px;
  border-radius: 48% 52% 55% 45% / 52% 44% 56% 48%;
  background:
    radial-gradient(ellipse 70% 50% at 32% 28%, rgba(255,255,255,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(8,16,36,0.42) 0%, rgba(4,10,26,0.62) 100%);
  color: #fff;
  font-family: 'Archivo Black', sans-serif;
  font-size: 30px;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 0 40px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: projects-blob-morph 7s ease-in-out infinite;
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.yp-detail-badge::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,0.95), rgba(255,255,255,0.4),
    rgba(255,255,255,0.95), rgba(255,255,255,0.4),
    rgba(255,255,255,0.95));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  filter: blur(1px) drop-shadow(0 0 6px rgba(255,255,255,0.9)) drop-shadow(0 0 14px rgba(255,255,255,0.6));
  animation: projects-iridescent-hue 3s linear infinite;
  z-index: 2;
}

.yp-detail-back {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #111;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
  pointer-events: auto;
}

.yp-detail-back:hover {
  background: #e0e0e0;
  transform: scale(1.08);
}

.yp-detail-body {
  position: absolute;
  inset: 0;
  padding: 220px 0 48px 64px;
}

.yp-detail-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 48px);
  line-height: 1.25;
  text-transform: uppercase;
  margin: 0;
  max-width: 520px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.yp-detail-desc {
  position: absolute;
  top: 220px;
  right: 64px;
  width: 520px;
  font-family: 'B612', monospace;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.7;
  text-align: left;
  margin: 0;
}

/* Slide in from right when detail panel opens */
.yp-detail.is-open .yp-detail-desc {
  animation: yp-desc-slide-in 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.25s both;
}

@keyframes yp-desc-slide-in {
  from {
    opacity: 0;
    transform: translateX(140px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Each bubble gets slightly different organic shape & morph timing */
.projects-year-orbit .year-node:nth-child(1)  { border-radius: 48% 52% 55% 45% / 52% 44% 56% 48%; animation-delay: 0s; }
.projects-year-orbit .year-node:nth-child(2)  { border-radius: 54% 46% 43% 57% / 46% 55% 45% 54%; animation-delay: -1.4s; }
.projects-year-orbit .year-node:nth-child(3)  { border-radius: 42% 58% 56% 44% / 55% 42% 58% 45%; animation-delay: -2.8s; }
.projects-year-orbit .year-node:nth-child(4)  { border-radius: 57% 43% 48% 52% / 43% 57% 43% 57%; animation-delay: -4.2s; }
.projects-year-orbit .year-node:nth-child(5)  { border-radius: 45% 55% 52% 48% / 58% 45% 55% 42%; animation-delay: -5.6s; }
.projects-year-orbit .year-node:nth-child(6)  { border-radius: 52% 48% 44% 56% / 44% 52% 48% 56%; animation-delay: -0.7s; }
.projects-year-orbit .year-node:nth-child(7)  { border-radius: 46% 54% 58% 42% / 52% 46% 54% 48%; animation-delay: -2.1s; }
.projects-year-orbit .year-node:nth-child(8)  { border-radius: 55% 45% 46% 54% / 48% 58% 42% 52%; animation-delay: -3.5s; }
.projects-year-orbit .year-node:nth-child(9)  { border-radius: 43% 57% 53% 47% / 55% 43% 57% 45%; animation-delay: -4.9s; }
.projects-year-orbit .year-node:nth-child(10) { border-radius: 58% 42% 47% 53% / 42% 56% 44% 58%; animation-delay: -6.3s; }

/* Counter-rotate the text so numbers are always upright  */
.projects-year-orbit .year-text {
  display: inline-block;
  animation: projects-counter-rotate 45s linear infinite;
  will-change: transform;
}

/* ── Orbital positions ──────────────────────────────────────────────
   Formula: rotate(CSS_angle) translate(radius) rotate(-CSS_angle)
   CSS_angle for top-arc = -90° + (n × 36°)  where n = 0 at top centre

   Visible (top arc):   2016 n=-2  2017 n=-1  2018 n=0  2019 n=1  2020 n=2
   Hidden  (bot arc):   2021 n=3 … 2025 n=7
   ────────────────────────────────────────────────────────────────── */
.projects-year-orbit .year-node:nth-child(1)  { transform: rotate(-162deg) translate(560px) rotate(162deg); }  /* 2016 */
.projects-year-orbit .year-node:nth-child(2)  { transform: rotate(-126deg) translate(560px) rotate(126deg); }  /* 2017 */
.projects-year-orbit .year-node:nth-child(3)  { transform: rotate(-90deg)  translate(560px) rotate(90deg);  }  /* 2018 top */
.projects-year-orbit .year-node:nth-child(4)  { transform: rotate(-54deg)  translate(560px) rotate(54deg);  }  /* 2019 */
.projects-year-orbit .year-node:nth-child(5)  { transform: rotate(-18deg)  translate(560px) rotate(18deg);  }  /* 2020 */
.projects-year-orbit .year-node:nth-child(6)  { transform: rotate(18deg)   translate(560px) rotate(-18deg); }  /* 2021 hidden */
.projects-year-orbit .year-node:nth-child(7)  { transform: rotate(54deg)   translate(560px) rotate(-54deg); }  /* 2022 hidden */
.projects-year-orbit .year-node:nth-child(8)  { transform: rotate(90deg)   translate(560px) rotate(-90deg); }  /* 2023 hidden */
.projects-year-orbit .year-node:nth-child(9)  { transform: rotate(126deg)  translate(560px) rotate(-126deg); } /* 2024 hidden */
.projects-year-orbit .year-node:nth-child(10) { transform: rotate(162deg)  translate(560px) rotate(-162deg); } /* 2025 hidden */

/* Desktop short-height tuning (1024x600 class) — scoped to Projects page only */
@media (min-width: 900px) and (max-width: 1100px) and (max-height: 700px) {
  body.page-projects .projects-major-label {
    top: 58%;
    font-size: 40px;
    letter-spacing: 8px;
    text-indent: 8px;
  }

  body.page-projects .projects-major-sub {
    top: 70%;
    font-size: 30px;
    line-height: 1.2;
  }

  body.page-projects .projects-year-orbit-wrap {
    height: 1120px;
  }

  body.page-projects .projects-year-orbit {
    top: 560px;
  }

  body.page-projects .projects-year-orbit .year-node {
    width: 208px;
    height: 214px;
    margin: -107px 0 0 -104px;
    font-size: 46px;
  }

  body.page-projects .projects-year-orbit .year-node:nth-child(1)  { transform: rotate(-162deg) translate(450px) rotate(162deg); }
  body.page-projects .projects-year-orbit .year-node:nth-child(2)  { transform: rotate(-126deg) translate(450px) rotate(126deg); }
  body.page-projects .projects-year-orbit .year-node:nth-child(3)  { transform: rotate(-90deg)  translate(450px) rotate(90deg);  }
  body.page-projects .projects-year-orbit .year-node:nth-child(4)  { transform: rotate(-54deg)  translate(450px) rotate(54deg);  }
  body.page-projects .projects-year-orbit .year-node:nth-child(5)  { transform: rotate(-18deg)  translate(450px) rotate(18deg);  }
  body.page-projects .projects-year-orbit .year-node:nth-child(6)  { transform: rotate(18deg)   translate(450px) rotate(-18deg); }
  body.page-projects .projects-year-orbit .year-node:nth-child(7)  { transform: rotate(54deg)   translate(450px) rotate(-54deg); }
  body.page-projects .projects-year-orbit .year-node:nth-child(8)  { transform: rotate(90deg)   translate(450px) rotate(-90deg); }
  body.page-projects .projects-year-orbit .year-node:nth-child(9)  { transform: rotate(126deg)  translate(450px) rotate(-126deg); }
  body.page-projects .projects-year-orbit .year-node:nth-child(10) { transform: rotate(162deg)  translate(450px) rotate(-162deg); }

  body.page-projects .yp-header,
  body.page-projects .yp-detail-header {
    padding: 18px 24px;
  }

  body.page-projects .yp-year-badge,
  body.page-projects .yp-detail-badge {
    width: 96px;
    height: 100px;
    font-size: 23px;
  }

  body.page-projects .year-panel-close,
  body.page-projects .yp-detail-back {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }

  body.page-projects .yp-col {
    padding: 20px 18px;
  }

  body.page-projects .yp-col-title {
    line-height: 1.22;
  }

  body.page-projects .yp-detail-body {
    padding: 100px 24px 24px 24px;
  }

  body.page-projects .yp-detail-title {
    max-width: 42%;
    font-size: clamp(26px, 3.1vw, 44px) !important;
    line-height: 1.14 !important;
  }

  body.page-projects .yp-detail-desc {
    top: 170px;
    right: 24px;
    width: 41%;
    font-size: clamp(18px, 2.1vw, 30px);
    line-height: 1.45;
    max-height: calc(100% - 190px);
    overflow-y: auto;
  }
}

.projects-year-orbit .year-node::before,
.projects-year-orbit .year-node::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

/* Glowing white rim */
.projects-year-orbit .year-node::before {
  inset: -3px;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,0.95),
    rgba(255,255,255,0.4),
    rgba(255,255,255,0.95),
    rgba(255,255,255,0.4),
    rgba(255,255,255,0.95)
  );
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  opacity: 1;
  filter: blur(1px) drop-shadow(0 0 6px rgba(255,255,255,0.9)) drop-shadow(0 0 14px rgba(255,255,255,0.6));
  animation: projects-iridescent-hue 3s linear infinite;
  z-index: 2;
}

/* Glossy specular highlights — bright spot top-left + faint bottom-right */
.projects-year-orbit .year-node::after {
  inset: 0;
  background:
    radial-gradient(ellipse 30% 18% at 30% 22%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 18% 10% at 65% 72%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 100%);
  z-index: 3;
}

@keyframes projects-blob-morph {
  0%, 100% { border-radius: 48% 52% 55% 45% / 52% 44% 56% 48%; }
  25%       { border-radius: 54% 46% 48% 52% / 44% 56% 44% 56%; }
  50%       { border-radius: 44% 56% 52% 48% / 56% 44% 52% 48%; }
  75%       { border-radius: 52% 48% 44% 56% / 48% 52% 56% 44%; }
}

@keyframes projects-iridescent-hue {
  0%, 100% { filter: blur(1px) drop-shadow(0 0 6px rgba(255,255,255,0.9)) drop-shadow(0 0 18px rgba(255,255,255,0.5)); }
  50%       { filter: blur(1px) drop-shadow(0 0 10px rgba(255,255,255,1))  drop-shadow(0 0 28px rgba(255,255,255,0.8)); }
}

@keyframes projects-orbit-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes projects-counter-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}



/* Projects Stats Hero Content */
.projects-stats-hero {
  text-align: center;
  color: #fff;
  max-width: 900px;
  margin: 0 auto;
}

.stats-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin: 0 0 2rem;
  color: #fff;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}

.stats-counter {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem 0;
}

.counter-number {
  font-family: 'Bakbak One', sans-serif;
  font-size: clamp(6rem, 12vw, 10rem);
  font-weight: 700;
  color: var(--accent2, #7dff5f);
  line-height: 1;
  text-shadow: 0 4px 20px rgba(125, 255, 95, 0.3);
}

.counter-suffix {
  font-family: 'Bakbak One', sans-serif;
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: 700;
  color: var(--accent2, #7dff5f);
  line-height: 1;
}

.stats-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 3px;
  color: #fff;
  margin: 1rem 0 3rem;
  text-transform: uppercase;
}

.stats-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.btn-light {
  background: #fff;
  color: #0b64c8;
  padding: 1.2rem 2.5rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border: 2px solid #fff;
}

.btn-light:hover {
  background: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.btn-light-outline {
  background: transparent;
  color: #fff;
  padding: 1.2rem 2.5rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid #fff;
}

.btn-light-outline:hover {
  background: #fff;
  color: #0b64c8;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.project-date svg {
  color: var(--accent2, #1aaf5d);
  flex-shrink: 0;
}

.project-card-title {
  font-family: 'Bakbak One', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #003d7a;
  margin: 0;
  line-height: 1.2;
  max-width: 100%;
  word-wrap: break-word;
}

/* Projects Page Placeholder Section */
.projects-content-placeholder {
  padding: 0;
  background: transparent;
  display: none;
}

@media(max-width:768px){
  .featured-project-section {
    margin-top: -80px;
    padding: 0 0.5rem;
    position: relative;
    min-height: 500px;
  }

  .featured-project-section.contact-featured-section {
    padding: 100px 0.5rem 80px;
    min-height: 1400px;
    margin-bottom: 0;
    overflow: visible;
    margin-top: 0;
  }

  .featured-project-section.contact-featured-section::before {
    background-attachment: scroll;
  }

  .featured-project-section.contact-featured-section .featured-project-container {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    overflow: visible !important;
  }

  .contact-details-map-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin: 24px auto 0 auto !important;
    max-width: 95% !important;
  }

  .contact-icons-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 1rem !important;
    margin: 0 auto 0 auto !important;
  }

  .contact-info-image {
    height: auto !important;
    padding: 45px 1rem 28px !important;
    margin-top: -190px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    transform: translateZ(0) !important;
    position: relative !important;
    z-index: 100 !important;
    border-radius: 16px !important;
    overflow: visible !important;
  }

  .office-details-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .office-detail-box {
    width: 100% !important;
    margin: 0 !important;
  }

  .contact-map-wrapper {
    width: 100% !important;
    height: 240px !important;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 5;
  }
  
  /* About page specific styling */
  .about-page-section {
    padding: 30px 0.5rem 50px 0.5rem;
    min-height: auto;
    margin-bottom: -80px;
  }
  
  .featured-project-section.contact-featured-section .featured-project-container {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }
  
  .featured-project-container {
    max-width: 95%;
    margin: 0 auto;
    position: absolute;
    top: -10px;
    left: 0.5rem;
    right: 0.5rem;
    z-index: 20;
  }
  
  /* Override for about page to maintain original positioning */
  .about-page-section .featured-project-container {
    top: -120px;
  }
  
  .featured-project-card {
    padding: 1.2rem 1rem;
    border-radius: 12px;
    bottom: 20px;
    left: 10px;
    right: 10px;
    transform: none;
    width: auto;
    position: absolute;
  }
  
  .featured-project-image {
    /* fluid: 420px at 360vw → 520px at 430vw */
    height: clamp(400px, 123vw, 540px);
    border-radius: clamp(12px, 4.1vw, 18px);
    width: 100%;
  }
  
  .latest-badge {
    top: 1rem;
    left: 1rem;
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
  }
  
  .carousel-arrow {
    width: clamp(36px, 10.3vw, 46px);
    height: clamp(36px, 10.3vw, 46px);
    background: rgba(255, 255, 255, 0.95);
    position: absolute;
    /* fluid top matching image height */
    top: clamp(406px, 115.4vw, 545px);
    z-index: 30;
  }
  
  .carousel-arrow.left {
    left: 10%;
  }
  
  .carousel-arrow.right {
    right: 10%;
  }
  
  .carousel-arrow svg {
    width: 28px;
    height: 28px;
  }
  
  .featured-carousel-dots {
    gap: 4px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.85);
    position: absolute;
    /* fluid top matching image height */
    top: clamp(406px, 115.4vw, 545px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: clamp(220px, 66.7vw, 300px);
  }
  
  .carousel-dot {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    border-width: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    background: rgba(255, 255, 255, 0.4) !important;
    transform: none !important;
    flex-shrink: 0 !important;
  }

  .carousel-dot::before {
    inset: 0 !important;
    background: transparent !important;
  }
  
  .carousel-dot.active {
    width: 28px !important;
    height: 12px !important;
    border-radius: 6px !important;
    background: #7dff5f !important;
    box-shadow: none !important;
  }
  
  .carousel-dot:hover {
    transform: none !important;
  }
  
  .featured-project-card {
    padding: 1.2rem 1rem;
    border-radius: 12px;
    position: absolute;
    bottom: 20px;
    left: 10px;
    right: 10px;
    transform: none;
    width: auto;
  }
  
  .project-card-meta {
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.8rem;
    margin-bottom: 1rem;
  }
  
  .project-card-title {
    font-size: 1.5rem;
    line-height: 1.3;
  }
  
  .projects-extra-section {
    padding: 150px 0 80px;
    min-height: 500px;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .projects-generator-section {
    padding: 110px 0 60px;
    min-height: 420px;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.page-projects .projects-major-label {
    top: 69%;
    font-size: clamp(1.7rem, 8.2vw, 2.1rem);
    letter-spacing: 3px;
    text-indent: 3px;
  }

  body.page-projects .projects-major-sub {
    top: 80%;
    font-size: clamp(0.9rem, 4.2vw, 1.25rem);
    line-height: 1.2;
    white-space: normal;
    /* fluid max-width: 200px at 320vw → 280px at 450vw */
    max-width: clamp(200px, 61.5vw, 280px);
    text-align: center;
  }

  body.page-projects .projects-major-sub br {
    display: inline;
  }

  body.page-projects .projects-year-orbit-wrap {
    width: 100%;
    max-width: 100vw;
    /* fluid height: 380px at 320px wide → 460px at 430px wide */
    height: clamp(360px, 107.7vw, 460px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to bottom,
      black 0%,
      black 50%,
      rgba(0,0,0,0.25) 58%,
      transparent 66%);
    mask-image: linear-gradient(to bottom,
      black 0%,
      black 50%,
      rgba(0,0,0,0.25) 58%,
      transparent 66%);
    /* fluid orbit radius: tighter on tiny phones, capped on large */
    --mobile-orbit-radius: clamp(200px, calc(100vw - 80px), 340px);
  }

  body.page-projects .projects-year-orbit {
    left: 50%;
    /* fluid: 360px at 320vw → 440px at 430vw */
    top: clamp(340px, 102.6vw, 450px);
    min-height: 450px;
    overflow: visible;
    animation: none;
    will-change: auto;
  }

  body.page-projects .projects-year-orbit .year-text {
    animation: none;
    will-change: auto;
  }

  body.page-projects .projects-year-orbit .year-node {
    /* fluid bubble: 80px at 320vw → 108px at 430vw */
    width: clamp(80px, 24.6vw, 108px);
    height: clamp(84px, 25.6vw, 112px);
    font-size: clamp(27px, 8.7vw, 38px);
    /* negative margin = half of width/height to keep bubble centred on orbit point */
    margin: clamp(-56px, -12.8vw, -42px) 0 0 clamp(-54px, -12.3vw, -40px);
    animation: projects-mobile-year-orbit 36s linear infinite;
    will-change: transform;
  }

  body.page-projects .projects-year-orbit .year-node:nth-child(1)  { --orbit-angle: -162deg; }
  body.page-projects .projects-year-orbit .year-node:nth-child(2)  { --orbit-angle: -126deg; }
  body.page-projects .projects-year-orbit .year-node:nth-child(3)  { --orbit-angle: -90deg; }
  body.page-projects .projects-year-orbit .year-node:nth-child(4)  { --orbit-angle: -54deg; }
  body.page-projects .projects-year-orbit .year-node:nth-child(5)  { --orbit-angle: -18deg; }
  body.page-projects .projects-year-orbit .year-node:nth-child(6)  { --orbit-angle: 18deg; }
  body.page-projects .projects-year-orbit .year-node:nth-child(7)  { --orbit-angle: 54deg; }
  body.page-projects .projects-year-orbit .year-node:nth-child(8)  { --orbit-angle: 90deg; }
  body.page-projects .projects-year-orbit .year-node:nth-child(9)  { --orbit-angle: 126deg; }
  body.page-projects .projects-year-orbit .year-node:nth-child(10) { --orbit-angle: 162deg; }

  body.page-projects .projects-year-orbit .year-node {
    transform: rotate(var(--orbit-angle)) translate(var(--mobile-orbit-radius)) rotate(calc(-1 * var(--orbit-angle)));
  }

  body.page-projects .projects-year-orbit .year-node:hover {
    background:
      radial-gradient(ellipse 70% 50% at 32% 28%, rgba(255,255,255,0.12) 0%, transparent 65%),
      radial-gradient(ellipse 100% 100% at 50% 50%, rgba(8,16,36,0.42) 0%, rgba(4,10,26,0.62) 100%);
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.5);
    box-shadow:
      0 8px 32px rgba(0,0,0,0.35),
      inset 0 0 40px rgba(0,0,0,0.25);
  }

  body.page-projects .projects-year-orbit .year-node::before {
    animation: projects-iridescent-hue 3s linear infinite, projects-bubble-ring-spin 10s linear infinite;
  }

  body.page-projects .projects-year-orbit .year-node:hover::before {
    animation: projects-iridescent-hue 3s linear infinite, projects-bubble-ring-spin 10s linear infinite;
    filter: blur(1px) drop-shadow(0 0 6px rgba(255,255,255,0.9)) drop-shadow(0 0 14px rgba(255,255,255,0.6));
  }

  body.page-projects .projects-year-orbit .year-node:hover::after {
    opacity: 1;
  }

  body.page-projects .yp-header,
  body.page-projects .yp-detail-header {
    padding: 10px 12px;
  }

  body.page-projects .yp-year-badge,
  body.page-projects .yp-detail-badge {
    width: 62px;
    height: 66px;
    font-size: 16px;
  }

  body.page-projects .year-panel-close,
  body.page-projects .yp-detail-back {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  body.page-projects .yp-columns {
    inset: 0;
    padding-top: 0;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  body.page-projects .yp-col {
    min-height: unset;
    padding: 10px 8px;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  body.page-projects .yp-col-title {
    /* font-size controlled by JS inline style — no !important here */
    font-size: 13px;
    line-height: 1.35;
  }

  body.page-projects .yp-detail {
    overflow-y: auto;
  }

  body.page-projects .yp-detail-body {
    position: absolute !important;
    inset: 0 !important;
    padding: 90px 14px 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow-y: auto !important;
  }

  body.page-projects .yp-detail-title {
    max-width: 100% !important;
    /* font-size set by JS getDetailTitleSize */
    line-height: 1.22 !important;
    position: static !important;
  }

  body.page-projects .yp-detail-desc {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-height: none !important;
    overflow-y: visible !important;
    font-size: clamp(11px, 3.2vw, 14px) !important;
    line-height: 1.5 !important;
  }
  
  .stats-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin: 0 0 1.5rem;
  }
  
  .stats-counter {
    margin: 1.5rem 0;
  }
  
  .projects-content-placeholder {
    padding: 6rem 1.5rem;
    background-attachment: scroll;
  }
  .services-page-hero{padding:1.5rem 1.5rem 1.5rem; min-height: 320px !important; height: auto !important; display: block;}
  .about-hero{background-size: 180% auto !important;}
  .services-page-hero .services-hero-content h1{margin-top: 1rem; margin-bottom: 0.5rem;}
  .products-page-hero{padding:3rem 1.5rem 1.5rem; min-height: 280px !important; height: auto !important;}
  .products-hero-content{padding-top: 2.5rem;}
  .services-full-section{padding:3rem 1.5rem}
  .services-wrapper{grid-template-columns:1fr;gap:1.5rem}
  .service-item{padding:1.8rem 1.5rem}
  .cta-buttons{flex-direction:column;align-items:stretch}
  .btn-cta{padding:0.95rem 1.5rem}
}

@keyframes projects-bubble-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes projects-mobile-year-orbit {
  from {
    transform: rotate(var(--orbit-angle)) translate(var(--mobile-orbit-radius)) rotate(calc(-1 * var(--orbit-angle)));
  }
  to {
    transform: rotate(calc(var(--orbit-angle) + 360deg)) translate(var(--mobile-orbit-radius)) rotate(calc(-1 * (var(--orbit-angle) + 360deg)));
  }
}

.projects-spacer-section {
  min-height: auto;
  background: url('../images/backgroundbaru.jpg') center/cover no-repeat;
  background-attachment: fixed;
  padding: 30px 2rem 100px 2rem;
}

.projects-showcase-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 25px;
  justify-content: center;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.filter-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  background: #003d82;
  color: #fff;
}

.filter-btn.active {
  background: #4caf50;
  color: #fff;
}

.filter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.projects-showcase-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.project-showcase-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: grid;
  grid-template-columns: 400px 1fr;
  height: 320px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}

.project-showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}

.project-showcase-image {
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
  height: 100%;
}

.project-showcase-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.project-showcase-card:hover .project-showcase-image img {
  transform: scale(1.05);
}

.project-showcase-content {
  padding: 2rem 3.5rem 2rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.project-showcase-title {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #1a365d;
  margin: 0 0 0.8rem 0;
  line-height: 1.3;
}

.project-showcase-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.project-showcase-tags .tag {
  display: inline-block;
  background: linear-gradient(135deg, #ff8c00, #ffb347);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(255, 140, 0, 0.3);
}

/* ==================== PROJECTS HERO SECTION - FULL SCREEN ==================== */
.projects-hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: url('../images/switchpropagemain.jpg') center/cover no-repeat fixed;
  overflow: hidden;
  padding: 30px 2rem 80px;
}

.projects-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-attachment: fixed;
  filter: brightness(0.35);
  z-index: 0;
}

.projects-hero-section-secondary {
  background: url('../images/switchproj1.jpg') center/cover no-repeat fixed;
}

.projects-hero-section-secondary.is-alt-bg {
  background: url('../images/switchproj2.jpg') center/cover no-repeat fixed;
}

.projects-hero-section-secondary.is-third-bg {
  background: url('../images/switchproj3.jpg') center/cover no-repeat fixed;
}

.projects-hero-section-secondary.is-safety-2016 {
  background: url('../images/switchpropage.jpg') center/cover no-repeat fixed;
}

.projects-hero-section-secondary.is-precision-2016 {
  background: url('../images/switchpropage2.jpg') center/cover no-repeat fixed;
}

.projects-hero-section-secondary.is-delivering-2016 {
  background: url('../images/swithpropage3.jpg') center/cover no-repeat fixed;
}

.projects-hero-section-secondary.is-safety-2025 {
  background: url('../images/transpropage1.jpg') center/cover no-repeat fixed;
}

.projects-hero-section-secondary.is-precision-2025 {
  background: url('../images/transpropage2.jpg') center/cover no-repeat fixed;
}

.projects-hero-section-secondary.is-delivering-2025 {
  background: url('../images/transpropage3.png') center/cover no-repeat fixed;
}

.projects-hero-section-secondary::before {
  filter: brightness(0.35);
}

.projects-hero-section.is-reverse-project.is-project-2017 {
  background: url('../images/switchprojmain.jpg') center/cover no-repeat fixed;
}

.projects-hero-section.is-project-2025 {
  background: url('../images/transpropagemain.jpg') center/cover no-repeat fixed;
}

.projects-secondary-safety-text {
  position: absolute;
  left: -42px;
  top: 86px;
  margin: 0;
  font-family: 'Bantayog', 'Poppins', sans-serif;
  font-size: 60.7px;
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  z-index: 2;
  animation: baselineInRight 3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.projects-secondary-detail-text {
  position: absolute;
  left: 60%;
  top: 430px;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Lustria', serif;
  font-size: 31.7px;
  line-height: 1.16;
  color: #ffffff;
  z-index: 2;
  max-width: 1320px;
  width: calc(100% - 10px);
  text-align: center;
  animation: baselineInLeftCentered 3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.projects-hero-section-secondary.is-reverse .projects-secondary-safety-text {
  left: auto;
  right: -42px;
  text-align: right;
  animation: none;
}

.projects-hero-section-secondary.is-reverse .projects-secondary-detail-text {
  left: 40%;
  animation: none;
}

.projects-hero-section-secondary.is-reverse.is-visible .projects-secondary-safety-text {
  animation: baselineInLeft 3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.projects-hero-section-secondary.is-reverse.is-visible .projects-secondary-detail-text {
  animation: baselineInRightCentered 3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.projects-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 61, 130, 0.3) 0%, rgba(13, 124, 122, 0.4) 100%);
  z-index: 1;
  pointer-events: none;
}

.projects-hero-section .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
}

.project-main-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 138px;
  letter-spacing: 0.5em;
  color: #ffffff;
  text-align: center;
  margin: 0 auto 2rem;
  line-height: 1;
  text-transform: uppercase;
  width: 100%;
  padding: 0 1rem;
  animation: projectBlurIn 2s ease-out both;
}

.project-year-label {
  position: absolute;
  left: -126px;
  top: 220.2px;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 51.6px;
  line-height: 1;
  color: #ffffff;
  animation: baselineInLeft 1.7s ease-out 0.2s both;
}

.project-ref-label {
  position: absolute;
  left: 581.4px;
  top: 290.4px;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  color: #ffffff;
  animation: baselineInRight 1.7s ease-out 0.35s both;
}

.beveled-hex-cut {
  position: absolute;
  bottom: 40px;
  left: 155px;
  background-color: #778372;
  width: 300px;
  height: 410px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 38px;
  z-index: 10;
  clip-path: polygon(100% 0, 100% 75%, 75% 100%, 0 100%, 0 25%, 25% 0);
  animation: baselineInBottom 1.7s ease-out 0.5s both;
}

.hex-cut-text {
  font-family: 'Fredoka', sans-serif;
  font-size: 26px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  margin: 0;
  line-height: 1.35;
  max-width: 230px;
}

.project-layered-images {
  position: absolute;
  right: 116px;
  bottom: 46px;
  width: 630px;
  height: 305px;
  z-index: 9;
  pointer-events: none;
}

.projects-hero-section.is-reverse-project .project-year-label {
  left: auto;
  right: -126px;
  text-align: right;
  animation: baselineInRight 1.7s ease-out 0.2s both;
}

.projects-hero-section.is-reverse-project .project-ref-label {
  left: auto;
  right: 581.4px;
  text-align: right;
  animation: baselineInLeft 1.7s ease-out 0.35s both;
}

.projects-hero-section.is-reverse-project .beveled-hex-cut {
  left: auto;
  right: 155px;
}

.projects-hero-section.is-reverse-project .project-layered-images {
  right: auto;
  left: 116px;
}

.projects-hero-section.is-reverse-project .layer-back {
  right: auto;
  left: 0;
}

.projects-hero-section.is-reverse-project .layer-middle {
  right: auto;
  left: 152px;
}

.projects-hero-section.is-reverse-project .layer-front {
  right: auto;
  left: 60px;
}

.layered-image {
  position: absolute;
  width: 400px;
  height: 238px;
  object-fit: cover;
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
  animation: baselineInRight 1.7s ease-out both;
}

.layer-back {
  animation-delay: 0.55s;
}

.layer-middle {
  animation-delay: 0.65s;
}

.layer-front {
  animation-delay: 0.75s;
}

.projects-hero-section .project-main-title,
.projects-hero-section .project-year-label,
.projects-hero-section .project-ref-label,
.projects-hero-section .beveled-hex-cut,
.projects-hero-section .projects-secondary-safety-text,
.projects-hero-section .projects-secondary-detail-text,
.projects-hero-section .layered-image {
  animation-play-state: paused;
}

.projects-hero-section.is-visible .project-main-title,
.projects-hero-section.is-visible .project-year-label,
.projects-hero-section.is-visible .project-ref-label,
.projects-hero-section.is-visible .beveled-hex-cut,
.projects-hero-section.is-visible .projects-secondary-safety-text,
.projects-hero-section.is-visible .projects-secondary-detail-text,
.projects-hero-section.is-visible .layered-image {
  animation-play-state: running;
}

@keyframes projectBlurIn {
  0% {
    opacity: 0;
    filter: blur(14px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes baselineInLeft {
  0% {
    opacity: 0;
    transform: translateX(-70px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes baselineInLeftCentered {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% - 70px));
  }
  100% {
    opacity: 1;
    transform: translateX(-50%);
  }
}

@keyframes baselineInRight {
  0% {
    opacity: 0;
    transform: translateX(70px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes baselineInRightCentered {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% + 70px));
  }
  100% {
    opacity: 1;
    transform: translateX(-50%);
  }
}

@keyframes baselineInBottom {
  0% {
    opacity: 0;
    transform: translateY(70px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes baselineInBottomMobile {
  0% {
    opacity: 0;
    transform: translate(-50%, 70px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.layer-back {
  right: 0;
  bottom: 88px;
  z-index: 1;
}

.layer-middle {
  right: 152px;
  bottom: 46px;
  z-index: 2;
}

.layer-front {
  right: 60px;
  bottom: 0;
  z-index: 3;
}

@media (min-width: 1360px) and (max-width: 1370px) and (min-height: 740px) and (max-height: 780px) {
  .project-ref-label {
    left: 557.4px;
    top: 280.4px;
  }

  .project-year-label {
    left: -54px;
  }

  .beveled-hex-cut {
    bottom: 35px;
    left: 145px;
    width: 280px;
    height: 370px;
  }

  .project-layered-images {
    right: 120px;
    bottom: 40px;
    width: 570px;
    height: 285px;
  }

  .layered-image {
    width: 370px;
    height: 218px;
    border-radius: 20px;
  }

  .layer-back {
    bottom: 80px;
  }

  .layer-middle {
    right: 130px;
    bottom: 38px;
  }

  .layer-front {
    right: 48px;
  }

  .hex-cut-text {
    font-size: 24px;
  }

  .projects-secondary-safety-text {
    left: -32px;
  }

  .projects-secondary-detail-text {
    left: 61%;
    width: calc(100% - 20px);
    max-width: 1160px;
  }

  .projects-hero-section.is-reverse-project .project-ref-label {
    left: auto;
    right: 557.4px;
  }

  .projects-hero-section.is-reverse-project .project-year-label {
    left: auto;
    right: -54px;
  }

  .projects-hero-section.is-reverse-project .beveled-hex-cut {
    left: auto;
    right: 145px;
  }

  .projects-hero-section.is-reverse-project .project-layered-images {
    left: 120px;
    right: auto;
  }

  .projects-hero-section.is-reverse-project .layer-back {
    left: 0;
    right: auto;
  }

  .projects-hero-section.is-reverse-project .layer-middle {
    left: 130px;
    right: auto;
  }

  .projects-hero-section.is-reverse-project .layer-front {
    left: 48px;
    right: auto;
  }

  .projects-hero-section-secondary.is-reverse .projects-secondary-safety-text {
    right: -32px;
    left: auto;
  }

  .projects-hero-section-secondary.is-reverse .projects-secondary-detail-text {
    left: 39%;
  }
}

/* ==================== PROJECTS MASONRY GALLERY SECTION ==================== */
.projects-masonry-section {
  padding: 100px 2rem 80px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
  position: relative;
}

.projects-masonry-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #dde4ed 50%, transparent 100%);
}

.projects-masonry-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.5px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.projects-masonry-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  margin: 0 0 4rem 0;
  font-weight: 300;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.projects-masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}

.masonry-item {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transition: all 0.6s cubic-bezier(0.15, 0.85, 0.2, 1);
  border: 1px solid #f0f3f7;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Featured items - larger */
.masonry-item-featured {
  grid-column: span 2;
  min-height: 500px;
}

/* Triple image items */
.masonry-item-triple {
  grid-column: span 3;
  min-height: 420px;
}

/* Double image items */
.masonry-item-double {
  grid-column: span 2;
  min-height: 340px;
}

/* Medium items */
.masonry-item-medium {
  grid-column: span 2;
  min-height: 380px;
}

/* Single items (default) */
.masonry-item-single {
  grid-column: span 1;
  min-height: 320px;
}

.masonry-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  border-color: rgba(13, 124, 122, 0.2);
}

.masonry-project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 1.5rem 0;
  gap: 1rem;
}

.masonry-year {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #0d7c7a;
  min-width: 60px;
}

.masonry-ref {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7dff5f;
  background: rgba(13, 124, 122, 0.1);
  padding: 6px 12px;
  border-radius: 50px;
  white-space: nowrap;
}

.masonry-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.masonry-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: #003d82;
  margin: 0 0 0.8rem 0;
  line-height: 1.3;
}

.masonry-description {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.masonry-images {
  padding: 0 1.5rem 1.5rem;
  margin-top: auto;
}

.masonry-images img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform 0.4s ease;
  display: block;
}

.masonry-item:hover .masonry-images img {
  transform: scale(1.04);
}

/* Single image */
.masonry-single img {
  height: 240px;
  object-fit: cover;
}

/* Double images side by side */
.masonry-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.masonry-double img {
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
}

.masonry-item-featured .masonry-double img {
  height: 240px;
}

/* Triple images */
.masonry-triple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.masonry-triple img {
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
}

.masonry-item-featured .masonry-triple img {
  height: 200px;
}

.masonry-item-triple .masonry-triple img {
  height: 160px;
}

/* ==================== MASONRY RESPONSIVE ==================== */

@media (max-width: 1200px) {
  .projects-masonry-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }

  .masonry-item-featured {
    grid-column: span 2;
  }

  .masonry-item-triple {
    grid-column: span 2;
    min-height: 360px;
  }

  .masonry-item-double {
    grid-column: span 1;
    min-height: 300px;
  }

  .masonry-item-medium {
    grid-column: span 1;
    min-height: 300px;
  }

  .masonry-double {
    gap: 10px;
  }

  .masonry-double img {
    height: 170px;
  }

  .masonry-triple {
    gap: 10px;
  }

  .masonry-triple img {
    height: 140px;
  }
}

@media (max-width: 768px) {
  .projects-hero-section {
    min-height: 80vh;
    padding: 30px 1.5rem 50px;
  }

  .projects-hero-section-secondary {
    min-height: auto;
    padding: 50px 1.5rem 50px;
    display: block;
  }

  .projects-hero-section-secondary .wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.4rem;
    position: relative;
    z-index: 2;
  }

  .projects-hero-section-secondary .projects-secondary-safety-text {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: 0;
    font-size: 38px;
    line-height: 1;
    max-width: 55%;
    align-self: flex-start;
    text-align: left;
    word-break: break-word;
  }

  .projects-hero-section-secondary .projects-secondary-detail-text {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: 80%;
    max-width: 100%;
    font-size: 18px;
    line-height: 1.4;
    align-self: flex-end;
    text-align: right;
    margin-right: -110px;
  }

  .projects-hero-section-secondary.is-reverse .projects-secondary-safety-text {
    align-self: flex-end;
    text-align: right;
  }

  .projects-hero-section-secondary.is-reverse .projects-secondary-detail-text {
    align-self: flex-start;
    text-align: left;
  }

  .projects-hero-section::before {
    background-attachment: scroll;
  }

  .project-main-title {
    font-size: 80px;
    letter-spacing: 0.18em;
  }

  .beveled-hex-cut {
    bottom: 30px;
    left: 30px;
    width: 230px;
    height: 310px;
  }

  .project-layered-images {
    right: 16px;
    bottom: 18px;
    width: 360px;
    height: 180px;
  }

  .is-project-2025 .project-ref-label {
    font-size: 18px !important;
    white-space: normal !important;
    line-height: 1.3;
    max-width: 300px;
    word-break: break-all;
  }

  .layered-image {
    width: 230px;
    height: 130px;
    border-radius: 16px;
  }

  .layer-back {
    bottom: 46px;
  }

  .layer-middle {
    right: 74px;
    bottom: 22px;
  }

  .layer-front {
    right: 20px;
  }

  .hex-cut-text {
    font-size: 18px;
  }

  .projects-hero-section.is-reverse-project .project-year-label {
    left: -10px;
    right: auto;
    text-align: left;
  }

  .projects-hero-section.is-reverse-project .project-ref-label {
    left: 108px;
    right: auto;
    text-align: left;
  }

  .projects-hero-section.is-reverse-project .beveled-hex-cut {
    left: 30px;
    right: auto;
  }

  .projects-hero-section.is-reverse-project .project-layered-images {
    left: auto;
    right: 52px;
    transform: none;
  }

  .projects-hero-section.is-reverse-project .layer-back {
    left: auto;
    right: 0;
  }

  .projects-hero-section.is-reverse-project .layer-middle {
    left: auto;
    right: 74px;
    bottom: 22px;
  }

  .projects-hero-section.is-reverse-project .layer-front {
    left: auto;
    right: 20px;
  }

  .projects-hero-section.is-reverse-project .project-year-label {
    animation: baselineInLeft 1.7s ease-out 0.2s both;
  }

  .projects-hero-section.is-reverse-project .project-ref-label {
    animation: baselineInRight 1.7s ease-out 0.35s both;
  }

  .projects-hero-section.is-reverse-project .layered-image {
    animation: baselineInLeft 1.7s ease-out both;
  }

  .projects-hero-section.is-reverse-project .beveled-hex-cut {
    animation: baselineInBottom 1.7s ease-out 0.5s both;
  }

  .projects-hero-section-secondary.is-reverse .projects-secondary-safety-text {
    text-align: left;
  }

  .projects-hero-section-secondary.is-reverse .projects-secondary-detail-text {
    text-align: left;
  }

  .projects-masonry-section {
    padding: 60px 1.5rem 50px;
  }

  .projects-masonry-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .masonry-item-featured,
  .masonry-item-triple,
  .masonry-item-double,
  .masonry-item-medium,
  .masonry-item-single {
    grid-column: span 1;
    min-height: auto;
  }

  .masonry-item {
    min-height: 280px;
  }

  .masonry-content {
    padding: 1.2rem;
  }

  .masonry-title {
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
  }

  .masonry-description {
    font-size: 0.9rem;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }

  .masonry-project-header {
    padding: 1.2rem 1.2rem 0;
  }

  .masonry-year {
    font-size: 1.4rem;
  }

  .masonry-images {
    padding: 0 1.2rem 1.2rem;
  }

  .masonry-single img {
    height: 180px;
  }

  .masonry-double {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .masonry-double img {
    height: 140px;
  }

  .masonry-triple {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .masonry-triple img {
    height: 110px;
  }
}

@media (max-width: 480px) {
  .projects-hero-section {
    min-height: 70vh;
    padding: 20px 1rem 30px;
  }

  .projects-hero-section-secondary {
    min-height: auto;
    padding: 40px 1rem 40px;
    display: block;
  }

  .projects-hero-section-secondary .wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    position: relative;
    z-index: 2;
  }

  .projects-hero-section-secondary .projects-secondary-safety-text {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
    max-width: 52%;
    align-self: flex-start;
    text-align: left;
    word-break: break-word;
  }

  .projects-hero-section-secondary .projects-secondary-detail-text {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: 75%;
    max-width: 100%;
    font-size: 14px;
    line-height: 1.5;
    align-self: flex-end;
    text-align: right;
    margin-right: -110px;
  }

  .projects-hero-section-secondary.is-reverse .projects-secondary-safety-text {
    align-self: flex-end;
    text-align: right;
  }

  .projects-hero-section-secondary.is-reverse .projects-secondary-detail-text {
    align-self: flex-start;
    text-align: left;
  }

  .projects-hero-section::before {
    background-attachment: scroll;
  }

  .project-main-title {
    font-size: 50px;
    letter-spacing: 0.12em;
  }

  .projects-secondary-safety-text {
    left: 20px;
    top: 76px;
    font-size: 46px;
  }

  .projects-hero-section-secondary.is-reverse .projects-secondary-safety-text {
    text-align: left;
  }

  .projects-hero-section-secondary.is-reverse .projects-secondary-detail-text {
    text-align: left;
  }

  .projects-secondary-detail-text {
    left: auto;
    top: auto;
    transform: none;
    width: calc(100% - 40px);
    max-width: 100%;
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
  }

  .project-year-label {
    left: -10px;
    top: 108px;
    font-size: 32px;
  }

  .project-ref-label {
    left: 108px;
    top: 180px;
    font-size: 24px;
  }

  .is-project-2025 .project-ref-label {
    font-size: 16px !important;
    white-space: normal !important;
    line-height: 1.3;
    max-width: 260px;
    word-break: break-all;
  }

  .projects-hero-section.is-reverse-project .project-ref-label {
    left: 108px;
    right: auto;
    text-align: left;
  }

  .beveled-hex-cut {
    bottom: 205px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 145px;
    padding: 8px 12px;
    z-index: 12;
    clip-path: polygon(100% 10%, 100% 86%, 74% 100%, 0 100%, 0 16%, 24% 2%);
    animation: baselineInBottomMobile 1.7s ease-out 0.5s both;
  }

  .projects-hero-section.is-reverse-project .beveled-hex-cut {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .hex-cut-text {
    max-width: 280px;
    line-height: 1.1;
    text-align: center;
  }

  .project-layered-images {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 14px;
    width: 360px;
    height: 185px;
  }

  .projects-hero-section.is-reverse-project .project-layered-images {
    left: 50%;
    right: auto;
    transform: translateX(calc(-50% - 36px));
  }

  .projects-hero-section.is-reverse-project .project-year-label {
    animation: baselineInLeft 1.7s ease-out 0.2s both;
  }

  .projects-hero-section.is-reverse-project .project-ref-label {
    animation: baselineInRight 1.7s ease-out 0.35s both;
  }

  .projects-hero-section.is-reverse-project .layered-image {
    animation: baselineInLeft 1.7s ease-out both;
  }

  .projects-hero-section.is-reverse-project .beveled-hex-cut {
    animation: baselineInBottomMobile 1.7s ease-out 0.5s both;
  }

  .layered-image {
    width: 230px;
    height: 130px;
    border-radius: 12px;
    border-width: 1.5px;
  }

  .layer-back {
    bottom: 40px;
  }

  .projects-hero-section.is-reverse-project .layer-back {
    left: auto;
    right: 0;
  }

  .projects-hero-section.is-reverse-project .layer-middle {
    left: auto;
    right: 76px;
    bottom: 20px;
  }

  .projects-hero-section.is-reverse-project .layer-front {
    left: auto;
    right: 28px;
  }

  .layer-middle {
    right: 76px;
    bottom: 20px;
  }

  .layer-front {
    right: 28px;
  }

  .hex-cut-text {
    font-size: 14px;
  }

  .projects-masonry-section {
    padding: 40px 1rem 30px;
  }

  .projects-masonry-title {
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
  }

  .projects-masonry-subtitle {
    font-size: 1rem;
    margin-bottom: 2.5rem;
  }

  .masonry-project-header {
    padding: 1rem 1rem 0;
  }

  .masonry-year {
    font-size: 1.2rem;
    min-width: 50px;
  }

  .masonry-ref {
    font-size: 0.65rem;
    padding: 4px 8px;
  }

  .masonry-content {
    padding: 1rem;
  }

  .masonry-title {
    font-size: 1rem;
    margin-bottom: 0.4rem;
  }

  .masonry-description {
    display: none;
  }

  .masonry-images {
    padding: 0 1rem 1rem;
  }

  .masonry-single img {
    height: 150px;
  }

  .masonry-double img {
    height: 120px;
  }

  .masonry-triple img {
    height: 90px;
  }
}

@media (max-width: 768px) {
  .projects-showcase-grid {
    gap: 25px;
    padding: 0 1rem;
  }
  
  .project-showcase-card {
    grid-template-columns: 1fr;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  
  .project-showcase-image {
    height: 280px;
  }
  
  .project-showcase-content {
    padding: 2rem 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  
  .project-showcase-title {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    line-height: 1.3;
  }
  
  .project-showcase-tags {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
  }
  
  .tag {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
  }
}
/* Team Section Overlapping */
.team-section-overlap {
  position: relative;
  margin-top: -180px;
  margin-bottom: -120px;
  z-index: 10;
  padding: 0;
  width: 100%;
  overflow: hidden;
}

.team-section-overlap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/background client.jpg') center/cover no-repeat;
  background-attachment: fixed;
  z-index: 0;
  pointer-events: none;
}

.team-main-container {
  background: url('../images/backgroundbaru.jpg') center/cover no-repeat;
  border-radius: 24px;
  padding: 60px 50px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  max-width: 1300px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
  position: relative;
  z-index: 1;
}

.team-logo-header {
  text-align: center;
  margin-bottom: 50px;
}

.team-company-logo {
  max-width: 320px;
  height: auto;
}

.team-card {
  background: #f5f8fc;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}

.team-photo {
  width: 100%;
  height: 320px;
  background: #e2e8f0;
  overflow: hidden;
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-info {
  padding: 24px;
  text-align: center;
}

.team-name {
  font-family: 'Poppins', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a365d;
  margin: 0 0 8px 0;
}

.team-position {
  font-size: 0.95rem;
  color: #0d7c7a;
  font-weight: 600;
  margin: 0;
}

@media (max-width: 900px) {
  .team-section-overlap {
    margin-top: -100px;
  }

  .team-main-container {
    padding: 40px 25px;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .team-photo {
    height: 280px;
  }

  .team-company-logo {
    max-width: 240px;
  }
}

/* ==================== AWARDS SECTION ==================== */
.awards-section {
  position: relative;
  padding: 20px 2rem 30px 2rem;
  background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)), url('../images/backawards.jpg') center 40%/cover no-repeat;
  overflow: hidden;
}

.awards-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(125, 255, 95, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(13, 90, 61, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.awards-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.awards-title {
  font-family: 'Bakbak One', sans-serif;
  font-size: 3.5rem;
  color: #ffffff;
  margin-bottom: 16px;
  text-shadow: 0 0 30px rgba(125, 255, 95, 0.3);
  letter-spacing: -1px;
}

.awards-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

.awards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.award-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(125, 255, 95, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(50px);
}

.award-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.award-card.visible.is-hidden {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.award-card[data-delay="0"].visible { transition-delay: 0.05s; }
.award-card[data-delay="1"].visible { transition-delay: 0.1s; }
.award-card[data-delay="2"].visible { transition-delay: 0.15s; }
.award-card[data-delay="3"].visible { transition-delay: 0.2s; }
.award-card[data-delay="4"].visible { transition-delay: 0.25s; }
.award-card[data-delay="5"].visible { transition-delay: 0.3s; }
.award-card[data-delay="6"].visible { transition-delay: 0.35s; }
.award-card[data-delay="7"].visible { transition-delay: 0.4s; }
.award-card[data-delay="8"].visible { transition-delay: 0.45s; }
.award-card[data-delay="9"].visible { transition-delay: 0.5s; }
.award-card[data-delay="10"].visible { transition-delay: 0.55s; }
.award-card[data-delay="11"].visible { transition-delay: 0.6s; }

.award-card:hover {
  transform: translateY(-8px);
  border-color: rgba(125, 255, 95, 0.4);
  box-shadow: 0 20px 60px rgba(125, 255, 95, 0.2);
}

.award-image {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: linear-gradient(135deg, #0d5a3d 0%, #0a4d34 100%);
}

.award-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.award-image img.award-image-shift-up {
  object-position: center 32%;
}

.award-card:hover .award-image img {
  transform: scale(1.1);
}

.award-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.award-name {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: calc(1.1rem * 1.3 * 3);
}

.award-client {
  color: #7dff5f;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(0.85rem * 1.4);
  line-height: 1.4;
}

.award-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(0.85rem * 1.5 * 2);
}

/* Responsive Awards */
@media (max-width: 1200px) {
  .awards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .awards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive Awards */
@media (max-width: 768px) {
  .awards-title {
    font-size: 2.5rem;
  }
  
  .awards-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .award-image {
    height: 200px;
  }
  
  .awards-section {
    padding: 40px 1.5rem 30px;
  }
}

.awards-button-container {
  text-align: center;
  margin-top: 50px;
  position: relative;
  z-index: 2;
}

.btn-awards {
  display: inline-block;
  padding: 16px 48px;
  background: linear-gradient(135deg, #7dff5f 0%, #0d5a3d 100%);
  color: #0a0e27;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.4s ease;
  box-shadow: 0 8px 24px rgba(125, 255, 95, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-awards:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(125, 255, 95, 0.5);
  background: linear-gradient(135deg, #8fff6f 0%, #0f6a48 100%);
}

.btn-awards:active {
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  .awards-title {
    font-size: 2rem;
  }
  
  .awards-subtitle {
    font-size: 1rem;
  }
  
  .award-name {
    font-size: 1.2rem;
  }
  
  .btn-awards {
    padding: 14px 36px;
    font-size: 1rem;
  }
}
/* ===================================
   Contact Info Section
   =================================== */
.contact-info-image {
  width: 100%;
  height: 350px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 30px 30px;
}

.contact-icons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px;
  width: 100%;
  max-width: 1100px;
  margin-top: -10px;
}

.contact-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact-icon-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.contact-icon-item:nth-child(1) .contact-icon-circle {
  color: #0074D9;
}

.contact-icon-item:nth-child(2) .contact-icon-circle {
  color: #FF851B;
}

.contact-icon-item:nth-child(3) .contact-icon-circle {
  color: #7FBF3F;
}

.contact-icon-item h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #003D82;
  font-family: 'Poppins', sans-serif;
  margin: 20px 0 0 0;
}

.contact-details {
  margin-top: 15px;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

.contact-details a {
  color: #0074D9;
  text-decoration: none;
  transition: color 0.3s;
}

.contact-details a:hover {
  color: #FF851B;
}

/* Contact Details & Map Container */
.contact-details-map-container {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 30px;
  max-width: 1280px;
  margin: 40px auto 0 auto;
  position: relative;
  z-index: 6;
}

/* Office Details Grid */
.office-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-content: start;
}

/* Individual Office Detail Box */
.office-detail-box {
  background: #fff;
  border-radius: 12px;
  padding: 20px 18px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  text-align: left;
  transition: transform 0.3s, box-shadow 0.3s;
  border: 1px solid #e0e0e0;
}

.office-detail-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.office-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #00bcd4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px 0;
  color: #fff;
}

.office-detail-box h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px 0;
  font-family: 'Poppins', sans-serif;
}

.office-detail-box p {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #666;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

.office-detail-box a {
  color: #0074D9;
  text-decoration: none;
  transition: color 0.3s;
}

.office-detail-box a:hover {
  color: #FF851B;
}

/* Social Links */
.social-links {
  display: flex;
  gap: 15px;
  margin-top: 5px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, background 0.3s;
  color: #333;
  background: #f0f0f0;
  border: 2px solid #ddd;
}

.social-icon:hover {
  background: #e0e0e0;
  transform: scale(1.1);
  border-color: #333;
}

/* Contact Map */
.contact-map-wrapper {
  width: 500px;
  height: 528px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  position: relative;
}

.contact-map-wrapper iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.contact-info-image .contact-info-icon {
  margin-bottom: 24px;
}

.contact-info-image .contact-info-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
}

.contact-info-image .contact-info-content {
  font-size: 1.1rem;
  line-height: 1.8;
}

.contact-info-image .contact-info-content p {
  margin: 12px 0;
}

.contact-info-image .contact-info-content a {
  text-decoration: underline;
}

.contact-info-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  padding: 2.5rem 3rem;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(100% - 4rem);
  max-width: 1200px;
  z-index: 15;
}

.contact-info-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.contact-info-subsection {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contact-info-icon {
  margin-bottom: 24px;
}

.contact-info-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #003D82;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
}

.contact-info-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #555;
}

.contact-info-content p {
  margin: 12px 0;
}

.contact-info-content a {
  color: #003D82;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.contact-info-content a:hover {
  color: #FF6B35;
}

/* Responsive */
@media (max-width: 992px) {
  .contact-info-card-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ============================================
   COMPREHENSIVE MOBILE RESPONSIVE FIXES
   Mobile First: 320px - 1920px coverage
   ============================================ */

/* Small Mobile Phones: 320px - 479px (iPhone SE, small Android) */
@media (max-width: 479px) {
  /* Header - inherit from main mobile block, just adjust padding */
  .header-inner {
    padding: 0.4rem 0.8rem;
  }
  /* Logo size inherited from main mobile block (200px) */
  
  /* Hero Section */
  .hero-electrical .hero-inner {
    min-height: auto;
    padding: 1rem;
  }
  .hero-title {
    font-size: 1.8rem !important;
  }
  
  /* Services Cards */
  .products-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 1rem;
  }
  .product-card {
    height: 300px;
  }
  
  /* Projects */
  .projects .preview-card {
    width: 220px;
    height: 360px;
  }
  
  /* Clients */
  .clients-grid img {
    width: 130px !important;
    height: 130px !important;
  }
  
  /* Contact Form */
  .contact-form-floating {
    padding: 1.5rem;
  }
  .contact-cta-content h2 {
    font-size: 3.8rem !important;
  }
  .contact-cta-content p {
    font-size: 1.9rem !important;
  }
}

/* Mobile Phones: 480px - 767px (Most phones in landscape, older phones) */
@media (min-width: 480px) and (max-width: 767px) {
  /* Logo size inherited from main mobile block (200px) */
  
  .hero-title {
    font-size: 2.2rem !important;
  }
  .products-grid {
    grid-template-columns: 1fr;
  }
  .projects .preview-card {
    width: 240px;
    height: 380px;
  }
}

/* Tablets & Large Phones: 768px - 1023px (iPad, Android tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Logo size inherited from main mobile block (200px) */
  
  .header-inner {
    padding: 0.8rem 1.5rem;
  }
  
  /* Hero */
  .hero-title {
    font-size: 2.8rem !important;
  }
  
  /* Services */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  /* About Us */
  .about-container {
    flex-direction: column;
    padding: 2rem 1.5rem;
  }
  .about-content {
    max-width: 100%;
    text-align: center;
    align-items: center;
  }
  
  /* Vision Mission */
  .vision-mission-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  /* CEO Quote */
  .ceo-quote-container {
    grid-template-columns: 1fr;
    padding: 2.5rem;
  }
  .ceo-logo-top-left {
    position: relative;
    width: 100px;
  }
  .ceo-info-bottom-right {
    position: relative;
  }
  
  /* Projects */
  .projects .preview-card {
    width: 250px;
    height: 400px;
  }
  
  /* Clients */
  .clients-grid img {
    width: 150px !important;
    height: 150px !important;
  }
  
  /* Contact */
  .contact-cta-bg {
    padding: 2.5rem 2rem;
  }
  .contact-form-floating {
    position: relative;
    top: auto;
    right: auto;
    max-width: 100%;
    margin: 2rem 0;
  }
}

/* Desktop: 1024px+ (Normal desktop, laptop) */
@media (min-width: 1024px) {
  /* Everything should work normally at this size */
  .logo {
    width: 120px !important;
  }
}

/* Large Desktop: 1440px+ */
@media (min-width: 1440px) {
  .logo {
    width: 150px !important;
  }
  .wrap {
    max-width: 1400px;
  }
}

/* Extra safeguards for all mobile devices */
@media (max-width: 1023px) {
  /* Prevent horizontal scroll */
  body, html {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  /* Make all images responsive */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Ensure containers don't overflow */
  .wrap, .header-inner, .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Fix text overflow */
  h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Navigation full width on mobile */
  .nav {
    width: 85%;
    max-width: 320px;
  }
  
  /* Ensure video doesn't overflow */
  .hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Fix background images for mobile */
  .services-overview,
  .products,
  .vision-mission,
  .ceo-quote-section,
  .projects,
  .clients,
  .news-preview,
  .contact-cta-bg {
    background-attachment: scroll !important;
  }
}

/* Touch-friendly buttons on mobile */
@media (max-width: 1023px) {
  .btn, button, .nav a, .carousel-nav {
    min-height: 44px;
    min-width: 44px;
    padding: 0.8rem 1.2rem;
  }
  
  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .contact-info-section {
    padding: 60px 0 80px;
  }
}

/* ============================================================
   FEATURE-STRIP CONSOLIDATED RULES (Mobile-First)
   ============================================================ */

/* BASE: Mobile phones (default - smallest screens) */

/* Fine-tune hero title position for 1024x768 desktop view */
@media (min-width: 1024px) and (max-width: 1180px) and (max-height: 800px) {
  .hero-electrical .hero-content {
    margin-top: 48px;
  }
}
.feature-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: auto;
  margin-top: 1rem;
  margin-left: 0.8rem;
  margin-right: 0.8rem;
  z-index: 50;
}

.feature-strip .feature-box {
  padding: 1.2rem;
}

.feature-strip .feature-box h3 {
  font-size: 1rem;
}

/* Phones only: normalize feature card height/spacing */
@media (max-width: 767px) {
  .feature-strip {
    gap: 0.7rem;
    margin-top: 0.8rem;
  }

  .feature-strip .feature-box {
    min-height: 170px;
    padding: 1rem 1rem 1.05rem;
  }

  .feature-strip .feature-box h3 {
    margin: 0.25rem 0 0.2rem;
    display: block;
    flex-grow: 0;
  }

  .feature-strip .feature-box .muted {
    margin-top: 0;
  }
}

/* Tablets: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .feature-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: -6rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
  
  .feature-strip .feature-box {
    padding: 1.5rem;
  }
  
  .feature-strip .feature-box h3 {
    font-size: 1.1rem;
  }
}

/* Desktop: 1024px and above */
@media (min-width: 1024px) {
  .feature-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    width: calc(100% - 160px);
    max-width: var(--wrap);
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }
  
  .feature-strip .feature-box {
    padding: 2rem;
  }
  
  .feature-strip .feature-box h3 {
    font-size: 1.25rem;
  }
  
  /* Hero content - naikkan atas untuk desktop supaya tak overlap dengan kotak */
  .hero-electrical .hero-inner {
    justify-content: flex-start;
    padding-top: 350px;
    padding-bottom: 0;
  }
  
  .hero-electrical .hero-content {
    margin-top: 0;
  }
}

/* Mid-range desktop: 1024px - 1365px (e.g., 1366×768) */
@media (min-width: 1024px) and (max-width: 1365px) {
  .hero-electrical .hero-inner {
    padding-top: 180px;
  }
}

/* Targeted desktop tweak: 1366x768 only - lift hero text slightly */
@media (min-width: 1360px) and (max-width: 1370px) and (min-height: 740px) and (max-height: 780px) {
  .hero-title {
    transform: translateY(-16px);
  }
}

/* Targeted desktop tweak: 1024x600 only - flatten feature boxes so heading stays visible */
@media (min-width: 1020px) and (max-width: 1035px) and (max-height: 640px) {
  body.page-home .hero-electrical .hero-inner {
    padding-top: 180px;
  }

  body.page-home .feature-strip .feature-box {
    min-height: 160px;
    padding: 0.9rem 1.2rem;
  }

  body.page-home .feature-strip .feature-box .feature-icon,
  body.page-home .feature-strip .feature-box img[src*="sirim-iqnet-logo"] {
    height: 52px;
    margin-bottom: 0.35rem;
  }

  body.page-home .feature-strip .feature-box h3 {
    font-size: 1rem;
    margin: 0.2rem 0;
  }

  body.page-home .feature-strip .feature-box .muted {
    font-size: 0.82rem;
    margin-top: 0.2rem;
  }

  /* Services: center last card (Transformer Oil) when it's alone on last row */
  body.page-home .services-grid > .service-hero:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 2rem) / 2);
  }

  /* Equipment: center last card (Megger Insulation Tester) when alone */
  body.page-home .products-grid > .product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 2rem) / 2);
  }

  /* Vision-Mission: mission image fills its box fully */
  body.page-home .mission-card .vision-mission-image-placeholder img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
  }

  /* Systems: move cert image box to the left */
  body.page-home .systems-right {
    margin-left: -240px;
  }

  /* News: center last card (Sipitang) when alone on last row */
  body.page-home #news-list .news-grid > .news-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 2rem) / 2);
  }

  /* Let's Work Together heading — wrap strongly (all pages) */
  .contact-cta-content h2 {
    font-size: 3.8rem !important;
    white-space: normal !important;
    word-break: break-word;
    max-width: 480px;
    line-height: 1.1;
    margin-bottom: 0.8rem;
  }

  .contact-cta-content p {
    font-size: 2.8rem !important;
    white-space: normal !important;
    word-break: break-word;
    max-width: 420px;
    line-height: 1.25;
  }

  /* Contact form — taller, shifted down (all pages) */
  .contact-form-floating {
    max-width: 340px;
    top: 190px;
    right: 24px;
    min-height: 540px;
  }

  .contact-form-panel {
    padding: 1.6rem 1.8rem;
    min-height: 540px;
    display: flex;
    flex-direction: column;
  }

  .contact-form-panel h3 {
    font-size: 1.65rem;
    margin-bottom: 0.6rem;
  }

  .contact-form-panel .muted {
    font-size: 1.05rem;
    margin-bottom: 1.1rem;
    line-height: 1.5;
  }

  .contact-form-panel .contact-form {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .contact-form-panel label span {
    font-size: 0.82rem;
  }

  .contact-form-panel input,
  .contact-form-panel textarea {
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
  }

  .contact-form-panel textarea {
    flex: 1;
    min-height: 160px;
  }

  .contact-form-panel .btn {
    padding: 0.55rem 1.2rem;
    font-size: 0.88rem;
    margin-top: auto;
  }

  /* Services page — PCSF center */
  body.page-services .projects-section-services .news-grid > .news-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 2rem) / 2);
  }

  /* Projects page — title LEFT, description RIGHT (side by side, like screenshot) */
  body.page-projects .yp-detail-body {
    padding: 170px 28px 24px 36px !important;
    display: block !important;
    flex-direction: unset !important;
  }

  body.page-projects .yp-detail-title {
    max-width: 46% !important;
    font-size: clamp(18px, 2.2vw, 32px) !important;
    line-height: 1.15 !important;
    position: relative;
  }

  body.page-projects .yp-detail-desc {
    position: absolute !important;
    top: 230px !important;
    right: 36px !important;
    width: 44% !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    max-height: calc(100% - 260px) !important;
    overflow-y: auto !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ─── 1024×768 year-panel fix: no overlap between title (left) and desc (right) ─── */
@media (min-width: 1020px) and (max-width: 1100px) and (min-height: 641px) and (max-height: 820px) {
  body.page-projects .yp-detail-body {
    padding: 370px 28px 24px 36px !important;
    display: block !important;
    flex-direction: unset !important;
  }
  body.page-projects .yp-detail-title {
    max-width: 42% !important;
    font-size: clamp(48px, 5.2vw, 86px) !important;
    line-height: 1.14 !important;
    position: relative;
  }
  body.page-projects .yp-detail-desc {
    position: absolute !important;
    top: 460px !important;
    right: 28px !important;
    width: 41% !important;
    font-size: clamp(34px, 3.6vw, 52px) !important;
    line-height: 1.5 !important;
    max-height: calc(100% - 490px) !important;
    overflow-y: auto !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
}

@media (min-width: 1020px) and (max-width: 1035px) and (max-height: 640px) {
  /* Projects page — News Sipitang center */
  body.page-projects .news-preview .news-grid > .news-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 2rem) / 2);
  }

  /* About page — zodiac images smaller */
  body.page-about .zodiac-2016-img,
  body.page-about .zodiac-2018-img,
  body.page-about .zodiac-2020-img,
  body.page-about .zodiac-2022-img,
  body.page-about .zodiac-2024-img,
  body.page-about .zodiac-2026-img {
    width: 35%;
    left: calc(-10% + 110px);
  }

  body.page-about .zodiac-2017-img,
  body.page-about .zodiac-2019-img,
  body.page-about .zodiac-2021-img,
  body.page-about .zodiac-2023-img,
  body.page-about .zodiac-2025-img {
    width: 35%;
    right: calc(-10% + 90px);
  }

  /* About page — zodiac text: pull right-side text inward (SVG units, ~-16 units = ~-154px at 1024px) */
  body.page-about .zodiac-year-note-1366,
  body.page-about .zodiac-year-note-2018-1366,
  body.page-about .zodiac-year-note-2020-1366,
  body.page-about .zodiac-year-note-2022-1366,
  body.page-about .zodiac-year-note-2024-1366,
  body.page-about .zodiac-year-note-2026-1366 {
    transform: translate(-18px, 3px);
  }

  /* About page — zodiac text: pull left-side text inward */
  body.page-about .zodiac-year-note-2017-1366,
  body.page-about .zodiac-year-note-2019-1366,
  body.page-about .zodiac-year-note-2021-1366,
  body.page-about .zodiac-year-note-2023-1366,
  body.page-about .zodiac-year-note-2025-1366 {
    transform: translate(18px, 3px);
  }

  /* Scroll-reveal animations for zodiac text at 1024×600 */
  @keyframes zodiac-text-right-600 {
    from { opacity: 0; transform: translate(12px, 3px); }
    to   { opacity: 1; transform: translate(-18px, 3px); }
  }

  @keyframes zodiac-text-left-600 {
    from { opacity: 0; transform: translate(-36px, 3px); }
    to   { opacity: 1; transform: translate(18px, 3px); }
  }

  body.page-about .zodiac-year-note-1366.in-view,
  body.page-about .zodiac-year-note-2018-1366.in-view,
  body.page-about .zodiac-year-note-2020-1366.in-view,
  body.page-about .zodiac-year-note-2022-1366.in-view,
  body.page-about .zodiac-year-note-2024-1366.in-view,
  body.page-about .zodiac-year-note-2026-1366.in-view {
    animation: zodiac-text-right-600 0.8s ease forwards;
  }

  body.page-about .zodiac-year-note-2017-1366.in-view,
  body.page-about .zodiac-year-note-2019-1366.in-view,
  body.page-about .zodiac-year-note-2021-1366.in-view,
  body.page-about .zodiac-year-note-2023-1366.in-view,
  body.page-about .zodiac-year-note-2025-1366.in-view {
    animation: zodiac-text-left-600 0.8s ease forwards;
  }

  /* About page — mission image fills box */
  body.page-about .mission-card .vision-mission-image-placeholder img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
  }

  /* About page — systems cert logos match home layout */
  body.page-about .systems-right {
    margin-left: -240px;
  }

  /* About page — news Sipitang center */
  body.page-about #news-list .news-grid > .news-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 2rem) / 2);
  }

  /* News page — awards 2x2 */
  body.page-news .awards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* News page — projects PCSF center */
  body.page-news .projects-section-services .news-grid > .news-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 2rem) / 2);
  }

  /* Contact page — map stretches to match detail boxes height */
  body.page-contact .contact-map-wrapper {
    height: auto;
    align-self: stretch;
  }

  body.page-contact .contact-map-wrapper iframe {
    height: 100%;
    min-height: 480px;
  }
}

/* Home projects fallback: ensure first preview card fully visible on 1024-class desktop */
@media (min-width: 980px) and (max-width: 1065px) and (max-height: 820px) {
  body.page-home .projects .preview-cards-container {
    --preview-guard: 0 !important;
    padding-left: 0 !important;
    clip-path: none !important;
  }
}

/* Targeted desktop tweak: 1024x768 only - lower hero title block */
@media (min-width: 1020px) and (max-width: 1035px) and (min-height: 740px) and (max-height: 775px) {
  body.page-home .hero-electrical .hero-inner {
    padding-top: 240px;
  }

  body.page-home .services-grid > .service-hero:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, calc((100% - 2rem) / 2));
  }

  body.page-home .products-grid > .product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, calc((100% - 2rem) / 2));
  }

  body.page-home .about-content {
    align-items: flex-start;
    text-align: left;
  }

  body.page-home .about-content h2,
  body.page-home .about-content p,
  body.page-home .about-content .btn {
    text-align: left;
  }

  body.page-home .about-content p {
    max-width: 620px;
  }

  body.page-home .mission-card .vision-mission-image-placeholder img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  body.page-about .mission-card .vision-mission-image-placeholder img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  body.page-home .systems-right {
    margin-left: -260px;
  }

  body.page-about .systems-right {
    margin-left: -260px;
  }

  body.page-home .news-grid > .news-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, calc((100% - 2rem) / 2));
  }

  body.page-about .news-grid > .news-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, calc((100% - 2rem) / 2));
  }

  body.page-services .projects-section-services .news-grid > .news-card:last-child:nth-child(odd),
  body.page-news .projects-section-services .news-grid > .news-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, calc((100% - 2rem) / 2));
  }

  body.page-news .awards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-about .zodiac-2016-img,
  body.page-about .zodiac-2018-img,
  body.page-about .zodiac-2020-img,
  body.page-about .zodiac-2022-img,
  body.page-about .zodiac-2024-img,
  body.page-about .zodiac-2026-img {
    left: calc(-10% + 140px);
    width: 34%;
  }

  body.page-about .zodiac-2017-img,
  body.page-about .zodiac-2019-img,
  body.page-about .zodiac-2021-img,
  body.page-about .zodiac-2023-img,
  body.page-about .zodiac-2025-img {
    right: calc(-10% + 120px);
    width: 34%;
  }

  body.page-about .zodiac-year-note-1366,
  body.page-about .zodiac-year-note-2018-1366,
  body.page-about .zodiac-year-note-2020-1366,
  body.page-about .zodiac-year-note-2022-1366,
  body.page-about .zodiac-year-note-2024-1366,
  body.page-about .zodiac-year-note-2026-1366 {
    transform: translate(-20px, 3px);
  }

  body.page-about .zodiac-year-note-2017-1366,
  body.page-about .zodiac-year-note-2019-1366,
  body.page-about .zodiac-year-note-2021-1366,
  body.page-about .zodiac-year-note-2023-1366,
  body.page-about .zodiac-year-note-2025-1366 {
    transform: translate(24px, 3px);
  }

  @keyframes zodiac-text-right-1366-about-1024 {
    from { opacity: 0; transform: translate(11px, 3px); }
    to   { opacity: 1; transform: translate(-20px, 3px); }
  }

  @keyframes zodiac-text-left-1366-about-1024 {
    from { opacity: 0; transform: translate(-1px, 3px); }
    to   { opacity: 1; transform: translate(24px, 3px); }
  }

  body.page-about .zodiac-year-note-1366.in-view,
  body.page-about .zodiac-year-note-2018-1366.in-view,
  body.page-about .zodiac-year-note-2020-1366.in-view,
  body.page-about .zodiac-year-note-2022-1366.in-view,
  body.page-about .zodiac-year-note-2024-1366.in-view,
  body.page-about .zodiac-year-note-2026-1366.in-view {
    animation: zodiac-text-right-1366-about-1024 0.8s ease forwards;
  }

  body.page-about .zodiac-year-note-2017-1366.in-view,
  body.page-about .zodiac-year-note-2019-1366.in-view,
  body.page-about .zodiac-year-note-2021-1366.in-view,
  body.page-about .zodiac-year-note-2023-1366.in-view,
  body.page-about .zodiac-year-note-2025-1366.in-view {
    animation: zodiac-text-left-1366-about-1024 0.8s ease forwards;
  }

  .contact-form-floating {
    max-width: 380px;
    right: 30px;
    top: 56px;
  }

  .contact-cta-content h2 {
    white-space: normal;
    max-width: 240px;
    line-height: 1.08;
    transform: translateY(-24px);
  }

  .contact-cta-content p {
    max-width: 420px;
    line-height: 1.3;
    transform: translateY(-16px);
  }

  .footer-certifications {
    padding-top: 0.4rem;
    margin-top: 0.4rem;
  }

  .footer-copyright {
    padding-top: 0.5rem;
  }

  .footer-top-row .contact-info-block:nth-child(2) {
    margin-left: -100px;
    transform: translateX(-20px);
  }

  .cert-logos-box {
    transform: translateY(-30px);
  }

  .cert-logos-box.scroll-reveal.sr-left {
    transform: translateX(-34px) translateY(-30px);
  }

  .cert-logos-box.scroll-reveal.sr-left.visible {
    transform: translateX(0) translateY(-30px);
  }
}

/* Fallback for 1024-class desktop view (accounts for devtools/scrollbar viewport variance) */
@media (min-width: 980px) and (max-width: 1065px) and (min-height: 700px) and (max-height: 820px) {
  body.page-services .projects-section-services .news-grid > .news-card:last-child:nth-child(odd),
  body.page-news .projects-section-services .news-grid > .news-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, calc((100% - 2rem) / 2));
  }

  body.page-news .awards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-form-floating {
    width: 380px !important;
    max-width: 380px !important;
    right: 30px !important;
    left: auto !important;
    top: 56px !important;
    transform: none !important;
  }
}

@media (min-width: 1020px) and (max-width: 1035px) and (min-height: 740px) and (max-height: 775px) {
  body.page-projects .is-project-2016 .project-main-title {
    letter-spacing: 0.1em;
  }

  body.page-projects .is-project-2016 .project-year-label {
    left: 18px;
  }

  body.page-projects .is-project-2016 .project-ref-label {
    left: 509.4px;
    font-size: 42px;
  }

  body.page-projects .is-project-2016 .beveled-hex-cut {
    left: 43px;
  }

  body.page-projects .is-project-2016 .project-layered-images {
    right: 76px;
  }

  body.page-projects .projects-hero-section.is-reverse-project.is-project-2017 .project-main-title {
    letter-spacing: 0.1em;
  }

  body.page-projects .projects-hero-section.is-reverse-project.is-project-2017 .project-year-label {
    right: 18px;
  }

  body.page-projects .projects-hero-section.is-reverse-project.is-project-2017 .project-ref-label {
    right: 509.4px;
    font-size: 42px;
  }

  body.page-projects .projects-hero-section.is-reverse-project.is-project-2017 .beveled-hex-cut {
    right: 43px;
  }

  body.page-projects .projects-hero-section.is-reverse-project.is-project-2017 .project-layered-images {
    left: 76px;
  }

  body.page-projects .projects-hero-section.is-reverse-project.is-project-2017 .layered-image {
    width: 360px;
    height: 214px;
  }

  body.page-projects .projects-hero-section.is-project-2025 .project-main-title {
    letter-spacing: 0.1em;
  }

  body.page-projects .projects-hero-section.is-project-2025 .project-year-label {
    left: 18px;
  }

  body.page-projects .projects-hero-section.is-project-2025 .project-ref-label {
    left: 509.4px;
    font-size: 42px !important;
  }

  body.page-projects .projects-hero-section.is-project-2025 .beveled-hex-cut {
    left: 43px;
  }

  body.page-projects .projects-hero-section.is-project-2025 .project-layered-images {
    right: 76px;
  }

  body.page-projects .projects-hero-section.is-project-2025 .layered-image {
    width: 360px;
    height: 214px;
  }

  body.page-projects .projects-hero-section-secondary.is-safety-2016 .projects-secondary-safety-text {
    left: -26px;
  }

  body.page-projects .projects-hero-section-secondary.is-safety-2016 .projects-secondary-detail-text {
    left: 55.5%;
    max-width: 1080px;
  }

  body.page-projects .projects-hero-section-secondary.is-precision-2016 .projects-secondary-safety-text {
    text-transform: uppercase;
    right: -26px;
  }

  body.page-projects .projects-hero-section-secondary.is-precision-2016 .projects-secondary-detail-text {
    left: 44%;
    max-width: 980px;
  }

  body.page-projects .projects-hero-section-secondary.is-delivering-2016 .projects-secondary-safety-text {
    text-transform: uppercase;
    left: -26px;
  }

  body.page-projects .projects-hero-section-secondary.is-delivering-2016 .projects-secondary-detail-text {
    left: 55.5%;
    max-width: 1080px;
  }

  body.page-projects .projects-hero-section-secondary.is-safety-2017 .projects-secondary-safety-text {
    left: auto;
    right: -26px;
    text-transform: uppercase;
    text-align: right;
    white-space: normal;
    max-width: 560px;
    line-height: 1.06;
  }

  body.page-projects .projects-hero-section-secondary.is-safety-2017 .projects-secondary-detail-text {
    left: 44.5%;
    max-width: 860px;
    width: calc(100% - 80px);
  }

  body.page-projects .projects-hero-section-secondary.is-precision-2017 .projects-secondary-safety-text {
    left: -26px;
    right: auto;
    text-transform: uppercase;
    text-align: left;
    white-space: normal;
    max-width: 560px;
    line-height: 1.06;
  }

  body.page-projects .projects-hero-section-secondary.is-precision-2017 .projects-secondary-detail-text {
    left: 55.5%;
    max-width: 820px;
    width: calc(100% - 80px);
  }

  body.page-projects .projects-hero-section-secondary.is-delivering-2017 .projects-secondary-safety-text {
    left: auto;
    right: -26px;
    text-transform: uppercase;
    text-align: right;
    white-space: normal;
    max-width: 560px;
    line-height: 1.06;
  }

  body.page-projects .projects-hero-section-secondary.is-delivering-2017 .projects-secondary-detail-text {
    left: 44.5%;
    max-width: 860px;
    width: calc(100% - 80px);
  }

  body.page-projects .projects-hero-section-secondary.is-safety-2025 .projects-secondary-safety-text {
    left: -26px;
    right: auto;
    text-transform: uppercase;
    white-space: nowrap;
  }

  body.page-projects .projects-hero-section-secondary.is-safety-2025 .projects-secondary-detail-text {
    left: 55.5%;
    max-width: 900px;
    width: calc(100% - 100px);
  }

  body.page-projects .projects-hero-section-secondary.is-precision-2025 .projects-secondary-safety-text {
    left: auto;
    right: -26px;
    text-transform: uppercase;
    white-space: normal;
    max-width: 560px;
    text-align: right;
  }

  body.page-projects .projects-hero-section-secondary.is-precision-2025 .projects-secondary-detail-text {
    left: 44%;
    max-width: 980px;
  }

  body.page-projects .projects-hero-section-secondary.is-delivering-2025 .projects-secondary-safety-text {
    left: -26px;
    right: auto;
    text-transform: uppercase;
    white-space: normal;
    max-width: 620px;
  }

  body.page-projects .projects-hero-section-secondary.is-delivering-2025 .projects-secondary-detail-text {
    left: 55.5%;
    max-width: 1080px;
  }

  body.page-projects .news-preview .news-grid > .news-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, calc((100% - 2rem) / 2));
  }

  body.page-projects .is-project-2016 .layered-image {
    width: 360px;
    height: 214px;
  }
}

@media (min-width: 1270px) and (max-width: 1295px) and (min-height: 700px) and (max-height: 735px) {
  body.page-home .hero-electrical .hero-inner {
    padding-top: 180px;
  }

  body.page-home .hero-title {
    transform: translateY(50px);
  }

  .contact-form-floating {
    max-width: 520px;
    right: 40px;
  }

  .footer-top-row .contact-info-block:nth-child(2) {
    max-width: 230px;
    margin-left: 20px;
  }

  .footer-certifications {
    transform: translateY(-20px);
  }

  .footer-copyright {
    transform: translateY(-20px);
  }

  body.page-projects .is-project-2016 .project-year-label {
    left: 24px;
    top: 240.2px;
  }

  body.page-projects .is-project-2016 .project-ref-label {
    left: 571.4px;
    font-size: 56px;
  }

  body.page-projects .is-project-2016 .beveled-hex-cut {
    width: 250px;
    height: 342px;
    padding: 30px;
    bottom: 30px;
    left: 155px;
  }

  body.page-projects .is-project-2016 .hex-cut-text {
    font-size: 18px;
    line-height: 1.2;
    max-width: 160px;
  }

  body.page-projects .is-project-2016 .project-layered-images {
    width: 525px;
    height: 255px;
    right: 116px;
    bottom: 46px;
  }

  body.page-projects .is-project-2016 .layered-image {
    width: 333px;
    height: 198px;
    border-radius: 22px;
  }

  body.page-projects .is-project-2016 .layer-back {
    right: 0;
    bottom: 75px;
  }

  body.page-projects .is-project-2016 .layer-middle {
    right: 125px;
    bottom: 37px;
  }

  body.page-projects .is-project-2016 .layer-front {
    right: 50px;
    bottom: 0;
  }

  body.page-projects .projects-hero-section-secondary.is-safety-2016 .projects-secondary-safety-text,
  body.page-projects .projects-hero-section-secondary.is-precision-2016 .projects-secondary-safety-text,
  body.page-projects .projects-hero-section-secondary.is-delivering-2016 .projects-secondary-safety-text {
    text-transform: uppercase;
    white-space: nowrap;
    max-width: 520px;
    line-height: 1.02;
  }

  body.page-projects .projects-hero-section-secondary.is-safety-2016 .projects-secondary-safety-text,
  body.page-projects .projects-hero-section-secondary.is-delivering-2016 .projects-secondary-safety-text {
    left: -36px;
  }

  body.page-projects .projects-hero-section-secondary.is-precision-2016 .projects-secondary-safety-text {
    right: 34px;
  }

  body.page-projects .projects-hero-section-secondary.is-safety-2016 .projects-secondary-detail-text,
  body.page-projects .projects-hero-section-secondary.is-precision-2016 .projects-secondary-detail-text,
  body.page-projects .projects-hero-section-secondary.is-delivering-2016 .projects-secondary-detail-text {
    width: calc(100% - 260px);
    max-width: 760px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.08;
  }

  body.page-projects .projects-hero-section-secondary.is-precision-2016 .projects-secondary-detail-text {
    left: calc(40% - 70px);
  }

  body.page-projects .projects-hero-section-secondary.is-delivering-2016 .projects-secondary-detail-text {
    left: calc(60% + 70px);
  }
}

/* Targeted desktop tweak: 1152x864 only */
@media (min-width: 1140px) and (max-width: 1165px) and (min-height: 840px) and (max-height: 885px) {
  /* Home — Servicing heading down 3 steps, feature boxes up 4 steps */
  body.page-home .hero-title {
    transform: translateY(70px);
  }

  body.page-home .feature-strip {
    bottom: 50px;
  }

  /* Home — Equipment: center last odd card (Megger Insulation Tester) */
  body.page-home .products-grid > .product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 2rem) / 2);
  }

  /* Vision & Mission (shared) — mission image fully fills placeholder */
  .mission-card .vision-mission-image-placeholder img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
  }

  /* Systems (shared in Home/About) — SIRIM box right 3 steps */
  body.page-home .systems-right,
  body.page-about .systems-right {
    margin-left: -350px;
  }

  /* Projects page — Major Project description down 3 steps */
  body.page-projects .yp-detail-desc {
    top: 250px;
  }

  /* News page — Awards 2x2 */
  body.page-news .awards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Shared Lets Work + Contact + Footer */
  .contact-form-floating {
    right: 20px;
  }

  .contact-cta-content h2 {
    max-width: 420px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.1;
  }

  .contact-cta-content p {
    max-width: 460px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.28;
  }

  .footer-top-row {
    align-items: flex-start;
  }

  .footer-top-row .contact-info-block:nth-child(2) {
    max-width: 270px;
    margin-left: 0;
    margin-right: 0;
    transform: translateX(40px);
    align-self: flex-start;
  }

  .footer-top-row .contact-info-block:nth-child(2) h4 {
    margin-top: 0;
  }

  .footer-top-row .contact-info-block:nth-child(2) .contact-line {
    padding-left: 0;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 0.45rem;
    max-width: 270px;
  }

  .footer-top-row .contact-info-block:nth-child(2) .contact-text {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.45;
  }
}

/* Stabilizer for real 1366px desktop browser viewport at 100% zoom */
@media (min-width: 1340px) and (max-width: 1385px) {
  body.page-home .hero-electrical .hero-inner {
    justify-content: flex-start;
    padding-top: 230px;
  }

  body.page-home .hero-content {
    position: relative;
    z-index: 60;
    margin-top: 0;
  }

  body.page-home .hero-title {
    transform: translateY(-8px);
  }

  body.page-home .feature-strip {
    bottom: 10px;
  }

  .contact-form-floating {
    max-width: 500px;
    right: 58px;
    top: 56px;
  }

  .footer-top-row {
    grid-template-columns: auto auto 1fr;
    gap: 1.25rem;
    align-items: flex-start;
  }

  .footer-top-row .contact-info-block:nth-child(1) {
    min-width: 250px;
  }

  .footer-top-row .contact-info-block:nth-child(2) {
    max-width: 260px;
    margin-left: 0;
    margin-right: 0;
    transform: translateX(12px);
  }

  .footer-top-row .contact-info-block:nth-child(2) .contact-line {
    max-width: 260px;
    gap: 0.7rem;
    align-items: flex-start;
  }

  .footer-top-row .contact-info-block:nth-child(2) .contact-text {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.45;
  }
}

@media (min-width: 412px) and (max-width: 431px) {
  .contact-form-floating {
    margin-top: 5rem;
  }
  .contact-cta-content h2 {
    font-size: 5rem !important;
  }
  .contact-cta-content p {
    font-size: 3rem !important;
  }
  .contact-cta-bg {
    padding-bottom: 24rem;
  }
}

@media (max-width: 360px) {
  .products-headline {
    justify-content: space-between;
    gap: 0.6rem;
  }

  .products h2 {
    font-size: clamp(1.55rem, 6vw, 2rem);
    line-height: 1.1;
    white-space: nowrap;
  }

  .products-headline .btn-view-all {
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════
   QHD  (2560 × 1440)  — min-width: 2000px
   Scale up content wrap, header, footer, font floors
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 2000px) {
  :root {
    --wrap: 1500px;
  }

  .header-inner {
    max-width: 1900px;
    padding: 1.2rem 3rem;
  }

  .site-footer .wrap {
    max-width: 1900px;
  }

  /* Hero title / subtitle scale up */
  .hero-title {
    font-size: clamp(4.5rem, 5.5vw, 8rem) !important;
  }

  .hero-subtitle {
    font-size: clamp(1.4rem, 1.8vw, 2.6rem) !important;
  }

  /* Projects showcase carousel wider */
  .projects-showcase .projects-carousel-wrapper {
    max-width: 1700px;
    grid-template-columns: 32px 640px 1fr;
  }

  /* Projects home section - constrain side-by-side content */
  .projects .projects-carousel-wrapper {
    padding: 0 4rem 0 0;
    gap: 8rem;
  }

  .projects .projects-content .project-title {
    font-size: 2.8rem;
  }

  .projects .preview-card {
    width: 320px;
    height: 500px;
  }

  /* Vision/Mission image placeholder taller */
  .vision-mission-image-placeholder {
    height: 560px;
  }

  /* CEO quote bigger */
  .ceo-quote-section .ceo-section-title {
    font-size: clamp(2.5rem, 3.5vw, 5rem);
  }

  /* Stats counters */
  .stats-counter {
    font-size: clamp(3.5rem, 5vw, 7rem);
  }

  /* Section headings */
  h2, .section-title {
    font-size: clamp(2.4rem, 3.5vw, 5rem);
  }

  /* Body text */
  p, li, .section-desc {
    font-size: clamp(1rem, 1.2vw, 1.4rem);
  }

  /* News cards */
  .news-card {
    min-height: 380px;
  }

  /* Contact CTA */
  .contact-cta-content h2 {
    font-size: clamp(4rem, 5.5vw, 8rem) !important;
  }

  .contact-cta-content p {
    font-size: clamp(2rem, 2.8vw, 4rem) !important;
  }

  /* Logo bigger */
  .logo {
    width: 72px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   QHD+  (2560 × 1440 native / high-end monitors)  min-width: 2400px
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 2400px) {
  :root {
    --wrap: 1800px;
  }

  .header-inner {
    max-width: 2200px;
  }

  .site-footer .wrap {
    max-width: 2200px;
  }

  .projects-showcase .projects-carousel-wrapper {
    max-width: 2000px;
    grid-template-columns: 32px 720px 1fr;
  }

  .projects .preview-card {
    width: 360px;
    height: 560px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Ultrawide  (3440 × 1440  21:9)  — min-width: 3200px
   Fill the wide canvas; prevent a thin strip of content
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 3200px) {
  :root {
    --wrap: 2400px;
  }

  .header-inner {
    max-width: 3000px;
    padding: 1.2rem 4rem;
  }

  .site-footer .wrap {
    max-width: 3000px;
  }

  .hero-title {
    font-size: clamp(5rem, 6vw, 10rem) !important;
  }

  .hero-subtitle {
    font-size: clamp(1.6rem, 2vw, 3rem) !important;
  }

  .projects-showcase .projects-carousel-wrapper {
    max-width: 2800px;
    grid-template-columns: 40px 900px 1fr;
  }

  .projects .projects-carousel-wrapper {
    padding: 0 6rem 0 0;
    gap: 12rem;
  }

  .projects .projects-content .project-title {
    font-size: 3.5rem;
  }

  .projects .preview-card {
    width: 420px;
    height: 640px;
  }

  .vision-mission-image-placeholder {
    height: 680px;
  }

  .stats-counter {
    font-size: clamp(5rem, 6vw, 10rem);
  }

  h2, .section-title {
    font-size: clamp(3rem, 4vw, 7rem);
  }

  p, li, .section-desc {
    font-size: clamp(1.1rem, 1.4vw, 1.8rem);
  }

  .logo {
    width: 90px;
  }

  .contact-cta-content h2 {
    font-size: clamp(5rem, 6.5vw, 11rem) !important;
  }

  .contact-cta-content p {
    font-size: clamp(2.5rem, 3.5vw, 6rem) !important;
  }

  /* News grid: allow 4 columns at ultrawide */
  .news-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .news-card {
    min-height: 420px;
  }
}

  /* Final lock: Projects detail panel on 1024x768 desktop-class viewport */
  @media (min-width: 980px) and (max-width: 1060px) and (min-height: 700px) and (max-height: 820px) {
    body.page-projects .yp-detail-body {
      padding: 180px 24px 24px 24px !important;
      display: block !important;
    }

    body.page-projects .yp-detail-title {
      max-width: 42% !important;
      font-size: clamp(26px, 3.1vw, 44px) !important;
      line-height: 1.14 !important;
    }

    body.page-projects .yp-detail-desc {
      position: absolute !important;
      top: 250px !important;
      right: 24px !important;
      width: 41% !important;
      font-size: clamp(18px, 2.1vw, 30px) !important;
      line-height: 1.45 !important;
      max-height: calc(100% - 270px) !important;
      overflow-y: auto !important;
    }
  }

  /* Projects carousel arrows: desktop 1024x600, 1024x768, 1280x720 -> naik 2 langkah */
  @media (min-width: 1024px) and (max-width: 1280px) and (max-height: 768px) {
    body.page-projects .featured-project-section .carousel-arrow {
      top: calc(50% - 30px);
    }
  }

  /* Shared 1440x900 (all pages): match Home Lets Work + Contact + Footer layout */
  @media (min-width: 1420px) and (max-width: 1465px) and (min-height: 860px) and (max-height: 930px) {
    .contact-form-floating {
      max-width: 590px;
      right: 42px;
      top: 72px;
    }

    .contact-form-panel {
      padding: 2.2rem;
    }

    .footer-top-row .contact-info-block:nth-child(2) {
      max-width: 280px;
      margin-right: 28px;
      transform: translateX(-12px);
    }
  }

  /* Home 1680x1050: naikkan teks 'Servicing...' + kotak feature strip */
  @media (min-width: 1660px) and (max-width: 1705px) and (min-height: 1020px) and (max-height: 1080px) {
    body.page-home .hero-title {
      transform: translateY(-5px);
    }

    body.page-home .feature-strip {
      bottom: 20px;
    }

    /* Home Projects: compactkan skala supaya rasa macam 1600x900 */
    body.page-home .projects .projects-carousel-wrapper {
      grid-template-columns: 32px 420px 1fr;
      gap: 4.2rem;
      padding: 0 1.6rem 0 0;
    }

    body.page-home .projects .projects-content {
      max-width: 420px;
      margin-left: -1.2rem;
    }

    body.page-home .projects .projects-content .project-title {
      font-size: 2rem;
    }

    body.page-home .projects .preview-card {
      width: 240px;
      height: 390px;
    }

    body.page-home .projects .preview-cards-container {
      gap: 1.6rem;
    }

    /* Lets Work + Contact + Footer: elak over-expand */
    .contact-cta-content h2 {
      font-size: 3.5rem !important;
      line-height: 1.08;
    }

    .contact-cta-content p {
      font-size: 2.5rem !important;
      line-height: 1.22;
    }

    .contact-form-floating {
      max-width: 610px;
      right: 42px;
      top: 74px;
    }

    .contact-form-panel {
      padding: 2rem 2.1rem;
    }

    .footer-top-row {
      max-width: 1320px;
      gap: 3rem;
    }

    .footer-top-row .contact-info-block:nth-child(1) {
      min-width: 340px;
    }

    .footer-top-row .contact-info-block:nth-child(2) {
      max-width: 280px;
      margin-right: 20px;
      transform: translateX(-8px);
    }

    /* Projects page: Major Project section compact macam 1600x900 */
    body.page-projects .projects-generator-section {
      min-height: 730px;
    }

    body.page-projects .projects-major-label {
      top: 60%;
      font-size: 44px;
    }

    body.page-projects .projects-major-sub {
      top: 72%;
      font-size: 33px;
    }

    body.page-projects .projects-year-orbit-wrap {
      width: min(1500px, 100vw);
      height: 1320px;
    }

    body.page-projects .projects-year-orbit {
      top: 660px;
    }

    body.page-projects .projects-year-orbit .year-node {
      width: 238px;
      height: 244px;
      margin: -122px 0 0 -119px;
      font-size: 50px;
    }

    body.page-projects .yp-col-title {
      font-size: 44px;
    }
  }

  /* Ultrawide 2560x1080 profile: ikut rasa desktop biasa, bukan over-expand */
  @media (min-width: 2500px) and (max-width: 2620px) and (min-height: 1020px) and (max-height: 1160px) {
    :root {
      --wrap: 1600px;
    }

    body.page-home .hero-content {
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
    }

    body.page-home .hero-title {
      font-size: clamp(3.4rem, 4.2vw, 5.8rem) !important;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    body.page-home .feature-strip {
      width: min(1650px, calc(100% - 220px));
      bottom: 18px;
      gap: 1.1rem;
    }

    /* Home About Us: tajuk + desc paling kiri */
    body.page-home .about-container {
      max-width: none;
      margin: 0;
      padding: 3.5rem 4rem 0 4rem;
      justify-content: flex-start;
    }

    body.page-home .about-content {
      max-width: 560px;
      margin-right: auto;
      align-items: flex-start;
      text-align: left;
    }

    /* Home Projects: compact and centered */
    body.page-home .projects .projects-carousel-wrapper {
      grid-template-columns: 32px 470px 1fr;
      gap: 4.4rem;
      max-width: none;
      margin: 0;
      padding: 0 3rem;
    }

    body.page-home .projects .projects-content {
      max-width: 470px;
      margin-left: -0.6rem;
    }

    body.page-home .projects .projects-content .project-title {
      font-size: 2.2rem;
    }

    body.page-home .projects .projects-content .project-description {
      max-width: 360px;
    }

    body.page-home .projects .projects-preview-carousel {
      overflow: visible;
    }

    body.page-home .projects .preview-card {
      width: 236px;
      height: 382px;
    }

    body.page-home .projects .preview-cards-container {
      --preview-guard-lock: 1;
      --preview-guard: 120px;
      --preview-guard-min: 100px;
      --preview-guard-max: 150px;
      gap: 1.25rem;
      padding: 24px 20px 24px var(--preview-guard);
      clip-path: inset(0 0 0 var(--preview-guard));
      margin-left: -10px;
    }

    /* Lets Work + Contact + Footer */
    .contact-cta-content h2 {
      font-size: clamp(4.2rem, 4.8vw, 6.2rem) !important;
      line-height: 1.08;
    }

    .contact-cta-content p {
      font-size: clamp(2.2rem, 2.6vw, 3.4rem) !important;
      line-height: 1.2;
    }

    .contact-form-floating {
      max-width: 620px;
      right: 54px;
      top: 76px;
    }

    .contact-form-panel {
      padding: 2.1rem 2.2rem;
    }

    .footer-top-row {
      max-width: none;
      gap: 3.2rem;
      margin: 0;
      padding: 0 1.5rem 0 4rem;
      justify-content: start;
    }

    .footer-top-row .contact-info-block:nth-child(1) {
      min-width: 350px;
    }

    .footer-top-row .contact-info-block:nth-child(2) {
      max-width: 290px;
      margin-right: 0;
      transform: none;
      margin-left: 0;
    }

    .footer-certifications {
      max-width: none;
      margin-left: 0;
      margin-right: 0;
      padding-left: 4rem;
      padding-right: 4rem;
      justify-content: space-between;
    }

    .footer-copyright {
      justify-content: flex-end;
      text-align: right;
      padding-right: 0;
    }

    .footer-copyright p {
      width: 100%;
      text-align: right;
    }

    /* Projects page: major project section scale-down for 21:9 */
    body.page-projects .projects-generator-section {
      min-height: 720px;
    }

    body.page-projects .projects-major-label {
      top: 60%;
      font-size: 43px;
    }

    body.page-projects .projects-major-sub {
      top: 72%;
      font-size: 32px;
    }

    body.page-projects .projects-year-orbit-wrap {
      width: min(1520px, 100vw);
      height: 1320px;
    }

    body.page-projects .projects-year-orbit {
      top: 660px;
    }

    body.page-projects .projects-year-orbit .year-node {
      width: 234px;
      height: 240px;
      margin: -120px 0 0 -117px;
      font-size: 49px;
    }

    body.page-projects .yp-col-title {
      font-size: 42px;
    }
  }

  /* Tablet portrait tuning: 768x1024, 820x1180, 1024x1366 */
  @media (min-width: 768px) and (max-width: 1065px) and (min-height: 1000px) and (orientation: portrait) {
    .site-header {
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 200;
      padding: 0.45rem 0;
    }

    .header-inner {
      max-width: none;
      min-height: 64px;
      position: relative;
      padding: 0.9rem 1.6rem;
    }

    .logo {
      width: 170px !important;
      max-height: 58px;
      object-fit: contain;
    }

    .brand {
      display: flex;
      align-items: center;
      margin-right: auto;
    }

    .nav-toggle {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 0;
      padding: 0.5rem 0.6rem;
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      z-index: 210;
      height: 48px;
      cursor: pointer;
    }

    .nav {
      position: fixed;
      right: 0;
      top: 0;
      height: 100vh;
      width: 82%;
      max-width: 360px;
      background: #0d5a3d;
      padding: 5rem 0 0 0;
      transform: translateX(110%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: -8px 0 32px rgba(2,6,23,0.2);
      z-index: 150;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      margin-left: 0;
      gap: 0;
    }

    body.nav-open .nav {
      transform: translateX(0);
    }

    .nav a:not(.cta) {
      display: block;
      width: 100%;
      margin: 0;
      padding: 1rem 2rem;
      font-family: Poppins, system-ui;
      color: #fff;
      font-size: 1.1rem;
      font-weight: 600;
      border-bottom: 1px solid rgba(255,255,255,0.15);
      text-align: left;
    }

    .nav .cta {
      display: block;
      width: 100%;
      margin-top: auto;
      padding: 1.2rem 2rem;
      background: #fff;
      color: #0d5a3d !important;
      border-radius: 0;
      text-align: center;
      font-weight: 700;
      position: sticky;
      bottom: 0;
    }

    .nav-phone-box {
      display: flex !important;
      align-items: center;
      justify-content: center;
      padding: 1rem 2rem;
      background: rgba(255,255,255,0.1);
      margin: 0;
    }

    .site-header.scrolled .nav a:not(.cta) {
      color: #fff !important;
    }

    .site-header.scrolled .nav .cta {
      color: #fff !important;
      background: #0d5a3d !important;
    }

    body.page-about main,
    body.page-services main,
    body.page-products main,
    body.page-projects main,
    body.page-contact main,
    body.page-news main {
      padding-top: 74px;
    }

    .services-grid {
      grid-template-columns: 1fr;
      gap: 1.2rem;
      padding: 0 1rem;
    }

    .products-grid {
      grid-template-columns: 1fr;
      gap: 1.2rem;
      padding: 0 1rem;
    }

    .vision-mission-grid {
      grid-template-columns: 1fr;
      gap: 1.8rem;
    }

    .ceo-quote-container {
      grid-template-columns: 1fr;
      gap: 2rem;
      padding: 2rem 1.4rem;
      min-height: auto;
    }

    .ceo-quote-center {
      grid-column: 1;
      padding-left: 0;
    }

    .ceo-info-bottom-right {
      grid-column: 1;
      width: 100%;
    }

    .systems-content-wrapper {
      grid-template-columns: 1fr;
      gap: 2rem;
      padding: 0 1rem;
    }

    .systems-right {
      margin-left: 0 !important;
      margin-top: 0;
      justify-content: center;
    }

    .news-grid {
      grid-template-columns: 1fr;
      gap: 1.2rem;
      padding: 0 1rem;
    }

    .contact-cta {
      min-height: auto;
    }

    .contact-cta-bg {
      height: auto;
      min-height: 500px;
      align-items: flex-start;
      padding: 2.2rem 1.6rem 2.4rem;
    }

    .contact-cta-content {
      max-width: 100%;
    }

    .contact-cta-content h2 {
      font-size: clamp(3rem, 7.4vw, 4.8rem) !important;
      white-space: normal !important;
      line-height: 1.08;
      max-width: 100%;
    }

    .contact-cta-content p {
      font-size: clamp(1.8rem, 4.6vw, 2.9rem) !important;
      white-space: normal !important;
      max-width: 100%;
    }

    body.page-home .hero-electrical .hero-inner {
      justify-content: flex-start;
      padding-top: 180px;
      padding-bottom: 0;
    }

    body.page-home .feature-strip {
      position: relative;
      left: auto;
      bottom: auto;
      transform: none;
      width: auto;
      margin: 1rem 1.5rem 0;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }

    body.page-home .feature-strip .feature-box {
      min-height: 170px;
      padding: 1.2rem;
    }

    body.page-home .projects .projects-carousel-wrapper {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      gap: 2rem;
      padding: 0 1.5rem;
      min-height: auto;
    }

    body.page-home .projects .projects-nav-dots {
      display: none;
    }

    body.page-home .projects .projects-main {
      grid-column: 1;
      grid-row: 1;
      width: 100%;
      max-width: 100%;
      min-height: auto;
    }

    body.page-home .projects .projects-content {
      margin-left: 0;
      max-width: 100%;
      padding: 1.5rem 0;
    }

    body.page-home .projects .projects-content .project-title {
      font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    }

    body.page-home .projects .projects-content .project-description {
      max-width: 100%;
    }

    body.page-home .projects .projects-preview-carousel {
      grid-column: 1;
      grid-row: 2;
      min-height: auto;
      padding: 1.25rem 0 0.5rem;
      gap: 1rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      justify-items: center;
      overflow: hidden;
    }

    body.page-home .projects .preview-cards-container {
      grid-column: 1 / -1;
      grid-row: 1;
      --preview-guard-lock: 1;
      --preview-guard: 0;
      padding: 0 0.8rem;
      clip-path: none;
      gap: 1rem;
    }

    body.page-home .projects .preview-card {
      width: clamp(205px, 28vw, 250px);
      height: clamp(320px, 44vw, 390px);
    }

    body.page-home .projects .carousel-nav-btn {
      grid-row: 2;
    }

    .contact-cta-bg {
      padding: 2.2rem 1.6rem;
    }

    .contact-form-floating {
      position: relative !important;
      top: auto !important;
      right: auto !important;
      bottom: auto !important;
      left: auto !important;
      transform: none !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 1.5rem 0 0 !important;
    }

    .contact-form-panel {
      padding: 1.6rem 1.4rem;
      border-radius: 16px;
      min-height: 0;
    }

    .contact-footer-content {
      padding: 1.2rem 1rem 1.6rem !important;
      gap: 0.8rem;
      width: 100%;
    }

    .footer-top-row {
      transform: none !important;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      padding: 0 1rem;
    }

    .footer-top-row .contact-info-block:nth-child(1) {
      min-width: 0;
    }

    .footer-top-row .contact-info-block:nth-child(2) {
      max-width: none;
      margin-right: 0;
      transform: none;
    }

    .footer-certifications {
      transform: none !important;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      max-width: none;
      margin-left: 0;
      margin-right: 0;
      padding: 1.1rem 1rem 0;
      margin-top: 1rem;
      gap: 0.9rem;
    }

    .cert-logos-box,
    .cert-logos-box.scroll-reveal.sr-left,
    .cert-logos-box.scroll-reveal.sr-left.visible {
      transform: none !important;
      max-width: 100%;
    }

    .footer-copyright {
      transform: none !important;
      justify-content: flex-start;
      text-align: left;
      padding: 0;
    }

    .footer-copyright p {
      text-align: left;
      width: 100%;
    }

    /* Projects page: compact major-project + readable year-panel detail on portrait tablet */
    body.page-projects .projects-generator-section {
      min-height: 700px;
    }

    body.page-projects .projects-major-label {
      top: 60%;
      font-size: 38px;
      letter-spacing: 6px;
      text-indent: 6px;
    }

    body.page-projects .projects-major-sub {
      top: 72%;
      font-size: 30px;
    }

    body.page-projects .projects-year-orbit-wrap {
      width: min(980px, 100vw);
      height: 1120px;
    }

    body.page-projects .projects-year-orbit {
      top: 560px;
    }

    body.page-projects .projects-year-orbit .year-node {
      width: 194px;
      height: 200px;
      margin: -100px 0 0 -97px;
      font-size: 42px;
    }

    body.page-projects .yp-col-title {
      font-size: clamp(30px, 3.8vw, 40px);
      line-height: 1.22;
    }

    body.page-projects .yp-detail-body {
      padding: 150px 22px 24px 22px !important;
      display: block !important;
    }

    body.page-projects .yp-detail-title {
      max-width: 100% !important;
      font-size: clamp(26px, 4.4vw, 44px) !important;
      line-height: 1.15 !important;
    }

    body.page-projects .yp-detail-desc {
      position: relative !important;
      top: auto !important;
      right: auto !important;
      width: 100% !important;
      max-height: none !important;
      overflow-y: visible !important;
      margin-top: 0.9rem;
      font-size: clamp(17px, 2.5vw, 24px) !important;
      line-height: 1.45 !important;
    }
  }

  /* Portrait tablet fine-tune: 768x1024 class */
  @media (min-width: 760px) and (max-width: 800px) and (min-height: 980px) and (orientation: portrait) {
    body.page-home .hero-electrical .hero-inner {
      padding-top: 140px !important;
    }

    body.page-home .hero-content {
      margin-top: 0.4rem !important;
    }

    body.page-home .hero-title {
      transform: translateY(141px) !important;
    }

    body.page-home .services-headline {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      margin-bottom: 1.4rem;
      padding: 0 1rem;
    }

    body.page-home .services-overview h2 {
      grid-column: 2;
      text-align: center;
      justify-self: center;
      margin: 0;
      transform: translateY(10px);
    }

    body.page-home .services-headline .btn-view-all {
      grid-column: 3;
      justify-self: end;
      position: static;
      transform: none;
    }

    .contact-cta-content h2 {
      font-size: clamp(5.6rem, 17.6vw, 8rem) !important;
    }

    .contact-cta-content p {
      font-size: clamp(3.1rem, 9.8vw, 4.4rem) !important;
    }

    body.page-home .feature-strip .feature-box {
      min-height: 158px;
      padding: 1rem;
    }

    body.page-home .projects .preview-card {
      width: clamp(190px, 41vw, 225px);
      height: clamp(300px, 63vw, 360px);
    }

    body.page-home .product-card h3 {
      font-size: clamp(1.9rem, 5.6vw, 2.35rem);
      line-height: 1.15;
    }

    body.page-home .product-card .sub {
      font-size: clamp(1.05rem, 3.2vw, 1.28rem);
      line-height: 1.4;
    }

    body.page-home .product-card .desc {
      font-size: clamp(1.02rem, 2.9vw, 1.2rem);
      line-height: 1.58;
    }

    .contact-cta-bg {
      padding: 2rem 1.2rem 8.5rem !important;
      align-items: flex-start;
      text-align: center;
    }

    .contact-cta {
      background: url('/assets/images/background footer.jpg') center bottom / cover no-repeat;
    }

    .contact-cta-content {
      max-width: 100%;
      margin: 0 auto;
      text-align: center;
    }

    .contact-form-floating {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      transform: none !important;
      width: calc(100% - 2.2rem) !important;
      max-width: 560px !important;
      margin: -6.5rem auto 0.8rem !important;
      z-index: 30;
    }

    .contact-footer-content {
      padding: 1.6rem 1rem 1.8rem !important;
      gap: 1rem;
    }

    .footer-top-row {
      padding: 0 0.2rem;
      gap: 1.2rem;
    }

    .footer-certifications {
      display: flex;
      flex-direction: column !important;
      align-items: center;
      justify-content: flex-start;
      padding: 1.2rem 0 0 !important;
      margin-top: 0.8rem;
      gap: 0.9rem;
    }

    .cert-logos-box {
      order: 1;
      margin: 0 auto;
    }

    .footer-copyright {
      order: 2;
      width: 100%;
      justify-content: center;
      text-align: center;
      padding-top: 0.2rem;
      transform: translateY(-5px) !important;
      opacity: 1 !important;
    }

    .footer-copyright.scroll-reveal,
    .footer-copyright.scroll-reveal.visible {
      transform: translateY(-5px) !important;
      opacity: 1 !important;
    }

    .footer-copyright p {
      text-align: center;
      width: auto;
    }

    body.page-projects .services-page-hero {
      margin-top: -74px !important;
      padding: 2.6rem 1.2rem 10rem !important;
      padding-top: calc(2.6rem + 74px) !important;
      min-height: 430px !important;
    }

    body.page-projects .services-page-hero .services-hero-content h1 {
      margin-top: 0 !important;
      margin-bottom: 0.6rem;
    }

    body.page-projects .featured-project-section {
      margin-top: -56px;
      padding: 0 0.6rem 48px;
      min-height: auto;
      overflow: visible;
    }

    body.page-projects .featured-project-container {
      position: relative;
      top: -56px;
      left: auto;
      right: auto;
    }

    body.page-projects .featured-project-image {
      height: clamp(400px, 118vw, 520px);
    }

    body.page-projects .featured-project-card {
      bottom: 62px;
    }

    body.page-projects .carousel-arrow {
      top: clamp(358px, 102vw, 486px);
    }

    body.page-projects .featured-carousel-dots {
      top: clamp(358px, 102vw, 486px);
    }

    body.page-projects .projects-extra-section {
      padding: 210px 0 80px;
    }
  }

  /* Portrait tablet fine-tune: 820x1180 class */
  @media (min-width: 805px) and (max-width: 845px) and (min-height: 1120px) and (orientation: portrait) {
    body.page-services main {
      padding-top: 0 !important;
    }

    body.page-services .services-page-hero {
      min-height: 420px !important;
      height: auto !important;
      padding: 6.4rem 1.5rem 12rem !important;
      margin-top: 0 !important;
    }

    body.page-services .services-full-section {
      margin-top: -6.5rem !important;
      padding-top: 3rem;
    }

    body.page-home .hero-title {
      transform: translateY(120px) !important;
    }

    body.page-home .product-card h3 {
      font-size: clamp(2.15rem, 5.4vw, 2.6rem);
      line-height: 1.14;
    }

    body.page-home .product-card .desc {
      font-size: clamp(1.16rem, 2.9vw, 1.34rem);
      line-height: 1.62;
    }

    .contact-cta-content h2 {
      font-size: clamp(3.1rem, 7.9vw, 4.5rem) !important;
    }

    .contact-cta-content p {
      font-size: clamp(1.75rem, 4.4vw, 2.5rem) !important;
    }

    .contact-cta-bg {
      padding: 2.2rem 1.4rem 8.2rem !important;
      align-items: flex-start;
      text-align: center;
    }

    .contact-cta {
      background: url('/assets/images/background footer.jpg') center bottom / cover no-repeat;
    }

    .contact-cta-content {
      max-width: 100%;
      margin: 0 auto;
      text-align: center;
    }

    .contact-form-floating {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      transform: none !important;
      width: calc(100% - 2.6rem) !important;
      max-width: 620px !important;
      margin: -6rem auto 1rem !important;
      z-index: 30;
    }

    .contact-footer-content {
      padding: 1.8rem 1.2rem 2rem !important;
      gap: 1rem;
    }

    .footer-top-row {
      padding: 0 0.4rem;
      gap: 1.3rem;
    }

    .footer-certifications {
      display: flex;
      flex-direction: column !important;
      align-items: center;
      justify-content: flex-start;
      padding: 1.3rem 0 0 !important;
      margin-top: 0.9rem;
      gap: 1rem;
    }

    .cert-logos-box {
      order: 1;
      margin: 0 auto;
    }

    .footer-copyright {
      order: 2;
      width: 100%;
      justify-content: center;
      text-align: center;
      padding-top: 0.2rem;
      transform: translateY(-5px) !important;
      opacity: 1 !important;
    }

    .footer-copyright.scroll-reveal,
    .footer-copyright.scroll-reveal.visible {
      transform: translateY(-5px) !important;
      opacity: 1 !important;
    }

    .footer-copyright p {
      text-align: center;
      width: auto;
    }

    body.page-projects .services-page-hero {
      margin-top: -74px !important;
      padding: 2.8rem 1.5rem 10.5rem !important;
      padding-top: calc(2.8rem + 74px) !important;
      min-height: 470px !important;
    }

    body.page-projects .services-page-hero .services-hero-content h1 {
      margin-top: 0 !important;
      margin-bottom: 0.7rem;
    }

    body.page-projects .featured-project-section {
      margin-top: -50px;
      padding: 0 0.8rem 56px;
      min-height: auto;
      overflow: visible;
    }

    body.page-projects .featured-project-container {
      position: relative;
      top: -50px;
      left: auto;
      right: auto;
      max-width: 96%;
    }

    body.page-projects .featured-project-image {
      height: clamp(430px, 103vw, 580px);
    }

    body.page-projects .featured-project-card {
      bottom: 70px;
    }

    body.page-projects .carousel-arrow {
      top: clamp(392px, 92vw, 528px);
    }

    body.page-projects .featured-carousel-dots {
      top: clamp(392px, 92vw, 528px);
    }

    body.page-projects .projects-extra-section {
      padding: 230px 0 90px;
    }

    body.page-home .projects .preview-card {
      width: clamp(205px, 36vw, 238px);
      height: clamp(320px, 56vw, 378px);
    }

    /* Home Projects (820): force both nav buttons visible + bigger symbols */
    body.page-home .projects .projects-preview-carousel {
      position: relative;
      padding-bottom: 5.2rem;
    }

    body.page-home #preview-carousel-prev,
    body.page-home #preview-carousel-next {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 44;
    }

    body.page-home .projects .carousel-nav-btn {
      position: absolute !important;
      bottom: 0.85rem;
      grid-row: auto !important;
      width: 56px;
      height: 56px;
      margin: 0;
      transform: none !important;
    }

@supports (content-visibility: auto) {
  main > section + section,
  main > article,
  .contact-footer-section,
  footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 920px;
  }
}

html.perf-lite .services-overview,
html.perf-lite .products,
html.perf-lite .projects-showcase,
html.perf-lite .projects,
html.perf-lite .clients,
html.perf-lite .vision-mission,
html.perf-lite .ceo-quote-section,
html.perf-lite .news-preview,
html.perf-lite .projects-section-services,
html.perf-lite .projects-hero,
html.perf-lite .services-page-hero,
html.perf-lite .products-page-hero {
  background-attachment: scroll !important;
}

html.perf-lite .scroll-reveal,
html.perf-lite .reveal,
html.perf-lite .clients-grid,
html.perf-lite .projects .preview-cards-container,
html.perf-lite .projects-showcase .preview-cards-container,
html.perf-lite .service-card,
html.perf-lite .product-card,
html.perf-lite .hero-card {
  will-change: auto;
}

html.perf-lite .projects-year-orbit,
html.perf-lite .projects-year-orbit .year-text,
html.perf-lite .projects-year-orbit .year-node,
html.perf-lite .projects-year-orbit .year-node::before,
html.perf-lite .yp-year-badge,
html.perf-lite .yp-year-badge::before,
html.perf-lite .yp-detail-badge,
html.perf-lite .yp-detail-badge::before,
html.perf-lite .service-image-stack.flipped .stack-image.is-moving {
  animation: none !important;
}

html.perf-lite .projects-year-orbit .year-node::before,
html.perf-lite .yp-year-badge::before,
html.perf-lite .yp-detail-badge::before {
  filter: none !important;
}

    body.page-home .projects .carousel-nav-btn.prev {
      left: calc(50% - 70px);
    }

    body.page-home .projects .carousel-nav-btn.next {
      left: calc(50% + 14px);
    }

    body.page-home .projects .carousel-nav-btn svg {
      width: 36px;
      height: 36px;
      stroke-width: 2.6;
    }

    /* Projects Featured (820): keep arrows/dots inside section */
    body.page-projects .featured-project-section {
      overflow: hidden;
      padding: 0 0.8rem 128px;
    }

    body.page-projects .featured-project-container {
      top: -34px;
    }

    body.page-projects .featured-project-card {
      bottom: 96px;
    }

    body.page-projects .carousel-arrow {
      top: auto !important;
      bottom: 28px !important;
    }

    body.page-projects .featured-carousel-dots {
      top: auto !important;
      bottom: 24px !important;
    }

    body.page-projects .projects-extra-section {
      padding: 190px 0 90px;
    }

    /* Projects Major Orbit (820): scale down parent orbit ~2x + move detail content down */
    body.page-projects .projects-generator-section {
      min-height: 610px;
    }

    body.page-projects .projects-major-label {
      top: 56%;
      font-size: 30px;
      letter-spacing: 4px;
      text-indent: 4px;
    }

    body.page-projects .projects-major-sub {
      top: 68%;
      font-size: 22px;
    }

    body.page-projects .projects-year-orbit-wrap {
      width: min(720px, 100vw);
      height: 760px;
    }

    body.page-projects .projects-year-orbit {
      top: 380px;
    }

    body.page-projects .projects-year-orbit .year-node {
      width: 132px;
      height: 138px;
      margin: -69px 0 0 -66px;
      font-size: 30px;
    }

    body.page-projects .projects-year-orbit .year-node:nth-child(1)  { transform: rotate(-162deg) translate(280px) rotate(162deg) !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(2)  { transform: rotate(-126deg) translate(280px) rotate(126deg) !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(3)  { transform: rotate(-90deg)  translate(280px) rotate(90deg)  !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(4)  { transform: rotate(-54deg)  translate(280px) rotate(54deg)  !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(5)  { transform: rotate(-18deg)  translate(280px) rotate(18deg)  !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(6)  { transform: rotate(18deg)   translate(280px) rotate(-18deg) !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(7)  { transform: rotate(54deg)   translate(280px) rotate(-54deg) !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(8)  { transform: rotate(90deg)   translate(280px) rotate(-90deg) !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(9)  { transform: rotate(126deg)  translate(280px) rotate(-126deg) !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(10) { transform: rotate(162deg)  translate(280px) rotate(-162deg) !important; }

    body.page-projects .yp-detail-body {
      padding-top: 170px !important;
    }

    body.page-projects .yp-detail-title {
      margin-top: 0.65rem !important;
    }

    body.page-projects .yp-detail-desc {
      margin-top: 1.25rem !important;
    }

    /* About Timeline (820): restore missing descriptions and keep content inside */
    body.page-about .about-journey-section {
      padding: 14px 0 56px;
      overflow: hidden;
    }

    body.page-about .about-zodiac-timeline {
      width: min(670px, 92vw);
      margin-top: -98px;
    }

    body.page-about .zodiac-2016-img,
    body.page-about .zodiac-2018-img,
    body.page-about .zodiac-2020-img,
    body.page-about .zodiac-2022-img,
    body.page-about .zodiac-2024-img,
    body.page-about .zodiac-2026-img {
      left: 1%;
      width: 35%;
    }

    body.page-about .zodiac-2017-img,
    body.page-about .zodiac-2019-img,
    body.page-about .zodiac-2021-img,
    body.page-about .zodiac-2023-img,
    body.page-about .zodiac-2025-img {
      right: 1%;
      width: 35%;
    }

    body.page-about .zodiac-year-note-block[class*="-desktop"],
    body.page-about .zodiac-year-note-block[class*="-1366"] {
      display: none !important;
    }

    body.page-about .zodiac-year-note-block[class*="-mobile"] {
      display: inline !important;
      font-size: 2.05px;
    }

    body.page-about text[text-anchor="end"].zodiac-year-note-block[class*="-mobile"] {
      transform: translate(-2px, 3px) !important;
    }

    body.page-about text[text-anchor="start"].zodiac-year-note-block[class*="-mobile"] {
      transform: translate(6px, -1px) !important;
    }

    /* Contact page (820): stabilize whole featured/contact block */
    body.page-contact .contact-featured-section {
      padding: 0 0.9rem 120px;
      overflow: hidden;
    }

    body.page-contact .contact-info-image {
      height: auto;
      min-height: 420px;
      padding: 24px 18px 20px;
    }

    body.page-contact .contact-icons-grid {
      grid-template-columns: 1fr;
      gap: 1.4rem;
      max-width: 540px;
      margin-top: 0;
    }

    body.page-contact .contact-icon-circle {
      width: 82px;
      height: 82px;
      margin-bottom: 12px;
    }

    body.page-contact .contact-icon-item h3 {
      margin-top: 8px;
      font-size: 1.15rem;
    }

    body.page-contact .contact-details {
      margin-top: 8px;
      font-size: 0.96rem;
      line-height: 1.5;
    }

    body.page-contact .contact-details-map-container {
      grid-template-columns: 1fr;
      gap: 1rem;
      max-width: 100%;
      margin-top: 24px;
    }

    body.page-contact .office-details-grid {
      grid-template-columns: 1fr;
      gap: 10px;
    }

    body.page-contact .contact-map-wrapper {
      width: 100%;
      max-width: none;
      height: 420px;
    }
  }

  /* Portrait tablet fine-tune: 1024x1366 class */
  @media (min-width: 1000px) and (max-width: 1065px) and (min-height: 1300px) and (orientation: portrait) {
    body.page-home .hero-electrical .hero-inner {
      padding-top: 200px;
    }

    body.page-home .hero-title {
      transform: translateY(100px) !important;
    }

    body.page-home .feature-strip {
      margin: -50px 1.5rem 0 !important;
    }

    body.page-home .product-card h3 {
      font-size: clamp(2.3rem, 4.8vw, 2.9rem);
      line-height: 1.14;
    }

    body.page-home .product-card .sub {
      font-size: clamp(1.12rem, 2.5vw, 1.34rem);
      line-height: 1.42;
    }

    body.page-home .product-card .desc {
      font-size: clamp(1.1rem, 2.35vw, 1.28rem);
      line-height: 1.58;
    }

    body.page-services main,
    body.page-about main,
    body.page-news main {
      padding-top: 0 !important;
    }

    body.page-services .services-page-hero,
    body.page-about .about-hero,
    body.page-news .services-page-hero {
      margin-top: -74px !important;
      padding-top: calc(8rem + 74px) !important;
    }

    .contact-cta-content h2 {
      font-size: clamp(3.4rem, 6.4vw, 5rem) !important;
    }

    .contact-cta-content p {
      font-size: clamp(1.9rem, 3.6vw, 2.9rem) !important;
    }

    .contact-cta-bg {
      padding: 2.4rem 1.8rem 8.8rem !important;
      align-items: flex-start;
      text-align: center;
    }

    .contact-cta {
      background: url('/assets/images/background footer.jpg') center bottom / cover no-repeat;
    }

    .contact-cta-content {
      max-width: 100%;
      margin: 0 auto;
      text-align: center;
    }

    .contact-form-floating {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      transform: none !important;
      width: calc(100% - 3.2rem) !important;
      max-width: 700px !important;
      margin: -6.3rem auto 1rem !important;
      z-index: 30;
    }

    .contact-footer-content {
      padding: 2rem 1.5rem 2.2rem !important;
      gap: 1rem;
    }

    .footer-top-row {
      padding: 0 0.5rem;
      gap: 1.5rem;
    }

    .footer-certifications {
      display: flex;
      flex-direction: column !important;
      align-items: center;
      justify-content: flex-start;
      padding: 1.4rem 0 0 !important;
      margin-top: 1rem;
      gap: 1rem;
    }

    .cert-logos-box {
      order: 1;
      margin: 0 auto;
    }

    .footer-copyright {
      order: 2;
      width: 100%;
      justify-content: center;
      text-align: center;
      padding-top: 0.2rem;
      transform: translateY(-5px) !important;
      opacity: 1 !important;
    }

    .footer-copyright.scroll-reveal,
    .footer-copyright.scroll-reveal.visible {
      transform: translateY(-5px) !important;
      opacity: 1 !important;
    }

    .footer-copyright p {
      text-align: center;
      width: auto;
    }

    body.page-projects .services-page-hero {
      margin-top: -74px !important;
      padding: 3.4rem 1.8rem 11.5rem !important;
      padding-top: calc(3.4rem + 74px) !important;
      min-height: 530px !important;
    }

    body.page-projects .services-page-hero .services-hero-content h1 {
      margin-top: 0 !important;
      margin-bottom: 0.75rem;
    }

    body.page-projects .featured-project-section {
      margin-top: -42px;
      padding: 0 1rem 62px;
      min-height: auto;
      overflow: visible;
    }

    body.page-projects .featured-project-container {
      position: relative;
      top: -42px;
      left: auto;
      right: auto;
      max-width: 96%;
    }

    body.page-projects .featured-project-image {
      height: clamp(520px, 70vw, 700px);
    }

    body.page-projects .featured-project-card {
      bottom: 84px;
    }

    body.page-projects .carousel-arrow {
      top: clamp(462px, 62vw, 620px);
    }

    body.page-projects .featured-carousel-dots {
      top: clamp(462px, 62vw, 620px);
    }

    body.page-projects .projects-extra-section {
      padding: 260px 0 100px;
    }

    body.page-home .projects .preview-card {
      width: clamp(220px, 27vw, 250px);
      height: clamp(340px, 42vw, 390px);
    }

    /* Home Projects (1024): ensure both nav buttons visible */
    body.page-home .projects .projects-preview-carousel {
      position: relative;
      padding-bottom: 5.4rem;
    }

    body.page-home #preview-carousel-prev,
    body.page-home #preview-carousel-next {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 44;
    }

    body.page-home .projects .carousel-nav-btn {
      position: absolute !important;
      bottom: 0.9rem;
      grid-row: auto !important;
      width: 58px;
      height: 58px;
      margin: 0;
      transform: none !important;
    }

    body.page-home .projects .carousel-nav-btn.prev {
      left: calc(50% - 72px);
    }

    body.page-home .projects .carousel-nav-btn.next {
      left: calc(50% + 14px);
    }

    body.page-home .projects .carousel-nav-btn svg {
      width: 34px;
      height: 34px;
      stroke-width: 2.4;
    }

    /* Lets Work + Contact + Footer (1024): prevent location info overflow */
    .footer-top-row .contact-info-block:nth-child(2) {
      max-width: min(100%, 560px);
      position: relative;
      left: 79.5px !important;
    }

    .footer-top-row .contact-info-block:nth-child(2) .contact-line {
      max-width: 100%;
      margin-top: 0.45rem;
      align-items: flex-start;
    }

    .footer-top-row .contact-info-block:nth-child(2) .contact-text {
      white-space: normal !important;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.45;
    }

    .footer-top-row .contact-info-block:nth-child(2) .contact-line.no-wrap .contact-text {
      white-space: normal !important;
    }

    /* Projects Featured (1024): keep CARAO card floating between hero + next section */
    body.page-projects .featured-project-section {
      margin-top: -56px;
      overflow: visible !important;
      padding: 0 1rem 132px;
    }

    body.page-projects .featured-project-container {
      top: -56px;
    }

    body.page-projects .featured-project-card {
      bottom: 92px;
    }

    body.page-projects .carousel-arrow {
      top: auto !important;
      bottom: 32px !important;
    }

    body.page-projects .featured-carousel-dots {
      top: auto !important;
      bottom: 28px !important;
    }

    body.page-projects .projects-extra-section {
      padding: 215px 0 100px;
    }

    /* Projects Major Orbit (1024): reduce parent orbit and shift detail content down */
    body.page-projects .projects-generator-section {
      min-height: 650px;
    }

    body.page-projects .projects-major-label {
      top: 56%;
      font-size: 34px;
      letter-spacing: 5px;
      text-indent: 5px;
    }

    body.page-projects .projects-major-sub {
      top: 69%;
      font-size: 25px;
    }

    body.page-projects .projects-year-orbit-wrap {
      width: min(820px, 100vw);
      height: 860px;
    }

    body.page-projects .projects-year-orbit {
      top: 430px;
    }

    body.page-projects .projects-year-orbit .year-node {
      width: 148px;
      height: 154px;
      margin: -77px 0 0 -74px;
      font-size: 34px;
    }

    body.page-projects .projects-year-orbit .year-node:nth-child(1)  { transform: rotate(-162deg) translate(320px) rotate(162deg) !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(2)  { transform: rotate(-126deg) translate(320px) rotate(126deg) !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(3)  { transform: rotate(-90deg)  translate(320px) rotate(90deg)  !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(4)  { transform: rotate(-54deg)  translate(320px) rotate(54deg)  !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(5)  { transform: rotate(-18deg)  translate(320px) rotate(18deg)  !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(6)  { transform: rotate(18deg)   translate(320px) rotate(-18deg) !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(7)  { transform: rotate(54deg)   translate(320px) rotate(-54deg) !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(8)  { transform: rotate(90deg)   translate(320px) rotate(-90deg) !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(9)  { transform: rotate(126deg)  translate(320px) rotate(-126deg) !important; }
    body.page-projects .projects-year-orbit .year-node:nth-child(10) { transform: rotate(162deg)  translate(320px) rotate(-162deg) !important; }

    body.page-projects .yp-detail-body {
      padding-top: 176px !important;
    }

    body.page-projects .yp-detail-title {
      margin-top: 0.7rem !important;
    }

    body.page-projects .yp-detail-desc {
      margin-top: 1.35rem !important;
    }

    /* About Timeline (1024): keep descriptions/images inside viewport */
    body.page-about .about-journey-section {
      padding: 18px 0 70px;
      overflow: hidden;
    }

    body.page-about .about-zodiac-timeline {
      width: min(760px, 90vw);
      margin-top: -92px;
    }

    body.page-about .zodiac-2016-img,
    body.page-about .zodiac-2018-img,
    body.page-about .zodiac-2020-img,
    body.page-about .zodiac-2022-img,
    body.page-about .zodiac-2024-img,
    body.page-about .zodiac-2026-img {
      left: 0.5%;
      width: 32%;
    }

    body.page-about .zodiac-2017-img,
    body.page-about .zodiac-2019-img,
    body.page-about .zodiac-2021-img,
    body.page-about .zodiac-2023-img,
    body.page-about .zodiac-2025-img {
      right: 0.5%;
      width: 32%;
    }

    body.page-about .zodiac-year-note-block[class*="-1366"] {
      font-size: 1.68px;
    }

    body.page-about text[text-anchor="end"].zodiac-year-note-block[class*="-1366"] {
      transform: translate(-11px, 3px) !important;
    }

    body.page-about text[text-anchor="start"].zodiac-year-note-block[class*="-1366"] {
      transform: translate(11px, 3px) !important;
    }

    /* News Awards (1024): force 2x2 cards */
    body.page-news .awards-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  /* Home Projects (820 portrait): keep both nav buttons centered together */
  @media (min-width: 805px) and (max-width: 845px) and (orientation: portrait) {
    body.page-news main {
      padding-top: 0 !important;
    }

    body.page-news .services-page-hero {
      margin-top: -74px !important;
      padding: 2.8rem 1.4rem 8.8rem !important;
      padding-top: calc(2.8rem + 74px) !important;
      min-height: 430px !important;
    }

    body.page-news .featured-carousel-dots {
      gap: 3px;
      padding: 5px 9px;
    }

    body.page-news .carousel-dot {
      width: 9px !important;
      height: 9px !important;
      min-width: 9px !important;
      min-height: 9px !important;
    }

    body.page-news .carousel-dot.active {
      width: 20px !important;
      height: 9px !important;
      border-radius: 5px !important;
    }

    body.page-contact main {
      padding-top: 0 !important;
    }

    body.page-contact .featured-project-section.contact-featured-section {
      margin-top: 0 !important;
      padding: 14px 0.9rem 96px !important;
      overflow: hidden !important;
    }

    body.page-contact .featured-project-section.contact-featured-section .featured-project-container {
      position: relative !important;
      top: 0 !important;
      left: auto !important;
      right: auto !important;
      max-width: min(100%, 96%) !important;
      margin: 0 auto !important;
    }

    body.page-contact .contact-info-image {
      min-height: 0 !important;
      height: auto !important;
      padding: 26px 20px 24px !important;
      margin-top: 0 !important;
      overflow: hidden !important;
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
    }

    body.page-contact .contact-icons-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 1rem !important;
      max-width: 100%;
      margin-top: 0 !important;
      justify-items: center;
      align-items: start;
      justify-content: center;
      transform: none !important;
    }

    body.page-contact .contact-icon-item {
      width: 100%;
      max-width: 210px;
      margin-left: auto;
      margin-right: auto;
      align-items: center;
      text-align: center;
    }

    body.page-contact .contact-icon-circle {
      width: 88px;
      height: 88px;
      margin-bottom: 10px;
    }

    body.page-contact .contact-icon-item h3 {
      margin-top: 6px;
      min-height: 2.4em;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      text-align: center;
    }

    body.page-contact .contact-details {
      margin-top: 6px;
      max-width: 210px;
      margin-left: auto;
      margin-right: auto;
      text-align: center !important;
    }

    body.page-contact .contact-details-map-container {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 1rem !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 1rem auto 0 !important;
      overflow: hidden;
    }

    body.page-contact .office-details-grid {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 10px;
    }

    body.page-contact .office-detail-box {
      min-width: 0;
    }

    body.page-contact .contact-map-wrapper {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      height: 360px !important;
      margin: 0 !important;
    }

    body.page-contact .contact-map-wrapper iframe {
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      display: block;
    }

    body.page-about main {
      padding-top: 0 !important;
    }

    body.page-about .about-hero {
      min-height: 420px !important;
      height: auto !important;
      padding: 6.2rem 1.5rem 8.6rem !important;
      margin-top: 0 !important;
    }

    body.page-about .zodiac-year-note-block[class*="-desktop"],
    body.page-about .zodiac-year-note-block[class*="-1366"] {
      display: none !important;
    }

    body.page-about .zodiac-year-note-block[class*="-mobile"] {
      display: inline !important;
      opacity: 1 !important;
      font-size: 2.05px;
    }

    body.page-about text[text-anchor="end"].zodiac-year-note-block[class*="-mobile"] {
      transform: translate(-2px, 3px) !important;
    }

    body.page-about text[text-anchor="start"].zodiac-year-note-block[class*="-mobile"] {
      transform: translate(6px, -1px) !important;
    }

    body.page-about .zodiac-year-note-block.in-view {
      opacity: 1 !important;
      animation: none !important;
    }

    body.page-projects .featured-project-section {
      overflow: visible !important;
    }

    body.page-projects .featured-project-container {
      top: -34px !important;
    }

    body.page-projects .featured-project-image img {
      object-position: center 22%;
    }

    body.page-projects .featured-carousel-dots {
      gap: 3px;
      padding: 5px 9px;
    }

    body.page-projects .carousel-dot {
      width: 10px !important;
      height: 10px !important;
      min-width: 10px !important;
      min-height: 10px !important;
    }

    body.page-projects .carousel-dot.active {
      width: 22px !important;
      height: 10px !important;
      border-radius: 5px !important;
    }

    body.page-home .projects .projects-preview-carousel {
      position: relative;
      padding-bottom: 5.2rem;
    }

    body.page-home .projects .carousel-nav-btn {
      position: absolute !important;
      bottom: 0.85rem !important;
      left: auto !important;
      right: auto !important;
      grid-row: auto !important;
      width: 56px;
      height: 56px;
      margin: 0 !important;
    }

    body.page-home .projects .carousel-nav-btn.prev {
      left: calc(50% - 70px) !important;
      grid-column: auto !important;
    }

    body.page-home .projects .carousel-nav-btn.next {
      left: calc(50% + 14px) !important;
      grid-column: auto !important;
    }

    body.page-home #preview-carousel-prev,
    body.page-home #preview-carousel-next {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 44;
    }
  }

  @media (min-width: 700px) and (max-width: 1400px) and (orientation: landscape) {
    body.page-contact .footer-top-row .contact-info-block:nth-child(2) {
      position: relative;
      left: 5px !important;
    }
  }

  @media (min-width: 1200px) {
    .footer-certifications .cert-logos-box {
      max-width: 700px;
      padding: 1.75rem 1.9rem;
      gap: 1.8rem;
      border-radius: 12px;
    }

    .footer-certifications .cert-logos-box img {
      max-height: 110px;
    }

    .footer-certifications .cert-logos-box .social-icon.facebook {
      width: 96px !important;
      height: 96px !important;
      border-radius: 16px !important;
    }

    .footer-certifications .cert-logos-box .social-icon.facebook svg {
      width: 52px !important;
      height: 52px !important;
    }
  }

/* ==================== AI CHATBOT ==================== */
.ai-chatbot {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.ai-chatbot__nudge {
  max-width: min(290px, calc(100vw - 34px));
  padding: 0.72rem 0.86rem;
  border-radius: 14px;
  border: 1px solid rgba(11, 61, 145, 0.22);
  background: rgba(255, 255, 255, 0.98);
  color: #0f172a;
  font-size: 0.84rem;
  line-height: 1.38;
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.18);
  position: relative;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transform-origin: bottom right;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.ai-chatbot__nudge::after {
  content: '';
  position: absolute;
  right: 20px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.98);
  border-right: 1px solid rgba(11, 61, 145, 0.22);
  border-bottom: 1px solid rgba(11, 61, 145, 0.22);
}

.ai-chatbot__nudge.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ai-chatbot.is-open .ai-chatbot__nudge {
  display: none !important;
}

.ai-chatbot__trigger {
  width: 74px;
  height: 74px;
  border: 0;
  border-radius: 999px;
  padding: 4px;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.32);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transition: transform 0.2s ease, box-shadow 0.24s ease;
}

.ai-chatbot__trigger::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 210deg,
      var(--accent2, #2fb24a),
      var(--primary, #0d5a3d),
      var(--accent, #FF7A00),
      var(--accent2, #2fb24a));
  animation: ai-chatbot-ring-spin 5s linear infinite;
  z-index: 0;
}

.ai-chatbot__trigger::after {
  content: '';
  position: absolute;
  right: 7px;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent2, #2fb24a);
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 0 rgba(47, 178, 74, 0.45);
  z-index: 2;
  animation: ai-chatbot-status-pulse 1.9s ease-out infinite;
}

.ai-chatbot__trigger:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 24px 48px rgba(2, 6, 23, 0.38);
}

.ai-chatbot.is-open .ai-chatbot__trigger {
  display: none;
}

.ai-chatbot__trigger:focus-visible {
  outline: 2px solid var(--accent2, #2fb24a);
  outline-offset: 3px;
}

.ai-chatbot__avatar,
.ai-chatbot__avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: relative;
  z-index: 1;
  border: 2px solid rgba(255, 255, 255, 0.92);
}

.ai-chatbot__avatar {
  display: block;
  object-fit: cover;
}

.ai-chatbot__avatar-fallback {
  display: none;
  place-items: center;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--primary, #0d5a3d), var(--accent2, #2fb24a));
}

.ai-chatbot__panel {
  width: min(394px, calc(100vw - 28px));
  max-height: 74vh;
  background: #efeae2;
  border: 1px solid rgba(13, 90, 61, 0.16);
  border-radius: 22px;
  box-shadow: 0 30px 72px rgba(2, 6, 23, 0.36);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.ai-chatbot__panel[hidden] {
  display: none !important;
}

.ai-chatbot.is-open .ai-chatbot__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ai-chatbot__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.86rem 0.95rem;
  background: linear-gradient(135deg, var(--primary, #0d5a3d) 0%, var(--accent2, #2fb24a) 100%);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.ai-chatbot__header-main {
  display: flex;
  align-items: center;
  gap: 0.58rem;
  flex: 1;
  min-width: 0;
}

.ai-chatbot__header-avatar-wrap {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.ai-chatbot__header-avatar,
.ai-chatbot__header-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.ai-chatbot__header-avatar {
  display: block;
  object-fit: cover;
  background: #ffffff;
}

.ai-chatbot__header-avatar-fallback {
  display: none;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--primary, #0d5a3d);
  background: #ffffff;
}

.ai-chatbot__header-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ai-chatbot__header strong {
  font-size: 0.96rem;
  letter-spacing: 0.015em;
  line-height: 1.2;
  display: block;
}

.ai-chatbot__status {
  display: block;
  font-size: 0.74rem;
  line-height: 1.2;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-chatbot__close {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.ai-chatbot__close:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: rotate(90deg);
}

.ai-chatbot__messages {
  position: relative;
  padding: 1rem 0.9rem;
  height: 350px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  background: #efeae2;
}

.ai-chatbot__messages::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12px 12px, rgba(255, 255, 255, 0.35) 1.2px, transparent 1.3px),
    radial-gradient(circle at 36px 28px, rgba(13, 90, 61, 0.08) 1.4px, transparent 1.5px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
  background-size: 44px 44px, 48px 48px, 100% 100%;
  opacity: 0.78;
  pointer-events: none;
}

.ai-chatbot__messages::-webkit-scrollbar {
  width: 8px;
}

.ai-chatbot__messages::-webkit-scrollbar-thumb {
  background: rgba(13, 90, 61, 0.3);
  border-radius: 999px;
}

.ai-chatbot__message {
  max-width: 83%;
  padding: 0.62rem 0.78rem;
  border-radius: 11px;
  font-size: 0.91rem;
  line-height: 1.45;
  white-space: pre-wrap;
  box-shadow: 0 4px 14px rgba(2, 6, 23, 0.1);
  position: relative;
  z-index: 1;
}

.ai-chatbot__message--assistant {
  align-self: flex-start;
  background: #ffffff;
  border: 1px solid rgba(13, 90, 61, 0.12);
  border-top-left-radius: 7px;
  color: #111827;
  margin-left: 24px;
}

.ai-chatbot__message--assistant::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 0;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-left: 1px solid rgba(13, 90, 61, 0.12);
  border-bottom: 1px solid rgba(13, 90, 61, 0.12);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.ai-chatbot__message--assistant::after {
  content: '';
  position: absolute;
  left: -30px;
  bottom: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-image: var(--ai-chatbot-avatar), linear-gradient(135deg, var(--primary, #0d5a3d), var(--accent2, #2fb24a));
  background-size: cover, cover;
  background-repeat: no-repeat;
  background-position: center, center;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 10px rgba(2, 6, 23, 0.16);
}

.ai-chatbot__message--user {
  align-self: flex-end;
  background: #dcf8c6;
  border: 1px solid rgba(47, 178, 74, 0.28);
  border-top-right-radius: 7px;
  color: #0b3a24;
  margin-right: 8px;
}

.ai-chatbot__message--user::before {
  content: '';
  position: absolute;
  right: -7px;
  top: 0;
  width: 12px;
  height: 12px;
  background: #dcf8c6;
  border-right: 1px solid rgba(47, 178, 74, 0.28);
  border-bottom: 1px solid rgba(47, 178, 74, 0.28);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.ai-chatbot__message.is-pending {
  opacity: 0.78;
  font-style: italic;
  animation: ai-chatbot-pulse 1.1s ease-in-out infinite;
}

.ai-chatbot__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem;
  border-top: 1px solid rgba(13, 90, 61, 0.18);
  background: #f0f2f5;
}

.ai-chatbot__input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(13, 90, 61, 0.22);
  border-radius: 999px;
  background: #ffffff;
  padding: 0.66rem 0.94rem;
  font-size: 0.92rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.ai-chatbot__input:focus {
  outline: none;
  border-color: var(--accent2, #2fb24a);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(47, 178, 74, 0.18);
}

.ai-chatbot__send {
  border: 0;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--primary, #0d5a3d), var(--accent2, #2fb24a));
  box-shadow: 0 10px 22px rgba(13, 90, 61, 0.32);
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.ai-chatbot__send svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateX(1px);
}

.ai-chatbot__send:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 14px 26px rgba(13, 90, 61, 0.38);
}

.ai-chatbot__send:disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

@keyframes ai-chatbot-ring-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes ai-chatbot-status-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(47, 178, 74, 0.48);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(47, 178, 74, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(47, 178, 74, 0);
  }
}

@keyframes ai-chatbot-pulse {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.48;
  }
}

@media (max-width: 768px) {
  .ai-chatbot {
    right: 14px;
    bottom: 14px;
  }

  .ai-chatbot__nudge {
    max-width: min(245px, calc(100vw - 28px));
    font-size: 0.8rem;
    padding: 0.64rem 0.74rem;
  }

  .ai-chatbot__trigger {
    width: 64px;
    height: 64px;
  }

  .ai-chatbot__panel {
    width: min(92vw, 376px);
    max-height: 68vh;
  }

  .ai-chatbot__messages {
    height: min(50vh, 330px);
  }
}

/* Home hero headline: responsive wrap + slightly smaller sizing */
body.page-home .hero-content {
  max-width: min(94vw, 980px) !important;
  margin-inline: auto;
  text-align: center;
}

body.page-home .hero-title {
  white-space: normal !important;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
  max-width: 30ch;
  margin-inline: auto;
  line-height: 1.14;
  font-size: clamp(1.85rem, 3.4vw, 2.85rem) !important;
  transform: none !important;
}

@media (min-width: 1024px) {
  body.page-home .hero-electrical .hero-inner {
    justify-content: flex-start;
    min-height: 100vh;
    padding-top: clamp(150px, 18vh, 240px) !important;
    padding-bottom: 220px !important;
  }

  body.page-home .hero-content {
    margin-top: 0 !important;
  }

  body.page-home .hero-title {
    max-width: 48ch;
    font-size: clamp(1.7rem, 2.9vw, 2.5rem) !important;
    line-height: 1.12;
  }

  body.page-home .hero-title .typed-before,
  body.page-home .hero-title .highlight {
    white-space: nowrap;
  }

  body.page-home .hero-title .typed-after {
    display: block;
    white-space: nowrap;
    margin-top: 0.08em;
  }

  body.page-home .feature-strip {
    bottom: 14px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.page-home .hero-electrical .hero-inner {
    padding-top: 130px !important;
    padding-bottom: 16px !important;
  }

  body.page-home .hero-content {
    max-width: min(94vw, 760px) !important;
  }

  body.page-home .hero-title {
    max-width: 24ch;
    line-height: 1.18;
    font-size: clamp(1.4rem, 3.8vw, 2.1rem) !important;
  }
}

@media (max-width: 767px) {
  body.page-home .hero-electrical .hero-inner {
    padding-top: 96px !important;
    padding-bottom: 12px !important;
  }

  body.page-home .hero-content {
    max-width: min(94vw, 520px) !important;
  }

  body.page-home .hero-title {
    max-width: 18ch;
    line-height: 1.24;
    font-size: clamp(1.05rem, 6.2vw, 1.6rem) !important;
  }

  body.page-home .hero-title .highlight .highlight-underline {
    width: 108%;
    height: 40px;
    bottom: -9px;
  }
}