/* Speedking homepage — "spiced parchment gallery".
   Palette: #292622 midnight-roast hero · #d8cbb8 parchment page/card · #bfb4a3 linen
   band · #2c2c2c onyx closing surfaces · #d49653 saffron accent.
   Type: Cormorant Garamond 300 uppercase (display) · Inter 500/700 (body, nav, labels).
   The page opens dark and atmospheric, then transitions to the parchment canvas for
   every content-heavy section below — dark bookends, editorial middle.
   Loaded on the front page only (inc/home/home-rsnl.php). Every selector is scoped under .speedking-theme. */

.speedking-theme {
	--rh-black: #2c2c2c;
	--rh-roast: #292622;
	--rh-deep: #bfb4a3;
	--rh-linen: #bfb4a3;
	--rh-bg: #d8cbb8;
	--rh-card: #d8cbb8;
	--rh-field: #e2d9ca;
	--rh-text: #2c2c2c;
	/* Secondary copy sits in the espresso family: the reference's walnut #978e81
	   only reads 2:1 on parchment, so it stays decoration (--rh-walnut). */
	--rh-soft: #46403a;
	--rh-muted: #4a443c;
	--rh-walnut: #978e81;
	--rh-line: #b6ab9c;
	/* Saffron carries no text on parchment (1.55:1) — squares, rules and active
	   marks only. On the dark hero it clears 5.5:1 and becomes a text colour. */
	--rh-accent: #d49653;
	--rh-on-dark: #d8cbb8;
	--rh-on-dark-soft: #b6ab9c;
	--rh-head: "Cormorant Garamond", "Playfair Display", Georgia, serif;
	--rh-body: "Inter", system-ui, -apple-system, sans-serif;
	--rh-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--rh-sec: 160px;
}

.speedking-theme.rh-home {
	margin: 0;
	background: var(--rh-bg);
	color: var(--rh-text);
	font-family: var(--rh-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: -.01em;
	-webkit-font-smoothing: antialiased;
}

.speedking-theme.rh-home *,
.speedking-theme.rh-home *::before,
.speedking-theme.rh-home *::after { box-sizing: border-box; }

.speedking-theme .rh-wrap { max-width: 1440px; margin: 0 auto; padding: 0 60px; }
.speedking-theme .rh-narrow { max-width: 1040px; }
.speedking-theme a { color: inherit; }
.speedking-theme img { display: block; max-width: 100%; height: auto; }
.speedking-theme ::selection { background: var(--rh-accent); color: var(--rh-text); }

/* Header */
.speedking-theme .rh-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 92px; }

/* Buttons and links — ghost outlined and text-only. The system has no filled
   chromatic control: the hairline box and the uppercase label are the affordance. */
.speedking-theme .rh-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 56px; padding: 18px 28px; background: transparent; color: var(--rh-text); font-family: var(--rh-body); font-weight: 500; font-size: 14px; letter-spacing: -.01em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--rh-text); border-radius: 3px; cursor: pointer; transition: background-color .4s var(--rh-ease), color .4s var(--rh-ease); }
.speedking-theme .rh-btn:hover { background: var(--rh-text); color: var(--rh-on-dark); }
.speedking-theme .rh-btn--block { width: 100%; margin-top: 24px; }
.speedking-theme .rh-header__cta { min-height: 44px; padding: 12px 20px; font-size: 13px; white-space: nowrap; }
.speedking-theme .rh-link { font-family: var(--rh-body); font-weight: 500; font-size: 14px; letter-spacing: -.01em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .4em; text-decoration-thickness: 1px; }
.speedking-theme .rh-link:hover { color: var(--rh-muted); }

