@font-face{font-family:Display;src:url('/assets/display.ttf') format('truetype');font-weight:700;font-display:swap}@font-face{font-family:Body;src:url('/assets/body.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{--bg:#10120f;--surface:#191c17;--line:#363b30;--text:#f0f0e9;--muted:#b1b7a9;--green:#c0ff3d;--display:Display,'Arial Narrow',Impact,sans-serif;--body:Body,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background-color:var(--bg);background-image:linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px);background-size:40px 40px;background-attachment:fixed;color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--green);outline-offset:5px}img{display:block;max-width:100%}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.02}h1,h2{font-family:var(--display);font-weight:700;text-transform:uppercase}h2{font-size:clamp(42px,5.3vw,78px);letter-spacing:-.01em}h3{font-size:25px;line-height:1.2}p{color:var(--muted)}::selection{background:var(--green);color:var(--bg)}.wrap{width:min(1400px,calc(100% - 104px));margin:auto}.skip{position:fixed;left:20px;top:-100px;background:var(--green);padding:10px;color:#111;z-index:99}.skip:focus{top:10px}.header{border-bottom:1px solid var(--line);background:rgba(16,18,15,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:sticky;top:0;z-index:100}.header-inner{height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:44px;height:44px;background:var(--green);color:var(--bg);font:700 32px/44px var(--display);text-align:center;transform:skew(-7deg)}.brand-name{font-family:var(--display);font-size:26px;line-height:.92;font-weight:700;letter-spacing:.02em}.brand-name small{display:block;font-family:var(--body);font-size:9px;line-height:2;letter-spacing:.22em;color:var(--muted)}.nav{display:flex;gap:30px;align-items:center}.nav a{font-size:14px;color:#d3d7cd}.nav a:hover,.nav a[aria-current=page]{color:var(--green)}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:13px 25px;background:var(--green);border:1px solid var(--green);color:#11160a;font-size:14px;font-weight:700;line-height:1.4;text-align:center;transition:background .2s,transform .2s}.button:hover{background:#d1ff75;transform:translateY(-2px)}.button.dark{background:transparent;border-color:#686e5f;color:var(--text)}.button.dark:hover{border-color:var(--green);color:var(--green)}.menu-toggle{display:none;min-width:48px;min-height:48px;background:transparent;border:1px solid var(--line);color:var(--text)}.eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:25px;display:flex;align-items:center;gap:13px}.eyebrow:before{content:'';width:22px;height:2px;background:currentColor}.hero{position:relative;min-height:735px;isolation:isolate;overflow:hidden}.hero-photo{position:absolute;right:0;top:0;width:74%;height:100%;object-fit:cover;object-position:60% 50%;z-index:-3}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#10120f 0%,rgba(16,18,15,.95) 20%,rgba(16,18,15,.65) 40%,rgba(16,18,15,.02) 73%),linear-gradient(0deg,rgba(16,18,15,.75),transparent 45%);z-index:-2}.hero-inner{padding-top:62px;padding-bottom:65px;position:relative}.hero h1{font-size:clamp(76px,8.7vw,134px);line-height:.88;letter-spacing:-.016em;margin:0 0 29px;max-width:780px}.hero h1 span{color:var(--green)}.hero-copy{max-width:405px;line-height:1.75;font-size:15px;color:#d1d5c9;margin-bottom:28px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}.hero-caption{position:absolute;right:52px;bottom:48px;max-width:220px;border-left:2px solid var(--green);padding-left:18px;font-size:12px;letter-spacing:.03em;color:#f3f2e9}.hero-caption strong{display:block;font-size:14px;color:var(--green);margin-bottom:4px}.hero-side{position:absolute;right:32px;top:42px;writing-mode:vertical-rl;font-size:11px;letter-spacing:.17em;color:#c3c8bc}.hero-index{display:flex;gap:10px;margin-top:36px;font-size:12px;color:#bfc6b4;letter-spacing:.13em}.hero-index b{color:var(--green)}.ribbon{background:var(--green);color:#19220b;overflow:hidden;border-top:1px solid var(--green);padding:17px 0}.ribbon-inner{display:flex;justify-content:space-around;align-items:center;gap:24px;white-space:nowrap;font:600 23px var(--display);letter-spacing:.05em;text-transform:uppercase}.ribbon i{font-style:normal;font-family:Arial;font-size:19px}.section{padding:100px 0}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:45px}.section-head h2{margin:0}.section-head p{max-width:365px;font-size:15px;margin:0}.section-head .text-link{flex-shrink:0}.text-link{border-bottom:1px solid var(--green);padding-bottom:7px;font-size:14px;color:var(--green);display:inline-block}.services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.service-card{min-height:292px;padding:28px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;transition:background .2s}.service-card:hover{background:#20271a}.service-top{display:flex;align-items:center;justify-content:space-between;color:var(--green);margin-bottom:36px}.service-top span{font-size:12px;letter-spacing:.1em;color:var(--muted)}.service-card h3{font:600 33px/1.1 var(--display);text-transform:uppercase;margin-bottom:12px}.service-card p{font-size:14px;line-height:1.7;max-width:300px;margin-bottom:24px}.service-card .card-link{margin-top:auto;font-size:12px;letter-spacing:.06em;color:var(--green);text-transform:uppercase}.technical-icon{width:36px;height:36px;stroke:currentColor;stroke-width:1.3;fill:none}.statement{border-block:1px solid var(--line);display:grid;grid-template-columns:.95fr 1.05fr}.statement-image{min-height:520px;height:100%;width:100%;object-fit:cover;object-position:27% 50%;filter:saturate(.55)}.statement-content{padding:65px 70px;background:#1a1e17}.statement-content h2{font-size:clamp(42px,4.3vw,64px)}.statement-content p{max-width:460px;font-size:15px}.checklist{list-style:none;padding:0;margin:27px 0;display:grid;gap:13px}.checklist li{display:flex;gap:14px;font-size:14px}.checklist li:before{content:'+';color:var(--green);font-weight:600}.use-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px}.use-card{padding:30px;min-height:278px;position:relative;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column}.use-card:first-child{background:var(--green);color:var(--bg)}.use-card:first-child p{color:#364124}.use-card .num{font:700 62px var(--display);opacity:.35;margin-bottom:30px}.use-card h3{font:600 34px var(--display);margin-bottom:12px;text-transform:uppercase}.use-card p{font-size:14px;margin:0}.process{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.process-item{border-top:1px solid var(--line);padding-top:24px}.process-num{font:600 45px var(--display);color:var(--green);margin-bottom:24px}.process-item h3{font-size:18px;margin-bottom:14px}.process-item p{font-size:14px;line-height:1.8}.region-block{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}.region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.region-link{padding:22px 14px;text-align:center;border:1px solid var(--line);font-size:14px;transition:all .2s}.region-link:hover{border-color:var(--green);background:var(--green);color:var(--bg)}.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.journal-card{border-top:1px solid var(--line);padding:24px 0}.journal-card .meta{font-size:12px;color:var(--green);letter-spacing:.06em;display:block;margin-bottom:22px}.journal-card h3{font:600 32px/1.15 var(--display);margin-bottom:15px}.journal-card p{font-size:14px}.cta{background:var(--green);color:#152007;padding:68px 0}.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:40px}.cta h2{font-size:clamp(48px,5.7vw,82px);margin-bottom:13px}.cta p{color:#37472b;margin:0;font-size:15px}.cta .button{background:var(--bg);color:var(--green);min-width:190px}.footer{padding:65px 0 25px}.footer-main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px}.footer-intro p{font-size:14px;margin-top:23px;max-width:260px}.footer h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#c6cbbc;margin-bottom:22px}.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}.footer li a{font-size:14px;color:var(--muted)}.footer li a:hover{color:var(--green)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:22px;font-size:12px;color:var(--muted)}.footer-wordmark{font:700 clamp(62px,13.5vw,210px)/1 var(--display);color:#2a3023;white-space:nowrap;letter-spacing:-.01em;margin-top:24px;overflow:hidden}.crumbs{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:12px;padding:28px 0}.crumbs a:hover{color:var(--green)}.page-hero{padding:40px 0 70px;border-bottom:1px solid var(--line);position:relative}.page-hero h1{font-size:clamp(55px,7vw,104px);max-width:1000px;margin-bottom:28px;line-height:.95}.page-hero .intro{max-width:735px;font-size:18px;line-height:1.75;margin-bottom:28px}.page-hero .eyebrow{margin-top:20px}.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 305px;gap:100px;align-items:start}.article-content{max-width:820px}.article-content section{margin-bottom:55px;scroll-margin-top:30px}.article-content h2{font-size:39px;line-height:1.1;max-width:680px}.article-content p{font-size:17px;line-height:1.85;color:#b9c0b0}.aside{border:1px solid var(--line);padding:28px;position:sticky;top:30px}.aside h2{font-size:30px}.aside p{font-size:14px}.aside ul{list-style:none;padding:0;display:grid;gap:15px;font-size:14px}.aside li a{border-bottom:1px solid var(--line);display:block;padding-bottom:12px}.aside .button{width:100%;margin-top:16px}.faq{border-top:1px solid var(--line)}.faq details{border-bottom:1px solid var(--line);padding:21px 0}.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:25px;font-size:17px}.faq summary:after{content:'+';color:var(--green);font-size:22px}.faq details[open] summary:after{content:'−'}.faq details p{margin:20px 38px 0 0;font-size:16px;line-height:1.8}.faq-wide{max-width:900px}.related{border-top:1px solid var(--line)}.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 35px}.filter{background:none;border:1px solid var(--line);color:var(--muted);padding:10px 18px;font-size:14px}.filter[aria-pressed=true],.filter:hover{background:var(--green);color:#10120f;border-color:var(--green)}[hidden]{display:none!important}.application-list{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.application-list .use-card{min-height:255px}.application-list .use-card:first-child{background:var(--surface);color:var(--text)}.application-list .use-card:first-child p{color:var(--muted)}.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:start}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.field{display:flex;flex-direction:column;gap:8px}.field.full{grid-column:1/-1}.field label{font-size:14px}.field input,.field select,.field textarea{width:100%;padding:14px 16px;border:1px solid #4d5544;background:#1b1f17;color:var(--text);border-radius:0;min-height:52px}.field textarea{resize:vertical;min-height:140px}.field input::placeholder,.field textarea::placeholder{color:#929b87}.form-note{font-size:13px;line-height:1.75}.form-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}.status{padding:20px;border:1px solid var(--green);color:var(--text);margin-top:24px}.status p{margin-bottom:15px}.brief-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;background:#191d15;padding:20px}.contact-note{padding:35px;border:1px solid var(--line)}.contact-note h2{font-size:43px}.contact-note p,.contact-note li{font-size:15px}.index-list{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.index-list a{border-bottom:1px solid var(--line);padding:18px 0;font-size:15px}.index-list a:hover{color:var(--green)}.large-quote{font:700 clamp(42px,5.3vw,76px)/1.07 var(--display);max-width:1000px;text-transform:uppercase}.large-quote em{font-style:normal;color:var(--green)}.narrow{max-width:850px}.muted{color:var(--muted)}.not-found{min-height:60vh;display:flex;flex-direction:column;justify-content:center}.not-found h1{font-size:120px;margin:0}.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}
@media(min-width:1600px){.hero-inner{padding-top:80px;padding-bottom:85px}.hero{min-height:810px}}@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.nav{gap:18px}.header-inner{height:86px}.header-cta{display:none}.hero{min-height:690px}.hero h1{font-size:110px}.hero-photo{width:90%}.hero-caption{right:32px}.statement-content{padding:45px 35px}.article-layout{gap:45px;grid-template-columns:1fr 260px}.region-block{gap:35px}.section{padding:75px 0}.section-head{gap:35px}.use-card{padding:25px}.contact-grid{gap:35px}.footer-main{gap:25px}}@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header-inner{height:78px}.brand-name{font-size:24px}.brand-mark{width:38px;height:38px;line-height:38px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:78px;left:0;right:0;background:#141811;padding:25px 20px 30px;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0}.nav.open{display:flex}.nav a{padding:13px 0;font-size:17px}.hero{min-height:745px}.hero-inner{padding-top:44px;padding-bottom:52px}.hero h1{font-size:clamp(80px,15vw,108px);line-height:.9;margin-bottom:27px}.hero-photo{width:100%;object-position:63% 50%;opacity:.7}.hero:before{background:linear-gradient(90deg,rgba(16,18,15,.94),rgba(16,18,15,.5)),linear-gradient(0deg,#10120f,transparent 50%)}.hero-copy{font-size:15px;max-width:355px}.hero-side{display:none}.hero-caption{bottom:25px;left:20px;right:auto;font-size:11px;max-width:none}.hero-caption strong{display:inline;font-size:12px;margin-right:12px}.hero-index{margin-top:26px}.hero-actions .button{padding:13px 18px}.eyebrow{font-size:11px;letter-spacing:.12em}.ribbon{padding:13px 0}.ribbon-inner{justify-content:flex-start;padding:0 20px;gap:25px;font-size:19px}.section{padding:62px 0}.section-head{display:block;margin-bottom:32px}.section-head p,.section-head .text-link{margin-top:22px}.services{grid-template-columns:1fr}.service-card{min-height:230px;padding:24px}.service-top{margin-bottom:24px}.service-card p{max-width:none}.statement{grid-template-columns:1fr}.statement-image{height:310px;min-height:0}.statement-content{padding:40px 25px}.statement-content h2{font-size:49px}.use-grid{grid-template-columns:1fr}.use-card{min-height:220px}.use-card .num{margin-bottom:20px}.process{grid-template-columns:1fr 1fr;gap:25px}.process-item h3{font-size:17px}.region-block{grid-template-columns:1fr;gap:25px}.region-grid{gap:8px}.region-link{padding:18px 8px;font-size:13px}.journal-grid{grid-template-columns:1fr}.journal-card{padding-bottom:12px}.cta{padding:48px 0}.cta .wrap{display:block}.cta .button{margin-top:25px}.footer-main{grid-template-columns:1fr 1fr;gap:30px}.footer-intro{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:10px}.footer-wordmark{font-size:13.4vw}.page-hero{padding-top:10px;padding-bottom:45px}.page-hero h1{font-size:65px}.page-hero .intro{font-size:16px}.article-layout{grid-template-columns:1fr;gap:30px}.article-content h2{font-size:34px}.article-content p{font-size:16px}.aside{position:static}.contact-grid{grid-template-columns:1fr;gap:35px}.form-grid{grid-template-columns:1fr;gap:20px}.field.full{grid-column:auto}.application-list{grid-template-columns:1fr}.index-list{grid-template-columns:1fr 1fr}.faq summary{font-size:16px}.crumbs{font-size:12px;padding:20px 0}.contact-note{padding:25px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

.page-hero h1,.article-content h2,.service-card h3{overflow-wrap:anywhere}.article-content,.page-hero,.service-card{min-width:0}

@media(max-width:760px){.hero h1{font-size:clamp(64px,20.5vw,108px)}.hero-caption{width:calc(100% - 40px)}}@media(max-width:360px){.hero-index{font-size:10px}.eyebrow{letter-spacing:.07em}}

.use-card .num{opacity:.6}.footer-wordmark{color:#707967}.hero-copy,.section-head p,.service-card p,.statement-content p,.use-card p,.process-item p,.journal-card p,.cta p,.footer-intro p,.contact-note p,.aside p{font-size:16px}.brand-name small{font-size:12px;letter-spacing:.12em}.hero-side{font-size:12px}

.article-meta{font-size:14px!important;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:40px}

.whatsapp-float{position:fixed;right:24px;bottom:24px;z-index:30;display:flex;align-items:center;gap:10px;background:var(--green);color:#11170a;padding:14px 20px;min-height:52px;border:1px solid #10120f;font-size:15px;font-weight:700;box-shadow:0 6px 25px #0007}.whatsapp-float:hover{background:#d1ff75}.whatsapp-float span{font-size:24px;line-height:1}.footer{padding-bottom:105px}.article-category{font-size:13px;color:var(--green);letter-spacing:.08em;text-transform:uppercase;margin-bottom:13px}.journal-toolbar{display:flex;gap:25px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:25px}.journal-toolbar .filter-bar{margin:0}.journal-search{width:300px;max-width:100%}.contact-phone{font-family:var(--display);font-size:42px;color:var(--green);line-height:1.3}.contact-note strong{font-weight:500;color:var(--text)}[data-filter-status]{font-size:14px;margin-bottom:22px}[data-filter-empty]{padding:35px;border:1px solid var(--line)}@media(max-width:760px){.whatsapp-float{right:16px;bottom:16px;padding:12px 18px}.journal-search{width:100%}.contact-phone{font-size:36px}.header .brand-name small{font-size:10px}}

/* ==========================================================================
   TUKANG UNITED - ENHANCEMENTS: PORTOFOLIO, KALKULATOR, FLOATING CTA
   ========================================================================== */

/* --- 1. Portofolio & Studi Kasus --- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 860px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

.portfolio-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.portfolio-card:hover {
  transform: translateY(-4px);
  border-color: rgba(192, 255, 61, 0.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Portfolio Media & Generated Images */
.portfolio-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #141712;
  border-bottom: 1px solid var(--border);
}

.portfolio-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.portfolio-card:hover .portfolio-img {
  transform: scale(1.06);
}

.portfolio-blueprint {
  position: relative;
  background: #141712;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}

.blueprint-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(16, 18, 15, 0.85);
  border: 1px solid rgba(192, 255, 61, 0.3);
  color: var(--green);
  font-family: monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  z-index: 2;
}

.blueprint-svg {
  width: 100%;
  height: auto;
  max-height: 180px;
  display: block;
}

.portfolio-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.portfolio-tag {
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.portfolio-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  margin: 0 0 12px 0;
}

.portfolio-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 20px 0;
  flex: 1;
}

.portfolio-specs {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  gap: 12px;
}

.spec-label {
  color: #7e8870;
  font-family: monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.spec-val {
  color: #d6ded0;
  font-weight: 500;
  text-align: right;
}

/* --- 2. Kalkulator Estimasi Kasar --- */
.calc-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 640px) {
  .calc-container {
    padding: 24px 16px;
  }
}

.calc-header {
  max-width: 900px;
  margin-bottom: 36px;
}

.calc-header .h2 {
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.nowrap-title {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .nowrap-title {
    white-space: normal;
  }
}

.calc-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: start;
}

@media (max-width: 960px) {
  .calc-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.calc-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calc-label {
  font-size: 13px;
  font-weight: 600;
  color: #c4cdc0;
  letter-spacing: 0.02em;
}

.calc-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calc-badge-val {
  background: rgba(192, 255, 61, 0.15);
  color: var(--green);
  border: 1px solid rgba(192, 255, 61, 0.3);
  font-family: monospace;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
}

.calc-select {
  background: #121510;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
  width: 100%;
}

.calc-select:focus {
  border-color: var(--green);
}

.calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #252a20;
  outline: none;
  margin: 10px 0 4px 0;
}

.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(192, 255, 61, 0.5);
  transition: transform 0.15s ease;
}

.calc-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.calc-range-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6a745f;
  font-family: monospace;
}

