/*
Theme Name: ASA Rental Theme
Theme URI: https://asarental.co.id
Author: ASA Rental
Author URI: https://asarental.co.id
Description: Custom theme for PT Anugrah Sarana Abadi (ASA Rental), a heavy equipment rental and construction service company in East Java. Built from the ASA Rental design system and site wireframe.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: asa-rental-theme
*/

/* =========================================================
   DESIGN TOKENS — from ASA Rental Design System
   ========================================================= */
:root{
  /* Navy (primary) */
  --navy-950:#04121F;--navy-900:#071A2C;--navy-800:#0C2540;--navy-700:#123256;--navy-600:#1A4272;--navy-500:#245A96;--navy-400:#3C77B5;
  /* Azure (accent / links) */
  --azure-800:#084F87;--azure-700:#0A64AB;--azure-600:#0C7ACC;--azure-500:#1189E0;--azure-400:#3FA9F0;--azure-300:#7FC7F7;--azure-200:#B9E0FC;--azure-100:#DCEEFB;--azure-50:#F2F8FE;
  /* Neutrals */
  --white:#FFFFFF;--neutral-25:#FAFBFC;--neutral-50:#F4F6F8;--neutral-100:#E9EDF1;--neutral-200:#D6DDE5;--neutral-300:#B7C2CD;--neutral-400:#8B98A6;--neutral-500:#667585;--neutral-600:#4A5766;--neutral-700:#33404E;--neutral-800:#232E3A;--neutral-900:#16202B;
  /* Semantic status */
  --green-600:#177A4B;--green-500:#1D8A54;--green-100:#DFF3E8;
  --amber-700:#8F5A00;--amber-600:#B87400;--amber-100:#FBEED2;
  --red-700:#9E2B23;--red-600:#C0392F;--red-100:#FBE4E1;

  /* Semantic aliases */
  --bg-page:var(--white);
  --bg-panel:var(--neutral-50);
  --bg-subtle:var(--neutral-50);
  --bg-inverse:var(--navy-900);
  --surface-card:var(--white);

  --text-heading:var(--navy-900);
  --text-body:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-subtle:var(--neutral-400);
  --text-on-dark:var(--white);
  --text-on-dark-muted:rgba(255,255,255,.78);
  --text-link:var(--azure-700);
  --text-link-hover:var(--azure-800);

  --border-subtle:var(--neutral-100);
  --border-default:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --border-inverse:rgba(255,255,255,.18);

  --accent:var(--azure-600);
  --accent-hover:var(--azure-700);
  --accent-press:var(--azure-800);
  --accent-soft:var(--azure-50);

  --focus-ring:var(--azure-400);

  --gradient-navy:linear-gradient(160deg,#0C2540 0%,#071A2C 58%,#04121F 100%);
  --gradient-navy-azure:linear-gradient(135deg,#123256 0%,#0A64AB 100%);
  --gradient-hero-scrim:linear-gradient(90deg,rgba(4,18,31,.92) 0%,rgba(7,26,44,.72) 46%,rgba(7,26,44,.28) 100%);
  --gradient-band:linear-gradient(120deg,#071A2C 0%,#123256 52%,#0A64AB 100%);
  --gradient-card-1:linear-gradient(155deg,#0C2540 0%,#123256 52%,#0A64AB 100%);
  --gradient-card-2:linear-gradient(155deg,#123256 0%,#0A64AB 55%,#0C7ACC 100%);
  --gradient-card-3:linear-gradient(155deg,#0A64AB 0%,#0C7ACC 50%,#1189E0 100%);
  --gradient-card-4:linear-gradient(155deg,#0C7ACC 0%,#1189E0 52%,#3FA9F0 100%);
  --wash-top:linear-gradient(180deg,#EDF5FD 0%,#FFFFFF 78%);

  /* Typography */
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Public Sans","Helvetica Neue",Arial,sans-serif;

  --fs-display-1:clamp(40px,4.4vw,64px);
  --fs-display-2:clamp(32px,3.2vw,48px);
  --fs-h1:38px;--fs-h2:30px;--fs-h3:24px;--fs-h4:20px;--fs-h5:17px;
  --fs-body-lg:18px;--fs-body:16px;--fs-body-sm:14px;--fs-caption:13px;--fs-micro:11px;
  --fs-stat:clamp(44px,4vw,60px);

  --lh-tight:1.06;--lh-heading:1.18;--lh-snug:1.35;--lh-body:1.62;--lh-loose:1.75;

  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;

  --ls-display:-0.02em;--ls-heading:-0.01em;--ls-body:0;--ls-eyebrow:.14em;--ls-label:.04em;

  --eyebrow-size:12px;--eyebrow-weight:700;

  /* Spacing */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;--space-11:80px;--space-12:96px;--space-13:128px;
  --gutter-card:24px;--gutter-grid:20px;--section-y:96px;--section-y-tight:64px;
  --container-max:1200px;--container-pad:32px;

  /* Radius */
  --radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:14px;--radius-2xl:20px;--radius-pill:999px;
  --radius-card:6px;--radius-control:4px;
  /* Large inset "panels" (modern-2 reference): rounded blocks sitting a few px in from the viewport edge */
  --radius-panel:28px;--panel-inset:12px;--header-h:82px;

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(7,26,44,.06);
  --shadow-sm:0 1px 3px rgba(7,26,44,.08),0 1px 1px rgba(7,26,44,.04);
  --shadow-md:0 4px 14px rgba(7,26,44,.09);
  --shadow-lg:0 12px 32px rgba(7,26,44,.12);
  --shadow-xl:0 24px 60px rgba(7,26,44,.16);
  --shadow-focus:0 0 0 3px rgba(63,169,240,.42);

  /* Motion */
  --dur-instant:90ms;--dur-fast:140ms;--dur-base:200ms;--dur-slow:320ms;
  --ease-standard:cubic-bezier(.2,0,0,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --lift-hover:translateY(-2px);--press-scale:.985;
}

/* =========================================================
   BASE / RESET
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--text-heading);letter-spacing:var(--ls-heading);line-height:var(--lh-heading);font-weight:var(--fw-bold);margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
button{font:inherit;cursor:pointer;background:none;border:none}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--azure-200);color:var(--navy-900)}
.screen-reader-text{position:absolute;left:-9999px}

/* Guarantee the native [hidden] attribute always hides an element, even
   when a component class on the same element sets its own `display`
   (e.g. `.type-card{display:flex}` would otherwise win the cascade tie). */
[hidden]{display:none!important}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--container-pad)}
.section{padding-top:0;padding-bottom:var(--section-y);scroll-margin-top:96px}
.section--tight{padding-top:0;padding-bottom:var(--section-y-tight)}
.section--subtle{background:var(--bg-subtle)}
/* Give content breathing room whenever the background color actually
   changes from the previous section, in either direction — otherwise
   headings sit flush against the color-change line. */
.section:not(.section--subtle)+.section--subtle{padding-top:var(--space-7)}
/* Pages whose content starts directly with a plain section (no hero/banner
   above it — Tentang Kami, Pusat Bantuan, FAQ, Semua Alat Berat, per-jenis
   Alat Berat, Blog, Minta Penawaran) need their own top padding, since
   nothing else pushes them down from the sticky header. Matched by
   :first-of-type (not :first-child) so an admin-only notice block that
   sometimes precedes it doesn't defeat the selector. Pages that start with
   .hero/.jasa-hero are unaffected — that element claims the "first section
   tag" slot instead. */
.site-main>section.section:first-of-type,
.site-main>article.section:first-of-type{padding-top:var(--space-9)}
.section--subtle+.section:not(.section--subtle){padding-top:var(--space-7)}

.eyebrow{display:inline-flex;align-items:center;gap:7px;width:max-content;max-width:100%;padding:7px 13px 7px 11px;border-radius:var(--radius-pill);background:var(--white);border:1px solid var(--border-subtle);box-shadow:var(--shadow-xs);font:var(--fw-semibold) 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--azure-700);margin-bottom:var(--space-3)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--azure-500);flex:0 0 auto}
.eyebrow:has(.icon)::before{display:none}
.eyebrow .icon{color:var(--azure-600)}
.eyebrow--on-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);box-shadow:none;color:var(--azure-300)}
.text-accent{color:var(--azure-600)}

.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-7);flex-wrap:wrap;margin-bottom:var(--space-9)}
.section-heading__text{max-width:680px}
.section-heading__title{font-size:var(--fs-h2)}
.section-heading__lede{margin-top:var(--space-3);font-size:var(--fs-body-lg);color:var(--text-muted)}
.section-heading__action{flex:0 0 auto}

/* Icons — lucide icons rendered as CSS masks (see inc/icon helper) */
.icon{display:inline-block;flex:0 0 auto;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;vertical-align:middle}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:42px;padding:0 20px;border-radius:var(--radius-lg);font:var(--fw-semibold) 14px/1 var(--font-body);letter-spacing:var(--ls-label);border:1px solid transparent;white-space:nowrap;transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-standard),color var(--dur-fast) var(--ease-standard);text-decoration:none}
.btn:active{transform:scale(var(--press-scale))}
.btn--lg{height:50px;padding:0 28px;font-size:15px;gap:var(--space-3)}
.btn--sm{height:34px;padding:0 14px;font-size:13px}
.btn--primary{background:var(--accent);color:var(--white);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--accent-hover);color:var(--white)}
.btn--secondary{background:var(--navy-800);color:var(--white);box-shadow:var(--shadow-sm)}
.btn--secondary:hover{background:var(--navy-700);color:var(--white)}
.btn--outline{background:transparent;color:var(--navy-800);border-color:var(--border-strong)}
.btn--outline:hover{background:var(--neutral-50);color:var(--navy-800)}
.btn--ghost{background:transparent;color:var(--text-link)}
.btn--ghost:hover{background:var(--accent-soft)}
.btn--white{background:var(--white);color:var(--navy-900);border-color:var(--border-subtle);box-shadow:var(--shadow-sm)}
.btn--white:hover{background:var(--neutral-50);color:var(--navy-900)}
.btn--on-dark-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.btn--on-dark-outline:hover{background:rgba(255,255,255,.12);color:var(--white)}
.btn--full{width:100%}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-control);border:1px solid var(--border-default);background:var(--white);color:var(--navy-800);transition:background var(--dur-fast) var(--ease-standard)}
.icon-btn:hover{background:var(--neutral-50)}
.icon-btn--plain{border-color:transparent;background:transparent;border-radius:50%}
.icon-btn--circle{border-radius:50%;border-color:var(--border-default);background:var(--white)}
.icon-btn--circle:hover{background:var(--neutral-50);border-color:var(--border-strong)}
.icon-btn--plain:hover{background:rgba(7,26,44,.06)}

/* Tag / chip */
.tag{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:var(--white);color:var(--text-muted);font:var(--fw-medium) var(--fs-caption)/1.2 var(--font-body)}

/* =========================================================
   SITE HEADER
   ========================================================= */
.site-header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--border-subtle);transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);overflow-anchor:none}
.site-header.is-scrolled{box-shadow:var(--shadow-sm);border-bottom-color:transparent}
.site-header.is-hidden{transform:translateY(-100%)}
/* Beranda: the header sits inside the hero panel (see .hero margin-top) until the page scrolls */
.home .site-header:not(.is-scrolled){background:transparent;border-bottom-color:transparent}
@media (min-width:1001px){
  .home .site-header:not(.is-scrolled) .main-nav{padding:4px;border-radius:var(--radius-pill);background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-xs)}
}

.site-header__inner{display:flex;align-items:center;gap:var(--space-7);height:var(--header-h);transition:height var(--dur-base) var(--ease-standard)}
.site-header.is-scrolled .site-header__inner{height:66px}

.site-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
/* The mark has a pointed roof and base, so it runs a little taller than the two text lines to look the same size. */
.site-logo__mark{width:auto;height:46px}
.site-logo__text{display:flex;flex-direction:column;gap:6px}
/* Wordmark image (logo-text.png or its Foto Website replacement), sized to end where the tagline does. */
.site-logo__word{display:block;width:220px;height:auto}
.site-logo__tagline{font:var(--fw-medium) 9px/1 var(--font-body);letter-spacing:.017em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
/* In the header it would push the burger off-screen on phones; the footer has room.
   With the tagline gone there is nothing to align to, so the wordmark tightens up. */
@media (max-width:560px){
  .site-header .site-logo__tagline{display:none}
  .site-header .site-logo__word{width:173px}
}

.main-nav{margin-inline:auto;display:flex;align-items:center}
.main-nav ul{display:flex;align-items:center;gap:2px}
.main-nav li{position:relative}
.main-nav a{display:block;padding:10px 14px;border-radius:var(--radius-pill);font:var(--fw-medium) var(--fs-body-sm)/1 var(--font-body);color:var(--text-body);white-space:nowrap}
@media (max-width:1280px){
  .site-header__inner{gap:var(--space-5)}
  .main-nav>ul>li>a{padding-inline:10px}
  .site-logo__tagline{display:none}
  /* no tagline to line up with; a little narrower leaves the menu room */
  .site-logo__word{width:216px}
  .site-logo__mark,.site-footer .site-footer__logo>img{height:38px}
}
.main-nav a:hover,.main-nav .current-menu-item>a{color:var(--navy-900);background:rgba(7,26,44,.06)}
.header-cta{border-radius:var(--radius-pill);padding:0 16px 0 18px;height:40px}

.main-nav .menu-item-has-children>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.main-nav .sub-menu{display:none;position:absolute;top:100%;left:-16px;min-width:220px;z-index:20;background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:6px;gap:0}
.main-nav .sub-menu li{width:100%}
.main-nav .sub-menu a{padding:9px 12px;border-radius:var(--radius-sm);border-bottom:none;font-size:var(--fs-caption);color:var(--text-body)}
.main-nav .sub-menu a:hover{background:var(--accent-soft);color:var(--accent-hover)}
.main-nav .sub-menu li:last-child a{font-weight:var(--fw-semibold);color:var(--accent)}
.main-nav li:hover>.sub-menu,.main-nav li:focus-within>.sub-menu{display:block}

.header-cta{flex:0 0 auto}
.nav-toggle{display:none;flex:0 0 auto;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--border-default);border-radius:var(--radius-control);margin-left:auto}
.nav-toggle .icon{color:var(--navy-900)}

