/* Hallmark · shape: kept sequence, editorial service catalogue · genre: editorial · theme: brand · redesign: full · copy: verbatim
 * paper: oklch(98% 0.006 155) · accent: oklch(46% 0.13 150) · display: Assistant · body: Assistant · hero: Stage · nav: brand and inline destinations · footer: office directory
 * signature: original Asyki reception framed beside its own promise · axes: light/grotesk-sans/cool · posture: Committed · v2.0.0 */
/* Hallmark · pre-emit critique: original content drives the design; full programme and office directory retained; avoid repeating identical section containers. */
/* Hallmark · waive 8 · original section sequence retained · Pialang Asyki retains Produk unggulan lainnya and Asyki Group in the order requested by the owner */
/* Hallmark · waive 49b · footer Program links retain full product names across at most two lines · Proteksi Perjalanan Travel Haji and Perlindungan Kendaraan Bermotor are original programme names */
@import url('./tokens.css');
@import url('./base.css');
@font-face { font-family: 'Assistant'; src: url('./assets/assistant.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Assistant'; src: url('./assets/assistant-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Assistant'; src: url('./assets/assistant-700.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
.skip-link { position: fixed; z-index: var(--z-tooltip); inset: var(--space-md) auto auto var(--space-md); padding: var(--space-sm) var(--space-lg); background: var(--color-paper); transform: translateY(-180%); }
.skip-link:focus-visible { transform: translateY(0); }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; }
button:disabled { cursor: default; background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule); }
button:active, .button:active { transform: translateY(1px); }
.site-header { background: var(--color-paper); position: relative; z-index: var(--z-sticky-nav); }
.header-inner { min-height: 108px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.brand { overflow: clip; justify-content: center; width: 126px; height: 86px; display: flex; align-items: center; }
.brand img { max-width: none; flex-shrink: 0; width: 165px; height: 165px; object-fit: contain; }
nav { display: flex; align-items: center; gap: var(--space-xl); font-size: var(--text-md); font-weight: 700; }
nav > a:not(.button) { padding-block: var(--space-sm); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-lg); min-height: 52px; padding: var(--space-sm) var(--space-lg); border: 1px solid var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; border-radius: var(--radius-button); line-height: 1.2; }
.button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); text-decoration: none; }
.nav-button { min-height: 48px; }
.menu-toggle { display: none; }
.hero { background: var(--color-paper-2); }
.opening-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-2xl); min-height: 720px; padding-block: var(--space-2xl); }
.hero h1 { max-width: 11ch; font-size: var(--text-display); font-weight: 700; line-height: 1.06; letter-spacing: -.045em; }
.hero .lead { max-width: 35ch; color: var(--color-ink-2); margin-block: var(--space-lg) var(--space-xl); font-size: var(--text-lead); }
.opening-media { min-width: 0; position: relative; }
.banner-frame { position: relative; aspect-ratio: 1.06; background: var(--color-field); overflow: clip; border-radius: var(--radius-card); }
.banner-frame img { width: 100%; height: 100%; object-fit: contain; }
.banner-frame img.office-crop { position: absolute; max-width: none; width: 225%; height: 126%; object-fit: fill; right: -12%; top: -13%; }
.banner-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-md); }
.banner-controls p { font-size: var(--text-sm); color: var(--color-ink-2); }
.banner-buttons { display: flex; gap: var(--space-xs); }
.banner-buttons button { display: grid; place-items: center; width: 40px; height: 40px; background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); }
.banner-buttons button:hover { background: var(--color-paper-3); }
.banner-buttons button:first-child svg { transform: rotate(180deg); }
.philosophy { background: var(--color-field); color: var(--color-field-ink); padding-block: var(--space-2xl); }
.quote-grid { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: var(--gap-columns); }
.quote-mark svg { width: 60px; height: 60px; color: var(--color-seal); }
figure, blockquote { margin: 0; }
.philosophy figure { min-height: 300px; }
blockquote p { font-size: var(--text-quote); line-height: 1.55; max-width: none; }
figcaption { margin-top: var(--space-lg); font-size: var(--text-sm); }
.section { padding-block: var(--section-gap-s); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2xl); margin-bottom: var(--space-2xl); }
.heading-rule { height: 1px; flex: 1; background: var(--color-rule); margin-bottom: var(--space-xs); }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.product { min-width: 0; }
.product > img { width: 100%; aspect-ratio: 2.12; object-fit: cover; border-radius: var(--radius-card); }
.product-info { display: flex; gap: var(--space-lg); justify-content: space-between; align-items: center; padding-top: var(--space-xl); }
.product h3 { font-size: var(--text-title); max-width: 21ch; }
.product-link { display: inline-flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; font-size: var(--text-sm); color: var(--color-accent); min-height: 44px; font-weight: 700; }
.about { background: var(--color-paper-2); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--gap-columns); align-items: start; }
.about h2 { max-width: 14ch; }
.about-copy { color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.7; }
.about-copy p + p { margin-top: var(--space-lg); }
.documentation { margin-top: var(--space-2xl); }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.gallery img { width: 100%; height: 210px; object-fit: cover; border-radius: var(--radius-card); }
.text-button { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-lg); min-height: 48px; padding: var(--space-sm) 0; margin-top: var(--space-lg); color: var(--color-accent); background: none; border: none; border-bottom: 1px solid var(--color-accent); font-weight: 700; }
.text-button:hover { color: var(--color-ink); }
.services { background: var(--color-field); color: var(--color-field-ink); padding-block: var(--space-2xl); }
.service-item { display: flex; align-items: center; gap: var(--space-xl); padding-block: var(--space-xl); border-bottom: 1px solid var(--color-field-rule); }
.service-item:first-child { padding-top: 0; }
.service-item:last-child { border-bottom: none; padding-bottom: 0; }
.service-item > span { color: var(--color-seal); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.service-item h2 { font-size: var(--text-section); flex: 1; }
.service-item > svg { width: 32px; height: 32px; color: var(--color-seal); }
.group-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; margin-bottom: var(--space-2xl); }
.group-heading p { color: var(--color-ink-2); }
.group-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.group-logos > :nth-child(n+6) { transform: translateX(50%); }
.group-logos img { width: 100%; height: 120px; object-fit: contain; mix-blend-mode: multiply; }
.group-logos > a { display: block; }
.partners { background: var(--color-logo-paper); border-top: 1px solid var(--color-rule); }
.partner-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; margin-bottom: var(--space-2xl); }
.partner-heading p { color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.65; }
.partner-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); }
.partner-logos img { width: 100%; height: 104px; object-fit: contain; }
.community { background: var(--color-paper-2); }
.community-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; }
.community h2 { max-width: 19ch; }
.community h2 + p { color: var(--color-ink-2); margin-block: var(--space-lg) var(--space-xl); max-width: 48ch; font-size: var(--text-lg); }
.social-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.social-links a { display: flex; align-items: center; gap: var(--space-sm); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); min-width: 0; }
.social-links img { width: 30px; height: 30px; object-fit: contain; }
.social-links span { min-width: 0; flex: 1; }
.social-links strong { display: block; font-size: var(--text-md); font-weight: 700; overflow-wrap: anywhere; }
.social-links small { display: block; color: var(--color-ink-2); font-size: var(--text-sm); }
.social-links svg { width: 16px; flex-shrink: 0; }
.prayer { padding: var(--space-xl); background: var(--color-paper); border-radius: var(--radius-card); margin-top: var(--space-xs); }
.prayer h3 { font-size: var(--text-title); }
.prayer iframe { width: 100%; height: 285px; border: 0; margin-block: var(--space-lg); background: var(--color-logo-paper); }
.prayer p { font-size: var(--text-sm); color: var(--color-ink-2); }
.prayer a { text-decoration: underline; }
.site-footer { background: var(--color-field); color: var(--color-field-ink); padding-top: var(--space-2xl); }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-field-rule); }
.footer-logo { background: var(--color-logo-paper); width: 125px; border-radius: var(--radius-card); }
.footer-logo img { width: 125px; height: 90px; object-fit: contain; }
.footer-contact { display: flex; flex-wrap: wrap; gap: var(--space-xl); }
.footer-contact a { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-lg); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); padding-block: var(--space-2xl); }
.footer-grid h3 { font-size: var(--text-lg); line-height: 1.4; letter-spacing: 0; margin-bottom: var(--space-lg); }
.footer-grid h4 { font-size: var(--text-md); font-weight: 700; margin: var(--space-lg) 0 var(--space-xs); }
address { font-style: normal; color: var(--color-field-muted); font-size: var(--text-md); line-height: 1.75; }
.footer-grid > * { min-width: 0; }
.footer-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-md); color: var(--color-field-muted); }
.legal-logos { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xl); }
.legal-logos p { font-size: var(--text-sm); margin-bottom: var(--space-sm); color: var(--color-field-muted); }
.legal-logos img { width: 130px; height: 48px; object-fit: contain; background: var(--color-logo-paper); padding: var(--space-xs); border-radius: var(--radius-card); }
.copyright { display: flex; justify-content: space-between; gap: var(--space-lg); border-top: 1px solid var(--color-field-rule); padding-block: var(--space-lg); font-size: var(--text-sm); color: var(--color-field-muted); }
@media (min-width: 1600px) { .opening-grid { min-height: 720px; } }
@media (max-width: 60rem) {
 .opening-grid { gap: var(--space-xl); min-height: 600px; }
 .hero h1 { font-size: clamp(3.2rem, 6.8vw, 4.8rem); }
 nav { gap: var(--space-lg); }
 .quote-grid { grid-template-columns: 60px minmax(0, 1fr); gap: var(--space-lg); }
 .about-grid, .group-heading, .partner-heading { gap: var(--space-xl); }
 .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .community-grid { gap: var(--space-xl); }
 .social-links { grid-template-columns: minmax(0, 1fr); }
 .prayer { padding: var(--space-lg); }
 .footer-grid { gap: var(--space-lg); }
 .group-logos, .partner-logos { gap: var(--space-md); }
}
@media (max-width: 44rem) {
 .header-inner { min-height: 88px; flex-wrap: wrap; }
 .brand { width: 102px; height: 76px; }
 .brand img { width: 150px; height: 150px; }
 .menu-toggle { display: inline-flex; align-items: center; gap: var(--space-xs); border: 1px solid var(--color-rule); padding: var(--space-sm) var(--space-md); color: var(--color-ink); background: var(--color-paper); border-radius: var(--radius-button); }
 nav { width: 100%; flex-direction: column; align-items: stretch; gap: var(--space-xs); padding-bottom: var(--space-lg); }
 .js nav:not(.is-open) { display: none; }
 nav > a { padding: var(--space-sm); }
 .opening-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-xl); }
 .hero h1 { font-size: clamp(3.4rem, 12vw, 4.5rem); max-width: 12ch; }
 .hero .lead { margin-block: var(--space-lg); font-size: var(--text-lg); }
 .banner-frame { aspect-ratio: 1.3; }
 .banner-frame img.office-crop { width: 220%; height: 150%; top: -25%; right: -11%; }
 .quote-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
 .quote-mark svg { width: 40px; height: 40px; }
 blockquote p { font-size: var(--text-lg); }
 .section-heading { margin-bottom: var(--space-xl); }
 .product-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
 .product-info { padding-top: var(--space-md); }
 .product h3 { font-size: var(--text-xl); }
 .about-grid, .group-heading, .partner-heading, .community-grid, .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
 .about h2 { max-width: 19ch; }
 .about-copy { font-size: var(--text-md); }
 .gallery { gap: var(--space-sm); }
 .gallery img { height: 155px; }
 .service-item { gap: var(--space-lg); padding-block: var(--space-lg); }
 .service-item h2 { font-size: clamp(1.65rem, 6vw, 2.4rem); }
 .service-item > svg { width: 24px; }
 .group-logos, .partner-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
 .group-logos > :nth-child(n+6) { transform: none; }
 .group-logos img { height: 90px; }
 .partner-logos img { height: 82px; }
 .partner-logos > :nth-last-child(-n+2) { transform: translateX(50%); }
 .partner-heading p { font-size: var(--text-md); }
 .social-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
 .social-links strong { font-size: var(--text-sm); }
 .social-links img { width: 24px; height: 24px; }
 .social-links svg { display: none; }
 .footer-top, .footer-contact, .copyright { align-items: flex-start; flex-direction: column; gap: var(--space-lg); }
 .footer-grid { padding-block: var(--space-xl); }
 .copyright { font-size: var(--text-xs); }
}