/* Signature: dark stage tone. Premium plus case studies, video, reach map, brief builder and WhatsApp */
body.sg{background:var(--ink);color:var(--paper)}
.sg h2{font-size:clamp(38px,5.2vw,80px);margin-top:10px}
.sg .mono{color:inherit}
.sg-sec{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,9vw,120px) var(--gutter);isolation:isolate;overflow:hidden}
.sg-sec .sec-head .mono,.sg-sec .vid-copy>.mono:first-child,.sg-sec .brief-copy>.mono:first-child,.sg-sec .contact-wrap>div>.mono:first-child{color:var(--red)}
.sec-head .lead,.sg .lead{margin-top:18px;max-width:42ch;font-size:clamp(16px,1.5vw,19px);opacity:.82}
.sec-head.split{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;align-items:flex-end}
.sec-head .note{max-width:42ch;opacity:.75;font-size:16px}

/* Stage floor (generated image) laid under every dark section, darkened so text stays readable */
.sg-sec::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,15,16,.74),rgba(15,15,16,.84)),url("../img/signature/signature-stage-floor.webp") center/cover no-repeat}
.sg-sec:nth-of-type(even)::before{transform:scaleX(-1)}
.sg-sec::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.sg-sec:nth-of-type(even){background:var(--ink-2)}

/* Truss and haze (generated image): fading band at the top of Layanan, and the backdrop of Kontak */
.truss{position:absolute;left:0;right:0;top:0;height:clamp(180px,26vw,360px);z-index:-1;pointer-events:none;opacity:.6;
  background:url("../img/signature/signature-truss-haze.webp") 50% 30%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 35%,transparent);mask-image:linear-gradient(180deg,#000 35%,transparent)}
.sg-contact::before{background:linear-gradient(180deg,rgba(15,15,16,.62),rgba(15,15,16,.84)),url("../img/signature/signature-truss-haze.webp") 50% 40%/cover no-repeat!important;transform:none!important}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 20px;border-radius:3px;text-decoration:none;font:500 16px var(--body);border:1px solid transparent;cursor:pointer}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-deep)}
.btn-line{border-color:var(--line-light);color:var(--paper);background:transparent}
.btn-line:hover{border-color:var(--paper)}
.btn .mono{font-size:12px;letter-spacing:.1em}

/* 1. Hero */
.sg-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:clamp(24px,4vw,52px) var(--gutter);position:relative;overflow:hidden;isolation:isolate;background:#0b0b0c}
.sg-hero .bg{position:absolute;inset:0;z-index:-4;filter:saturate(.55) contrast(1.06) brightness(.82);background:url("../img/signature/signature-hero-poster.webp") center/cover no-repeat}
.sg-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;filter:saturate(.55) contrast(1.06) brightness(.82)}
.sg-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(8,8,9,.86) 0%,rgba(8,8,9,.55) 48%,rgba(8,8,9,.15) 100%),linear-gradient(180deg,rgba(8,8,9,.5) 0%,transparent 30%,rgba(8,8,9,.75) 100%)}
.sg-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.sg-hero .row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sg-hero .chip{width:clamp(70px,8vw,104px);aspect-ratio:1;border-radius:14px;background:var(--paper);display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.45)}
.sg-hero .chip img{width:82%;height:82%}
.sg-nav{display:flex;gap:clamp(14px,2vw,30px);flex-wrap:wrap;justify-content:flex-end}
.sg-nav a{text-decoration:none;opacity:.85;padding:6px 0;border-bottom:1px solid transparent}
.sg-nav a:hover{opacity:1;border-color:var(--red)}
.sg-hero .copy{margin-top:auto;padding:clamp(40px,10vh,110px) 0 clamp(18px,4vh,40px);max-width:1040px}
.sg-hero .kicker{color:var(--red);display:flex;align-items:center;gap:14px}
.sg-hero h1{font-size:clamp(46px,7.6vw,118px);margin-top:16px}
.sg-hero h1 em{font-style:normal;color:var(--red)}
.sg-hero .sub{margin-top:22px;max-width:50ch;font-size:clamp(16px,1.6vw,20px);opacity:.9}
.sg-hero .cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.sg-hero .foot{opacity:.82}