@media (max-width: 1100px){
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-md);flex-direction:column;align-items:stretch;padding:var(--space-4) var(--container-pad);gap:0}
  .main-nav.is-open{display:flex}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .main-nav li{width:100%}
  .main-nav a{padding:12px 0;border-radius:0;border-bottom:1px solid var(--border-subtle)}
  .main-nav a:hover,.main-nav .current-menu-item>a{background:none;color:var(--azure-700)}
  .home .site-header:has(.main-nav.is-open){background:var(--white)}
  .main-nav .sub-menu{position:static;border:none;box-shadow:none;padding:0 0 0 var(--space-4);min-width:0}
  .header-cta{display:none}
  .nav-toggle{display:inline-flex}
  /* open menu: page dimmed and locked behind it; long menus scroll inside */
  .main-nav.is-open{max-height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;border-radius:0 0 20px 20px}
  .nav-backdrop{position:fixed;inset:0;z-index:99;background:rgba(7,26,44,.55);opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base) var(--ease-standard)}
  .nav-backdrop.is-visible{opacity:1;visibility:visible}
  html.nav-locked,html.nav-locked body{overflow:hidden}
}
.nav-backdrop{display:none}
@media (max-width:1100px){ .nav-backdrop{display:block} }

/* =========================================================
   HERO (02)
   ========================================================= */
/* Beranda building blocks: full-width sections that flow, no inset boxes */
.b-section{padding-block:var(--space-10);scroll-margin-top:96px}
.b-section--cta{padding-top:0}
.b-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;margin-bottom:var(--space-8)}
.b-title{margin-top:var(--space-2);max-width:640px;font:var(--fw-semibold) clamp(30px,3vw,42px)/1.12 var(--font-display);letter-spacing:-.025em;color:var(--navy-900)}
.b-title--lg{font-size:clamp(34px,3.6vw,50px);line-height:1.06}
.b-sub{margin-top:var(--space-4);max-width:520px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-muted)}
.b-nav{display:flex;gap:4px;flex:0 0 auto}
.b-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-8)}
.b-link{display:inline-flex;align-items:center;gap:8px;font:var(--fw-semibold) var(--fs-body-sm)/1 var(--font-body);color:var(--navy-900)}
.b-link .icon{transition:transform var(--dur-fast) var(--ease-standard)}
.b-link:hover{color:var(--azure-700)}
.b-link:hover .icon{transform:translateX(3px)}
.b-empty{color:var(--text-muted)}
/* Inner-page header panel (first block under the sticky header) */
/* Inner-page opening block — a soft wash instead of a boxed panel */
.page-top{padding-block:var(--space-10);background:var(--wash-top)}
.page-top.equip-intro,.page-top.mp-panel,.page-top.article-head{padding-block:var(--space-10)}

/* Gradient band — a full-width blue section that breaks up the white flow */
.b-band{padding-block:var(--space-11);background:var(--gradient-band);color:var(--white)}
.page-top--grad{background:var(--gradient-band);color:var(--white)}
:is(.b-band,.page-top--grad,.jasa-hero) .b-title,:is(.b-band,.page-top--grad,.jasa-hero) .b-highlight__title,:is(.b-band,.page-top--grad,.jasa-hero) h3,:is(.b-band,.page-top--grad,.jasa-hero) h4{color:var(--white)}
:is(.b-band,.page-top--grad,.jasa-hero) .b-sub,:is(.b-band,.page-top--grad,.jasa-hero) .b-empty{color:rgba(255,255,255,.72)}
:is(.b-band,.page-top--grad,.jasa-hero) .text-accent{color:var(--azure-300)}
:is(.b-band,.page-top--grad,.jasa-hero) .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);box-shadow:none;color:var(--azure-200)}
:is(.b-band,.page-top--grad,.jasa-hero) .eyebrow::before{background:var(--azure-300)}
:is(.b-band,.page-top--grad,.jasa-hero) .eyebrow .icon{color:var(--azure-200)}
:is(.b-band,.page-top--grad,.jasa-hero) .b-link{color:var(--white)}
:is(.b-band,.page-top--grad,.jasa-hero) .b-link:hover{color:var(--azure-200)}
:is(.b-band,.page-top--grad,.jasa-hero) .icon-btn--plain,:is(.b-band,.page-top--grad,.jasa-hero) .icon-btn--circle{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:var(--white)}
:is(.b-band,.page-top--grad,.jasa-hero) .icon-btn--plain:hover,:is(.b-band,.page-top--grad,.jasa-hero) .icon-btn--circle:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.38)}
/* project cards riding on a band */
:is(.b-band,.page-top--grad,.jasa-hero) .project-card__title{color:var(--white)}
:is(.b-band,.page-top--grad,.jasa-hero) .project-card__meta{border-bottom-color:rgba(255,255,255,.18)}
:is(.b-band,.page-top--grad,.jasa-hero) .project-card__meta span:first-child{color:rgba(255,255,255,.55)}
:is(.b-band,.page-top--grad,.jasa-hero) .project-card__meta span:last-child{color:rgba(255,255,255,.88)}
:is(.b-band,.page-top--grad,.jasa-hero) .project-card__photo{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
:is(.b-band,.page-top--grad,.jasa-hero) .proyek-slider__track,:is(.b-band,.page-top--grad,.jasa-hero) .jasa-projects__track{background:rgba(255,255,255,.18)}
:is(.b-band,.page-top--grad,.jasa-hero) .proyek-slider__thumb,:is(.b-band,.page-top--grad,.jasa-hero) .jasa-projects__thumb{background:var(--azure-300)}
/* glass cards inside a band */
:is(.b-band,.page-top--grad,.jasa-hero) .b-highlight,:is(.b-band,.page-top--grad,.jasa-hero) .about-visi{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
:is(.b-band,.page-top--grad,.jasa-hero) .about-misi{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2)}
:is(.b-band,.page-top--grad,.jasa-hero) .b-highlight__text,:is(.b-band,.page-top--grad,.jasa-hero) .about-visi p,:is(.b-band,.page-top--grad,.jasa-hero) .about-misi li{color:rgba(255,255,255,.76)}
:is(.b-band,.page-top--grad,.jasa-hero) .about-misi li::before{background:var(--white);color:var(--navy-900)}
:is(.b-band,.page-top--grad,.jasa-hero) .about-vm h3{color:var(--white)}
:is(.b-band,.page-top--grad,.jasa-hero) .about-vm__icon{background:rgba(255,255,255,.16);color:var(--white)}
:is(.b-band,.page-top--grad,.jasa-hero) .about-misi .about-vm__icon{background:rgba(255,255,255,.22)}
.b-section--after-top{padding-top:var(--space-9)}
.page-hero{padding-block:var(--space-10)}
.page-hero__grid{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}
.page-hero__title{margin-top:var(--space-3);max-width:720px;font:var(--fw-semibold) clamp(36px,4vw,56px)/1.05 var(--font-display);letter-spacing:-.03em;color:var(--navy-900)}
.page-hero__lede{margin-top:var(--space-5);max-width:520px;font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-muted)}
/* Two "what you get" cards on the Alat Berat pages: big icon left, text right */
.hero-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:560px;margin-top:var(--space-8)}
.hero-duo__item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5);border-radius:16px;background:var(--white);border:1px solid var(--border-subtle)}
.hero-duo__icon{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--azure-50);color:var(--azure-700);display:flex;align-items:center;justify-content:center}
.hero-duo__text strong{display:block;font:var(--fw-semibold) 15px/1.3 var(--font-display);color:var(--navy-900)}
.hero-duo__text small{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:var(--text-muted)}
/* the opening gradient block on the Alat Berat & Material pages */
:is(.b-band,.page-top--grad,.jasa-hero) .page-hero__title{color:var(--white)}
:is(.b-band,.page-top--grad,.jasa-hero) .page-hero__lede{color:rgba(255,255,255,.75)}
:is(.b-band,.page-top--grad,.jasa-hero) .hero-duo__item{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
:is(.b-band,.page-top--grad,.jasa-hero) .hero-duo__icon{background:rgba(255,255,255,.14);color:var(--white)}
:is(.b-band,.page-top--grad,.jasa-hero) .hero-duo__text strong{color:var(--white)}
:is(.b-band,.page-top--grad,.jasa-hero) .hero-duo__text small{color:rgba(255,255,255,.7)}
.page-top--grad .equip-intro__photo{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.page-top--grad .equip-intro__photo::before{opacity:0}
.page-top--grad .equip-intro__photo.has-img{background:var(--white);border-color:rgba(255,255,255,.22)}
.page-top--grad .equip-intro__photo-label{color:rgba(255,255,255,.6)}

@media (max-width:900px){ .hero-duo{max-width:none} }
@media (max-width:560px){ .hero-duo{grid-template-columns:minmax(0,1fr)} }
.site-footer{margin-top:var(--panel-inset)}

/* =========================================================
   HERO (02) — light split panel: copy left, photo fading in from the right,
   floating info cards over the photo. The header is transparent on Beranda
   and the panel is pulled up underneath it so the nav reads as part of it.
   ========================================================= */
.hero{position:relative;overflow:hidden;background:var(--bg-panel);margin-top:calc(-1 * var(--header-h) - 1px);padding:calc(var(--header-h) + var(--space-10)) 0 var(--space-10);min-height:720px;display:flex;align-items:center}
.hero__grid{position:relative;z-index:2;width:100%}
.hero__copy{max-width:540px}

.hero__visual{position:absolute;top:0;right:0;bottom:0;width:58%;background:var(--gradient-navy-azure);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%);mask-image:linear-gradient(90deg,transparent 0,#000 42%);display:flex;align-items:flex-end;justify-content:center;padding:0 0 var(--space-8) 20%}
.hero__visual::before{content:"";position:absolute;inset:0;opacity:.09;background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 14px)}
.hero__visual-label{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);color:rgba(255,255,255,.6);font:var(--fw-semibold) 11px/1.4 var(--font-body);letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
/* real photos: stacked, the active slide's photo fades in */
.hero__visual.has-photos::before{display:none}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);opacity:0;transition:opacity 900ms var(--ease-standard)}
.hero__photo.is-active{opacity:1}
@media (prefers-reduced-motion:reduce){ .hero__photo{transition:none} }

.hero__slides{display:grid}
.hero__slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity var(--dur-slow) var(--ease-standard),visibility var(--dur-slow)}
.hero__slide.is-active{opacity:1;visibility:visible}
.hero__title{margin-top:var(--space-3);font:var(--fw-semibold) clamp(40px,4.4vw,62px)/1.04 var(--font-display);letter-spacing:-.03em;color:var(--navy-900)}
.hero__lede{margin-top:var(--space-5);max-width:470px;font:var(--fw-regular) var(--fs-body-lg)/var(--lh-body) var(--font-body);color:var(--text-muted)}
.hero__actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-7)}

.hero__meta{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;margin-top:var(--space-7)}
.hero__dots{display:flex;gap:6px}
.hero__dots button{width:8px;height:8px;padding:0;border-radius:var(--radius-pill);background:var(--neutral-300);transition:width var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard)}
.hero__dots button.is-active{width:24px;background:var(--azure-600)}
.hero__area{display:inline-flex;align-items:center;gap:var(--space-3);font-size:var(--fs-caption);color:var(--text-muted)}
.hero__area-icon{width:30px;height:30px;border-radius:50%;background:var(--white);box-shadow:var(--shadow-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--azure-600)}


/* Three highlight cards under the hero copy (they used to float over the photo) */
.hero__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:var(--space-9)}
.hero-float{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-5) var(--space-4);border-radius:16px;background:rgba(255,255,255,.72);border:1px solid var(--border-subtle);color:var(--text-body);text-decoration:none;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard)}
a.hero-float:hover{transform:translateY(-2px);background:var(--white);box-shadow:var(--shadow-md);color:var(--text-body)}
.hero-float__thumb{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--gradient-navy);color:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center}
.hero-float__thumb--azure{background:var(--gradient-navy-azure)}
.hero-float__text strong{display:block;font:var(--fw-semibold) 13px/1.3 var(--font-display);color:var(--navy-900)}
.hero-float__text small{display:block;margin-top:4px;font-size:11px;line-height:1.45;color:var(--text-muted)}

@media (max-width:1100px){
  .hero__visual{width:50%}
}
@media (max-width:900px){
  /* Phone: the photo can no longer sit beside the copy, so it becomes the
     hero background — visible at the top, fading into the light panel where
     the text starts. Same idea as the desktop fade, rotated 90 degrees. */
  .hero{display:block;min-height:0;padding:calc(var(--header-h) + 296px) 0 var(--space-8)}
  .hero__visual{top:var(--header-h);right:0;left:0;bottom:auto;width:auto;height:320px;padding:var(--space-5) var(--container-pad) 0;align-items:flex-start;justify-content:flex-start;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 56%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 56%,transparent 100%)}
  /* the logo and burger sit over the photo, so the bar itself stays light */
  .home .site-header:not(.is-scrolled){background:var(--white);border-bottom-color:var(--border-subtle)}
  .hero__copy{max-width:none}
  .hero__photo{object-position:var(--pos-sm,var(--pos,center))}
  .hero__title{font-size:clamp(30px,7.4vw,40px)}
}
@media (max-width:760px){
  .hero__cards{grid-template-columns:minmax(0,1fr)}
  .hero-float{flex-direction:row;align-items:center}
}

/* =========================================================
   KATEGORI ALAT (03)
   ========================================================= */
