/* DEFTERA — precision hero revision based on approved photographic embroidery reference.
 * Additive override; remove this stylesheet to roll back to the prior hero. */
:root { --hero-blue:#55abff; }
.hero-dark-premium{min-height:680px;padding-top:91px;background:#040e19;}
.hero-photo{
  position:absolute;z-index:-2;
  inset:0 0 0 31%;
  background-color:#071421;
  background-image:url("./hero-bordir-realistis.svg");
  background-size:auto 100%;
  background-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 47%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 47%);
  background-repeat:no-repeat;
  opacity:1;
  filter:none;
}
.hero-shade{
  background:linear-gradient(90deg,#040d18 0%,#040d18f8 15%,#05111fe8 26%,#061320bf 41%,#07142232 66%,#05122231 100%),
             linear-gradient(180deg,#06111de2 0%,transparent 17%,transparent 72%,#06121beb 100%);
}
.site-header .brand-icon{width:50px;height:50px;flex-basis:50px;}
.brand-text{font-size:19px;letter-spacing:.18em}
.nav-wrap{min-height:62px;height:72px}
.main-nav{gap:clamp(12px,1.6vw,25px);}
.main-nav a{font-size:12px;font-weight:600;}
.main-nav a.nav-contact{font-weight:750}
.hero-layout{min-height:472px;padding:32px 0 85px}
.hero-copy{max-width:465px;padding-top:1px}
.hero .eyebrow{font-size:10px;letter-spacing:.20em;margin-bottom:22px}
.hero h1{font-size:clamp(70px,6.8vw,101px);line-height:.985;letter-spacing:-.077em;margin:0 0 22px}
.hero-copy>p{font-size:15px;line-height:1.7;max-width:440px;margin:0 0 27px}
.hero-actions .btn{font-size:12px;padding:15px 23px;min-height:51px}
.hero-services{bottom:-83px;gap:14px}
.hero-service{border-radius:18px;min-height:163px;padding:19px 19px 16px;box-shadow:0 15px 42px #0613221b;gap:5px}
.hero-service-icon{width:43px;height:43px;margin-bottom:8px}
.hero-service-icon svg{width:23px;height:23px}
.hero-service strong{font-size:16px}
.hero-service>span:last-child{font-size:11px;line-height:1.62}
.intro-dark{padding-top:143px}
.intro-dark h2{font-size:clamp(34px,3.5vw,49px)}
.intro-dark-inner p{font-size:14px;line-height:1.8}
@media (min-width:1500px){
  .hero-dark-premium{min-height:730px}
  .hero-layout{min-height:512px}
  .hero h1{font-size:105px}
  .hero-photo{background-position:center center}
}
@media (max-width:1100px){
  .hero-dark-premium{min-height:675px}
  .hero-photo{inset:0 0 0 22%;background-position:right center;background-size:auto 100%}
  .hero-shade{background:linear-gradient(90deg,#040d18 0%,#04101bf1 23%,#0615259c 47%,#0613203b 100%),linear-gradient(180deg,#07121dc2,transparent 30%,#071321dc 100%)}
  .hero h1{font-size:clamp(65px,7.5vw,88px)}
  .hero-copy{max-width:440px}
  .hero-service{padding:17px 14px;min-height:160px}
}
@media (max-width:850px){
  .hero-dark-premium{min-height:unset;padding-top:87px;overflow:hidden}
  .hero-photo{inset:0;opacity:.9;background-position:right -35px center;background-size:auto 100%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 75%);mask-image:linear-gradient(90deg,transparent 0%,#000 75%)}
  .hero-shade{background:linear-gradient(90deg,#04101ce8 0%,#04121fca 37%,#0616255a 100%),linear-gradient(180deg,#04101c8a 0%,transparent 42%,#061420ed 93%)}
  .hero-layout{min-height:505px;padding:67px 0 55px;display:flex}
  .hero h1{font-size:clamp(65px,9vw,86px)}
  .hero-services{bottom:auto;position:relative;gap:12px;padding-bottom:28px}
  .hero-service{min-height:145px}
  .intro-dark{padding:70px 0 80px}
}
@media (max-width:600px){
  .hero-dark-premium{padding-top:79px}
  .hero-photo{inset:0;opacity:.84;background-position:right -75px top 5px;background-size:auto 70%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 85%);mask-image:linear-gradient(90deg,transparent 0%,#000 85%)}
  .hero-shade{background:linear-gradient(90deg,#06121de5 0%,#061421b5 55%,#05111f6b 100%),linear-gradient(180deg,#04101c4f 0%,transparent 35%,#061420f7 74%)}
  .hero-layout{min-height:385px;padding:51px 0 30px}
  .hero .eyebrow{font-size:8px;letter-spacing:.11em;margin-bottom:17px}
  .hero h1{font-size:clamp(52px,12.5vw,69px);margin-bottom:17px}
  .hero-copy>p{font-size:12px;line-height:1.6;max-width:310px;margin-bottom:20px}
  .hero-actions{gap:9px}
  .hero-actions .btn{padding:13px 7px;font-size:10px;min-height:45px}
  .hero-services{grid-template-columns:1fr;gap:9px;padding-bottom:25px}
  .hero-service{min-height:84px;border-radius:15px;padding:10px 14px;grid-template-columns:42px 1fr}
  .hero-service strong{font-size:14px}
  .hero-service>span:last-child{font-size:11px}
  .intro-dark{padding-top:61px}
}

/* Subtle portfolio navigation cue matching the reference. */
.main-nav a[href="#layanan"]:after{content:"⌄";display:inline-block;margin-left:6px;color:inherit;font-weight:700;font-size:13px;transform:translateY(-1px)}