/* CV BJAS corporate presentation. Layout primitives live in cvbjas-onepage.css. */
html { scroll-padding-top: 1rem; }
body { background: var(--color-background); color: var(--color-heading); font-size: 1rem; line-height: 1.65; }
::selection { background: #bfdbfe; color: var(--color-primary); }
h1,h2,h3 { font-family: var(--font-display); color: inherit; letter-spacing: -.015em; line-height: 1.15; font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.45rem, 2.3vw, 1.75rem); font-weight: 600; }
p { max-width: 70ch; }
.light { --surface: var(--color-background); --foreground: var(--color-heading); --secondary: var(--color-muted); --rule: var(--color-border); --focus: var(--color-accent); }
.dark { --surface: var(--color-primary); --foreground: var(--color-on-dark); --secondary: var(--color-on-dark-muted); --rule: var(--color-line-dark); --focus: var(--color-on-dark-eyebrow); }
.deep { --surface: var(--color-deep); }
.blue { --surface: var(--color-blue); --secondary: var(--color-on-dark-muted); --rule: var(--color-line-blue); }
.blue-deep { --surface: var(--color-blue-deep); }
.mint { --surface: var(--color-mint); }
.container { width: min(100%, var(--page-width)); }
.section { padding-block: var(--section-space); }
.kicker { font-size: .78rem; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.section-heading { margin-bottom: 2rem; }
.section-heading h2 { max-width: 22ch; }
.muted { color: var(--secondary); }
.text-link { min-height: 2.75rem; color: var(--foreground); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; transition: color .2s; }
.text-link:hover { color: #1d4ed8; }
.dark .text-link:hover { color: var(--color-on-dark-eyebrow); }
.button { min-height: 3.125rem; gap: 1rem; padding: .7rem 1.25rem; border: 1px solid var(--color-accent); border-radius: var(--radius-button); background: var(--color-accent); color: #fff; font-size: .94rem; font-weight: 600; line-height: 1.35; box-shadow: none; transition: background-color .2s, border-color .2s, transform .2s; }
.button:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; transform: translateY(-1px); }
.button-outline { border-color: var(--foreground); background: transparent; color: var(--foreground); }
.button-outline:hover { border-color: var(--foreground); background: var(--foreground); color: var(--surface); }
.round-link { width: 2.8rem; height: 2.8rem; border-color: var(--foreground); transition: background-color .2s, color .2s; }
.round-link:hover { background: var(--foreground); color: var(--surface); }

/* One horizontal desktop header. The original transparent logo is untouched. */
.site-header { background: #fff; color: var(--color-heading); }
.header-inner { min-height: 5rem; gap: clamp(1rem, 2vw, 2rem); border: 0; }
.brand-home { flex: 0 0 auto; gap: .8rem; }
.logo-plate { width: 3.8rem; height: 3.8rem; padding: 0; background: transparent; }
.logo-plate img { width: 100%; height: 100%; object-fit: contain; }
.brand-caption { color: var(--color-primary); font-family: var(--font-display); font-size: .78rem; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.fallback-nav { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: clamp(.65rem, 1.5vw, 1.5rem); min-width: 0; padding: 0; }
.fallback-nav a { min-height: 2.75rem; display: inline-flex; align-items: center; color: #334155; font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.fallback-nav a:hover,.fallback-nav a:focus-visible { color: #1d4ed8; }
.header-actions { flex: 0 0 auto; gap: .75rem; }
.header-contact { display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; padding: .55rem .95rem; border: 1px solid var(--color-accent); border-radius: var(--radius-button); background: var(--color-accent); color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; }
.header-contact:hover { background: #1d4ed8; border-color: #1d4ed8; }
.site-header .menu-toggle { color: var(--color-primary); background: transparent; font-weight: 600; }
.site-js .site-header [data-menu-open]:not([hidden]) { display: none; }
.site-menu { background: var(--color-primary); color: #fff; }
.site-menu::backdrop { background: rgba(8,18,35,.7); }
.site-menu .menu-toggle { color: #fff; background: transparent; }
.site-menu .menu-links a { font-weight: 600; }
.menu-info a { overflow-wrap: anywhere; }

/* Two-column first view with the existing store photograph. */
.hero { min-height: 39rem; padding-block: clamp(3rem, 5vw, 5rem); background: var(--color-primary); }
.hero > .container { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero-topline { display: block; }
.hero-topline .kicker { color: var(--color-on-dark-eyebrow); }
.hero-location { display: none; }
.hero-title { max-width: 13ch; margin: 1.75rem 0 1.25rem; color: #fff; font-size: clamp(2.6rem, 4.6vw, 3.5rem); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; }
.hero-summary { display: flex; align-items: flex-start; flex-direction: column; gap: 1.8rem; margin: 0; }
.hero-summary p { max-width: 38ch; color: var(--color-on-dark-muted); font-size: 1.125rem; line-height: 1.65; letter-spacing: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-actions .button-outline { border-color: #94a3b8; color: #fff; }
.hero-actions .button-outline:hover { border-color: #fff; background: #fff; color: var(--color-primary); }
.hero-showcase { display: flex; flex-direction: column; align-self: stretch; min-width: 0; }
.hero-photo-stage,.hero-photo,.hero-photo-frame { height: 100%; }
.hero-photo-frame { overflow: hidden; border-radius: var(--radius-card); background: #334155; transform: none !important; }
.hero-photo img { width: 100%; height: 100%; min-height: 29rem; aspect-ratio: 4/5; object-fit: cover; object-position: center 43%; transform: none !important; }
.photo-caption { color: var(--color-on-dark-muted); border-color: var(--color-line-dark); font-size: .8rem; }
.photo-caption a { color: #fff; font-weight: 600; text-decoration: none; }
.photo-caption a:hover { text-decoration: underline; }
.trust-bar { padding-block: 1.5rem; border-bottom: 1px solid var(--color-border); background: #fff; }
.trust-bar .container { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; }
.trust-bar p { max-width: none; padding-left: 1rem; border-left: 2px solid var(--color-accent); color: #475569; font-size: .9rem; line-height: 1.45; }
.trust-bar strong { display: block; color: var(--color-primary); font-family: var(--font-display); font-size: 1rem; font-weight: 700; }

/* Content sections: restrained cards, aligned edges, factual photography. */
#tentang { background: #fff; }
#tentang .split { align-items: start; }
#tentang .about-copy { max-width: 36ch; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.6; }
.since { border-color: var(--color-border); }
.since strong { color: var(--color-primary); font-family: var(--font-display); font-size: clamp(2.5rem,4vw,3.5rem); font-weight: 700; }
#layanan { --surface: var(--color-background); --foreground: var(--color-heading); --secondary: var(--color-muted); --rule: var(--color-border); background: var(--color-background); color: var(--color-heading); }
#layanan .section-heading { margin-bottom: 2rem; }
#layanan .service-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; border: 0; }
#layanan .service-row { display: flex; flex-direction: column; gap: 1rem; min-height: 18rem; padding: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: #fff; }
#layanan .service-row h3 { font-size: 1.3rem; line-height: 1.25; }
#layanan .service-row p { max-width: 36ch; color: var(--color-muted); font-size: .96rem; line-height: 1.6; }
#layanan .service-row .round-link { margin-top: auto; align-self: flex-end; }
#brand { background: #fff; }
.brand-grid { gap: 1rem; border: 0; }
.brand-tile { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: #fff; aspect-ratio: 1.3; padding: 1.25rem; }
.brand-tile img { max-height: 6.5rem; }
#bukti { background: var(--color-background); }
.work-grid { gap: 1.5rem; }
.work-grid figure:nth-child(2) { padding-top: 0; }
.work-image { overflow: hidden; border-radius: var(--radius-card); background: #e2e8f0; }
.work-image img { aspect-ratio: 4/3; object-fit: cover; }
.work-grid figcaption { border-color: var(--color-border); }
#testimoni { background: var(--color-primary); }
.reviews { border-color: var(--color-line-dark); }
.review { gap: clamp(2rem,5vw,5rem); }
.review img { aspect-ratio: 4/5; border-radius: var(--radius-card); }
.review blockquote { font-family: var(--font-display); font-size: clamp(1.4rem,2.3vw,2rem); line-height: 1.45; letter-spacing: -.02em; }
.review cite { font-size: .9rem; }
.procurement { background: #fff; }
.procurement-intro { max-width: 65ch; margin-top: .75rem; color: var(--color-muted); }
.procurement-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; margin-top: 2rem; }
.procurement-card { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-height: 14rem; padding: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-background); }
.procurement-card h3 { font-size: 1.35rem; }
.procurement-card p { color: var(--color-muted); font-size: .96rem; }
.procurement-card .text-link { margin-top: auto; color: #1d4ed8; }
#recruitment { --surface: var(--color-mint); --foreground: var(--color-heading); --secondary: var(--color-muted); --rule: var(--color-border); border-top: 1px solid var(--color-border); background: var(--color-mint); color: var(--color-heading); }
#recruitment h2 { font-size: clamp(1.75rem,3vw,2.25rem); }
#kontak { background: var(--color-primary); }
.contact-heading { border-color: var(--color-line-dark); }
.contact-grid a:hover { color: var(--color-on-dark-eyebrow); }
.site-footer { background: var(--color-deep); color: #fff; }
.footer-top > p { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { color: var(--color-on-dark-eyebrow); text-decoration: underline; }

/* Shared detail-page treatment. */
.page-hero { padding-block: clamp(4rem,6vw,6rem); border-bottom: 1px solid var(--color-border); background: var(--color-mint); }
.page-hero h1 { max-width: 18ch; margin-top: 1.5rem; font-size: clamp(2.25rem,4.7vw,3.5rem); font-weight: 700; }
.page-hero p { max-width: 65ch; margin-top: 1.25rem; color: var(--color-muted); font-size: 1.125rem; }
.breadcrumb { color: #1d4ed8; font-size: .875rem; font-weight: 600; text-decoration: none; }
.breadcrumb::before { content: "←"; margin-right: .5rem; font-size: 1.1rem; }
.breadcrumb:hover { text-decoration: underline; }
.page-hero + .section { background: #fff; }
.article { max-width: 45rem; }
.article article + article,.person { border-color: var(--color-border); }
.article p,.article li { color: #334155; }
.steps { gap: 1rem; }
.steps li { padding: 1.2rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: #fff; }
.steps h3 { display: block; margin-top: .5rem; font-size: 1.1rem; }
.filter-button { border: 1px solid var(--color-border); border-radius: 999px; background: #fff; color: var(--color-heading); font-size: .9rem; font-weight: 600; }
.filter-button[aria-pressed="true"],.filter-button:hover { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.directory-grid .brand-tile { aspect-ratio: 1.4; }
.person img { border-radius: var(--radius-card); }
.official-channel-section { background: var(--color-background); }
.page-hero + .management-section { background: var(--color-background); }
.management-heading { margin-bottom: 2rem; text-align: center; }
.management-heading .kicker { color: #1d4ed8; }
.management-heading h2 { margin-top: .5rem; font-size: clamp(1.75rem,3.2vw,2.5rem); }
.management-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.25rem; }
.management-card { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 2rem 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: #fff; text-align: center; }
.management-photo { width: 9rem; height: 9rem; flex: 0 0 auto; overflow: hidden; margin-bottom: 1.5rem; border: 4px solid #fff; border-radius: 50%; outline: 1px solid var(--color-border); background: #dddadd; }
.management-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.management-copy h3 { font-size: 1.1rem; line-height: 1.4; font-weight: 700; overflow-wrap: normal; }
.management-copy p { max-width: 24ch; margin: .65rem auto 0; color: #475569; font-size: .95rem; line-height: 1.5; }

@media (max-width: 63.99rem) {
  .header-inner { min-height: 4.5rem; }
  .site-js .fallback-nav { display: none; }
  .fallback-nav { flex-wrap: wrap; justify-content: flex-start; padding: .5rem 0 1rem; }
  .site-js .site-header [data-menu-open]:not([hidden]) { display: inline-flex; }
  .hero { min-height: 0; }
  .hero > .container { column-gap: 2rem; }
  .hero-title { font-size: clamp(2.25rem,4.5vw,3rem); }
  #layanan .service-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .management-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 47.99rem) {
  .header-inner { min-height: 4rem; }
  .logo-plate { width: 3rem; height: 3rem; }
  .brand-caption { font-size: .72rem; }
  .header-contact { display: none; }
  .hero { padding-block: 4rem; }
  .hero > .container { display: flex; flex-direction: column; }
  .hero-title { max-width: 16ch; margin: 1.25rem 0; font-size: 2.25rem; }
  .hero-summary { gap: 1.5rem; margin-bottom: 2.5rem; }
  .hero-summary p { font-size: 1rem; }
  .hero-actions { width: 100%; }
  .hero-actions .button { flex: 1 1 100%; }
  .hero-showcase { width: 100%; }
  .hero-photo-stage,.hero-photo,.hero-photo-frame { height: auto; }
  .hero-photo img { height: auto; min-height: 0; aspect-ratio: 4/5; }
  .trust-bar .container { grid-template-columns: 1fr; gap: 1rem; }
  .section-heading { align-items: flex-start; }
  #layanan .service-list,.procurement-grid,.work-grid,.review,.contact-heading,.contact-grid { grid-template-columns: 1fr; }
  #layanan .service-row { min-height: 0; }
  .brand-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .brand-tile { padding: .75rem; }
  .work-grid figure:nth-child(2) { padding-top: 0; }
  .steps { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 2.25rem; }
  .page-hero p { font-size: 1rem; }
  .management-grid { grid-template-columns: 1fr; }
  .management-card { padding: 1.75rem 1.25rem; }
  .menu-body { grid-template-columns: 1fr; }
  .menu-links a { font-size: 1.6rem; }
  .footer-top { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .button,.round-link,.text-link,.brand-tile { transition: none !important; transform: none !important; }
}