.categories__scroller{display:flex;gap:var(--gutter-grid);overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px var(--space-4);scrollbar-width:none}
.categories__scroller::-webkit-scrollbar{display:none}
.category-item{flex:0 0 250px;scroll-snap-align:start;text-decoration:none;color:inherit}
.category-item__thumb{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--gradient-navy);color:rgba(255,255,255,.6);transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.category-item:nth-child(3n+2) .category-item__thumb{background:var(--gradient-navy-azure)}
.category-item__thumb::before{content:"";position:absolute;inset:0;opacity:.08;background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 14px)}
.category-item:hover .category-item__thumb{transform:var(--lift-hover);box-shadow:var(--shadow-lg)}
.category-item__thumb--all::before{display:none}
.category-item.category-item--all .category-item__thumb--all{flex-direction:column;gap:var(--space-4);background:var(--white);border:1px solid var(--border-subtle);color:var(--navy-900)}
.category-item__all-icon{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;background:var(--gradient-card-2);color:var(--white);box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-standard)}
.category-item:hover .category-item__all-icon{transform:translateX(4px)}
.category-item__all-text{font:var(--fw-semibold) 12px/1.3 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.category-item__label{display:block;margin-top:var(--space-4);font:var(--fw-semibold) 18px/1.25 var(--font-display);letter-spacing:-.01em;color:var(--navy-900)}
.category-item__more{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-2);font:var(--fw-medium) var(--fs-caption)/1 var(--font-body);color:var(--text-muted);transition:color var(--dur-fast) var(--ease-standard)}
.category-item:hover .category-item__more{color:var(--azure-700)}
.categories__track{height:4px;background:var(--border-subtle);border-radius:2px;margin-top:var(--space-5);position:relative;overflow:hidden}
.categories__thumb{position:absolute;left:0;top:0;height:100%;background:var(--azure-500);border-radius:2px;width:40%}

/* =========================================================
   JASA KONSTRUKSI (04)
   ========================================================= */
.b-mission{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:var(--space-9);align-items:center}
.b-mission__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3/4.4;padding:var(--space-5);border-radius:20px;overflow:hidden;background:var(--gradient-navy);color:var(--white);text-decoration:none;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.svc-card:nth-child(2){background:var(--gradient-navy-azure)}
.svc-card::before{content:"";position:absolute;inset:0;opacity:.08;background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 14px)}
.svc-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(4,18,31,.78) 100%)}
.svc-card>*{position:relative;z-index:1}
.svc-card>img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.svc-card.has-photo::before{content:none}
.svc-card:hover{transform:var(--lift-hover);box-shadow:var(--shadow-lg);color:var(--white)}
.svc-card__icon{width:44px;height:44px;margin-bottom:var(--space-4);border-radius:50%;background:rgba(255,255,255,.95);color:var(--navy-800);display:flex;align-items:center;justify-content:center}
.svc-card__title{font:var(--fw-semibold) 19px/1.2 var(--font-display);letter-spacing:-.01em}
.svc-card__desc{margin-top:var(--space-2);font-size:13px;line-height:1.5;color:rgba(255,255,255,.75)}

@media (max-width:980px){
  .b-mission{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
}
@media (max-width:600px){
  .b-mission__cards{grid-template-columns:1fr}
  .svc-card{aspect-ratio:16/10}
}


/* Jasa Konstruksi on Beranda — gradient panel: photo box left, text right */
.jasa-show{position:relative;border-radius:28px;overflow:hidden;background:var(--gradient-band);padding:var(--space-9)}
.jasa-show__slides{display:grid}
.jasa-show__slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:var(--space-9);align-items:center;opacity:0;visibility:hidden;transition:opacity var(--dur-slow) var(--ease-standard),visibility var(--dur-slow)}
.jasa-show__slide.is-active{opacity:1;visibility:visible}
.jasa-show__side{display:flex;flex-direction:column;gap:var(--space-4)}
.jasa-show__media{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.jasa-show__media img{width:100%;height:100%;object-fit:cover}
.jasa-show__label{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-2);color:rgba(255,255,255,.4);font:var(--fw-semibold) 11px/1.4 var(--font-body);letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
.jasa-show__count{position:absolute;left:var(--space-6);bottom:var(--space-5);display:flex;align-items:baseline;gap:7px;font:var(--fw-extrabold) 32px/1 var(--font-display);color:var(--white);text-shadow:0 2px 12px rgba(4,18,31,.45)}
.jasa-show__count i{font:var(--fw-semibold) 13px/1 var(--font-body);font-style:normal;color:rgba(255,255,255,.6)}
.jasa-show__body{display:flex;flex-direction:column;padding:var(--space-2) 0 var(--space-7)}
.jasa-show__kicker{display:inline-flex;align-items:center;gap:7px;width:max-content;padding:7px 14px;border-radius:var(--radius-pill);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font:var(--fw-semibold) 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--azure-200)}
.jasa-show__kicker .icon{color:var(--azure-200)}
.jasa-show__title{margin-top:var(--space-5);max-width:calc(100% - 110px);font:var(--fw-semibold) clamp(24px,2.3vw,32px)/1.15 var(--font-display);letter-spacing:-.025em;color:var(--white)}
.jasa-show__desc{margin-top:var(--space-5);font-size:var(--fs-body);line-height:var(--lh-body);color:rgba(255,255,255,.8)}
.jasa-show__note{padding:var(--space-5) var(--space-6);border-radius:18px;background:var(--white);box-shadow:var(--shadow-md)}
.jasa-show__note-title{display:block;margin-bottom:var(--space-3);font:var(--fw-semibold) 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--azure-700)}
.jasa-show__note ul{display:flex;flex-direction:column;gap:var(--space-2)}
.jasa-show__note li{display:flex;gap:10px;font-size:var(--fs-body-sm);line-height:1.45;color:var(--navy-900)}
.jasa-show__note .icon{flex:0 0 auto;margin-top:3px;color:var(--azure-600)}
.jasa-show__scope-title{display:block;margin-top:var(--space-7);font:var(--fw-semibold) 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.jasa-show__scope{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-4)}
.jasa-show__scope li{padding:7px 14px;border-radius:var(--radius-pill);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font:var(--fw-medium) 12px/1.3 var(--font-body);color:rgba(255,255,255,.88)}
.jasa-show__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-7)}
.jasa-show__nav{position:absolute;z-index:3;top:var(--space-9);right:var(--space-9);display:flex;gap:var(--space-2)}
.jasa-show__nav .icon-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:var(--white)}
.jasa-show__nav .icon-btn:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.4)}
.jasa-show__dots{position:absolute;z-index:3;right:var(--space-9);bottom:var(--space-9);display:flex;gap:8px}
.jasa-show__dots button{width:26px;height:4px;padding:0;border-radius:2px;background:rgba(255,255,255,.3);transition:width var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard)}
.jasa-show__dots button.is-active{width:44px;background:var(--white)}

@media (max-width:900px){
  .jasa-show{padding:var(--space-7)}
  .jasa-show__slide{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .jasa-show__media{aspect-ratio:16/9}
  .jasa-show__side{gap:var(--space-3)}
  .jasa-show__body{padding-bottom:var(--space-9)}
  .jasa-show__title{max-width:none}
  .jasa-show__nav{top:auto;bottom:var(--space-6);left:var(--space-7);right:auto}
  .jasa-show__dots{right:var(--space-7);bottom:calc(var(--space-6) + 18px)}
  /* keep the slide content clear of that row */
  .jasa-show__body{padding-bottom:calc(var(--space-6) + 56px)}
}
@media (max-width:560px){
  .jasa-show__media{aspect-ratio:4/3}
  .jasa-show__dots{gap:5px}
  .jasa-show__dots button{width:11px}
  .jasa-show__dots button.is-active{width:22px}
  .jasa-show__count{font-size:26px}
  .jasa-show__actions .btn{width:100%;justify-content:center}
}

/* Keunggulan (05b) — four gradient cards, content anchored to the bottom */
.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.why-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-10);min-height:300px;padding:var(--space-7) var(--space-6) var(--space-7);border-radius:24px;overflow:hidden;color:var(--white);transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.why-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 100% 0%,rgba(255,255,255,.18),transparent 58%)}
.why-card--1{background:var(--gradient-card-1)}
.why-card--2{background:var(--gradient-card-2)}
.why-card--3{background:var(--gradient-card-3)}
.why-card--4{background:var(--gradient-card-4)}
.why-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.why-card__top{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}
.why-card__icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);color:var(--white);transition:transform var(--dur-base) var(--ease-standard)}
.why-card:hover .why-card__icon{transform:scale(1.06)}
.why-card__num{font:var(--fw-extrabold) 40px/1 var(--font-display);letter-spacing:-.02em;color:rgba(255,255,255,.22)}
.why-card__body{position:relative;z-index:1;display:block}
.why-card__title{display:block;font:var(--fw-semibold) 19px/1.25 var(--font-display);letter-spacing:-.015em;color:var(--white)}
.why-card__title::after{content:"";display:block;width:34px;height:2px;margin:var(--space-4) 0;border-radius:2px;background:rgba(255,255,255,.45)}
.why-card__desc{display:block;font-size:var(--fs-body-sm);line-height:var(--lh-body);color:rgba(255,255,255,.78)}

@media (max-width:1100px){ .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .why-grid{grid-template-columns:minmax(0,1fr)} .why-card{min-height:0;gap:var(--space-8)} }

/* =========================================================
   BUKTI PROYEK (05)
   ========================================================= */
.projects__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter-grid);row-gap:var(--space-9)}

/* Beranda: cards on the left, heading + highlight card in a side column */
.b-projects{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:var(--space-10);align-items:start}
.b-projects .proyek-slider__item{flex-basis:calc((100% - var(--gutter-grid))/2)}
.b-projects__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.b-projects__top .eyebrow{margin-bottom:0}
.b-projects__side .b-title{margin-top:var(--space-5)}
.b-projects__side .b-link{margin-top:var(--space-6)}
.b-highlight{margin-top:var(--space-8);padding:var(--space-7);border-radius:20px;background:var(--azure-100)}
.b-highlight__title{font:var(--fw-semibold) 22px/1.2 var(--font-display);letter-spacing:-.01em;color:var(--navy-900)}
.b-highlight__text{margin-top:var(--space-3);font-size:var(--fs-body-sm);color:var(--navy-700)}
.b-highlight .btn{margin-top:var(--space-5)}

@media (max-width:980px){
  .b-projects{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .b-projects__side{order:-1}
}
@media (max-width:600px){ .b-projects .proyek-slider__item{flex-basis:85%} }

/* Beranda proyek slider — same card, horizontal-scroll instead of a fixed grid */
.proyek-slider__scroller{display:flex;gap:var(--gutter-grid);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
.proyek-slider__scroller::-webkit-scrollbar{display:none}
.proyek-slider__item{flex:0 0 calc((100% - 2*var(--gutter-grid))/3);scroll-snap-align:start}
.proyek-slider__track{height:4px;background:var(--border-subtle);border-radius:2px;margin-top:var(--space-4);position:relative;overflow:hidden}
.proyek-slider__thumb{position:absolute;left:0;top:0;height:100%;background:var(--azure-500);border-radius:2px;width:40%}

@media (max-width:900px){ .proyek-slider__item{flex-basis:calc((100% - var(--gutter-grid))/2)} }
@media (max-width:600px){ .proyek-slider__item{flex-basis:85%} }
.project-card__photo{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--gradient-navy);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font:var(--fw-semibold) 10px/1.3 var(--font-body);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;text-align:center;padding:var(--space-3);transition:box-shadow var(--dur-base) var(--ease-standard)}
.project-card:hover .project-card__photo{box-shadow:var(--shadow-lg)}
.project-card__photo img{position:absolute;inset:0}
.project-card__tag{position:absolute;left:var(--space-3);bottom:var(--space-3);z-index:1;padding:7px 12px;border-radius:var(--radius-pill);background:rgba(255,255,255,.92);color:var(--navy-900);font:var(--fw-medium) 12px/1 var(--font-body);letter-spacing:0;text-transform:none}
.project-card__body{padding:var(--space-4) 2px 0}
.project-card__title{display:block;font:var(--fw-semibold) 18px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--navy-900);margin-bottom:var(--space-3)}
.project-card__meta{display:flex;justify-content:space-between;padding:var(--space-2) 0;border-bottom:1px dashed var(--border-default);font-size:var(--fs-caption);color:var(--text-muted)}
.project-card__meta:last-child{border-bottom:0}
.project-card__meta span:first-child{color:var(--text-subtle)}
/* Several photos: a strip that main.js slides one photo-width at a time */
.project-card__slides{position:absolute;inset:0;display:flex;transition:transform .7s var(--ease-standard)}
.project-card__slides img{position:static;flex:0 0 100%;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){ .project-card__slides{transition:none} }

@media (max-width:820px){ .projects__grid{grid-template-columns:1fr} }

/* =========================================================
   PETA JANGKAUAN (06)
   ========================================================= */
.b-coverage{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-10);align-items:center}
.coverage__map{position:relative;min-height:400px;border-radius:20px;background:var(--gradient-navy);display:flex;align-items:center;justify-content:center;overflow:hidden}
.coverage__map::before{content:"";position:absolute;inset:0;opacity:.1;background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 14px)}
.coverage__map-label{position:relative;color:rgba(255,255,255,.6);font:var(--fw-semibold) 11px/1.5 var(--font-body);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;text-align:center;max-width:220px;display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
/* service-area map (Leaflet): fills the frame once the tiles are in */
.coverage__leaflet{position:absolute;inset:0;z-index:1;background:transparent;font:inherit}
.coverage__map.is-ready::before,.coverage__map.is-ready .coverage__map-label{display:none}
.coverage__map.is-ready{background:#dfe8f1}
.coverage__leaflet .leaflet-tile-pane{filter:saturate(.35) brightness(1.04) contrast(.95)}
.coverage__leaflet .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.75)}
.coverage__leaflet .leaflet-control-zoom a{color:var(--navy-900)}
.map-dot{width:14px;height:14px;border-radius:50%;background:var(--azure-600);border:3px solid var(--white);box-shadow:0 0 0 4px rgba(12,122,204,.25),0 2px 6px rgba(7,26,44,.35)}
.map-office{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--navy-900);border:3px solid var(--white);box-shadow:0 4px 12px rgba(7,26,44,.45)}
.map-office span{width:10px;height:10px;border-radius:50%;background:var(--white)}
.coverage__leaflet .leaflet-tooltip.map-label{padding:3px 8px;border:0;border-radius:var(--radius-pill);background:var(--white);box-shadow:0 2px 8px rgba(7,26,44,.18);font:var(--fw-semibold) 11px/1.3 var(--font-body);color:var(--navy-900)}
.coverage__leaflet .leaflet-tooltip.map-label::before{display:none}
.coverage__leaflet .leaflet-tooltip.map-label--office{background:var(--navy-900);color:var(--white)}
.coverage__chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-7)}
.coverage__chips li{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--radius-pill);background:var(--white);border:1px solid var(--border-subtle);font:var(--fw-medium) var(--fs-body-sm)/1 var(--font-body);color:var(--text-body)}
.coverage__chips li .icon{color:var(--azure-600)}
.coverage__note{margin-top:var(--space-5);font-size:var(--fs-caption);color:var(--text-subtle)}