/* Shared type — micro-caps metadata above a whisper-weight serif headline. */
.speedking-theme .rh-kicker { margin: 0 0 20px; font-family: var(--rh-body); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--rh-muted); }
.speedking-theme .rh-h2 { margin: 0 0 28px; font-family: var(--rh-head); font-weight: 300; font-size: clamp(2.2rem, 5.2vw, 4.3125rem); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; color: var(--rh-text); }
.speedking-theme .rh-lead { max-width: 60ch; margin: 0; font-size: 16px; color: var(--rh-soft); }
/* Not a chromatic label any more: emphasis is Inter 700 in the warm dark. */
.speedking-theme .rh-accent-note { margin: 0 0 56px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--rh-text); }
.speedking-theme .rh-note { margin: 48px 0 0; padding: 24px 28px; background: var(--rh-linen); border-left: 3px solid var(--rh-accent); font-size: 16px; color: var(--rh-text); max-width: 1000px; }
.speedking-theme .rh-item__title { margin: 0 0 14px; font-family: var(--rh-head); font-weight: 300; font-size: 32px; line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
.speedking-theme .rh-item__body { margin: 0; font-size: 14px; line-height: 1.7; letter-spacing: -.01em; color: var(--rh-soft); }
.speedking-theme .rh-item__text { font-size: 14px; line-height: 1.7; letter-spacing: -.01em; color: var(--rh-soft); }
.speedking-theme .rh-item__text strong,
.speedking-theme .rh-mat__text strong { display: block; margin: 0 0 14px; font-family: var(--rh-head); font-weight: 300; font-size: 32px; line-height: .95; letter-spacing: -.03em; text-transform: uppercase; color: var(--rh-text); }
.speedking-theme .rh-mat__text { padding: 0 28px; }
.speedking-theme .rh-mat__text strong { font-size: 34px; padding-top: 28px; }
.speedking-theme .rh-item__media { margin: 0 0 28px; background: var(--rh-linen); }
.speedking-theme .rh-item__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.speedking-theme .rh-paras p { margin: 0 0 20px; font-size: 16px; line-height: 1.75; letter-spacing: -.01em; color: var(--rh-soft); }
.speedking-theme .rh-h3 { margin: 0 0 24px; font-family: var(--rh-head); font-weight: 300; font-size: 42px; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; color: var(--rh-text); }

/* Sections — parchment, linen for the tonal shift, each divided by a hairline
   that reads as an editorial column rule rather than a border. */
.speedking-theme .rh-sec { padding: var(--rh-sec) 0; background: var(--rh-bg); border-top: 1px solid var(--rh-line); }
.speedking-theme .rh-sec--deep { background: var(--rh-linen); border-top: 0; }
.speedking-theme .rh-sec--final { background: var(--rh-linen); border-top: 0; }
.speedking-theme .rh-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 80px; align-items: start; }
.speedking-theme .rh-split--table { grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr); gap: 56px; }
.speedking-theme .rh-split--about { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.speedking-theme .rh-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.speedking-theme .rh-two--text { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: start; }
.speedking-theme .rh-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
.speedking-theme .rh-item { border-top: 1px solid var(--rh-line); padding-top: 28px; }

/* Hero — the dark atmospheric opening the whole system leads with. Everything
   inside it flips to parchment-on-roast, which is also the one place saffron
   earns a text colour (5.5:1 on the roast). */
.speedking-theme .rh-hero { background: var(--rh-roast); color: var(--rh-on-dark); padding: 120px 0 0; }
.speedking-theme .rh-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
.speedking-theme .rh-hero .rh-kicker { color: var(--rh-accent); }
.speedking-theme .rh-h1 { margin: 0 0 32px; font-family: var(--rh-head); font-weight: 300; font-size: clamp(2.9rem, 5.6vw, 5.5rem); line-height: .85; letter-spacing: -.04em; text-transform: uppercase; color: var(--rh-on-dark); }
.speedking-theme .rh-ul { position: relative; display: inline-block; }
/* One flat saffron rule — the palette carries no gradients. */
.speedking-theme .rh-ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: .08em; height: 2px; background: var(--rh-accent); }
.speedking-theme .rh-sub { max-width: 60ch; margin: 0 0 24px; font-size: 16px; color: var(--rh-on-dark-soft); }
.speedking-theme .rh-honest { margin: 0 0 40px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--rh-accent); }
.speedking-theme .rh-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 40px; border: 1px solid rgba(216, 203, 184, .28); }
.speedking-theme .rh-chip { padding: 16px 16px 18px; border-left: 1px solid rgba(216, 203, 184, .28); }
.speedking-theme .rh-chip:first-child { border-left: 0; }
.speedking-theme .rh-chip dt { margin: 0 0 8px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--rh-accent); }
.speedking-theme .rh-chip dd { margin: 0; font-family: var(--rh-head); font-weight: 300; font-size: 22px; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; color: var(--rh-on-dark); }
.speedking-theme .rh-chip__note { display: block; margin-top: 6px; font-family: var(--rh-body); font-weight: 500; font-size: 11px; letter-spacing: -.01em; text-transform: none; color: var(--rh-on-dark-soft); }
.speedking-theme .rh-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.speedking-theme .rh-hero .rh-btn { color: var(--rh-on-dark); border-color: var(--rh-on-dark); }
.speedking-theme .rh-hero .rh-btn:hover { background: var(--rh-on-dark); color: var(--rh-text); }
.speedking-theme .rh-hero .rh-link:hover { color: var(--rh-accent); }
.speedking-theme .rh-figure { margin: 0; background: var(--rh-linen); padding: 0; }
.speedking-theme .rh-figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.speedking-theme .rh-figure figcaption { padding: 14px 18px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--rh-muted); }
.speedking-theme .rh-figure--wide { margin-top: 64px; }
.speedking-theme .rh-hero .rh-figure { background: rgba(216, 203, 184, .1); }
.speedking-theme .rh-hero .rh-figure figcaption { color: var(--rh-on-dark-soft); }
/* The rail closes the dark fold: four hairline columns, no cards, no fills. */
.speedking-theme .rh-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 120px; border-top: 1px solid rgba(216, 203, 184, .28); }
.speedking-theme .rh-card { display: block; padding: 36px 28px 44px 0; text-decoration: none; }
.speedking-theme .rh-card + .rh-card { padding-left: 28px; border-left: 1px solid rgba(216, 203, 184, .28); }
.speedking-theme .rh-card h3 { margin: 0 0 16px; font-family: var(--rh-head); font-weight: 300; font-size: 32px; line-height: .95; letter-spacing: -.03em; text-transform: uppercase; color: var(--rh-on-dark); }
.speedking-theme .rh-card p { margin: 0 0 4px; font-size: 14px; color: var(--rh-on-dark-soft); }
.speedking-theme .rh-card__go { display: inline-block; margin-top: 18px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--rh-accent); }
.speedking-theme .rh-card:hover .rh-card__go { text-decoration: underline; text-underline-offset: .4em; }