.calc-result-box {
  background: #121510;
  border: 1px solid rgba(192, 255, 61, 0.25);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.calc-result-pill {
  display: inline-block;
  background: rgba(192, 255, 61, 0.15);
  color: var(--green);
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.calc-result-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.calc-metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 480px) {
  .calc-metric-grid {
    grid-template-columns: 1fr;
  }
}

.calc-metric-card {
  background: #181c15;
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.metric-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8b967e;
  font-family: monospace;
  margin-bottom: 6px;
}

.metric-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--green);
  line-height: 1.1;
  margin-bottom: 4px;
}

.metric-value small {
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
}

.metric-hint {
  font-size: 11px;
  color: #6a745f;
  line-height: 1.35;
}

.calc-spec-summary {
  background: #181c15;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.spec-name {
  color: #8b967e;
}

.spec-data {
  color: #d6ded0;
  font-weight: 600;
  text-align: right;
}

.button-calc-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--green);
  color: #10120f;
  font-weight: 700;
  padding: 14px 20px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(192, 255, 61, 0.25);
}

.button-calc-wa:hover {
  background: #d4ff6b;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(192, 255, 61, 0.35);
  color: #10120f;
}

.calc-disclaimer {
  font-size: 11px;
  color: #6a745f;
  text-align: center;
  margin: 10px 0 0 0;
  line-height: 1.4;
}