@media (max-width:900px){
  .b-coverage{grid-template-columns:1fr;gap:var(--space-8)}
  .coverage__map{min-height:260px;order:2}
}

/* =========================================================
   BERITA (07) — mosaic
   ========================================================= */
.news-mosaic{display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-auto-rows:minmax(170px,auto);gap:14px}
.news-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-6);border-radius:20px;overflow:hidden;color:var(--white);text-decoration:none;background:var(--navy-700);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.news-tile:hover{box-shadow:var(--shadow-lg);transform:var(--lift-hover);color:var(--white)}
.news-tile--featured{grid-row:span 2;min-height:320px;background:var(--azure-700)}
.news-tile--a{background:var(--navy-700)}
.news-tile--b{background:var(--navy-800)}
.news-tile--c{background:var(--azure-800)}
.news-tile--d{background:var(--navy-600)}
.news-tile__date{position:absolute;top:var(--space-5);left:var(--space-6);display:flex;align-items:center;gap:6px;font:var(--fw-medium) var(--fs-micro)/1 var(--font-body);color:rgba(255,255,255,.85)}
.news-tile__title{font:var(--fw-bold) 16px/1.32 var(--font-display);text-transform:uppercase;letter-spacing:.01em}
.news-tile--featured .news-tile__title{font-size:20px}
.news-tile__tags{margin-top:var(--space-2);font:var(--fw-regular) var(--fs-micro)/1.3 var(--font-body);color:rgba(255,255,255,.72)}
.news-tile__cta{margin-top:var(--space-5);display:inline-flex;align-items:center;gap:8px;font:var(--fw-semibold) var(--fs-caption)/1 var(--font-body);letter-spacing:var(--ls-label);color:var(--white)}

/* featured image as the tile background, darkened top and bottom so the
   date and title stay readable on any photo */
.news-tile__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.news-tile.has-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,26,44,.55) 0,rgba(7,26,44,.05) 32%,rgba(7,26,44,.25) 55%,rgba(7,26,44,.88) 100%)}
.news-tile.has-photo>:not(.news-tile__bg){position:relative;z-index:1}
.news-tile.has-photo .news-tile__date{position:absolute;z-index:1}
.news-tile.has-photo:hover .news-tile__bg{transform:scale(1.04)}
@media (max-width:820px){ .news-mosaic{grid-template-columns:1fr}.news-tile--featured{grid-row:auto} }

/* =========================================================
   SITE FOOTER (08)
   ========================================================= */
/* Light rounded panel, like the reference's footer — sits inset from the viewport edge */
.site-footer{margin:0 var(--panel-inset) var(--panel-inset);border-radius:var(--radius-panel);background:var(--bg-panel);color:var(--text-muted)}
.site-footer__grid{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:var(--space-8);padding-block:var(--space-11) var(--space-9)}
.site-footer__logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.site-footer__logo>img{width:auto;height:46px}
.site-footer__address{margin-top:var(--space-5);font-size:var(--fs-body-sm);max-width:280px}
.site-footer__address+.site-footer__address{margin-top:var(--space-3)}
.site-footer__address b{display:block;margin-bottom:2px;font:var(--fw-semibold) 11px/1.4 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--navy-900)}
.site-footer__phone{margin-top:var(--space-4);font-size:var(--fs-body-sm)}
.site-footer__phone a{display:inline-flex;align-items:center;gap:7px;font-weight:var(--fw-semibold);color:var(--navy-900)}
.site-footer__phone a:hover{color:var(--accent)}
.site-footer__phone svg{color:var(--accent)}
.site-footer__email{margin:var(--space-2) 0 var(--space-5);font-size:var(--fs-body-sm)}
.site-footer h2{font:var(--fw-semibold) 15px/1 var(--font-display);color:var(--navy-900);margin-bottom:var(--space-5)}
.site-footer ul{display:flex;flex-direction:column;gap:var(--space-3)}
.site-footer li a{color:var(--text-muted);font-size:var(--fs-body-sm)}
.site-footer li a:hover{color:var(--navy-900)}
.site-footer__bottom{border-top:1px solid var(--border-default)}
.site-footer__bottom-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);padding-block:var(--space-5);font-size:var(--fs-caption);color:var(--text-subtle)}
.site-footer__bottom-inner a{color:inherit;font-size:inherit}
.site-footer__bottom-inner a:hover{color:var(--navy-900)}

@media (max-width:900px){ .site-footer__grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .site-footer__grid{grid-template-columns:1fr} }

/* CTA banner */
.cta-banner{background:var(--gradient-navy-azure);border-radius:24px;padding:var(--space-10) var(--space-10);display:flex;align-items:center;justify-content:space-between;gap:var(--space-9);flex-wrap:wrap}
.cta-banner__text{max-width:560px}
.home .cta-banner__text{max-width:500px}
.cta-banner__title{font-size:var(--fs-h2);color:var(--white)}
.cta-banner__lede{margin-top:var(--space-3);color:var(--text-on-dark-muted);font-size:var(--fs-body-lg)}
.cta-banner__actions{display:flex;gap:var(--space-3);flex-wrap:wrap}
.cta-banner__actions .btn{white-space:nowrap}
@media (max-width:600px){ .cta-banner{padding:var(--space-8) var(--space-6)} }

/* =========================================================
   ALAT BERAT — sub-strip (breadcrumb + search)
   ========================================================= */
.sub-strip{background:var(--white);border-bottom:1px solid var(--border-subtle)}
.sub-strip__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-3);flex-wrap:wrap}
.breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-caption);color:var(--text-muted);flex-wrap:wrap}
.breadcrumb a{color:var(--text-muted)}
.breadcrumb a:hover{color:var(--text-link)}
.breadcrumb span:last-child{color:var(--text-heading);font-weight:var(--fw-medium)}

.header-search{position:relative;width:280px;max-width:100%}
.header-search__icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-subtle)}
.header-search input{width:100%;height:40px;padding:0 14px 0 38px;border:1px solid transparent;border-radius:var(--radius-pill);font:var(--fw-regular) var(--fs-body-sm)/1 var(--font-body);background:var(--bg-panel)}
.header-search input:focus{outline:none;background:var(--white);border-color:var(--accent);box-shadow:var(--shadow-focus)}
.header-search__icon{left:14px}
.header-search__results{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--white);border:1px solid var(--border-default);border-radius:14px;box-shadow:var(--shadow-lg);max-height:280px;overflow-y:auto;z-index:50}
.header-search__results.is-open{display:block}
.header-search__results li{border-bottom:1px solid var(--border-subtle)}
.header-search__results li:last-child{border-bottom:0}
.header-search__results button{display:flex;justify-content:space-between;gap:var(--space-3);width:100%;text-align:left;padding:10px 14px;font-size:var(--fs-body-sm);color:var(--text-body)}
.header-search__results button:hover,.header-search__results button.is-active{background:var(--accent-soft)}
.header-search__results small{color:var(--text-subtle);font-size:var(--fs-micro)}
.header-search__empty{padding:12px 14px;font-size:var(--fs-caption);color:var(--text-subtle)}

@media (max-width:640px){
  .sub-strip__inner{flex-direction:column;align-items:stretch}
  .header-search{width:100%}
}

/* =========================================================
   ALAT BERAT — intro jenis
   ========================================================= */
.equip-intro{padding-block:var(--space-10)}
.equip-intro__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-10);align-items:center}
.equip-intro__photo{position:relative;aspect-ratio:4/3.4;border-radius:24px;background:var(--gradient-navy-azure);display:flex;align-items:center;justify-content:center}
.equip-intro__photo::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.08;background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 14px)}
.equip-intro__photo-label{position:relative;color:rgba(255,255,255,.6);font:var(--fw-semibold) 11px/1.4 var(--font-body);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}

@media (max-width:900px){
  .equip-intro__grid{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .equip-intro__photo{aspect-ratio:16/10}
}

/* Type cards (kartu tipe unit) — rounded photo with a floating jenis pill, content below */
.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter-grid);row-gap:var(--space-9)}
.type-grid--3{grid-template-columns:repeat(3,1fr)}
.type-card{display:flex;flex-direction:column;height:100%}
.type-card__photo{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--gradient-navy);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font:var(--fw-semibold) 10px/1.3 var(--font-body);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;text-align:center;padding:var(--space-3);transition:box-shadow var(--dur-base) var(--ease-standard)}
.type-card:hover .type-card__photo{box-shadow:var(--shadow-lg)}
.type-card.is-highlight .type-card__photo{box-shadow:0 0 0 3px var(--accent)}
.type-card__jenis{position:absolute;left:var(--space-3);bottom:var(--space-3);padding:7px 12px;border-radius:var(--radius-pill);background:rgba(255,255,255,.92);color:var(--navy-900);font:var(--fw-medium) 12px/1 var(--font-body);letter-spacing:0;text-transform:none}
.type-card__body{padding:var(--space-4) 2px 0;display:flex;flex-direction:column;flex:1}
.type-card__name{margin-bottom:var(--space-3);font:var(--fw-semibold) 18px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--navy-900)}
.type-card__rows{margin:0 0 var(--space-4)}
.type-card__row{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px dashed var(--border-default);font-size:var(--fs-caption);color:var(--text-muted)}
.type-card__row:last-child{border-bottom:0}
.type-card__row dt{margin:0}
.type-card__row dd{margin:0;text-align:right;color:var(--text-heading)}
.type-card__rate{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);padding:12px 14px;border-radius:12px;background:var(--bg-panel);font-size:var(--fs-caption);color:var(--text-muted)}
.type-card__rate b{font-size:var(--fs-body);color:var(--text-heading)}
.type-card__rate b:empty::after{content:"\00a0 "}
.type-card__actions{margin-top:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}

@media (max-width:1100px){ .type-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){ .type-grid,.type-grid--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .type-grid,.type-grid--3{grid-template-columns:1fr} }

/* Cara sewa — 4 langkah as separate cards, last one highlighted */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{padding:var(--space-7) var(--space-6);border-radius:20px;background:var(--white);border:1px solid var(--border-subtle)}
.step{color:var(--white);border-color:transparent}
.steps .step:nth-child(1){background:var(--gradient-card-1)}
.steps .step:nth-child(2){background:var(--gradient-card-2)}
.steps .step:nth-child(3){background:var(--gradient-card-3)}
.steps .step:nth-child(4){background:var(--gradient-card-4)}
.step__num{width:40px;height:40px;border-radius:50%;background:var(--white);color:var(--navy-900);display:flex;align-items:center;justify-content:center;font:var(--fw-semibold) 14px/1 var(--font-body);margin-bottom:var(--space-8)}
.step__title{display:block;font:var(--fw-semibold) 18px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--white)}
.step__desc{margin-top:var(--space-2);font-size:var(--fs-body-sm);color:rgba(255,255,255,.76)}

@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .steps{grid-template-columns:1fr} }

/* =========================================================
   ALAT BERAT — form Minta Penawaran
   ========================================================= */
/* Alat Minta Penawaran: explainer column + form column inside one panel */
.mp-panel{padding-block:var(--space-10)}
.mp-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:var(--space-10);align-items:start}
.mp-intro{position:sticky;top:170px}
.mp-intro .back-link{display:flex;width:max-content;margin-bottom:var(--space-6)}
.mp-flow{margin-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-3)}
.mp-flow li{display:flex;gap:14px;align-items:flex-start;padding:var(--space-4);border-radius:16px;background:rgba(255,255,255,.65);border:1px solid var(--border-subtle);font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-muted)}
.mp-flow li:last-child{background:var(--gradient-card-2);border-color:transparent;color:rgba(255,255,255,.78)}
.mp-flow li:last-child strong{color:var(--white)}
.mp-flow li:last-child .mp-flow__num{background:rgba(255,255,255,.18);box-shadow:none;color:var(--white)}
.mp-flow__num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--white);box-shadow:var(--shadow-xs);color:var(--azure-700);display:flex;align-items:center;justify-content:center;font:var(--fw-semibold) 13px/1 var(--font-body)}
.mp-flow strong{display:block;margin-bottom:2px;font:var(--fw-semibold) 15px/1.3 var(--font-display);color:var(--navy-900)}
@media (max-width:980px){
  .mp-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .mp-intro{position:static}
}

.mp-section{background:var(--white);border:1px solid var(--border-subtle);border-radius:20px;padding:var(--space-7);margin-bottom:14px}
.mp-section__head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}
.mp-section__num{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--gradient-card-2);color:var(--white);display:flex;align-items:center;justify-content:center;font:var(--fw-semibold) 13px/1 var(--font-body)}
.mp-section__title{font:var(--fw-semibold) var(--fs-body-lg)/1.3 var(--font-display);letter-spacing:-.01em;color:var(--navy-900)}

.mp-item{display:grid;grid-template-columns:80px 1fr;gap:var(--space-4);padding:var(--space-4);border:1px solid transparent;border-radius:14px;margin-bottom:var(--space-3);background:var(--bg-panel)}
.mp-item__photo{height:64px;border-radius:10px;background:var(--gradient-navy);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);font-size:9px;text-align:center;padding:4px}
.mp-item__top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.mp-item__name{font:var(--fw-bold) var(--fs-body-sm)/1.3 var(--font-body);color:var(--text-heading)}
.mp-item__remove{background:none;border:0;font-size:var(--fs-caption);color:var(--text-subtle);text-decoration:underline;cursor:pointer}
.mp-pills{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3)}
.mp-pills.has-error .mp-pill{border-style:dashed;border-color:var(--red-600)}
.mp-pill{border:1px solid var(--border-strong);background:var(--white);border-radius:var(--radius-pill);padding:6px 14px;font-size:var(--fs-caption);cursor:pointer}
.mp-pill.is-active{background:var(--navy-900);color:var(--white);border-color:var(--navy-900)}
.mp-qty{display:inline-flex;align-items:center;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--white)}
.mp-qty button{width:30px;height:28px;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mp-qty span{min-width:56px;text-align:center;font-size:var(--fs-caption)}

.mp-add{position:relative}
.mp-add__btn{width:100%;border:1px dashed var(--border-strong);border-radius:14px;background:var(--white);padding:var(--space-4);font-size:var(--fs-body-sm);color:var(--text-muted);cursor:pointer}
.mp-add__btn:hover,.mp-add__btn[aria-expanded="true"]{border-color:var(--accent);color:var(--text-heading)}
.mp-add__panel{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:20;overflow:hidden}
.mp-add__panel.is-open{display:block}
.mp-add__search{position:relative;border-bottom:1px solid var(--border-subtle)}
.mp-add__search input{width:100%;border:0;padding:12px 12px 12px 36px;font-size:var(--fs-body-sm);outline:none}
.mp-add__search .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-subtle)}
.mp-add__list{max-height:260px;overflow-y:auto;padding:6px 0}
.mp-add__group{padding:8px 14px 4px;font:var(--fw-bold) var(--fs-micro)/1 var(--font-body);color:var(--text-subtle);text-transform:uppercase;letter-spacing:var(--ls-eyebrow)}
.mp-add__option{display:block;width:100%;text-align:left;padding:8px 14px 8px 22px;font-size:var(--fs-body-sm);cursor:pointer}
.mp-add__option:hover,.mp-add__option.is-active{background:var(--accent-soft)}
.mp-add__empty{padding:14px;font-size:var(--fs-caption);color:var(--text-subtle)}