/* 2. Layanan */
.sg-services{padding-top:clamp(72px,10vw,130px)}
.svc{list-style:none;margin:clamp(28px,5vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--paper)}
.svc li{padding:20px clamp(10px,1.4vw,22px) 22px 0;border-right:1px solid var(--line-light);padding-left:clamp(10px,1.4vw,22px);display:flex;flex-direction:column;gap:12px}
.svc li:first-child{padding-left:0}
.svc li:last-child{border-right:0}
.svc li{position:relative}
.svc .no{color:var(--red)}
.svc .ic{position:absolute;right:clamp(10px,1.4vw,22px);top:18px;width:54px;height:54px;fill:none;stroke:var(--paper);stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;opacity:.85}
.svc .ic .a{stroke:var(--red);stroke-width:2.4}
.svc h3{font-size:clamp(26px,2.5vw,38px)}
.svc p{font-size:15px;line-height:1.5;opacity:.78}

/* 3. Indeks Produksi */
.tbl{margin-top:clamp(24px,4vw,44px);border-top:2px solid var(--paper)}
.tr{display:grid;grid-template-columns:64px minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,1.5fr);gap:6px 24px;padding:clamp(14px,2.2vw,22px) 0;border-bottom:1px solid var(--line-light);align-items:baseline;transition:background .2s,padding .2s}
button.tr{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-light);color:inherit;font:inherit;cursor:pointer}
.has-video .tr:hover,.has-video .tr[aria-expanded=true]{background:rgba(243,238,229,.06);box-shadow:inset 3px 0 0 var(--red)}
.has-video .tr[aria-expanded=true]{border-bottom-color:transparent}
.tr.th{opacity:.6;padding:12px 0}
.tr b{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,38px);letter-spacing:.01em;text-transform:uppercase;line-height:1}
.tr span{font-size:16px;line-height:1.4}
.tr .c-no{color:var(--red)}
.tr .job{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.play{font-style:normal;flex:none;color:#fff;background:var(--red);padding:3px 9px 3px 8px;border-radius:2px;font-size:11px;letter-spacing:.14em}
.play::before{content:"";display:inline-block;margin-right:7px;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.has-video .tr[aria-expanded=true] .play{background:var(--paper);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.peek{background:rgba(243,238,229,.05);border-bottom:1px solid var(--line-light)}
.peek[hidden]{display:none}
.peek-inner{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,3vw,40px);padding:clamp(14px,2vw,24px) clamp(0px,1vw,12px) clamp(18px,3vw,30px);align-items:start}
.pv{position:relative;aspect-ratio:var(--r);width:min(var(--w),100%);max-height:68vh;background:#000;border:1px solid var(--line-light);border-radius:4px;overflow:hidden}
.pv video{width:100%;height:100%;object-fit:cover;display:block}
.pc{display:grid;gap:12px;align-content:start;max-width:46ch}
.pc .mono{color:var(--red)}
.pc p:nth-child(2){font-size:16px;line-height:1.55;opacity:.88}
.pc .close{justify-self:start;margin-top:6px;background:none;border:1px solid var(--line-light);color:var(--paper);padding:9px 14px;border-radius:3px;cursor:pointer;font-size:11.5px}
.pc .close:hover{border-color:var(--paper)}

/* 4. Studi kasus 01 */
.case-grid{margin-top:clamp(24px,4vw,44px);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(10px,1.6vw,22px)}
.case-grid figure{margin:0;position:relative;overflow:hidden;border-radius:4px;background:var(--ink-2)}
.case-grid figure::after{content:"";position:absolute;left:0;top:0;width:38px;height:9px;background:var(--red);transform:translate(10px,10px) rotate(-3deg)}
.case-grid img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.04)}
.case-grid .stage{grid-row:1 / span 2;min-height:clamp(300px,44vw,560px)}
.case-grid .stage img{object-position:50% 40%}
.case-grid .stage::before,.case-grid .team::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.case-grid .stage::before{background:linear-gradient(180deg,transparent 45%,rgba(26,26,28,.75) 72%,var(--ink-2) 100%),linear-gradient(90deg,rgba(26,26,28,.55),transparent 35%)}
.case-grid .team::before{background:linear-gradient(90deg,rgba(26,26,28,.7),transparent 30%)}
.case-grid .team{min-height:clamp(150px,18vw,230px)}
.beats{list-style:none;margin:0;padding:0;display:grid;gap:0;align-content:start;border-top:2px solid var(--paper)}
.beats li{padding:14px 0;border-bottom:1px solid var(--line-light);display:grid;gap:4px}
.beats .mono{color:var(--red)}
.beats p{font-size:15.5px;line-height:1.5;opacity:.85}
/* the team crop sits under the stage on wide screens: three beats go in the right column */
.case-grid .team{grid-column:2;grid-row:1}
.case-grid .beats{grid-column:2;grid-row:2}

/* 5. Studi kasus 02 video */
.vid-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,6vw,100px);align-items:center}
.vid-copy h2{font-size:clamp(40px,5.6vw,88px)}
.vid-copy .hint{margin-top:26px;display:inline-flex;align-items:center;gap:12px;opacity:.72}
.vid-copy .hint .tape{width:34px}
.vid-frame{position:relative;height:min(76vh,76svh,700px);aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#000;box-shadow:0 24px 60px rgba(0,0,0,.55);border:1px solid var(--line-light)}
.vid-frame video{width:100%;height:100%;object-fit:cover;display:block}
.vid-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,8,9,.18),transparent 25%,transparent 70%,rgba(8,8,9,.35))}