/* --- 3. Floating WhatsApp Button --- */
.floating-wa-wrap {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
}

.floating-wa-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--green);
  color: #10120f;
  padding: 12px 18px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(192, 255, 61, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  text-decoration: none;
}

.floating-wa-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 22px rgba(192, 255, 61, 0.6);
  color: #10120f;
}

.floating-wa-pulse {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50px;
  border: 2px solid var(--green);
  animation: wa-pulse 2s infinite ease-out;
  pointer-events: none;
}

@keyframes wa-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

/* --- 4. Mobile Bottom Action Bar --- */
.mobile-bottom-bar {
  display: none;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 74px; /* Space so bottom bar doesn't cover content */
  }

  /* Sembunyikan floating button di mobile untuk cegah double button dengan mobile bottom bar */
  .floating-wa-wrap,
  .whatsapp-float {
    display: none !important;
  }

  .mobile-bottom-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(16, 18, 15, 0.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    padding: 10px 14px;
    z-index: 998;
  }

  .mobile-bar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
  }

  .mobile-bar-btn.primary {
    background: var(--green);
    color: #10120f;
  }

  .mobile-bar-btn.outline {
    background: #191c17;
    border: 1px solid var(--border);
    color: var(--text);
  }
}

/* --- Jurnal Featured Image & Card Thumbnails --- */
.article-featured-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  margin: 0 0 36px 0;
}
.article-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.article-featured-media:hover .article-featured-img {
  transform: scale(1.03);
}
.article-media-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 18px;
  background: rgba(16, 18, 15, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.service-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #141712;
  border: 1px solid var(--border);
}
.service-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.service-card:hover .service-thumb img {
  transform: scale(1.05);
}