.mp-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-4)}
.mp-field:last-child{margin-bottom:0}
.mp-field label{font:var(--fw-bold) var(--fs-caption)/1 var(--font-body);color:var(--text-heading)}
.mp-field label em{font-style:normal;font-weight:var(--fw-regular);color:var(--text-subtle)}
.mp-field input,.mp-field textarea{border:1px solid var(--border-default);border-radius:10px;padding:11px 14px;font:var(--fw-regular) var(--fs-body-sm)/1.4 var(--font-body);background:var(--white)}
.mp-field textarea{min-height:76px;resize:vertical}
.mp-field.has-error input,.mp-field.has-error textarea{border-color:var(--red-600);border-style:dashed}
.mp-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}

.mp-submit{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);background:var(--white);border:1px solid var(--border-subtle);border-radius:20px;padding:var(--space-6);flex-wrap:wrap}
.mp-submit__msg{font-size:var(--fs-caption);color:var(--text-muted)}
.mp-submit__msg.is-error{font-weight:var(--fw-bold);color:var(--red-600)}

@media (max-width:820px){ .mp-two{grid-template-columns:1fr} }

/* =========================================================
   ALAT BERAT — semua tipe (induk) + filter
   ========================================================= */
/* Jenis filter as a row of pill chips; "Semua" is active while nothing is checked */
.equip-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;margin-bottom:var(--space-8)}
.equip-filter{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.equip-filter__chip{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);height:40px;padding:0 14px 0 16px;border-radius:var(--radius-pill);border:1px solid transparent;background:var(--bg-panel);font:var(--fw-medium) var(--fs-body-sm)/1 var(--font-body);color:var(--text-body);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.equip-filter__chip:hover{border-color:var(--border-default)}
.equip-filter__chip input{position:absolute;opacity:0;pointer-events:none}
.equip-filter__chip small{min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-pill);background:var(--white);display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-muted)}
.equip-filter__all{padding-right:16px}
.equip-filter__chip:has(input:checked),.equip-filter:not(:has(input:checked)) .equip-filter__all{background:var(--navy-900);color:var(--white)}
.equip-filter__chip:has(input:checked) small{background:rgba(255,255,255,.16);color:var(--white)}
.equip-filter__chip:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.equip-count{font-size:var(--fs-caption);color:var(--text-muted)}

/* =========================================================
   JASA KONSTRUKSI — halaman /jasa/
   ========================================================= */
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption);color:var(--text-muted)}
.back-link:hover{color:var(--text-link)}

/* Banner + pencarian */
/* Light centered hero panel; the search reads like the reference's input + button field */
.jasa-hero{position:relative;overflow:hidden;padding-block:0;background:var(--navy-900);color:var(--white)}
.jasa-hero__media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--gradient-navy-azure)}
.jasa-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#04121F 0%,rgba(7,26,44,.92) 32%,rgba(10,100,171,.42) 74%,rgba(7,26,44,.28) 100%)}
.jasa-hero>.container{position:relative;z-index:1}
.jasa-banner{text-align:center;padding-block:var(--space-11)}
.jasa-banner__title{margin-inline:auto;max-width:760px}
.jasa-search{position:relative;max-width:600px;margin:var(--space-8) auto 0;text-align:left}
.jasa-search__box{display:flex;align-items:center;gap:var(--space-2);padding:6px;background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);box-shadow:var(--shadow-md)}
.jasa-search__box:focus-within{border-color:var(--accent);box-shadow:var(--shadow-focus)}
.jasa-search__icon{flex:0 0 auto;margin-left:14px;color:var(--text-subtle);display:flex}
.jasa-search__box input{flex:1;min-width:0;border:0;background:transparent;padding:12px 4px;font:var(--fw-regular) var(--fs-body)/1 var(--font-body);outline:none}
.jasa-search__box button{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--space-2);height:46px;padding:0 20px;border:0;border-radius:var(--radius-pill);background:var(--accent);color:var(--white);font:var(--fw-semibold) var(--fs-body-sm)/1 var(--font-body);transition:background var(--dur-fast) var(--ease-standard)}
.jasa-search__box button:hover{background:var(--accent-hover)}
.jasa-search__results{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--white);border:1px solid var(--border-default);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;z-index:20}
.jasa-search__results.is-open{display:block}
.jasa-search__results li{border-bottom:1px solid var(--border-subtle)}
.jasa-search__results li:last-child{border-bottom:0}
.jasa-search__results button{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);width:100%;text-align:left;padding:12px 20px;font-size:var(--fs-body-sm);color:var(--text-body)}
.jasa-search__results button:hover,.jasa-search__results button.is-active{background:var(--accent-soft)}
.jasa-search__results small{color:var(--text-subtle);font-size:var(--fs-micro)}
.jasa-search__empty{padding:14px 20px;font-size:var(--fs-caption);color:var(--text-subtle)}
.jasa-search__empty a{color:var(--text-link);text-decoration:underline}
.jasa-hint{margin-top:var(--space-4);font-size:var(--fs-caption);color:rgba(255,255,255,.7)}

/* Tabs as a scrollable row of pills + detail panel */
.jasa-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:6px;border-radius:var(--radius-pill);background:var(--bg-panel)}
.jasa-tabs::-webkit-scrollbar{display:none}
.jasa-tab{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;height:48px;padding:0 12px 0 6px;border-radius:var(--radius-pill);color:var(--text-body);font:var(--fw-medium) 13.5px/1 var(--font-body);white-space:nowrap;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.jasa-tab__icon{width:30px;height:30px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;color:var(--azure-700);transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.jasa-tab__icon .icon{width:17px!important;height:17px!important}
.jasa-tab:hover{background:rgba(7,26,44,.05);color:var(--navy-900)}
.jasa-tab.is-active{background:var(--navy-900);color:var(--white)}
.jasa-tab.is-active .jasa-tab__icon{background:rgba(255,255,255,.14);color:var(--white)}

.jasa-panel{display:none;padding-top:var(--space-9)}
.jasa-panel.is-active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:stretch}
.jasa-panel__photo{min-height:360px;border-radius:24px;background:var(--gradient-navy);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font:var(--fw-semibold) 11px/1.4 var(--font-body);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;text-align:center}
.jasa-panel__photo::before{content:"";position:absolute;inset:0;opacity:.08;background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 14px)}
.jasa-panel__photo span{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.jasa-panel__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jasa-panel__photo:has(img)::before{display:none}
.jasa-panel__card{background:var(--bg-panel);border-radius:24px;padding:var(--space-9)}
.jasa-panel__card h3{font:var(--fw-semibold) clamp(26px,2.4vw,32px)/1.15 var(--font-display);letter-spacing:-.02em;color:var(--navy-900)}
.jasa-panel__card>p{margin-top:var(--space-4);color:var(--text-muted);font-size:var(--fs-body)}
.jasa-panel__kicker{margin-top:var(--space-7);font:var(--fw-semibold) var(--fs-body-sm)/1 var(--font-display);color:var(--navy-900)}
.jasa-panel__list{margin-top:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}
.jasa-panel__list li{display:flex;gap:var(--space-2);font-size:var(--fs-body-sm);color:var(--text-body)}
.jasa-panel__list .icon{flex:0 0 auto;margin-top:3px}
.jasa-panel__list--fit .icon{color:var(--azure-600)}
.jasa-panel__list--scope li{position:relative;padding-left:var(--space-4)}
.jasa-panel__list--scope li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--navy-800)}
.jasa-panel__actions{margin-top:var(--space-8);display:flex;gap:var(--space-3);flex-wrap:wrap}

@media (max-width:900px){
  .jasa-panel.is-active{grid-template-columns:minmax(0,1fr)}
  .jasa-panel__photo{order:-1;min-height:0;aspect-ratio:16/10}
  .jasa-panel__card{padding:var(--space-7)}
  .jasa-tab{flex:0 0 auto}
}

/* Portfolio slider */
.jasa-projects__scroller{display:flex;gap:var(--gutter-grid);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
.jasa-projects__scroller::-webkit-scrollbar{display:none}
.jasa-project{flex:0 0 calc((100% - 2*var(--gutter-grid))/3);scroll-snap-align:start}
.jasa-projects__track{height:4px;background:var(--border-subtle);border-radius:2px;margin-top:var(--space-4);position:relative;overflow:hidden}
.jasa-projects__thumb{position:absolute;left:0;top:0;height:100%;background:var(--azure-500);border-radius:2px;width:40%}

@media (max-width:900px){ .jasa-project{flex-basis:calc((100% - var(--gutter-grid))/2)} }
@media (max-width:600px){ .jasa-project{flex-basis:85%} }

/* Alur pengerjaan */
.jasa-flow__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:stretch}
.jasa-flow__photo{min-height:100%;border-radius:24px;background:var(--gradient-navy-azure);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font:var(--fw-semibold) 11px/1.4 var(--font-body);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;text-align:center}
.jasa-flow__photo::before{content:"";position:absolute;inset:0;opacity:.08;background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 14px)}
.jasa-flow__photo span{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.jasa-flow__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.jasa-flow__photo:has(img)::before{display:none}
.jasa-flow__card{background:var(--bg-panel);border-radius:24px;padding:var(--space-9)}
.jasa-flow__title{font:var(--fw-semibold) clamp(24px,2.2vw,30px)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--navy-900)}
.jasa-steps{margin-top:var(--space-7);display:flex;flex-direction:column;gap:var(--space-2)}
.jasa-step{display:grid;grid-template-columns:36px 1fr;gap:var(--space-4);align-items:center;padding:var(--space-3) var(--space-4) var(--space-3) var(--space-3);border-radius:16px;background:var(--white)}
.jasa-step{color:var(--white)}
.jasa-steps .jasa-step:nth-child(1){background:var(--gradient-card-1)}
.jasa-steps .jasa-step:nth-child(2){background:linear-gradient(120deg,#0E2B49 0%,#0A5896 100%)}
.jasa-steps .jasa-step:nth-child(3){background:var(--gradient-card-2)}
.jasa-steps .jasa-step:nth-child(4){background:linear-gradient(120deg,#0A64AB 0%,#0F84D6 100%)}
.jasa-steps .jasa-step:nth-child(5){background:var(--gradient-card-4)}
.jasa-step__num{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font:var(--fw-semibold) 14px/1 var(--font-body);color:var(--white)}
.jasa-step__title{font:var(--fw-semibold) var(--fs-body)/1.3 var(--font-display);color:var(--white)}
.jasa-step__desc{margin-top:2px;font-size:var(--fs-caption);color:rgba(255,255,255,.74)}

@media (max-width:900px){
  .jasa-flow__layout{grid-template-columns:minmax(0,1fr)}
  .jasa-flow__photo{order:-1;min-height:0;width:100%;max-width:496px;aspect-ratio:4/5;justify-self:center}
  .jasa-flow__card{padding:var(--space-7)}
}

/* Form Minta Penawaran Jasa — luas/tanggal with a toggle pill beside the input */
.mp-luas{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.mp-luas__input{position:relative;flex:1 1 200px}
.mp-luas__input input{width:100%;padding-right:36px}
.mp-luas__input::after{content:"m²";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:var(--fs-caption);color:var(--text-subtle);pointer-events:none}
.mp-luas__input--date::after{content:none}
.mp-field input:disabled{background:var(--bg-subtle);color:var(--text-subtle)}

/* =========================================================
   BLOG — daftar artikel (home.php) + detail artikel (single.php)
   ========================================================= */
.article-category{display:inline-flex;align-items:center;gap:7px;font:var(--fw-semibold) 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--azure-700)}
.article-category::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--azure-600);flex:0 0 auto}
/* Category as a pill floating on the photo, same as project/type cards */
.blog-feature__photo .article-category,.blog-card__photo .article-category{position:absolute;left:var(--space-3);bottom:var(--space-3);z-index:1;padding:7px 12px;border-radius:var(--radius-pill);background:rgba(255,255,255,.92);color:var(--navy-900);font:var(--fw-medium) 12px/1 var(--font-body);letter-spacing:0;text-transform:none}
.blog-feature__photo .article-category::before,.blog-card__photo .article-category::before{display:none}
.article-meta{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption);color:var(--text-subtle)}

.blog-feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-3);margin-top:var(--space-9);padding:var(--space-3);border-radius:28px;background:var(--white);box-shadow:var(--shadow-sm);text-decoration:none;transition:box-shadow var(--dur-base) var(--ease-standard)}
.blog-feature:hover{box-shadow:var(--shadow-lg)}
.blog-feature__photo{position:relative;min-height:360px;border-radius:20px;background:var(--gradient-navy);overflow:hidden;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55)}
.blog-feature__photo::before{content:"";position:absolute;inset:0;opacity:.08;background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 14px)}
.blog-feature__body{padding:var(--space-8) var(--space-8) var(--space-8) var(--space-6);display:flex;flex-direction:column;justify-content:center}
.blog-feature__title{margin-top:var(--space-3);font:var(--fw-semibold) clamp(26px,2.6vw,36px)/1.15 var(--font-display);letter-spacing:-.02em;color:var(--navy-900);transition:color var(--dur-fast) var(--ease-standard)}
.blog-feature:hover .blog-feature__title{color:var(--azure-700)}
.blog-feature__excerpt{margin-top:var(--space-4);color:var(--text-muted);font-size:var(--fs-body)}
.blog-feature__cta{margin-top:var(--space-7);align-self:flex-start}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-9) var(--gutter-grid)}
.blog-card{display:block;text-decoration:none}
.blog-card__photo{position:relative;aspect-ratio:4/3;border-radius:18px;background:var(--gradient-navy-azure);overflow:hidden;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);transition:box-shadow var(--dur-base) var(--ease-standard)}
.blog-card__photo::before{content:"";position:absolute;inset:0;opacity:.08;background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 14px)}
/* a real featured image replaces the placeholder: no stripes, and the photo
   fills the frame instead of stretching it */