/* Tables — editorial column rules: no filled header, one strong rule beneath
   the micro-caps. */
.speedking-theme .rh-tscroll { overflow-x: auto; border: 1px solid var(--rh-line); margin-top: 56px; }
.speedking-theme .rh-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px; line-height: 1.5; letter-spacing: -.01em; }
.speedking-theme .rh-table th { padding: 18px 20px; background: transparent; text-align: left; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; color: var(--rh-text); border-bottom: 1px solid var(--rh-text); }
.speedking-theme .rh-table td { padding: 18px 20px; border-top: 1px solid var(--rh-line); vertical-align: top; color: var(--rh-soft); }
.speedking-theme .rh-table tbody tr:nth-child(even) { background: rgba(44, 44, 44, .035); }
.speedking-theme .rh-table--cost th { background: transparent; }
.speedking-theme .rh-table--cost { min-width: 720px; }
.speedking-theme .rh-accent-cell { color: var(--rh-text) !important; font-weight: 700; white-space: nowrap; }
.speedking-theme .rh-sec--cost .rh-tscroll { margin-top: 0; }

/* Route, materials, steps */
.speedking-theme .rh-mats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.speedking-theme .rh-mat { background: var(--rh-card); border: 1px solid var(--rh-line); padding-bottom: 36px; }
.speedking-theme .rh-mat__media { margin: 0; }
.speedking-theme .rh-mat h3 { margin: 28px 28px 14px; font-family: var(--rh-head); font-weight: 300; font-size: 34px; line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
.speedking-theme .rh-mat .rh-item__body { margin: 0 28px; }
.speedking-theme .rh-step__num { display: block; margin-bottom: 12px; font-family: var(--rh-head); font-weight: 300; font-size: 65px; line-height: .85; letter-spacing: -.04em; color: var(--rh-text); }

/* Scope panels */
.speedking-theme .rh-panel { background: var(--rh-card); border: 1px solid var(--rh-line); padding: 48px; }
.speedking-theme .rh-panel h3 { margin: 0 0 20px; font-family: var(--rh-head); font-weight: 300; font-size: 42px; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
.speedking-theme .rh-panel__lead { margin: 0 0 24px; font-size: 15px; color: var(--rh-soft); }
.speedking-theme .rh-panel__note { margin: 24px 0 0; font-size: 14px; color: var(--rh-soft); }
.speedking-theme .rh-list { list-style: none; margin: 0; padding: 0; }
.speedking-theme .rh-list li { position: relative; padding: 18px 0 18px 28px; border-top: 1px solid var(--rh-line); font-size: 14px; line-height: 1.6; color: var(--rh-soft); }
/* The saffron square: the system's decorative punctuation, never a label. */
.speedking-theme .rh-list li::before { content: ""; position: absolute; left: 0; top: 26px; width: 7px; height: 7px; background: var(--rh-accent); }
.speedking-theme .rh-list strong { display: block; margin-bottom: 4px; font-weight: 700; color: var(--rh-text); }
.speedking-theme .rh-entity .rh-list { margin-top: 32px; }

/* FAQ — hairline rows, thin glyph, no cards. */
.speedking-theme .rh-faq { margin-top: 56px; border-top: 1px solid var(--rh-line); }
.speedking-theme .rh-faq details { border-bottom: 1px solid var(--rh-line); }
.speedking-theme .rh-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; cursor: pointer; list-style: none; font-family: var(--rh-head); font-weight: 300; font-size: 26px; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.speedking-theme .rh-faq summary::-webkit-details-marker { display: none; }
.speedking-theme .rh-faq summary::after { content: "+"; flex-shrink: 0; font-family: var(--rh-body); font-weight: 300; font-size: 28px; line-height: 1; color: var(--rh-text); }
.speedking-theme .rh-faq details[open] summary::after { content: "−"; }
.speedking-theme .rh-faq__a { padding: 0 0 32px; max-width: 75ch; font-size: 16px; color: var(--rh-soft); }
.speedking-theme .rh-faq__tail { max-width: 75ch; margin-top: 40px; font-size: 16px; color: var(--rh-soft); }
.speedking-theme .rh-faq__tail p { margin: 0; }
.speedking-theme .rh-faq__tail a { color: var(--rh-text); text-decoration: underline; text-underline-offset: .3em; }

/* Final CTA and form */
.speedking-theme .rh-final .rh-paras p { margin-bottom: 0; }
.speedking-theme .rh-final .rh-list { margin-top: 32px; }
.speedking-theme .rh-fct { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; font-size: 15px; }
.speedking-theme .rh-fct a { font-weight: 700; text-decoration: underline; text-underline-offset: .3em; }
.speedking-theme .rh-form { background: var(--rh-card); border: 1px solid var(--rh-line); padding: 48px; }
.speedking-theme .rh-form h3 { margin: 0 0 8px; font-family: var(--rh-head); font-weight: 300; font-size: 42px; line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
.speedking-theme .rh-form__note { margin: 0 0 24px; font-size: 13px; color: var(--rh-muted); }
.speedking-theme .rh-form label { display: block; margin: 20px 0 8px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--rh-muted); }
.speedking-theme .rh-form input,
.speedking-theme .rh-form select { width: 100%; min-height: 52px; padding: 0 14px; background: var(--rh-field); border: 1px solid var(--rh-line); color: var(--rh-text); font: inherit; font-size: 15px; letter-spacing: -.01em; border-radius: 3px; }
.speedking-theme .rh-form input:focus,
.speedking-theme .rh-form select:focus { outline: 2px solid var(--rh-text); outline-offset: 2px; border-color: var(--rh-text); }

/* Footer */

/* Floating WhatsApp and mobile action bar */
.speedking-theme .rh-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none; grid-template-columns: 1fr 1fr; height: 64px; transform: translateY(110%); transition: transform .4s var(--rh-ease); }
.speedking-theme .rh-sticky.is-on { transform: none; }
.speedking-theme .rh-sticky a { display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
/* Two bars, two surfaces: the saffron one is the single accent fill in the whole
   system, and it carries the warm dark label at 4.7:1. */
.speedking-theme .rh-sticky__wa { background: var(--rh-accent); color: var(--rh-text); }
.speedking-theme .rh-sticky__brief { background: var(--rh-black); color: var(--rh-on-dark); }

/* Responsive */
@media (max-width: 1180px) {
	.speedking-theme .rh-wrap { padding: 0 40px; }
		.speedking-theme .rh-sec { --rh-sec: 120px; }
}
@media (max-width: 1000px) {
	.speedking-theme .rh-header__inner { position: relative; }
	.speedking-theme .rh-hero__grid,
	.speedking-theme .rh-split,
	.speedking-theme .rh-split--about,
	.speedking-theme .rh-two,
	.speedking-theme .rh-two--text { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.speedking-theme .rh-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.speedking-theme .rh-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.speedking-theme .rh-card:nth-child(3) { border-left: 0; padding-left: 0; }
	.speedking-theme .rh-mats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	.speedking-theme { font-size: 15px; letter-spacing: -.01em; }
	.speedking-theme .rh-wrap { padding: 0 20px; }
	.speedking-theme .rh-sec { --rh-sec: 80px; padding: 80px 0; }
	.speedking-theme .rh-hero { padding-top: 56px; }
	.speedking-theme .rh-h1 { font-size: 2.9rem; }
	.speedking-theme .rh-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.speedking-theme .rh-chip:nth-child(3) { border-left: 0; }
	.speedking-theme .rh-chip:nth-child(n + 3) { border-top: 1px solid rgba(216, 203, 184, .28); }
	.speedking-theme .rh-ctas { gap: 16px; }
	.speedking-theme .rh-ctas .rh-btn { width: 100%; }
	.speedking-theme .rh-rail { grid-template-columns: minmax(0, 1fr); margin-top: 64px; }
	.speedking-theme .rh-card,
	.speedking-theme .rh-card + .rh-card { padding: 28px 0; border-left: 0; border-top: 1px solid rgba(216, 203, 184, .28); }
	.speedking-theme .rh-grid4 { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 48px; }
	.speedking-theme .rh-panel,
	.speedking-theme .rh-form { padding: 28px; }
	.speedking-theme .rh-h2 { font-size: 2.5rem; }
	.speedking-theme .rh-faq summary { font-size: 21px; padding: 24px 0; }
	.speedking-theme .rh-table { min-width: 620px; }
	.speedking-theme .rh-sticky { display: grid; }
	.speedking-theme .rh-header__cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.speedking-theme * { transition: none !important; }
}

/* Section penutup berlatar foto — wash midnight roast yang sama seperti hero,
   supaya satu-satunya dua momen gelap di homepage memakai bahasa yang sama.
   Panel form tetap perkamen, jadi ia terbaca sebagai kartu terang di atas foto. */
.speedking-theme .rh-sec--photo { position: relative; isolation: isolate; background-size: cover; background-position: center; background-repeat: no-repeat; border-top: 0; color: var(--rh-on-dark); }
.speedking-theme .rh-sec--photo::before { content: ""; position: absolute; inset: 0; background: rgba(41, 38, 34, .9); z-index: 0; }
.speedking-theme .rh-sec--photo > * { position: relative; z-index: 1; }
.speedking-theme .rh-sec--photo .rh-kicker { color: var(--rh-accent); }
.speedking-theme .rh-sec--photo .rh-h2,
.speedking-theme .rh-sec--photo .rh-h3 { color: var(--rh-on-dark); }
.speedking-theme .rh-sec--photo .rh-paras p,
.speedking-theme .rh-sec--photo .rh-lead,
.speedking-theme .rh-sec--photo .rh-fct { color: var(--rh-on-dark); }
.speedking-theme .rh-sec--photo .rh-list li { color: var(--rh-on-dark); border-top-color: rgba(216, 203, 184, .28); }
.speedking-theme .rh-sec--photo .rh-list strong { color: var(--rh-on-dark); }
.speedking-theme .rh-sec--photo .rh-fct a { color: var(--rh-on-dark); }