/* Technical Tables Styling */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 28px 0;
  border: 1px solid var(--line);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.tech-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
  min-width: 600px;
}
.tech-table th {
  background: #20261c;
  color: var(--green);
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 16px;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.tech-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: #cfd5c8;
}
.tech-table tr:hover td {
  background: rgba(192, 255, 61, 0.04);
}
.tech-table .highlight {
  color: var(--green);
  font-weight: 700;
  font-family: monospace;
}
/* Blueprint motion system: lightweight, CSS-first, and reduced-motion aware. */
:root{--motion-progress:0%;--hero-shift:0px}
body:after{content:'';position:fixed;left:0;top:0;width:var(--motion-progress);height:2px;background:var(--green);z-index:120;box-shadow:0 0 12px rgba(192,255,61,.65);pointer-events:none}
.hero{--blueprint-opacity:.38}
.hero:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--blueprint-opacity);background-image:linear-gradient(rgba(192,255,61,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(192,255,61,.22) 1px,transparent 1px),linear-gradient(135deg,transparent 0 49%,rgba(240,240,233,.24) 49.2%,transparent 49.8%);background-size:72px 72px,72px 72px,180px 180px;mask-image:linear-gradient(90deg,transparent 3%,black 42%,transparent 100%);animation:blueprint-drift 22s linear infinite}
.hero:before{background:linear-gradient(90deg,#10120f 0%,rgba(16,18,15,.95) 20%,rgba(16,18,15,.58) 40%,rgba(16,18,15,.08) 73%),linear-gradient(0deg,rgba(16,18,15,.78),transparent 45%)}
.hero-photo{transform:scale(1.045) translate3d(0,var(--hero-shift),0);transition:transform .12s linear;will-change:transform}
.hero-inner:before{content:'BALI / STEEL / 01';position:absolute;right:8%;top:10%;font:600 11px/1 var(--body);letter-spacing:.18em;color:var(--green);opacity:.8;pointer-events:none;animation:label-flicker 5s steps(1,end) infinite}
.hero-inner:after{content:'';position:absolute;width:clamp(220px,26vw,390px);height:clamp(220px,26vw,390px);right:7%;top:15%;border:1px solid rgba(192,255,61,.42);border-radius:50%;box-shadow:0 0 0 18px rgba(192,255,61,.035),0 0 0 42px rgba(192,255,61,.018);pointer-events:none;animation:blueprint-orbit 8s ease-in-out infinite}
.hero-caption:after{content:'';position:absolute;left:-2px;top:0;width:2px;height:100%;background:linear-gradient(transparent,var(--green),transparent);transform:translateY(-120%);animation:scan-line 4.5s ease-in-out infinite}
.service-card,.portfolio-card,.use-card{overflow:hidden;isolation:isolate}
.service-card:before,.portfolio-card:before,.use-card:before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--green),transparent);transform:translateX(-110%);opacity:0;z-index:2;pointer-events:none}
.service-card:hover:before,.portfolio-card:hover:before,.use-card:hover:before{opacity:1;animation:card-scan 1.15s ease-out forwards}
.service-card:after,.portfolio-card:after{content:'+';position:absolute;right:16px;top:14px;color:var(--green);font:700 18px/1 var(--display);opacity:0;transform:scale(.6) rotate(-20deg);transition:opacity .25s,transform .25s;pointer-events:none}
.service-card:hover:after,.portfolio-card:hover:after{opacity:.9;transform:scale(1) rotate(0)}
.process{position:relative}
.process:before{content:'';position:absolute;left:0;right:0;top:0;border-top:1px solid rgba(192,255,61,.28);transform:scaleX(0);transform-origin:left;animation:process-line 2.2s .3s ease-out forwards}
.process-item{position:relative}
.process-item:before{content:'';position:absolute;top:-5px;left:0;width:9px;height:9px;border:1px solid var(--green);background:var(--bg);border-radius:50%;z-index:1}
.reveal,.service-card,.portfolio-card,.use-card,.process-item,.journal-card{transition:opacity .7s ease,transform .7s ease,background .25s,border-color .25s}
.js .reveal,.js .service-card,.js .portfolio-card,.js .use-card,.js .process-item,.js .journal-card{opacity:0;transform:translateY(22px)}
.js .is-visible{opacity:1;transform:none}
@keyframes blueprint-drift{from{background-position:0 0,0 0,0 0}to{background-position:72px 72px,-72px 72px,180px -180px}}
@keyframes blueprint-orbit{0%,100%{transform:scale(.96) rotate(0);opacity:.48}50%{transform:scale(1.04) rotate(7deg);opacity:1}}
@keyframes scan-line{0%,15%{transform:translateY(-120%)}55%,70%{transform:translateY(120%)}100%{transform:translateY(120%)}}
@keyframes card-scan{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes process-line{to{transform:scaleX(1)}}
@keyframes label-flicker{0%,92%,100%{opacity:.8}94%{opacity:.2}}
@media(max-width:760px){.hero-inner:before{right:20px;top:8%;font-size:9px}.hero-inner:after{right:-12%;top:22%;opacity:.58}.hero:after{opacity:.2}.hero-photo{transform:scale(1.035) translate3d(0,var(--hero-shift),0)}}
@media(prefers-reduced-motion:reduce){.hero:after,.hero-inner:after,.hero-inner:before,.hero-caption:after,.process:before{animation:none}.hero-photo{transform:scale(1.02)}.js .reveal,.js .service-card,.js .portfolio-card,.js .use-card,.js .process-item,.js .journal-card{opacity:1;transform:none;transition:none}}
/* Steel material calculator */
.calculator-hero{padding-bottom:55px}.calculator-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch}.steel-calculator,.calculator-summary{border:1px solid var(--line);padding:34px;background:rgba(25,28,23,.82)}.calculator-summary{background:var(--green);color:var(--bg)}.calculator-summary p,.calculator-summary span{color:#37472b}.calculator-summary h2{color:var(--bg);font-size:clamp(38px,4vw,60px);margin-bottom:28px}.calc-form-heading h2{font-size:clamp(38px,4vw,60px);margin-bottom:12px}.calc-form-heading>p:last-child{max-width:520px}.calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}.calc-fields .field{gap:8px}.calc-fields .field span{font-size:14px;color:var(--text)}.calc-fields input,.calc-fields select{background:#151813;border:1px solid #4d5544;color:var(--text);min-height:52px;padding:13px 14px;border-radius:0}.calc-fields input:focus,.calc-fields select:focus{border-color:var(--green)}.calc-actions,.summary-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.calculator-summary .button{background:var(--bg);border-color:var(--bg);color:var(--green)}.calculator-summary .button.dark{background:transparent;border-color:#455832;color:var(--bg)}.summary-metrics{display:grid;gap:17px}.summary-metrics div{border-top:1px solid rgba(16,18,15,.22);padding-top:14px}.summary-metrics span{display:block;font-size:13px}.summary-metrics strong{display:block;font:700 clamp(30px,3.4vw,50px)/1 var(--display);margin-top:4px}.calc-table-wrap{overflow:auto;border:1px solid var(--line);margin-top:24px;background:var(--surface)}.calc-table{width:100%;border-collapse:collapse;min-width:850px;text-align:left}.calc-table caption{text-align:left;padding:24px 24px 13px;font:700 28px/1 var(--display);text-transform:uppercase}.calc-table th{font-size:12px;color:var(--green);text-transform:uppercase;letter-spacing:.08em;background:#20261c;padding:14px 16px;border-block:1px solid var(--line);white-space:nowrap}.calc-table td{font-size:14px;color:#d7dccf;padding:16px;border-bottom:1px solid var(--line);white-space:nowrap}.calc-table td:first-child{color:var(--text);font-weight:600}.calc-table .empty-row td{text-align:center;color:var(--muted);padding:32px}.calc-remove{border:0;background:none;color:var(--muted);font-size:18px;padding:4px 8px}.calc-remove:hover{color:#ff8e7d}.calc-disclaimer{font-size:13px;line-height:1.7;margin:20px 0 0;max-width:900px}.calculator-guide{border-top:1px solid var(--line)}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.guide-grid article{border-top:1px solid var(--line);padding-top:22px}.guide-grid article>span{color:var(--green);font:600 38px/1 var(--display)}.guide-grid h3{margin:20px 0 10px;font:600 30px/1.1 var(--display);text-transform:uppercase}.guide-grid p{font-size:15px;line-height:1.75}.calc-toast{position:fixed;right:24px;bottom:24px;background:var(--green);color:var(--bg);padding:14px 18px;z-index:130;box-shadow:0 8px 30px #0008;font-size:14px;font-weight:700}
@media(max-width:860px){.calculator-layout{grid-template-columns:1fr}.guide-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.steel-calculator,.calculator-summary{padding:24px}.calc-fields{grid-template-columns:1fr;gap:17px}.calc-actions .button,.summary-actions .button{width:100%}.guide-grid{grid-template-columns:1fr}.calculator-hero{padding-bottom:40px}.calc-table caption{font-size:24px}}


/* ==========================================================================
   ADVANCED ARCHITECTURAL VISUAL ENGINE
   1. Blueprint-to-Structure Transition
   2. Technical Dimension Lines & Coordinate Markers
   3. Progressive Assembly Scroll Reveal
   4. Smooth Micro-Parallax
   5. Neon Green Scanline Laser
   6. Interactive Joint Nodes & Gusset Callouts
   7. Premium Charcoal & Laser Shutter Page Transitions
   ========================================================================== */

/* --- 1. Blueprint to Structure Morphing (Hero) --- */
.hero-blueprint {
  position: absolute;
  right: 0;
  top: 0;
  width: 74%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
  overflow: hidden;
  opacity: 0.85;
  animation: morphBlueprint 3.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.blueprint-grid-mesh {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(192, 255, 61, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(192, 255, 61, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at 60% 50%, black 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at 60% 50%, black 20%, transparent 85%);
}

.blueprint-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bp-draw {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawBlueprint 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bp-rafter { animation-delay: 0.2s; }
.bp-col-1 { animation-delay: 0.1s; }
.bp-col-2 { animation-delay: 0.25s; }
.bp-col-3 { animation-delay: 0.4s; }
.bp-beam-1 { animation-delay: 0.5s; }
.bp-beam-2 { animation-delay: 0.6s; }
.bp-brace-1 { animation-delay: 0.7s; }
.bp-brace-2 { animation-delay: 0.8s; }
.bp-brace-3 { animation-delay: 0.85s; }
.bp-brace-4 { animation-delay: 0.9s; }
.bp-web-1, .bp-web-2, .bp-web-3, .bp-web-4, .bp-web-5, .bp-web-6 {
  animation-delay: 1s;
}

@keyframes drawBlueprint {
  0% {
    stroke-dashoffset: 1200;
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes morphBlueprint {
  0% {
    opacity: 0.95;
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(192, 255, 61, 0.8));
  }
  65% {
    opacity: 0.85;
    filter: brightness(1.1) drop-shadow(0 0 6px rgba(192, 255, 61, 0.5));
  }
  100% {
    opacity: 0.38;
    filter: brightness(0.9) drop-shadow(0 0 2px rgba(192, 255, 61, 0.3));
  }
}

.hero-photo {
  animation: revealSteelPhoto 2.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  will-change: transform, opacity;
}

@keyframes revealSteelPhoto {
  0% {
    opacity: 0.25;
    filter: grayscale(80%) contrast(1.2);
  }
  50% {
    opacity: 0.6;
    filter: grayscale(40%) contrast(1.1);
  }
  100% {
    opacity: 0.85;
    filter: grayscale(0%) contrast(1.05);
  }
}

/* Ambient Hero Scanline */
.hero-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(192, 255, 61, 0.3) 25%, var(--green) 50%, rgba(192, 255, 61, 0.3) 75%, transparent 100%);
  box-shadow: 0 0 15px var(--green), 0 0 4px #fff;
  z-index: 1;
  pointer-events: none;
  animation: heroScan 7s ease-in-out infinite;
}

@keyframes heroScan {
  0% { top: 0%; opacity: 0; }
  15% { opacity: 0.7; }
  85% { opacity: 0.7; }
  100% { top: 100%; opacity: 0; }
}

/* --- 2. Technical Dimension Lines & Coordinate Markers --- */
.tech-dim-line {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--green);
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.tech-dim-h {
  top: 18px;
  right: 64px;
  width: min(480px, 45%);
}

.dim-rule {
  flex: 1;
  height: 1px;
  background: rgba(192, 255, 61, 0.35);
  position: relative;
}

.dim-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  background: rgba(16, 18, 15, 0.88);
  border: 1px solid rgba(192, 255, 61, 0.4);
  font-weight: 700;
  position: relative;
  overflow: hidden;
}

.dim-badge::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(90deg, transparent, rgba(192, 255, 61, 0.5), transparent);
  animation: dimDrift 3.5s linear infinite;
}

@keyframes dimDrift {
  0% { left: -30px; }
  100% { left: 130px; }
}

.dim-tick-start, .dim-tick-end {
  font-weight: 700;
  color: var(--green);
}

.tech-coord-stamp {
  position: absolute;
  right: 52px;
  bottom: 120px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #a7af9e;
  background: rgba(16, 18, 15, 0.85);
  padding: 10px 14px;
  border-left: 2px solid var(--green);
  border-bottom: 1px solid rgba(192, 255, 61, 0.2);
  z-index: 2;
  pointer-events: none;
}

.coord-item strong {
  color: #f0f0e9;
  font-weight: 600;
}

.coord-status {
  color: var(--green) !important;
  font-weight: 700;
}

/* CAD Crosshairs */
.cad-crosshair {
  position: absolute;
  width: 16px;
  height: 16px;
  color: var(--green);
  font-family: monospace;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  opacity: 0.65;
  pointer-events: none;
  z-index: 2;
  animation: coordPulse 4s ease-in-out infinite;
}

.ch-tl { top: 24px; left: 24px; }
.ch-tr { top: 24px; right: 24px; }
.ch-bl { bottom: 24px; left: 24px; }
.ch-br { bottom: 24px; right: 24px; }

@keyframes coordPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50% { opacity: 0.9; transform: scale(1.1); filter: drop-shadow(0 0 4px var(--green)); }
}

