.ash-page{
	--as-ink:#15130f;
	--as-ink-soft:#5b5548;
	--as-paper:#faf7f1;
	--as-panel:#ffffff;
	--as-gold:#e3a63e;
	--as-gold-deep:#b97c22;
	--as-clay:#b15a3b;
	--as-clay-pale:#f3e2da;
	--as-line:#e7e0d2;
	--as-max:1160px;
}
.ash-page, .ash-page *{box-sizing:border-box;}
.ash-page{
	margin:0; background:var(--as-paper); color:var(--as-ink);
	font-family:'Inter',-apple-system,sans-serif; font-size:16px; line-height:1.55;
	-webkit-font-smoothing:antialiased;
	scroll-behavior:smooth;
}
.ash-page .as-wrap{max-width:var(--as-max); margin:0 auto; padding:0 24px;}
.ash-page h1, .ash-page h2, .ash-page h3{font-family:'Space Grotesk',sans-serif; margin:0; line-height:1.15; letter-spacing:-0.01em;}
.ash-page p{margin:0;}
.ash-page a{color:inherit; text-decoration:none;}
.ash-page svg{display:block; max-width:100%;}
.ash-page ul{margin:0; padding:0; list-style:none;}

.ash-page button{
	font-family:inherit;
	background:none !important;
	border:none !important;
	padding:0 !important;
	margin:0 !important;
	border-radius:0 !important;
	box-shadow:none !important;
	cursor:pointer;
	font-size:inherit;
	color:inherit;
	text-transform:none;
	width:auto;
}

.ash-page .as-eyebrow{
	display:inline-flex; align-items:center; gap:8px;
	font-family:'IBM Plex Mono'; font-size:12px; font-weight:600;
	letter-spacing:0.08em; text-transform:uppercase; color:var(--as-gold-deep);
	margin-bottom:16px;
}
.ash-page .as-eyebrow::before{content:''; width:16px; height:1.5px; background:var(--as-gold-deep);}
.ash-page .as-eyebrow.on-dark{color:var(--as-gold);}
.ash-page .as-eyebrow.on-dark::before{background:var(--as-gold);}