/* 5b. Studi kasus 03: landscape video panel */
.wide-frame{margin-top:clamp(24px,4vw,44px);position:relative;max-width:1100px;aspect-ratio:856/360;border-radius:6px;overflow:hidden;background:#000;border:1px solid var(--line-light);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.wide-frame video{width:100%;height:100%;object-fit:cover;display:block}
.wide-frame::after{content:"";position:absolute;left:0;top:0;width:38px;height:9px;background:var(--red);transform:translate(10px,10px) rotate(-3deg)}

/* Road case image sits behind the 360 case study */
.sg-video::before{background:linear-gradient(180deg,rgba(15,15,16,.7),rgba(15,15,16,.88)),url("../img/signature/signature-road-case.webp") 30% center/cover no-repeat!important;transform:none!important}

/* 6. Peta jangkauan */
.reach-grid{margin-top:clamp(24px,4vw,44px);display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:stretch}
.radar{position:relative;aspect-ratio:100/62;border:1px solid var(--line-light);border-radius:4px;background:linear-gradient(rgba(15,15,16,.3),rgba(15,15,16,.3)),url("../img/signature/signature-contour.webp") center/cover no-repeat,#0f0f10;overflow:hidden}
.radar svg{position:absolute;inset:0;width:100%;height:100%}
.radar .grid path{stroke:var(--line-light);stroke-width:.2;fill:none;opacity:.35;vector-effect:non-scaling-stroke}
.radar .ring{fill:none;stroke:var(--red);stroke-width:1;opacity:.5;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.radar .route{stroke:var(--paper);stroke-width:1;opacity:.45;stroke-dasharray:2 4;fill:none;vector-effect:non-scaling-stroke}
.node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:var(--paper);cursor:pointer;padding:10px;font:inherit}
.node i{width:16px;height:16px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 5px rgba(243,238,229,.18);transition:background .2s,box-shadow .2s,transform .2s}
.node span{white-space:nowrap;opacity:.8}
.node:hover i{transform:scale(1.2)}
.node.is-on i{background:var(--red);box-shadow:0 0 0 6px rgba(229,31,40,.3),0 0 0 14px rgba(229,31,40,.12)}
.node.is-on span{opacity:1;color:#fff}
.node.up{flex-direction:column-reverse}
.reach-info{border-top:2px solid var(--paper);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.reach-info .mono{color:var(--red)}
.reach-info h3{font-size:clamp(34px,3.6vw,54px)}
.reach-info p#r-text{font-size:16px;line-height:1.55;opacity:.85}

/* 7. Proses */
.sg-process .steps4{list-style:none;margin:clamp(24px,4vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,26px)}
.sg-process .steps4 li{padding:22px 20px 24px;border:1px solid var(--line-light);border-radius:4px;position:relative;min-height:clamp(220px,30vh,320px);display:flex;flex-direction:column;background:rgba(243,238,229,.03)}
.sg-process .steps4 .no{font-family:var(--display);font-weight:700;font-size:clamp(64px,7vw,110px);line-height:.85;color:transparent;-webkit-text-stroke:1.5px var(--paper)}
.sg-process .steps4 h3{margin:auto 0 8px;font-size:clamp(28px,3vw,44px)}
.sg-process .steps4 p{font-size:15.5px;line-height:1.5;opacity:.8}
.sg-process .steps4 li::after{content:"";position:absolute;right:16px;top:20px;width:40px;height:9px;background:var(--red);transform:rotate(-3deg)}

/* 8. Penyusun brief */
.brief-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:start}
.brief-copy h2{font-size:clamp(40px,5.4vw,84px)}
.brief-copy h2 em{font-style:normal;color:var(--red)}
.preview{margin-top:28px;border:1px solid var(--line-light);border-radius:4px;background:rgba(243,238,229,.04);padding:16px 18px}
.preview .mono{opacity:.65;margin-bottom:10px;display:block}
.preview pre{margin:0;white-space:pre-wrap;word-break:break-word;font:400 14.5px/1.55 var(--mono);color:var(--paper);opacity:.92}
.bform{background:var(--paper);color:var(--ink);border-radius:4px;padding:clamp(18px,2.4vw,32px);display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.bform label,.bform legend{display:grid;gap:6px;font-size:14px;font-weight:500}
.bform input[type=text],.bform input[type=number],.bform input[type=date],.bform select,.bform textarea{font:inherit;font-size:16px;padding:11px 12px;border:1px solid rgba(15,15,16,.4);border-radius:3px;background:#fff;color:var(--ink);width:100%}
.bform textarea{min-height:84px;resize:vertical}
.bform .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bform fieldset{border:0;margin:0;padding:0;min-width:0}
.bform legend{padding:0;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:block;position:relative}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips span{display:block;padding:9px 13px;border:1px solid rgba(15,15,16,.4);border-radius:999px;font-size:14px;font-weight:500;background:#fff}
.chips input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.bform .btn{margin-top:4px}
.bform .hint{font-size:13.5px;opacity:.7}

/* 9. Kontak */
.contact-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:stretch}
.contact-wrap h2{font-size:clamp(42px,6vw,92px)}
.contact-wrap h2 em{font-style:normal;color:var(--red)}
.wa-row{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.addr{margin:26px 0 0;display:grid;gap:16px}
.addr dt{opacity:.65;margin-bottom:4px}
.addr dd{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.45}
.addr dd.phone{font-family:var(--display);font-weight:700;font-size:clamp(34px,3.6vw,52px);line-height:1}
.mapbox{border:1px solid var(--line-light);border-radius:4px;overflow:hidden;min-height:clamp(260px,40vh,420px);background:var(--ink-2)}
.mapbox iframe{width:100%;height:100%;min-height:inherit;border:0;display:block;filter:grayscale(.6) invert(.92) contrast(.9)}
.sg-contact{justify-content:space-between}
.sg-contact .contact-wrap{margin:auto 0}
.sg-contact .bar{margin-top:clamp(32px,5vw,64px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;padding-top:20px;border-top:1px solid var(--line-light);font-size:13.5px;opacity:.72}

/* Sticky bar */
.sg-bar{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--gutter);background:rgba(15,15,16,.92);color:var(--paper);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:2px solid var(--red);transform:translateY(-110%);transition:transform .3s ease}
.sg-bar.is-on{transform:none}
.sg-bar-logo{width:42px;height:42px;border-radius:8px;background:var(--paper);display:grid;place-items:center;flex:none}
.sg-bar-logo img{width:32px;height:32px}
.sg-bar-nav{display:flex;gap:clamp(14px,2vw,28px);overflow-x:auto;scrollbar-width:none;flex:1;justify-content:center}
.sg-bar-nav::-webkit-scrollbar{display:none}
.sg-bar-nav a{text-decoration:none;opacity:.78;padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap}
.sg-bar-nav a:hover{opacity:1}
.sg-bar-nav a.is-active{opacity:1;border-color:var(--red)}
.sg-bar-wa{flex:none;text-decoration:none;background:var(--red);color:#fff;padding:9px 14px;border-radius:3px}
.sg-bar-wa:hover{background:var(--red-deep)}
.sg section[id]{scroll-margin-top:56px}

@media (max-width:1100px){
  .svc{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0}
  .svc li{border:0;border-top:1px solid var(--line-light);padding:18px 12px 18px 0}
  .svc li:first-child{padding-left:0}
  .svc li,.svc li:last-child{padding-left:0}
  .sg-process .steps4{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .sg-nav{display:none}
  .case-grid,.vid-wrap,.reach-grid,.brief-wrap,.contact-wrap{grid-template-columns:1fr}
  .case-grid .stage{grid-row:auto;min-height:clamp(240px,52vw,420px)}
  .case-grid .team,.case-grid .beats{grid-column:auto;grid-row:auto}
  .vid-wrap{justify-items:start}
  .vid-frame{height:min(70svh,620px)}
  .tr{grid-template-columns:44px minmax(0,1fr);}
  .tr.th{display:none}
  .tr b,.tr>span:not(.c-no){grid-column:2}
  .tr .c-no{grid-row:1 / span 3}
  .peek-inner{grid-template-columns:1fr}
  .pv{max-height:62vh}
  .radar{aspect-ratio:4/3}
}
@media (max-width:560px){
  .svc,.sg-process .steps4,.bform .two{grid-template-columns:1fr}
  .sg-bar{padding:8px 16px}
  .sg-bar-nav{gap:16px;font-size:11px;justify-content:flex-start}
  .sg-bar-wa{padding:8px 10px;font-size:11px}
  .sg-hero .cta .btn{width:100%}
  .wa-row .btn{width:100%}
  .node span{font-size:10.5px}
}