/* --- 3. Progressive Assembly Scroll Reveal --- */
.reveal-assemble {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-assemble.assembled {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Process Assembly Flow Indicator */
.process {
  position: relative;
}

.process::before {
  content: '';
  position: absolute;
  top: 48px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--green) 0%, rgba(192, 255, 61, 0.4) 50%, rgba(54, 59, 48, 0.5) 100%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}

.process-item {
  position: relative;
  z-index: 1;
  background: var(--bg);
  padding: 24px 16px 16px 0;
}

/* --- 4. Micro-Parallax Utility --- */
.statement-image {
  will-change: transform;
  transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1);
}

/* --- 5. Neon Green Scanline Laser (Cards) --- */
.service-card, .portfolio-card, .use-card, .journal-card, .calc-container {
  position: relative;
  overflow: hidden;
}

.service-card::after, .portfolio-card::after, .use-card::after, .journal-card::after {
  content: '';
  position: absolute;
  left: -20%;
  right: -20%;
  height: 2.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(192, 255, 61, 0.3) 15%, var(--green) 50%, rgba(192, 255, 61, 0.3) 85%, transparent 100%);
  box-shadow: 0 0 14px var(--green), 0 0 4px #ffffff;
  top: -10px;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}

.service-card:hover::after, .portfolio-card:hover::after, .use-card:hover::after, .journal-card:hover::after {
  opacity: 1;
  animation: scanlineSweep 1.5s ease-in-out infinite;
}

