/* =====================================================
   PT. Transtel Sarana Prima — Infrastructure Project Contractor
   Token system:
   Color   : --charcoal #1A1D21 (industrial dark), --orange #FF6B1A (safety/warning aksen),
             --steel #4A5560 (baja/beton), --paper #F7F7F5, --paper-2 #EDEEEB, --grey #5C6570
   Type    : Display = "Space Grotesk" (teknikal, tegas), Body = "Archivo"
   Shape   : potongan diagonal ala baja, grid blueprint, angka besar bergaya teknikal
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Archivo:wght@400;500;600;700;800&display=swap');

:root{
  --charcoal:#1A1D21;
  --charcoal-2:#25292E;
  --orange:#FF6B1A;
  --orange-deep:#E0570D;
  --steel:#4A5560;
  --paper:#F7F7F5;
  --paper-2:#EDEEEB;
  --grey:#5C6570;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--charcoal);
  font-family:'Archivo',system-ui,sans-serif; font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; font-weight:700; line-height:1.2; margin:0 0 .5em; color:var(--charcoal);}
p{margin:0 0 1em; color:var(--grey);}
a{color:var(--charcoal); text-decoration:none;}
a:hover{color:var(--orange);}
img,svg{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--charcoal); color:var(--paper); padding:10px 16px; z-index:999;}
.skip-link:focus{left:16px; top:16px;}

/* ===== Top bar ===== */
.top-bar{background:var(--charcoal); color:#9CA6AF; font-size:12px; font-family:'Space Grotesk',sans-serif;}
.top-bar .wrap{display:flex; justify-content:space-between; align-items:center; padding:8px 24px; flex-wrap:wrap; gap:8px;}
.top-bar .left{display:flex; gap:22px; flex-wrap:wrap;}
.top-bar .accent{color:var(--orange);}

/* ===== Header ===== */
header.site-header{background:var(--paper); border-bottom:3px solid var(--charcoal); position:sticky; top:0; z-index:50;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
.logo{display:flex; align-items:center; gap:12px;}
.logo-mark{width:42px; height:42px; background:var(--charcoal); display:flex; align-items:center; justify-content:center; flex-shrink:0; clip-path:polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);}
.logo-text b{display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; color:var(--charcoal); line-height:1.25;}
.logo-text span{font-size:11px; color:var(--grey); text-transform:uppercase; letter-spacing:.05em;}
.nav-links{display:flex; gap:26px; align-items:center;}
.nav-links a{font-size:13.5px; font-weight:600; color:var(--charcoal); text-transform:uppercase; letter-spacing:.03em;}
.nav-links a:hover{color:var(--orange);}
.btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--orange); color:var(--charcoal);
  padding:13px 26px; font-weight:700; font-size:13px; border:none;
  text-transform:uppercase; letter-spacing:.03em; transition:.15s ease;
  clip-path:polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%);
}
.btn:hover{background:var(--charcoal); color:var(--orange);}
.btn-outline{background:transparent; color:var(--charcoal); border:2px solid var(--charcoal); clip-path:none; padding:11px 24px;}
.btn-outline:hover{background:var(--charcoal); color:var(--paper);}