.blog-feature__photo:has(img)::before,.blog-card__photo:has(img)::before,.article__hero:has(img)::before{display:none}
.blog-feature__photo img,.blog-card__photo img,.article__hero img{position:absolute;inset:0}
.blog-card:hover .blog-card__photo{box-shadow:var(--shadow-lg)}
.blog-card__title{display:block;margin-top:var(--space-4);font:var(--fw-semibold) 18px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--navy-900);transition:color var(--dur-fast) var(--ease-standard)}
.blog-card:hover .blog-card__title{color:var(--azure-700)}
.blog-card .article-meta{display:flex;margin-top:var(--space-2)}

@media (max-width:900px){
  .blog-feature{grid-template-columns:minmax(0,1fr)}
  .blog-feature__photo{min-height:220px}
  .blog-feature__body{padding:var(--space-5) var(--space-4) var(--space-4)}
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){ .blog-grid{grid-template-columns:1fr} }

.pagination{display:flex;justify-content:center;gap:var(--space-2);margin-top:var(--space-10)}

.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 var(--space-3);border-radius:var(--radius-pill);background:var(--bg-panel);font-size:var(--fs-body-sm);color:var(--text-body)}
.pagination a:hover{background:var(--azure-100);color:var(--navy-900)}
.pagination .current{background:var(--navy-900);color:var(--white)}

/* Detail artikel — header panel, then a narrow reading column */
.article{max-width:820px;margin:0 auto}
.article-head{padding-block:var(--space-10)}
.article-head .breadcrumb{margin-bottom:var(--space-7)}
.article__title{margin-top:var(--space-3);font:var(--fw-semibold) clamp(32px,3.6vw,48px)/1.12 var(--font-display);letter-spacing:-.025em;color:var(--navy-900)}
.article__meta{display:flex;margin-top:var(--space-5)}
.article__hero{position:relative;margin:0 0 var(--space-8);aspect-ratio:16/9;border-radius:24px;background:var(--gradient-navy);overflow:hidden;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55)}
.article__hero::before{content:"";position:absolute;inset:0;opacity:.08;background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 14px)}
.article__lead{font-size:var(--fs-body-lg);color:var(--text-muted);margin-bottom:var(--space-8)}
.article__body{font-size:var(--fs-body);color:var(--text-body);line-height:var(--lh-body)}
.article__body p{margin-bottom:var(--space-5)}
.article__body h2{margin:var(--space-9) 0 var(--space-4);font:var(--fw-semibold) var(--fs-h3)/1.25 var(--font-display);letter-spacing:-.015em;color:var(--navy-900)}
.article__body h3{margin:var(--space-7) 0 var(--space-3);font:var(--fw-semibold) var(--fs-h4)/1.3 var(--font-display);color:var(--navy-900)}
.article__body ul,.article__body ol{margin:0 0 var(--space-5) var(--space-6)}
.article__body li{margin-bottom:var(--space-2)}
/* real markers, so a list reads as a list and not as indented paragraphs */
.article__body ul{list-style:disc}
.article__body ol{list-style:decimal}
.article__body li{padding-left:4px}
.article__body li::marker{color:var(--azure-600);font-weight:var(--fw-semibold)}
.article__empty{padding:var(--space-8);border:1px dashed var(--border-strong);border-radius:16px;color:var(--text-subtle);font-style:italic;text-align:center}


.article-cta-end{background:var(--gradient-navy-azure);border-radius:28px;padding:var(--space-10) var(--space-9);margin:var(--space-10) 0 0;text-align:center}
.article-cta-end h2{color:var(--white);font:var(--fw-semibold) clamp(24px,2.4vw,32px)/1.2 var(--font-display);letter-spacing:-.02em}
.article-cta-end p{margin-top:var(--space-3);color:var(--text-on-dark-muted)}
.article-cta-end__actions{margin-top:var(--space-7);display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}

.article-related{margin-top:var(--space-11)}
.article-related .blog-grid{grid-template-columns:repeat(3,1fr);margin-top:var(--space-7)}

@media (max-width:600px){
  .article-cta-end{padding:var(--space-8) var(--space-6)}
  .article-related .blog-grid{grid-template-columns:1fr}
}

/* =========================================================
   TENTANG KAMI
   ========================================================= */
.about-lede{margin-top:var(--space-3);color:var(--text-muted);max-width:560px;font-size:var(--fs-body)}

/* Profil — a wide photo banner opens the page, then the text */
.about-banner{position:relative;margin:var(--panel-inset);height:clamp(260px,30vw,400px);border-radius:var(--radius-panel);overflow:hidden;background:var(--gradient-navy-azure);display:flex;align-items:center;justify-content:center}
.about-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(180deg,rgba(4,18,31,0) 0%,rgba(4,18,31,.74) 100%)}
.about-banner__label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--space-2);color:rgba(255,255,255,.55);font:var(--fw-semibold) 11px/1.4 var(--font-body);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;text-align:center}
.about-banner__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.about-banner__bar{position:absolute;z-index:1;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-8) clamp(var(--space-6),4vw,var(--space-10))}
.about-banner__brand{font:var(--fw-semibold) clamp(22px,2.4vw,32px)/1.15 var(--font-display);letter-spacing:-.02em;color:var(--white)}
.about-banner__meta{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-body-sm);color:rgba(255,255,255,.75)}
.about-banner__meta .icon{color:var(--azure-300)}
.about-banner__meta i{font-style:normal;color:rgba(255,255,255,.4)}
.about-profil{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:var(--space-10);align-items:start}
.about-profil__text p{color:var(--text-body);font-size:var(--fs-body);line-height:var(--lh-body)}
.about-profil__text p+p{margin-top:var(--space-6)}
/* "Akses satu pintu" line: larger, black with the three lines of business in blue */
.about-profil__text .about-profil__statement{margin-block:var(--space-8);padding-left:var(--space-6);border-left:3px solid var(--accent);font:var(--fw-semibold) 24px/1.4 var(--font-display);letter-spacing:-.01em;color:var(--navy-950);text-wrap:balance}

/* Bidang usaha — three business lines as gradient cards, each linking to its page */
.about-usaha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.usaha-card{position:relative;display:flex;flex-direction:column;padding:var(--space-8);border-radius:24px;overflow:hidden;color:var(--white);text-decoration:none;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.usaha-card--1{background:var(--gradient-card-1)}
.usaha-card--2{background:var(--gradient-card-2)}
.usaha-card--3{background:var(--gradient-card-3)}
a.usaha-card:hover{color:var(--white);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.usaha-card__num{position:absolute;top:var(--space-6);right:var(--space-7);font:var(--fw-extrabold) 44px/1 var(--font-display);color:rgba(255,255,255,.16)}
.usaha-card__icon{width:54px;height:54px;margin-bottom:var(--space-8);border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);color:var(--white);display:flex;align-items:center;justify-content:center}
.usaha-card__title{font:var(--fw-semibold) 21px/1.3 var(--font-display);letter-spacing:-.01em}
.usaha-card__desc{flex:1;margin-top:var(--space-3);font-size:var(--fs-body-sm);line-height:var(--lh-body);color:rgba(255,255,255,.74)}
.usaha-card__cta{display:inline-flex;align-items:center;gap:8px;margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,.16);font:var(--fw-semibold) var(--fs-body-sm)/1 var(--font-body);width:100%}
.usaha-card__cta .icon{transition:transform var(--dur-base) var(--ease-standard)}
a.usaha-card:hover .usaha-card__cta .icon{transform:translateX(3px)}

@media (max-width:1000px){ .about-profil{grid-template-columns:minmax(0,1fr);gap:var(--space-7)} .about-usaha{grid-template-columns:minmax(0,1fr)} }
@media (max-width:700px){ .about-banner{height:auto;min-height:320px;align-items:flex-start;padding-top:var(--space-9)} }

/* Visi & Misi — two separate cards, misi highlighted */
.about-vm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px}
.about-visi{padding:var(--space-8);border-radius:20px;background:var(--white);border:1px solid var(--border-subtle)}
.about-misi{padding:var(--space-8);border-radius:20px;background:var(--azure-100)}
.about-vm__icon{width:44px;height:44px;margin-bottom:var(--space-7);border-radius:50%;background:var(--azure-50);display:flex;align-items:center;justify-content:center;color:var(--azure-700)}
.about-misi .about-vm__icon{background:var(--white)}
.about-vm h3{font:var(--fw-semibold) 22px/1.2 var(--font-display);letter-spacing:-.01em;color:var(--navy-900)}
.about-visi p{margin-top:var(--space-4);color:var(--text-muted);font-size:var(--fs-body)}
.about-misi ol{margin-top:var(--space-5);counter-reset:m}
.about-misi li{counter-increment:m;display:grid;grid-template-columns:28px 1fr;gap:var(--space-3);align-items:start;font-size:var(--fs-body-sm);color:var(--navy-700);margin-bottom:var(--space-4)}
.about-misi li::before{content:counter(m);width:28px;height:28px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;font:var(--fw-semibold) 13px/1 var(--font-body);font-style:normal;color:var(--azure-700)}
.about-misi li:last-child{margin-bottom:0}

@media (max-width:900px){ .about-vm{grid-template-columns:minmax(0,1fr)} }

/* Nilai */
.about-nilai{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.about-nilai__item{border-radius:20px;padding:var(--space-7) var(--space-6);background:var(--bg-panel)}
.about-nilai__icon{width:48px;height:48px;margin-bottom:var(--space-8);border-radius:50%;background:var(--gradient-card-2);display:flex;align-items:center;justify-content:center;color:var(--white)}
.about-nilai__item b{display:block;font:var(--fw-semibold) 18px/1.3 var(--font-display);color:var(--navy-900)}
.about-nilai__item>span:not(.about-nilai__icon){display:block;margin-top:var(--space-2);font-size:var(--fs-body-sm);color:var(--text-muted)}

@media (max-width:900px){ .about-nilai{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .about-nilai{grid-template-columns:1fr} }

/* Kontak */
.about-kontak{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px}
.about-kontak__card{border-radius:20px;padding:var(--space-8);background:var(--white);border:1px solid var(--border-subtle)}
.about-kitem{display:grid;grid-template-columns:40px 1fr;gap:var(--space-4);margin-bottom:var(--space-6)}
.about-kitem:last-child{margin-bottom:0}
.about-kitem__icon{width:40px;height:40px;border-radius:50%;background:var(--azure-50);display:flex;align-items:center;justify-content:center;color:var(--azure-700)}
.about-kitem dl{margin:0}
.about-kitem dt{font:var(--fw-semibold) var(--fs-body-sm)/1.3 var(--font-display);color:var(--navy-900);margin-bottom:4px}
.about-kitem dd{margin:0;font-size:var(--fs-body-sm);color:var(--text-muted)}
.about-kitem dd a:not(.tag,.btn){text-decoration:underline}
.about-kontak__actions{margin-top:var(--space-7)}
/* Motto — fills the spot the office map used to take. Just the lettering
   (owner's concept: bold slanted blue line, slate line set to the right). */
.motto{margin:0;min-height:320px;display:flex;align-items:center;justify-content:center;container-type:inline-size}
.motto__text{margin:0;max-width:100%}
.motto__text p{margin:0;font-family:var(--font-display);font-style:italic;font-weight:var(--fw-extrabold);line-height:1.05}
.motto__main{font-size:min(8cqi,50px);letter-spacing:-.015em;color:var(--azure-800)}
.motto__sub{margin-top:.2em;text-align:right;font-size:min(5cqi,31px);letter-spacing:-.005em;color:#5F7C8A}
.hubungi-side .motto{margin-top:var(--space-6);min-height:150px}

@media (max-width:900px){ .about-kontak{grid-template-columns:minmax(0,1fr)} }

/* =========================================================
   PUSAT BANTUAN — FAQ accordion (native <details>, no JS)
   ========================================================= */
/* Each group: numbered title on the left, rounded accordion cards on the right */
.faq-group{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--space-9);padding-block:var(--space-9);border-top:1px solid var(--border-subtle)}
.faq-group:first-of-type{padding-top:0;border-top:0}
.faq-group__head{position:sticky;top:110px;align-self:start}
.faq-group__num{display:block;font:var(--fw-semibold) 14px/1 var(--font-body);color:var(--azure-600)}
.faq-group__title{margin-top:var(--space-3);font:var(--fw-semibold) clamp(22px,2vw,28px)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--navy-900)}
.faq-group__items{display:flex;flex-direction:column;gap:10px}
.faq-item{border-radius:16px;background:var(--bg-panel);transition:background var(--dur-fast) var(--ease-standard)}
.faq-item[open]{background:var(--azure-50)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-6);font:var(--fw-semibold) var(--fs-body)/1.4 var(--font-display);color:var(--navy-900)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--azure-700)}
.faq-item__icon{flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--white);color:var(--navy-900);font-size:17px;line-height:1;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.faq-item__icon::before{content:"+"}
.faq-item[open] .faq-item__icon{background:var(--navy-900);color:var(--white)}
.faq-item[open] .faq-item__icon::before{content:"\2212"}
.faq-item__answer{padding:0 var(--space-6) var(--space-6);color:var(--text-muted);font-size:var(--fs-body-sm);max-width:760px}


@media (max-width:900px){
  .faq-group{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .faq-group__head{position:static}
  .faq-item summary{padding:var(--space-4) var(--space-5)}
  .faq-item__answer{padding:0 var(--space-5) var(--space-5)}
}

/* =========================================================
   HUBUNGI KAMI — intro + contact list left, form card right, in one panel
   ========================================================= */
.page-hero__body{margin-top:var(--space-9)}
.hubungi-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-10);align-items:stretch}
.hubungi-side{margin-top:var(--space-8);padding:var(--space-7);border-radius:20px;background:var(--white);border:1px solid var(--border-subtle)}
.hubungi-side h2{font:var(--fw-semibold) 20px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--navy-900)}
.hubungi-side>p{margin-top:var(--space-2);margin-bottom:var(--space-6);color:var(--text-muted);font-size:var(--fs-body-sm)}