.ash-page .as-btn-primary{
	display:inline-block !important; background:var(--as-gold) !important; color:var(--as-ink) !important;
	font-weight:700 !important; font-size:14.5px !important; padding:14px 26px !important; border-radius:999px !important;
	border:none; cursor:pointer;
	transition:transform .15s ease, background .15s ease;
}
.ash-page .as-btn-primary:hover{background:#eeb658 !important; transform:translateY(-2px); color:var(--as-ink) !important;}
.ash-page .as-btn-ghost{
	display:inline-flex !important; align-items:center; gap:8px;
	background:transparent !important; color:#fff !important; border:1px solid rgba(255,255,255,0.35) !important;
	font-weight:600 !important; font-size:14.5px !important; padding:13px 22px !important; border-radius:999px !important;
	transition:border-color .15s ease, background .15s ease;
}
.ash-page .as-btn-ghost:hover{border-color:#fff !important; background:rgba(255,255,255,0.06) !important; color:#fff !important;}
.ash-page .as-btn-ghost.on-light{color:var(--as-ink) !important; border-color:var(--as-ink-soft) !important;}
.ash-page .as-btn-ghost.on-light:hover{border-color:var(--as-ink) !important; background:rgba(0,0,0,0.04) !important;}

.ash-page .as-nav{position:sticky; top:0; z-index:50; background:var(--as-ink); border-bottom:1px solid rgba(255,255,255,0.08);}
.ash-page .as-nav-inner{display:flex; align-items:center; justify-content:space-between; height:68px; gap:24px;}
.ash-page .as-brand{display:flex; align-items:center; height:100%;}
.ash-page .as-brand-logo{
	height:38px !important; max-height:38px !important; width:auto !important; max-width:220px !important;
	display:block !important; object-fit:contain;
}
.ash-page .as-nav-links{display:flex; align-items:center; gap:28px; font-size:14px; font-weight:500; color:#cfc7b4;}
.ash-page .as-nav-links a:hover{color:#fff;}
.ash-page .as-nav-actions{display:flex; align-items:center; gap:14px;}
.ash-page .as-nav-calc{
	display:inline-flex; align-items:center; gap:7px;
	background:rgba(227,166,62,0.14); color:var(--as-gold);
	border:1px solid rgba(227,166,62,0.4);
	font-size:13px; font-weight:700; padding:8px 14px; border-radius:999px;
}
.ash-page .as-nav-calc svg{width:15px; height:15px;}

.ash-page .as-hero{background:var(--as-ink); color:#f4ede0; padding:64px 0 0; position:relative; overflow:hidden;}
.ash-page .as-hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; padding-bottom:60px;}
.ash-page .as-hero h1{font-size:46px; font-weight:700; color:#fff; max-width:560px;}
.ash-page .as-hero h1 em{font-style:normal; color:var(--as-gold);}
.ash-page .as-hero-sub{margin-top:20px; max-width:480px; font-size:16px; color:#c8bfa9;}
.ash-page .as-hero-actions{margin-top:32px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.ash-page .as-hero-visual{position:relative;}
.ash-page .as-hero-house{
	background:linear-gradient(155deg, #2a2016 0%, #1b160f 100%);
	border-radius:20px; padding:32px; box-shadow:0 30px 70px rgba(0,0,0,0.4);
}
.ash-page .as-hero-house svg{width:100%; height:auto;}

/* ===== Animasi ilustrasi hero: atap "menggambar" diri + garis ukur ===== */
.ash-page .as-hero-house-shape{
	opacity:0; transform:translateY(6px) scale(0.98);
	transform-box:fill-box; transform-origin:center;
	animation:ashHeroShapeIn 0.7s ease-out 0.15s forwards;
}
.ash-page .as-dim-line{
	stroke-dasharray:120; stroke-dashoffset:120; opacity:0;
	animation:ashDimDraw 0.7s ease-out forwards;
}
.ash-page .as-dim-1{animation-delay:0.9s;}
.ash-page .as-dim-2{animation-delay:1.05s;}
.ash-page .as-dim-3{animation-delay:1.2s;}
.ash-page .as-dim-4{animation-delay:1.35s;}
.ash-page .as-hero-apex{
	transform-box:fill-box; transform-origin:center;
	opacity:0; animation:ashApexIn 0.4s ease-out 1.7s forwards;
}
.ash-page .as-hero-apex-halo{
	transform-box:fill-box; transform-origin:center;
	opacity:0;
	animation:ashApexPulse 2.2s ease-out 1.9s infinite;
}

@keyframes ashHeroShapeIn{
	from{opacity:0; transform:translateY(6px) scale(0.98);}
	to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes ashDimDraw{
	0%{stroke-dashoffset:120; opacity:0;}
	15%{opacity:1;}
	100%{stroke-dashoffset:0; opacity:1;}
}
@keyframes ashApexIn{
	from{opacity:0; transform:scale(0.4);}
	to{opacity:1; transform:scale(1);}
}
@keyframes ashApexPulse{
	0%{opacity:0.9; transform:scale(1);}
	70%{opacity:0; transform:scale(3.2);}
	100%{opacity:0; transform:scale(3.2);}
}
@media (prefers-reduced-motion: reduce){
	.ash-page .as-hero-house-shape{animation:none; opacity:1; transform:none;}
	.ash-page .as-dim-line{animation:none; stroke-dashoffset:0; opacity:1;}
	.ash-page .as-hero-apex{animation:none; opacity:1; transform:none;}
	.ash-page .as-hero-apex-halo{animation:none; opacity:0;}
}

.ash-page .as-trust{background:var(--as-panel); border-bottom:1px solid var(--as-line);}
.ash-page .as-trust-inner{display:grid; grid-template-columns:repeat(4,1fr); padding:30px 0;}
.ash-page .as-trust-item{text-align:center; border-left:1px solid var(--as-line); padding:0 12px;}
.ash-page .as-trust-item:first-child{border-left:none;}
.ash-page .as-trust-num{font-family:'IBM Plex Mono'; font-weight:600; font-size:26px; color:var(--as-clay);}
.ash-page .as-trust-label{font-size:12.5px; color:var(--as-ink-soft); margin-top:4px;}

.ash-page .as-section{padding:76px 0;}
.ash-page .as-section-head{max-width:600px; margin-bottom:42px;}
.ash-page .as-section-head h2{font-size:30px; font-weight:700;}
.ash-page .as-section-head p{margin-top:12px; color:var(--as-ink-soft); font-size:15.5px;}
.ash-page .as-section-head.centered{margin-left:auto; margin-right:auto; text-align:center;}

.ash-page .as-calc-spotlight{
	background:linear-gradient(135deg, #241c12 0%, #171209 100%);
	border-radius:24px; padding:0; overflow:hidden;
	display:grid; grid-template-columns:1fr 1fr; align-items:center;
}
.ash-page .as-calc-copy{padding:52px 48px; color:#f4ede0;}
.ash-page .as-calc-copy h2{color:#fff; font-size:28px; max-width:420px;}
.ash-page .as-calc-copy p{margin-top:14px; color:#c8bfa9; font-size:15px; max-width:420px;}
.ash-page .as-calc-actions{margin-top:28px;}
.ash-page .as-calc-mockframe{padding:40px 48px 40px 0; display:flex; justify-content:center;}
.ash-page .as-calc-device{
	background:#fff; border-radius:16px; width:100%; max-width:320px;
	box-shadow:0 30px 60px rgba(0,0,0,0.45); overflow:hidden;
	border:6px solid #2a2116;
}
.ash-page .as-calc-device-bar{background:#2a2116; height:14px; display:flex; align-items:center; gap:4px; padding:0 8px;}
.ash-page .as-calc-device-dot{width:5px; height:5px; border-radius:50%; background:#665a44;}
.ash-page .as-calc-device-body{padding:16px;}
.ash-page .as-calc-field-label{font-size:9px; font-weight:700; color:var(--as-ink-soft); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px;}
.ash-page .as-calc-field{background:var(--as-paper); border:1px solid var(--as-line); border-radius:6px; padding:7px 9px; font-family:'IBM Plex Mono'; font-size:11px; color:var(--as-ink-soft); margin-bottom:10px;}
.ash-page .as-calc-field-row{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.ash-page .as-calc-roof-row{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:10px 0;}
.ash-page .as-calc-roof-chip{border:1px solid var(--as-line); border-radius:6px; padding:8px 4px; text-align:center;}
.ash-page .as-calc-roof-chip.active{border-color:var(--as-clay); background:var(--as-clay-pale);}
.ash-page .as-calc-roof-chip svg{width:20px; height:14px; margin:0 auto 4px; color:var(--as-ink-soft);}
.ash-page .as-calc-roof-chip span{font-size:8px; color:var(--as-ink-soft);}
.ash-page .as-calc-cta-btn{
	background:var(--as-clay); color:#fff; text-align:center; font-size:11px; font-weight:700;
	padding:9px; border-radius:6px; margin-top:6px;
}

.ash-page .as-why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--as-line); border:1px solid var(--as-line); border-radius:16px; overflow:hidden;}
.ash-page .as-why-card{background:var(--as-panel); padding:30px 22px;}
.ash-page .as-why-icon{width:34px; height:34px; color:var(--as-clay); margin-bottom:16px;}
.ash-page .as-why-card h3{font-size:15.5px; font-weight:700; margin-bottom:8px;}
.ash-page .as-why-card p{font-size:13.5px; color:var(--as-ink-soft);}

.ash-page .as-services{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.ash-page .as-service-card{background:var(--as-panel); border:1px solid var(--as-line); border-radius:16px; overflow:hidden;}
.ash-page .as-service-visual{
	height:120px; display:flex; align-items:center; justify-content:center;
	background:linear-gradient(135deg, var(--as-clay-pale), #efe6da);
}
.ash-page .as-service-visual svg{width:44px; height:44px; color:var(--as-clay);}
.ash-page .as-service-body{padding:18px 20px 22px;}
.ash-page .as-service-body h3{font-size:15px; font-weight:700; margin-bottom:6px;}
.ash-page .as-service-body p{font-size:13px; color:var(--as-ink-soft);}

.ash-page .as-products{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.ash-page .as-product-card{background:var(--as-panel); border:1px solid var(--as-line); border-radius:16px; overflow:hidden;}
.ash-page .as-product-visual{
	height:150px; position:relative; overflow:hidden;
	background:linear-gradient(155deg, var(--pc1,#8a5a3d), var(--pc2,#5c3a26));
}
.ash-page .as-product-visual.has-image{background:var(--as-line);}
.ash-page .as-product-visual img{
	width:100% !important; height:100% !important; max-width:100% !important;
	object-fit:cover !important; object-position:center center !important;
	position:absolute !important; inset:0; top:0 !important; left:0 !important; margin:0 !important;
}
.ash-page .as-product-visual::after{
	content:''; position:absolute; inset:0;
	background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.08) 0 6px, transparent 6px 26px);
}
.ash-page .as-product-visual.has-image::after{display:none;}
.ash-page .as-product-brand{
	position:absolute; top:10px; left:12px; font-family:'IBM Plex Mono'; font-size:10px;
	color:rgba(255,255,255,0.85); letter-spacing:0.05em; text-transform:uppercase; z-index:2;
	text-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.ash-page .as-product-body{padding:16px 18px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.ash-page .as-product-name{font-size:14.5px; font-weight:700;}
.ash-page .as-product-link{font-size:12.5px; font-weight:700; color:var(--as-clay); white-space:nowrap;}
.ash-page .as-products-footer{margin-top:32px; text-align:center;}

.ash-page .as-process{display:grid; grid-template-columns:repeat(3,1fr); gap:28px 24px;}
.ash-page .as-process-step{position:relative; padding-left:52px;}
.ash-page .as-process-num{
	position:absolute; left:0; top:0; width:38px; height:38px; border-radius:50%;
	background:var(--as-ink); color:var(--as-gold); font-family:'IBM Plex Mono'; font-weight:600; font-size:14px;
	display:flex; align-items:center; justify-content:center;
}
.ash-page .as-process-step h3{font-size:15px; font-weight:700; margin-bottom:6px;}
.ash-page .as-process-step p{font-size:13px; color:var(--as-ink-soft);}

.ash-page .as-testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.ash-page .as-testi-card{background:var(--as-panel); border:1px solid var(--as-line); border-radius:16px; padding:24px;}
.ash-page .as-testi-stars{color:var(--as-gold-deep); font-size:13px; letter-spacing:2px; margin-bottom:12px;}
.ash-page .as-testi-quote{font-size:14px; color:var(--as-ink); line-height:1.6;}
.ash-page .as-testi-person{display:flex; align-items:center; gap:10px; margin-top:18px;}
.ash-page .as-testi-avatar{width:36px; height:36px; border-radius:50%; background:var(--as-clay-pale); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; color:var(--as-clay); font-size:13px;}
.ash-page .as-testi-name{font-size:13px; font-weight:700;}
.ash-page .as-testi-role{font-size:11.5px; color:var(--as-ink-soft);}

.ash-page .as-faq{max-width:820px; margin:0 auto;}
.ash-page .as-faq-item{border-bottom:1px solid var(--as-line);}
.ash-page .as-faq-q{
	display:flex !important;
	width:100% !important; text-align:left !important; cursor:pointer;
	padding:20px 4px !important; align-items:center; justify-content:space-between; gap:16px;
	font-family:'Space Grotesk'; font-size:15.5px; font-weight:600; color:var(--as-ink) !important;
}
.ash-page .as-faq-q-icon{flex-shrink:0; width:18px; height:18px; color:var(--as-clay); transition:transform .2s ease;}
.ash-page .as-faq-item.is-open .as-faq-q-icon{transform:rotate(45deg);}
.ash-page .as-faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.ash-page .as-faq-item.is-open .as-faq-a{max-height:260px;}
.ash-page .as-faq-a-inner{padding:0 4px 20px; font-size:14px; color:var(--as-ink-soft); max-width:680px;}

.ash-page .as-final{
	background:var(--as-ink); border-radius:24px; padding:56px 48px;
	display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
	position:relative; overflow:hidden;
}
.ash-page .as-final h2{color:#fff; font-size:28px; max-width:440px;}
.ash-page .as-final p{margin-top:8px; color:#c8bfa9; font-size:14.5px; max-width:420px;}
.ash-page .as-final-actions{display:flex; gap:14px; flex-wrap:wrap;}

.ash-page .as-footer{background:var(--as-ink); color:#c8bfa9; padding:56px 0 28px;}
.ash-page .as-footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.1);}
.ash-page .as-footer-brand{display:flex; align-items:center; margin-bottom:14px;}
.ash-page .as-footer-logo{
	height:34px !important; max-height:34px !important; width:auto !important; max-width:200px !important;
	display:block !important; object-fit:contain;
}
.ash-page .as-footer-desc{font-size:13px; max-width:280px; color:#a89f8a;}
.ash-page .as-footer-col h4{font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:#8f8874; margin-bottom:14px;}
.ash-page .as-footer-col ul li{margin-bottom:10px; font-size:13.5px;}
.ash-page .as-footer-col ul li a:hover{color:#fff;}
.ash-page .as-footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding-top:22px; font-size:12px; color:#8f8874; font-family:'IBM Plex Mono';}

@media (max-width:980px){
	.ash-page .as-nav-links{display:none;}
	.ash-page .as-hero-grid{grid-template-columns:1fr;}
	.ash-page .as-hero h1{font-size:34px;}
	.ash-page .as-trust-inner{grid-template-columns:repeat(2,1fr); row-gap:20px;}
	.ash-page .as-trust-item:nth-child(3){border-left:none;}
	.ash-page .as-calc-spotlight{grid-template-columns:1fr;}
	.ash-page .as-calc-mockframe{padding:0 32px 40px;}
	.ash-page .as-why-grid{grid-template-columns:repeat(2,1fr);}
	.ash-page .as-services{grid-template-columns:repeat(2,1fr);}
	.ash-page .as-products{grid-template-columns:repeat(2,1fr);}
	.ash-page .as-process{grid-template-columns:1fr 1fr;}
	.ash-page .as-testimonials{grid-template-columns:1fr;}
	.ash-page .as-footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
	.ash-page .as-why-grid{grid-template-columns:1fr;}
	.ash-page .as-services{grid-template-columns:1fr;}
	.ash-page .as-products{grid-template-columns:1fr;}
	.ash-page .as-process{grid-template-columns:1fr;}
	.ash-page .as-footer-grid{grid-template-columns:1fr;}
	.ash-page .as-final{flex-direction:column; align-items:flex-start;}
}
.ash-page a:focus-visible, .ash-page button:focus-visible{outline:2px solid var(--as-clay); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ .ash-page{scroll-behavior:auto;} .ash-page *{transition:none !important;} }