/* ===== Hero ===== */
.hero{padding:64px 0 56px; background:var(--charcoal); position:relative; overflow:hidden;}
.hero::before{
  content:""; position:absolute; inset:0; opacity:.06;
  background-image:linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size:44px 44px;
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; position:relative; z-index:1;}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); font-weight:700; margin-bottom:18px;}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--orange);}
.hero h1{color:#fff; font-size:40px; max-width:560px;}
.hero .lede{color:#B7BFC7; font-size:16px; max-width:500px; margin:16px 0 30px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px;}
.hero-stats{display:flex; gap:0; border-top:1px solid #383D43;}
.hstat{padding:18px 24px 0 0; margin-right:24px; border-right:1px solid #383D43;}
.hstat:last-child{border-right:none;}
.hstat b{display:block; font-family:'Space Grotesk',sans-serif; font-size:26px; color:var(--orange);}
.hstat span{font-size:11px; color:#8B939C; text-transform:uppercase; letter-spacing:.04em;}
.hero-visual{background:var(--charcoal-2); border:1px solid #383D43; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;}

/* ===== Sections ===== */
section{padding:64px 0;}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head .eyebrow{color:var(--orange-deep);}
.section-head .eyebrow::before{background:var(--orange-deep);}
.section-head h2{font-size:28px;}
.section-head.center{max-width:640px; margin-left:auto; margin-right:auto; text-align:center;}
.section-head.center .eyebrow::before{display:none;}

/* ===== Services (numbered, industrial) ===== */
.service-row{border-top:2px solid var(--charcoal);}
.service-item{display:grid; grid-template-columns:100px 1fr 1.2fr; gap:30px; padding:34px 0; border-bottom:1px solid #D8D8D3; align-items:start;}
.service-num{font-family:'Space Grotesk',sans-serif; font-size:38px; font-weight:700; color:var(--orange); line-height:1;}
.service-item h3{font-size:21px; margin-bottom:6px;}
.service-item .tag{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--grey); font-weight:600;}
.service-item p{font-size:14.5px; margin:0;}

/* ===== Keunggulan grid ===== */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#D8D8D3; border:1px solid #D8D8D3;}
.adv-card{background:var(--paper); padding:30px 24px;}
.adv-card .num{font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--orange); font-weight:700; margin-bottom:14px;}
.adv-card h3{font-size:16px; margin-bottom:8px;}
.adv-card p{font-size:13px; margin:0;}

/* ===== Proses kerja ===== */
.process-row{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.process-step{position:relative; padding:0 20px 0 0;}
.process-step:not(:last-child)::after{content:"→"; position:absolute; right:-4px; top:8px; color:var(--orange); font-size:20px;}
.process-step .step-num{width:40px; height:40px; background:var(--charcoal); color:var(--orange); font-family:'Space Grotesk',sans-serif; font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.process-step h4{font-size:15.5px; margin-bottom:8px;}
.process-step p{font-size:13px; margin:0;}

/* ===== Proyek grid ===== */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--charcoal);}
.project-card{background:var(--charcoal-2); aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center;}
.project-card svg{width:30%; margin-bottom:16px;}
.project-card h3{color:#fff; font-size:15px; margin-bottom:4px;}
.project-card span{color:#8B939C; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em;}

/* ===== Testimoni ===== */
.testi-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:#D8D8D3; border:1px solid #D8D8D3;}
.testi-card{background:var(--paper); padding:30px;}
.testi-card p{font-style:italic; color:var(--charcoal); font-size:14.5px; margin-bottom:16px;}
.testi-who b{font-size:13.5px; display:block;}
.testi-who span{font-size:12px; color:var(--grey);}

/* ===== CTA band ===== */
.cta-band{background:var(--orange); padding:52px 40px; text-align:center;}
.cta-band h2{color:var(--charcoal); font-size:27px;}
.cta-band p{color:#5C3D1F;}
.cta-band .btn{background:var(--charcoal); color:var(--orange);}
.cta-band .btn:hover{background:#fff; color:var(--charcoal);}

/* ===== Footer ===== */
footer{background:var(--charcoal); color:#9CA6AF; padding:52px 0 26px; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:38px;}
.footer-grid .logo-text b, .footer-grid .logo-text span{color:#fff;}
.footer-grid h5{font-family:'Space Grotesk',sans-serif; font-size:14px; color:#fff; margin-bottom:14px; text-transform:uppercase; letter-spacing:.03em;}
.footer-grid a{display:block; font-size:13.5px; color:#9CA6AF; margin-bottom:10px;}
.footer-grid a:hover{color:var(--orange);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#6B7580; border-top:1px solid #383D43; padding-top:20px; flex-wrap:wrap; gap:10px;}

/* ===== Responsive ===== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero h1{font-size:29px;}
  .service-item{grid-template-columns:60px 1fr; }
  .service-item > p{grid-column:2/3;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .process-row{grid-template-columns:1fr; gap:24px;}
  .process-step::after{display:none;}
  .grid-3{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:24px;}
  .nav-links{display:none;}
  .top-bar .left span:nth-child(n+2){display:none;}
}

a:focus-visible, button:focus-visible, .btn:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto !important;} }