.hubungi-form{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border-subtle);border-radius:24px;padding:var(--space-9)}
.hubungi-form form{display:flex;flex-direction:column;flex:1}
.hubungi-form #hubungi-field-pesan{flex:1;min-height:150px}
.hubungi-form #hubungi-field-pesan textarea{flex:1}
.hubungi-form h2{font:var(--fw-semibold) clamp(22px,2vw,28px)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--navy-900)}
.hubungi-form>p{margin-top:var(--space-3);margin-bottom:var(--space-7);color:var(--text-muted);font-size:var(--fs-body-sm)}
.hubungi-form .mp-submit{border:0;padding:0;margin-top:var(--space-6);border-radius:0;flex-wrap:wrap}

@media (max-width:900px){
  .hubungi-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .hubungi-form{padding:var(--space-7) var(--space-5)}
}

/* Percabangan / pilihan cepat (also used on 404) */
.hubungi-branch__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hubungi-branch__grid--grad .hubungi-branch__card{background:var(--gradient-card-1);color:var(--white)}
.hubungi-branch__grid--grad .hubungi-branch__card:nth-child(2){background:var(--gradient-card-3)}
.hubungi-branch__grid--grad .hubungi-branch__card b{color:var(--white)}
.hubungi-branch__grid--grad .hubungi-branch__card>span:not(.hubungi-branch__icon){color:rgba(255,255,255,.76)}
.hubungi-branch__grid--grad .hubungi-branch__icon{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);color:var(--white)}
.hubungi-branch__card{border-radius:20px;background:var(--bg-panel);padding:var(--space-8);display:flex;flex-direction:column}
.hubungi-branch__icon{width:52px;height:52px;border-radius:50%;background:var(--white);color:var(--azure-700);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-8)}
.hubungi-branch__card b{font:var(--fw-semibold) 20px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--navy-900)}
.hubungi-branch__card>span:not(.hubungi-branch__icon){display:block;margin-top:var(--space-3);color:var(--text-muted);font-size:var(--fs-body-sm);flex:1}
.hubungi-branch__card .btn,.hubungi-branch__card .b-link{margin-top:var(--space-6);align-self:flex-start}

@media (max-width:820px){ .hubungi-branch__grid{grid-template-columns:1fr} }

/* Legal placeholders + 404 */
.legal-page{max-width:820px;margin-inline:auto}
.notfound .container{max-width:880px}
.notfound__code{display:block;font:var(--fw-semibold) clamp(72px,10vw,128px)/1 var(--font-display);letter-spacing:-.05em;color:var(--azure-600)}
.notfound__grid{margin-top:var(--space-10)}
.notfound .hubungi-branch__card{background:var(--white);border:1px solid var(--border-subtle)}
.notfound .hubungi-branch__icon{background:var(--azure-50)}

/* =========================================================
   PRODUCT PHOTOS — white-background unit photos (foto utama / foto tipe in wp-admin → Alat Berat)
   ========================================================= */
.type-card__photo.has-img,
.category-item .category-item__thumb.has-img,
.equip-intro__photo.has-img,
.mp-item__photo.has-img{background:var(--white);border:1px solid var(--border-subtle);padding:0}
.category-item__thumb.has-img::before,.equip-intro__photo.has-img::before{display:none}
.type-card__photo.has-img img,.mp-item__photo.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.category-item__thumb.has-img img{width:100%;height:100%;object-fit:contain;transition:transform var(--dur-slow) var(--ease-out)}
.category-item:hover .category-item__thumb.has-img img{transform:scale(1.04)}
.equip-intro__photo.has-img{overflow:hidden}
.equip-intro__photo.has-img img{width:100%;height:100%;object-fit:contain}
.mp-item__photo.has-img{position:relative;overflow:hidden}
.has-img .type-card__jenis{background:var(--bg-panel)}

/* =========================================================
   MATERIAL — supplier catalog (kategori pages + Semua Material)
   ========================================================= */
.material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter-grid);row-gap:var(--space-9)}
.material-card .type-card__photo{aspect-ratio:16/9;flex-direction:column;gap:var(--space-2)}
/* A category photo is a real site photo, not a product shot: fill the frame. */
.equip-intro__photo--cover.has-img img{object-fit:cover}
/* Description + uses + note share one fixed-height window, so every card is
   the same size. The bottom of the window fades out; opening the card grows
   the window to its content and the fade dissolves. */
@property --more-fade{syntax:'<length>';inherits:false;initial-value:0px}
.material-grid{align-items:start}
.material-grid .material-card{height:auto}
.material-card__more{--more-h:180px;--more-fade:72px;position:relative;min-height:var(--more-h);max-height:var(--more-h);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--more-fade)),transparent calc(100% - var(--more-fade) / 4));mask-image:linear-gradient(to bottom,#000 calc(100% - var(--more-fade)),transparent calc(100% - var(--more-fade) / 4));transition:max-height 480ms var(--ease-out),--more-fade 320ms var(--ease-out)}
.material-card__more.is-fit{-webkit-mask-image:none;mask-image:none}
.material-card.is-expanded .material-card__more{--more-fade:0px}
.material-card__desc{margin-top:var(--space-3);font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-muted)}
.card-more{position:relative;z-index:1;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:calc(-1 * var(--space-4));padding:7px 12px 7px 14px;border:1px solid var(--azure-100);border-radius:var(--radius-pill);background:var(--white);box-shadow:0 6px 16px -8px rgba(10,40,80,.35);font:var(--fw-semibold) var(--fs-caption)/1.2 var(--font-body);color:var(--accent);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),margin var(--dur-slow) var(--ease-out)}
.card-more:hover{background:var(--azure-50);border-color:var(--accent)}
.card-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card-more svg{width:14px;height:14px;transition:transform var(--dur-slow) var(--ease-out)}
.material-card.is-expanded .card-more{margin-top:var(--space-3)}
.material-card.is-expanded .card-more svg{transform:rotate(180deg)}
.card-more--placeholder{visibility:hidden;pointer-events:none}
.material-card__uses{margin-top:var(--space-4);display:flex;flex-direction:column;gap:6px}
.material-card__uses li{display:flex;gap:8px;font-size:var(--fs-caption);line-height:1.45;color:var(--text-body)}
.material-card__uses .icon{flex:0 0 auto;margin-top:2px;color:var(--azure-600)}
.material-card .type-card__rate{margin-top:var(--space-5)}

@media (max-width:1100px){ .material-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .material-grid{grid-template-columns:minmax(0,1fr)} }