@keyframes scanlineSweep {
  0% { top: -6px; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 104%; opacity: 0; }
}

/* --- 6. Interactive Joint Nodes & Gusset Callouts --- */
.joint-node {
  position: absolute;
  width: 14px;
  height: 14px;
  color: var(--green);
  font-family: monospace;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 7;
}

.joint-tl { top: 6px; left: 6px; }
.joint-tr { top: 6px; right: 6px; }
.joint-bl { bottom: 6px; left: 6px; }
.joint-br { bottom: 6px; right: 6px; }

.service-card:hover .joint-node,
.portfolio-card:hover .joint-node,
.use-card:hover .joint-node {
  opacity: 0.9;
  transform: scale(1.15);
}

.joint-callout {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--green);
  background: rgba(16, 18, 15, 0.92);
  border: 1px solid rgba(192, 255, 61, 0.4);
  padding: 2px 7px;
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.25s ease;
  pointer-events: none;
  z-index: 8;
  text-transform: uppercase;
}

.service-card:hover .joint-callout,
.portfolio-card:hover .joint-callout {
  opacity: 1;
  transform: translateY(0);
}

/* --- 7. Charcoal & Laser Shutter Page Transitions --- */
.page-transition {
  position: fixed;
  inset: 0;
  background: #10120f;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.22s;
}

.page-transition.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.transition-beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--green);
  box-shadow: 0 0 24px var(--green), 0 0 6px #ffffff;
  top: 0;
}

.page-transition.is-active .transition-beam {
  animation: beamSweep 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes beamSweep {
  0% { top: 0%; opacity: 0; }
  30% { opacity: 1; }
  100% { top: 100%; opacity: 1; }
}

.transition-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.05em;
  color: #ffffff;
  opacity: 0.9;
}

.transition-mark {
  width: 32px;
  height: 32px;
  background: var(--green);
  color: var(--bg);
  font: 700 22px/32px var(--display);
  text-align: center;
  transform: skew(-7deg);
}

.transition-text em {
  font-style: normal;
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--green);
  margin-left: 6px;
}

@media (max-width: 760px) {
  .hero-blueprint { width: 100%; opacity: 0.65; }
  .tech-dim-h { display: none; }
  .tech-coord-stamp { bottom: 70px; right: 20px; padding: 6px 10px; font-size: 9px; }
  .process::before { display: none; }
}