/* Quote form: one row per chosen material with its own amount */
.mp-section__hint{margin:calc(-1 * var(--space-3)) 0 var(--space-4) 40px;font-size:var(--fs-caption);color:var(--text-subtle)}
.mp-item--material{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.mp-item__cat{display:block;margin-top:2px;font-size:var(--fs-micro);color:var(--text-subtle)}
.mp-item__qty{display:inline-flex;align-items:center;gap:var(--space-3)}
.mp-item__qty input{width:110px;border:1px solid var(--border-default);border-radius:10px;padding:9px 12px;font:var(--fw-regular) var(--fs-body-sm)/1.4 var(--font-body);background:var(--white)}
.mp-item__qty>span{font-size:var(--fs-body-sm);color:var(--text-muted)}
#material-mp-items{margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
#material-mp-items:empty{display:none}
/* No price row (material is quoted per request): the buttons take the bottom slot */
.type-card__actions--top{margin-top:auto;padding-top:var(--space-5)}

/* =========================================================
   MOBILE MENU (touch)
   A submenu cannot be opened by hover on a phone, so each parent gets its
   own toggle, and the header CTA moves into the panel where it is reachable.
   ========================================================= */
/* .main-nav a wins on specificity, so these need the same weight */
.nav-sub-toggle{display:none}
.main-nav .nav-cta-mobile{display:none}

@media (max-width: 1100px){
  .main-nav li{position:relative}
  .main-nav .menu-item-has-children>a::after{display:none}
  .nav-sub-toggle{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:52px;height:47px;border:0;background:none;cursor:pointer}
  .nav-sub-toggle::after{content:"";width:8px;height:8px;border-right:2px solid var(--navy-800);border-bottom:2px solid var(--navy-800);transform:translateY(-2px) rotate(45deg);transition:transform var(--dur-fast) var(--ease-standard)}
  .main-nav li.is-open>.nav-sub-toggle::after{transform:translateY(2px) rotate(-135deg)}
  .main-nav li:hover>.sub-menu{display:none}
  .main-nav li.is-open>.sub-menu{display:block}
  .main-nav .sub-menu a{padding-left:var(--space-4);color:var(--text-muted)}
  .main-nav .sub-menu li:last-child a{color:var(--accent)}
  .main-nav .nav-cta-mobile{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;margin-top:var(--space-4);border-bottom:0;color:var(--white)}
  .main-nav .nav-cta-mobile:hover{color:var(--white);background:var(--accent-hover)}
}

/* =========================================================
   PHONE LAYOUT
   Same concept as the desktop, only resized and stacked: nothing is
   removed, no new shapes. Desktop rules are untouched.
   ========================================================= */
@media (max-width:640px){
  :root{--container-pad:20px}

  /* type and spacing scale */
  .b-section{padding-block:var(--space-9)}
  .b-band{padding-block:var(--space-10)}
  .b-head{margin-bottom:var(--space-6)}
  .b-title{font-size:26px;line-height:1.18}
  .b-sub,.hero__lede{font-size:15px}
  .cta-banner{padding:var(--space-7) var(--space-5);gap:var(--space-5)}
  .cta-banner__title{font-size:20px;line-height:1.25}
  .cta-banner__lede{font-size:13.5px;margin-top:var(--space-3)}
  .cta-banner__actions{gap:var(--space-2)}

  /* buttons: one width when stacked, and big enough for a thumb */
  .btn{min-height:44px}
  .btn--sm{min-height:40px}
  .b-link{min-height:40px;align-items:center}
  .hero__actions .btn,.b-actions .btn,.cta-banner__actions .btn,.jasa-show__actions .btn{flex:1 1 100%;justify-content:center}
  .hero__dots button,.jasa-show__dots button{position:relative}
  .hero__dots button::after,.jasa-show__dots button::after{content:"";position:absolute;inset:-14px -5px}

  /* 1. hero — phone order: copy, three fields in one row, buttons, area */
  .hero__copy{display:flex;flex-direction:column}
  .hero__slides{order:1}
  .hero__cards{order:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:var(--space-6)}
  .hero__actions{order:3;margin-top:var(--space-6);justify-content:flex-start}
  .hero__meta{order:4;margin-top:var(--space-6)}
  .hero-float{flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding:var(--space-4) var(--space-2);background:rgba(255,255,255,.94)}
  .hero-float__thumb{width:34px;height:34px;border-radius:10px}
  .hero-float__text strong{font-size:11.5px;line-height:1.25}
  .hero-float__text small{display:none}
  .hero__actions .btn{flex:0 0 auto;min-height:42px;padding:0 16px;font-size:13px}

  /* 2. armada — smaller cards so two fit and the third peeks */
  .category-item{flex-basis:158px}
  .category-item__thumb{border-radius:16px}
  .category-item__label{margin-top:var(--space-3);font-size:15px}
  .category-item__more{font-size:11px}

  /* 3. jasa — the panel carries too much on a narrow screen */
  .jasa-show{padding:var(--space-5)}
  .jasa-show__slide{gap:var(--space-5)}
  .jasa-show__media{aspect-ratio:16/10}
  .jasa-show__count{font-size:26px;left:var(--space-4);bottom:var(--space-3)}
  .jasa-show__title{font-size:22px;margin-top:var(--space-4)}
  .jasa-show__desc{margin-top:var(--space-3);font-size:14px}
  .jasa-show__note{padding:var(--space-4) var(--space-5)}
  .jasa-show__note li{font-size:13px}
  .jasa-show__scope-title,.jasa-show__scope{display:none}
  .jasa-show__body{padding-bottom:calc(var(--space-6) + 56px)}
  .jasa-show__actions{margin-top:var(--space-5)}

  /* 4. proyek — shorter photo, tighter meta rows, cards before the CTA */
  .project-card__photo{aspect-ratio:16/9}
  .project-card__title{font-size:16px}
  .project-card__meta{padding:6px 0;font-size:12px}
  .b-highlight{padding:var(--space-6)}
  .b-highlight__title{font-size:19px}
  .b-projects{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-6)}
  .b-projects__side{display:contents}
  .b-projects__top{order:1}
  .b-projects__side .b-title{order:2;margin-top:0}
  .b-projects__side .b-sub{order:3}
  .b-projects__side .b-link{order:4;margin-top:0}
  .b-projects__main{order:5;min-width:0}
  .b-highlight{order:6;margin-top:0}

  /* 5. jangkauan — map first, then the list of areas */
  .b-coverage{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-6)}
  .b-coverage>div:not(.coverage__map){display:contents}
  .b-coverage .eyebrow{order:1}
  .b-coverage .b-title{order:2}
  .b-coverage .b-sub{order:3}
  .coverage__map{order:4;min-height:220px}
  .coverage__chips{order:5;margin-top:0}
  .coverage__note{order:6;margin-top:0}

  /* keunggulan — the cards keep their shape, only the empty middle goes */
  .why-card{min-height:0;gap:var(--space-7);padding:var(--space-6)}
  .why-card__icon{width:46px;height:46px;border-radius:14px}
  .why-card__num{font-size:34px}
  .why-card__title{font-size:17px}
  .why-card__desc{font-size:13.5px}

  /* the long button label was holding these cards open on a 320px screen */
  .hubungi-branch__card{min-width:0}
  .hubungi-branch__card .btn{white-space:normal;text-align:center}

  /* ALAT BERAT & MATERIAL pages — same treatment as Beranda:
     photo first, the two facts on one row above the buttons, and the
     buttons sized like the hero's. */
  .equip-intro__grid{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-6)}
  .equip-intro__photo{order:-1;aspect-ratio:16/10}
  .equip-intro__grid>div:not(.equip-intro__photo){display:contents}
  .equip-intro__grid .eyebrow{order:1}
  .equip-intro__grid .page-hero__title{order:2}
  .equip-intro__grid .page-hero__lede{order:3}
  .equip-intro__grid .hero-duo{order:4;margin-top:0}
  .equip-intro__grid .b-actions{order:5;margin-top:0}
  .hero-duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:var(--space-6)}
  .hero-duo__item{flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-4)}
  .hero-duo__icon{width:38px;height:38px}
  .hero-duo__text strong{font-size:13px}
  .hero-duo__text small{font-size:11px;margin-top:3px}
  .b-actions{gap:8px}
  .b-actions .btn{flex:0 0 auto;min-height:42px;padding:0 14px;font-size:12.5px}

  /* two types per row */
  .type-grid,.type-grid--3,.material-grid{grid-template-columns:1fr 1fr;gap:12px;row-gap:var(--space-7)}
  .type-card__photo{border-radius:16px}
  .type-card__name{font-size:15px;line-height:1.3}
  .type-card__row{font-size:11.5px}
  .type-card__rate{flex-direction:column;align-items:flex-start;gap:2px;padding:var(--space-3)}
  .type-card__rate>span{font-size:10.5px}
  .type-card__rate b{font-size:14px}
  .type-card__actions .btn{min-height:38px;padding:0 8px;font-size:11px;letter-spacing:0;white-space:normal;line-height:1.25;text-align:center}
  .type-card__jenis{left:6px;bottom:6px;padding:4px 8px;font-size:9.5px}
  .material-card__desc{font-size:12px}
  .material-card__uses li{font-size:11.5px}
  .material-card__more{--more-h:168px;--more-fade:60px}
  .card-more{gap:4px;padding:6px 10px 6px 11px;font-size:11px}
  .card-more svg{width:12px;height:12px}

  /* blog: feature card tightened, the rest two per row */
  .blog-feature{margin-top:var(--space-7);padding:10px;border-radius:22px}
  .blog-feature__photo{min-height:190px;border-radius:16px}
  .blog-feature__body{padding:var(--space-4) var(--space-3) var(--space-3)}
  .blog-feature__title{font-size:22px;line-height:1.2}
  .blog-feature__excerpt{margin-top:var(--space-3);font-size:14px;line-height:1.55}
  .blog-feature__cta{margin-top:var(--space-5)}
  .blog-grid{grid-template-columns:1fr 1fr;gap:var(--space-7) 12px}
  .blog-card__photo{border-radius:14px}
  .blog-card__photo .icon{width:18px!important;height:18px!important}
  .blog-feature__photo .article-category,.blog-card__photo .article-category{left:8px;bottom:8px;padding:5px 9px;font-size:10.5px}
  .blog-card__title{margin-top:var(--space-3);font-size:14.5px;line-height:1.3}
  .blog-card .article-meta{margin-top:6px;font-size:11px;line-height:1.45}
  .blog-card .article-meta__sep{display:none}
  .blog-card .article-meta__time{display:block}
  .article-related .blog-grid{grid-template-columns:1fr 1fr}

  /* cara sewa / cara pesan: two by two */
  .steps{grid-template-columns:1fr 1fr;gap:10px}
  .step{padding:var(--space-5) var(--space-4)}
  .step__num{width:34px;height:34px;margin-bottom:var(--space-6)}
  .step__title{font-size:15px}
  .step__desc{font-size:12px}

  /* HALAMAN JASA — same sizing as the other pages */
  .jasa-banner{padding-block:var(--space-9)}
  .jasa-hint{font-size:12px}
  .jasa-tabs{padding:5px}
  .jasa-tab{height:42px;padding:0 14px 0 7px;font-size:13px}
  .jasa-tab__icon{width:28px;height:28px}
  .jasa-panel.is-active{gap:var(--space-5)}
  .jasa-panel{padding-top:var(--space-7)}
  .jasa-panel__photo{min-height:0;aspect-ratio:16/10;border-radius:18px}
  .jasa-panel__card{padding:var(--space-6) var(--space-5);border-radius:18px}
  .jasa-panel__card h3{font-size:22px;line-height:1.2}
  .jasa-panel__card>p{margin-top:var(--space-3);font-size:14px}
  .jasa-panel__kicker{margin-top:var(--space-6)}
  .jasa-panel__list li{font-size:13px}
  .jasa-panel__actions{margin-top:var(--space-6);gap:8px}
  .jasa-panel__actions .btn{flex:1 1 100%;justify-content:center;min-height:44px}
  .jasa-flow__layout{gap:var(--space-5)}
  /* the team poster shows whole on a phone, logo at the top included */
  .jasa-flow__photo{min-height:0;aspect-ratio:1400/2002;max-height:none;border-radius:18px}
  .jasa-flow__card{padding:var(--space-6) var(--space-5);border-radius:18px}
  .jasa-flow__title{font-size:20px}
  .jasa-steps{margin-top:var(--space-5);gap:6px}
  .jasa-step{padding:var(--space-3);gap:var(--space-3)}
  .jasa-step__num{width:30px;height:30px}
  .jasa-step__title{font-size:14px}
  .jasa-step__desc{font-size:12px}

  /* FORM MINTA PENAWARAN — bigger targets, no iOS zoom on focus */
  .mp-intro{position:static}
  .mp-flow li{padding:var(--space-4)}
  .back-link{min-height:40px;align-items:center}
  .mp-section{padding:var(--space-6) var(--space-5)}
  .mp-section__head{margin-bottom:var(--space-5)}
  .mp-section__num{width:28px;height:28px}
  .mp-field{margin-bottom:var(--space-5)}
  .mp-field input,.mp-field textarea{font-size:16px;padding:12px 14px}
  .mp-pill{padding:10px 16px;font-size:12.5px}
  .mp-qty button{width:36px;height:36px;font-size:17px}
  .mp-qty span{min-width:64px}
  .mp-item{grid-template-columns:64px minmax(0,1fr);gap:var(--space-3);padding:var(--space-3)}
  .mp-item__photo{height:56px}
  .mp-submit{flex-direction:column;align-items:stretch;gap:var(--space-4)}
  .mp-submit .btn{width:100%;justify-content:center}
  /* the search boxes zoom in on iOS below 16px too */
  .jasa-search__box input,.header-search input{font-size:16px}

  /* footer: two link columns instead of one long stack */
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-7) var(--space-5)}
  .site-footer__grid>div:first-child{grid-column:1 / -1}

  /* keunggulan: two by two */
  .why-grid{grid-template-columns:1fr 1fr;gap:10px}
  .why-card{padding:var(--space-5);gap:var(--space-6)}
  .why-card__icon{width:40px;height:40px;border-radius:12px}
  .why-card__num{font-size:28px;top:var(--space-4);right:var(--space-5)}
  .why-card__title{font-size:15px}
  .why-card__desc{display:none}
  .why-card__title::after{display:none}
  .why-card{gap:var(--space-7);min-height:120px}

  /* material: two small cards on the left, one tall card on the right */
  .b-mission__cards{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:10px}
  .b-mission__cards .svc-card:nth-child(1){grid-column:1;grid-row:1}
  .b-mission__cards .svc-card:nth-child(2){grid-column:1;grid-row:2}
  .b-mission__cards .svc-card:nth-child(3){grid-column:2;grid-row:1 / span 2}
  .svc-card{aspect-ratio:auto;height:100%;min-height:150px;padding:var(--space-5)}
  .svc-card__title{font-size:15px}
  .svc-card__desc{font-size:11.5px;line-height:1.45}

  /* jangkauan: a wider, taller map */
  .coverage__map{margin-inline:calc(-1 * var(--container-pad) + 4px);border-radius:18px;min-height:300px}

  /* jasa: the fit list costs too much room on a phone */
  .jasa-show__note{display:none}
  .jasa-show__side{gap:0}

  /* 6. berita — tiles carry only a date, a title and a tag, so keep them low */
  .news-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(148px,auto);gap:10px}
  .news-tile{padding:var(--space-4)}
  .news-tile--featured{grid-column:1 / -1;min-height:170px}
  .news-tile__title{font-size:13px;line-height:1.3}
  .news-tile--featured .news-tile__title{font-size:17px}
  .news-tile__date{top:var(--space-4);left:var(--space-4)}
  .news-tile__cta{margin-top:var(--space-3)}

  /* inner page headers: one size everywhere (Blog, Tentang Kami, bantuan) */
  .page-top.page-hero .page-hero__title,#profil .page-hero__title{font-size:32px}
  .page-top.page-hero .page-hero__lede,#profil .page-hero__lede{font-size:15px}
  /* jenis alat / kategori material heroes follow the same size */
  .equip-intro__grid .page-hero__title{font-size:32px}
  .equip-intro__grid .page-hero__lede{font-size:15px}
  /* no empty band between a page header and the content under it */
  .page-top:is(.page-hero,.article-head):has(+ .b-section--after-top){padding-bottom:var(--space-7)}
  .page-top + .b-section--after-top{padding-top:var(--space-7)}

  /* ARTIKEL & LEGAL — reading text */
  .article__title{font-size:30px;line-height:1.15}
  .article__meta{margin-top:var(--space-4)}
  .article__hero{margin-bottom:var(--space-6);border-radius:18px}
  .article__lead{margin-bottom:var(--space-6);font-size:15px;line-height:1.6}
  .article__body{font-size:15px}
  .article__body h2{margin:var(--space-8) 0 var(--space-3);font-size:21px;line-height:1.25}
  .article__body h3{margin:var(--space-6) 0 var(--space-2);font-size:17px}
  .article__body>:first-child{margin-top:0}
  .article__body ul,.article__body ol{margin-left:20px;padding-left:2px}
  .article-cta-end{margin-top:var(--space-8);padding:var(--space-7) var(--space-5);border-radius:22px}
  .article-cta-end h2{font-size:20px;line-height:1.25}
  .article-cta-end p{font-size:13.5px}
  .article-cta-end__actions{margin-top:var(--space-5);gap:var(--space-2)}
  .article-cta-end__actions .btn{flex:1 1 100%;justify-content:center}


  /* TENTANG KAMI */
  .about-profil__text p{font-size:15px}
  .about-profil__text .about-profil__statement{margin-block:var(--space-6);padding-left:var(--space-4);font-size:19px}
  .about-usaha{gap:10px}
  .usaha-card{padding:var(--space-6) var(--space-5);border-radius:20px}
  .usaha-card__num{top:var(--space-5);right:var(--space-5);font-size:32px}
  .usaha-card__icon{width:44px;height:44px;margin-bottom:var(--space-6);border-radius:14px}
  .usaha-card__title{font-size:19px}
  .usaha-card__desc{font-size:13.5px}
  .usaha-card__cta{margin-top:var(--space-6);padding-top:var(--space-4)}
  .about-vm{gap:10px}
  .about-visi,.about-misi{padding:var(--space-6) var(--space-5);border-radius:18px}
  .about-vm__icon{width:40px;height:40px;margin-bottom:var(--space-5)}
  .about-vm h3{font-size:19px}
  .about-visi p{margin-top:var(--space-3);font-size:14px}
  .about-misi ol{margin-top:var(--space-4)}
  .about-misi li{grid-template-columns:24px 1fr;font-size:13.5px;margin-bottom:var(--space-3)}
  .about-misi li::before{width:24px;height:24px;font-size:12px}
  /* nilai: two by two */
  .about-nilai{grid-template-columns:1fr 1fr;gap:10px}
  .about-nilai__item{padding:var(--space-5) var(--space-4);border-radius:18px}
  .about-nilai__icon{width:40px;height:40px;margin-bottom:var(--space-5)}
  .about-nilai__item b{font-size:15px}
  .about-nilai__item>span:not(.about-nilai__icon){font-size:12.5px;line-height:1.5}

  /* contact card — identical on Tentang Kami, Pusat Bantuan, Hubungi Kami */
  .about-kontak{gap:10px}
  .about-kontak__card,.hubungi-side{padding:var(--space-6) var(--space-5);border-radius:18px}
  .about-kitem{grid-template-columns:38px 1fr;gap:var(--space-3);margin-bottom:var(--space-5)}
  .about-kitem__icon{width:38px;height:38px}
  .about-kitem dt{font-size:14px}
  .about-kitem dd{font-size:13.5px}
  .about-kontak__actions{margin-top:var(--space-6)}
  .about-kontak__actions .btn{width:100%;justify-content:center}
  .motto{min-height:180px}

  /* FAQ */
  .faq-group{gap:var(--space-4);padding-block:var(--space-8)}
  .faq-group__num{font-size:13px}
  .faq-group__title{margin-top:var(--space-2);font-size:20px}
  .faq-group__items{gap:8px}
  .faq-item{border-radius:14px}
  .faq-item summary{padding:var(--space-4);font-size:14.5px;gap:var(--space-3)}
  .faq-item__icon{width:28px;height:28px}
  .faq-item__answer{padding:0 var(--space-4) var(--space-4);font-size:13.5px}
  .faq-group ~ .cta-banner{margin-top:var(--space-6)!important}
  .faq-group ~ .cta-banner .cta-banner__actions{width:100%}

  /* HUBUNGI KAMI */
  .hubungi-side{margin-top:var(--space-6)}
  .hubungi-side h2{font-size:19px}
  .hubungi-side>p{margin-bottom:var(--space-5);font-size:13.5px}
  .hubungi-form{padding:var(--space-6) var(--space-5);border-radius:18px}
  .hubungi-form h2{font-size:22px}
  .hubungi-form>p{margin-bottom:var(--space-6);font-size:13.5px}
  .hubungi-branch__grid{gap:10px}
  .hubungi-branch__card{padding:var(--space-6) var(--space-5);border-radius:20px}
  .hubungi-branch__icon{width:44px;height:44px;margin-bottom:var(--space-6)}
  .hubungi-branch__card b{font-size:19px}
  .hubungi-branch__card>span:not(.hubungi-branch__icon){font-size:13.5px}
  .hubungi-branch__card .btn{align-self:stretch;justify-content:center}
}

/* Below ~414px the two action labels cannot share a row, so they take the
   full width instead of ending up as two ragged buttons. */
@media (max-width:413px){
  .b-actions .btn{flex:1 1 100%;justify-content:center}
}