/* Home page marketing.
   The hero photo fades into black, and the steps and reviews run on that same black
   as one opening chapter. After that the sections alternate: cars (grey), free
   cancellation (black), locations (white), then the closing photo. Type and spacing
   are fluid clamp()s, so there is one definition per rule and only the step layout
   changes at a breakpoint.
   Nothing here moves on a timer: the rails only scroll when the visitor scrolls them,
   and the reviews ticker drifts sideways inside a fixed height, so the CTAs below
   every section stay put. */
.hm
{
	--hm_gutter:clamp(1.25rem,4vw,2.5rem);
	--hm_max:72rem;
	--hm_edge:max(var(--hm_gutter),calc((100% - var(--hm_max)) / 2));
	--hm_ease:cubic-bezier(0.16,1,0.3,1);
	/* self-hosted via Host::font_face() like every other face on the site; Helvetica/Arial are self-hosted too */
	font-family:Inter,Helvetica,Arial,sans-serif;
	color:#1d1d1f;
	-webkit-font-smoothing:antialiased;
}

.hm_section {position:relative;overflow:hidden;padding:clamp(4rem,10vw,7.5rem) 0;}
.hm_light {background-color:#ffffff;}
.hm_gray {background-color:#f5f5f7;}
.hm_dark {background-color:#000000;color:#f5f5f7;}
.hm_wrap {box-sizing:border-box;width:100%;max-width:calc(var(--hm_max) + 2 * var(--hm_gutter));margin:0 auto;padding:0 var(--hm_gutter);position:relative;}

/* The hero (index.php) is its photo at 45% over black; while the home page is below it,
   its bottom edge fades to black and drops the grey shadow, so it runs straight into the
   dark opening. Its own content is lifted above the fade. Browsers without :has() keep
   the hard edge. */
#headerboxparent:has(+ #contentbox .hm) {box-shadow:none !important;}
#headerboxparent:has(+ #contentbox .hm)::after {content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(4rem,12vw,9rem);z-index:0;background-image:linear-gradient(to bottom,rgba(0,0,0,0),#000000);pointer-events:none;}
#headerboxparent:has(+ #contentbox .hm) > :not(.headerbox) {position:relative;z-index:1;}

.hm_head {text-align:center;margin:0 auto clamp(2.5rem,6vw,4rem) auto;max-width:52rem;}
.hm_h {margin:0;font-size:clamp(2.1rem,1.3rem + 3.4vw,4rem);font-weight:700;line-height:1.08;letter-spacing:-0.025em;text-wrap:balance;}
.hm_h_xl {font-size:clamp(2.5rem,1.4rem + 4.8vw,5.5rem);letter-spacing:-0.03em;}
.hm_sub {margin:0.35em 0 0 0;font-size:clamp(1.5rem,1.05rem + 1.9vw,2.75rem);font-weight:700;line-height:1.15;letter-spacing:-0.02em;text-wrap:balance;}
.hm_lead {margin:1.5rem auto 0 auto;max-width:40rem;font-size:clamp(1.1rem,0.95rem + 0.55vw,1.4rem);font-weight:500;line-height:1.5;color:#86868b;text-wrap:pretty;}
/* Thai and Malay/Indonesian set wider than Latin display type; negative tracking crowds Thai marks */
html[lang="th"] .hm_h, html[lang="th"] .hm_sub {letter-spacing:0;line-height:1.3;}

/* Gradient type. The fallback colour stays for browsers without background-clip:text. */
.hm_gradient_blue, .hm_gradient_green, .hm_gradient_silver {color:#0099cc;}
@supports ((-webkit-background-clip:text) or (background-clip:text))
{
	.hm_gradient_blue, .hm_gradient_green, .hm_gradient_silver {-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
	.hm_gradient_blue {background-image:linear-gradient(90deg,#0077b6 0%,#0099cc 40%,#22bbee 100%);}
	.hm_gradient_green {background-image:linear-gradient(100deg,#6ee7a8 0%,#34d399 35%,#22bbee 100%);}
	.hm_gradient_silver {background-image:linear-gradient(180deg,#ffffff 20%,#9a9aa0 120%);}
}

/* Buttons: pills in the system font. The colour and pressed state still come from
   theme_btn / caution_btn in ui.css (and their touch pairs in core.js). */
.hm .hm_btn {box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;column-gap:0.55em;padding:0.85em 1.5em;border:0;border-radius:999px;font-family:inherit;font-size:1rem;font-weight:600;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;transition:background-color 0.2s ease,color 0.2s ease,transform 0.2s ease;}
.hm .hm_btn_large {font-size:clamp(1.05rem,0.95rem + 0.4vw,1.3rem);padding:0.95em 2.1em;box-shadow:0 10px 30px rgba(237,112,20,0.35);}
.hm_btn_outline {background-color:transparent;color:#0077b6;box-shadow:inset 0 0 0 1.5px rgba(0,119,182,0.45);}
.hm_btn_light {width:100%;background-color:#ffffff;color:#1d1d1f;}

/* Reveal: fade and rise each time a block scrolls into view (transform only, so nothing
   around it moves). hm_js is only set when IntersectionObserver exists and
   motion is allowed, so without it nothing is ever hidden. */
.hm_js .hm_reveal {opacity:0;transform:translateY(24px);transition:opacity 0.9s var(--hm_ease),transform 0.9s var(--hm_ease);transition-delay:calc(var(--d,0) * 90ms);}
.hm_js .hm_reveal.hm_in {opacity:1;transform:none;}

/* How it works: a numbered timeline. Phones read it top to bottom with the numbers
   on a vertical line; wider screens lay the three steps across one horizontal line. */
.hm_steps {list-style:none;margin:0 auto;padding:0;max-width:30rem;display:flex;flex-direction:column;}
.hm_step {position:relative;display:flex;align-items:flex-start;column-gap:1.25rem;padding-bottom:2rem;}
.hm_step:last-child {padding-bottom:0;}
.hm_step:not(:last-child)::before {content:"";position:absolute;left:1.5rem;top:3.4rem;bottom:0.4rem;width:2px;margin-left:-1px;border-radius:2px;background-image:linear-gradient(to bottom,rgba(0,153,204,0.45),rgba(0,153,204,0.08));}
.hm_step_num {flex:0 0 3rem;width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(135deg,#0077b6,#22bbee);color:#ffffff;font-size:1.3rem;font-weight:700;box-shadow:0 8px 20px rgba(0,153,204,0.28);}
.hm_step_body {padding-top:0.35rem;min-width:0;}
.hm_step_title {margin:0;font-size:clamp(1.2rem,1.05rem + 0.5vw,1.5rem);font-weight:700;line-height:1.25;letter-spacing:-0.01em;color:#1d1d1f;}
.hm_step_text {margin:0.4em 0 0 0;font-size:1.05rem;line-height:1.5;color:#6e6e73;text-wrap:pretty;}
@media only screen and (min-width:760px)
{
	.hm_steps {max-width:none;display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(1.5rem,4vw,3.5rem);}
	.hm_step {flex-direction:column;align-items:center;text-align:center;padding-bottom:0;}
	.hm_step_num {flex-basis:auto;width:4rem;height:4rem;font-size:1.6rem;margin-bottom:1.25rem;}
	/* the line runs from this number to the next one; column-gap is added so it bridges the gutter */
	.hm_step:not(:last-child)::before {left:calc(50% + 2.75rem);right:calc(-50% - clamp(1.5rem,4vw,3.5rem) + 2.75rem);top:2rem;bottom:auto;width:auto;height:2px;margin:-1px 0 0 0;background-image:linear-gradient(to right,rgba(0,153,204,0.45),rgba(0,153,204,0.12));}
	.hm_step_body {padding-top:0;}
}

/* The opening: steps on black under a blue glow, continuing into the reviews on the same
   black, so the two read as one chapter rather than two dark blocks. */
.hm_opening {padding-top:clamp(2.5rem,6vw,4.5rem);}
/* the glow is centred a full radius below the top edge, so it is pure black where the hero fade meets it */
.hm_opening::before {content:"";position:absolute;left:50%;top:0;width:min(64rem,160vw);height:30rem;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,153,204,0.28),transparent);pointer-events:none;}
.hm_opening + .hm_reviews {padding-top:0;}
.hm_opening + .hm_reviews::before {display:none;}
.hm_dark .hm_gradient_blue {color:#22bbee;}
@supports ((-webkit-background-clip:text) or (background-clip:text))
{
	.hm_dark .hm_gradient_blue {color:transparent;background-image:linear-gradient(90deg,#1aa7dd 0%,#4cc9f5 50%,#9be0ff 100%);}
}
.hm_dark .hm_step:not(:last-child)::before {background-image:linear-gradient(to bottom,rgba(34,187,238,0.6),rgba(34,187,238,0.08));}
.hm_dark .hm_step_num {box-shadow:0 0 0 6px rgba(34,187,238,0.12),0 10px 30px rgba(0,153,204,0.55);}
.hm_dark .hm_step_title {color:#f5f5f7;}
.hm_dark .hm_step_text {color:#a1a1a6;}
@media only screen and (min-width:760px)
{
	.hm_dark .hm_step:not(:last-child)::before {background-image:linear-gradient(to right,rgba(34,187,238,0.6),rgba(34,187,238,0.12));}
}

/* Reviews ticker: a scroll container the script nudges sideways; a finger or trackpad
   can still scroll it, and the edges fade into the black. */
.hm_ticker {overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);}
.hm_ticker::-webkit-scrollbar {display:none;}
.hm_ticker_track {display:flex;align-items:stretch;column-gap:1.25rem;padding:0.5rem var(--hm_edge) 0.5rem var(--hm_edge);width:max-content;}
.hm_review {box-sizing:border-box;flex:0 0 auto;width:clamp(16.5rem,74vw,21rem);margin:0;padding:1.6rem 1.5rem 1.4rem;border-radius:24px;background-color:#1c1c1e;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07);display:flex;flex-direction:column;row-gap:1rem;}
.hm_review_stars {display:flex;column-gap:0.2em;font-size:0.95rem;color:#ff9f0a;}
.hm_review_stars .hm_review_star_off {color:#48484a;}
/* home.php only shows reviews up to 230 characters; the clamp is a safety net */
.hm_review_text {margin:0;font-size:1.1rem;line-height:1.5;color:#f5f5f7;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;line-clamp:7;overflow:hidden;}
.hm_review_author {margin-top:auto;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;column-gap:0.75rem;font-size:0.85rem;line-height:1.4;color:#86868b;}
.hm_review_author strong {color:#e5e5ea;font-weight:600;}
.hm_review_avatar {flex:0 0 2.4rem;width:2.4rem;height:2.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(135deg,#ff9f0a,#ff6b00);color:#ffffff;font-size:1.05rem;font-weight:700;}
.hm_reviews::before {content:"";position:absolute;left:50%;top:-20%;width:min(60rem,140vw);height:32rem;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,153,204,0.22),transparent);pointer-events:none;}

/* Rails: scroll-snap galleries that start in line with the headings and run to the
   screen edge, like a shelf. Tiles in a rail stretch to the tallest one. */
.hm_rail {display:flex;align-items:stretch;column-gap:1.25rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--hm_edge);padding:0.5rem var(--hm_edge) 1.5rem var(--hm_edge);scrollbar-width:none;}
.hm_rail::-webkit-scrollbar {display:none;}
.hm_tile {flex:0 0 auto;scroll-snap-align:start;box-sizing:border-box;border-radius:28px;}
.hm_rail_foot {display:flex;justify-content:flex-end;}
.hm_paddles {display:flex;column-gap:0.75rem;}
.hm_paddle {width:2.75rem;height:2.75rem;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,0.08);color:#1d1d1f;font-size:1rem;cursor:pointer;transition:background-color 0.2s ease,opacity 0.2s ease;}
.hm_paddle:disabled {opacity:0.35;cursor:default;}
.hm_rail_fits .hm_rail_foot {visibility:hidden;}

.hm_car {width:clamp(16rem,70vw,19.5rem);padding:1.25rem 1.25rem 1.5rem;background-color:#ffffff;display:flex;flex-direction:column;align-items:center;row-gap:0.9rem;text-align:center;transition:transform 0.4s var(--hm_ease),box-shadow 0.4s var(--hm_ease);}
/* the photos are cut-outs, so the tint behind them gives the car a surface to sit on */
.hm_car_media {box-sizing:border-box;width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:0.75rem;border-radius:20px;background-image:radial-gradient(ellipse at 50% 85%,#e4e9ed 0%,#f5f7f9 70%);}
/* some photos are on white rather than transparent; multiply melts the white into the tint */
.hm_car_media img {display:block;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform 0.5s var(--hm_ease);}
.hm_car_name {margin:0.25rem 0 0 0;font-size:1.45rem;font-weight:700;line-height:1.2;letter-spacing:-0.015em;color:#1d1d1f;}
.hm_car_price {margin-top:auto;font-size:1rem;font-weight:500;line-height:1.3;color:#6e6e73;}
.hm_car_price .hm_car_price_amount {font-size:2rem;font-weight:700;letter-spacing:-0.02em;color:#1d1d1f;}
.hm_car .hm_btn {width:100%;}

.hm_blog {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.75rem 1.25rem;margin-top:clamp(2rem,5vw,3rem);}
.hm_blog_text {font-size:clamp(1.15rem,1rem + 0.5vw,1.5rem);font-weight:700;letter-spacing:-0.01em;}

/* Free cancellation: one statement, set big, with a glow behind the icon. */
.hm_statement {text-align:center;}
.hm_statement::before {content:"";position:absolute;left:50%;top:50%;width:min(56rem,150vw);height:34rem;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(52,211,153,0.16),transparent);pointer-events:none;}
.hm_statement_icon {display:inline-flex;align-items:center;justify-content:center;width:5rem;height:5rem;margin-bottom:1.75rem;border-radius:26px;background-image:linear-gradient(135deg,#34d399,#0099cc);color:#ffffff;font-size:2.3rem;box-shadow:0 18px 50px rgba(52,211,153,0.35);}

/* Locations: the region photo fills the whole tile, the copy sits on a dark fade at the bottom */
.hm_loc {position:relative;overflow:hidden;width:clamp(16.5rem,78vw,22rem);min-height:clamp(26rem,110vw,31rem);display:flex;flex-direction:column;justify-content:flex-end;background-color:#1d1d1f;color:#ffffff;}
.hm_loc_img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 0.8s var(--hm_ease);}
/* the fade is anchored to the copy, not the tile, so a card with more chips darkens further up */
.hm_loc::after {content:"";position:absolute;inset:0;background-image:linear-gradient(to bottom,rgba(0,0,0,0.05),rgba(0,0,0,0.25));pointer-events:none;}
.hm_loc_body {position:relative;z-index:1;display:flex;flex-direction:column;row-gap:0.75rem;padding:6rem 1.5rem 1.5rem 1.5rem;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0.7) 5.5rem,rgba(0,0,0,0.88) 100%);}
.hm_loc_name {margin:0;text-shadow:0 2px 12px rgba(0,0,0,0.5);font-size:clamp(1.6rem,1.3rem + 1vw,2rem);font-weight:700;line-height:1.15;letter-spacing:-0.02em;}
.hm_loc_name i {font-size:0.7em;margin-right:0.4em;vertical-align:0.12em;color:#22bbee;}
.hm_loc_label {font-size:0.9rem;font-weight:600;color:rgba(255,255,255,0.78);}
.hm_loc_chips {display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:0.4rem;}
.hm_loc_chip {padding:0.35em 0.8em;border-radius:999px;background-color:rgba(255,255,255,0.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14);font-size:0.85rem;font-weight:600;line-height:1.3;}
.hm_loc_chip_more {background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;padding-left:0.2em;padding-right:0.2em;color:rgba(255,255,255,0.7);font-style:italic;font-weight:400;}

/* Closing call to action over the road photo */
.hm_final {text-align:center;color:#ffffff;padding:clamp(6rem,16vw,11rem) 0;}
/* the road photo (~500 KB) is at the very bottom, so home.php switches it on only as the section nears the
   screen; until then the section is black and nothing competes with the header photo on first load */
.hm_final_bg {position:absolute;inset:0;z-index:0;background-color:#000000;background-position:50% 90%;background-size:cover;}
.hm_final_bg.hm_photo_bg_on {background-image:url('../homepage_image/background/russel_road_bottom_up.webp');}
.hm_final_bg::after {content:"";position:absolute;inset:0;background-image:linear-gradient(to bottom,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0.45) 50%,rgba(0,0,0,0.8) 100%);}
.hm_final .hm_wrap {z-index:1;display:flex;flex-direction:column;align-items:center;row-gap:clamp(1.75rem,4vw,2.5rem);}
.hm_final .hm_h {text-shadow:0 10px 40px rgba(0,0,0,0.45);}

/* Hover lifts, mouse only; core.js puts the same look on a held finger via .hm_pressed */
@media (pointer:fine)
{
	.hm_car:hover {transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,0.08);}
	.hm_car:hover .hm_car_media img {transform:scale(1.04);}
	.hm_loc:hover .hm_loc_img {transform:scale(1.05);}
	.hm_paddle:not(:disabled):hover {background-color:rgba(0,0,0,0.14);}
	.hm_btn_outline:hover {background-color:rgba(0,119,182,0.08);}
	.hm_btn_light:hover {background-color:#e8e8ed;}
}
.hm_car.hm_pressed {transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,0.08);}
.hm_loc.hm_pressed .hm_loc_img {transform:scale(1.05);}
.hm_paddle.hm_pressed:not(:disabled) {background-color:rgba(0,0,0,0.14);}
.hm_btn_outline.hm_pressed {background-color:rgba(0,119,182,0.08);}
.hm_btn_light.hm_pressed {background-color:#e8e8ed;}

@media (prefers-reduced-motion:reduce)
{
	.hm_car, .hm_car_media img, .hm_loc_img, .hm_btn {transition:none;}
	.hm_rail {scroll-behavior:auto;}
}

/* Region guide (Region_Guide::render, printed by home.php before the closing photo on a region's
   page): pick-up points, practical facts and FAQ, set like the cars section so it reads as one of the
   page's chapters: a centred heading and white cards on grey, revealed like the rest. The pick-up cards
   are links without a hover look, so nothing here needs a touch twin. */
.region_guide {font-family:Inter,Helvetica,Arial,sans-serif;color:#1d1d1f;}
.region_guide_heading {margin:clamp(2.75rem,6vw,4rem) 0 1.25rem 0;text-align:center;font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);font-weight:700;letter-spacing:-0.015em;}
.region_guide .hm_head + .region_guide_heading {margin-top:0;}
html[lang="th"] .region_guide_heading {letter-spacing:0;line-height:1.3;}

.region_guide_pickups {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr));gap:0.75rem;margin:0;padding:0;list-style:none;}
.region_guide_pickups a, .region_guide_pickups a:active, .region_guide_pickups a:visited {box-sizing:border-box;height:100%;display:grid;grid-template-columns:auto 1fr;align-content:start;column-gap:0.6rem;row-gap:0.2rem;padding:1rem 1.15rem;border-radius:1rem;background-color:#ffffff;color:#1d1d1f;font-weight:600;text-decoration:none;}
.region_guide_pickups a i {grid-row:span 2;padding-top:0.2em;color:#0099cc;}
.region_guide_pickup_name {font-size:1.05rem;line-height:1.35;}
.region_guide_pickup_cars {font-size:0.9rem;font-weight:400;color:#6e6e73;}
.region_guide_more {margin:1rem 0 0 0;text-align:center;font-size:0.95rem;color:#6e6e73;}

/* each fact behind a small round icon in the steps' blue */
.region_guide_facts {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(17rem,100%),1fr));gap:0.75rem;margin:0;padding:0;list-style:none;}
.region_guide_facts li {display:flex;align-items:center;column-gap:0.9rem;padding:1rem 1.15rem;border-radius:1rem;background-color:#ffffff;font-size:1rem;line-height:1.45;}
.region_guide_facts i {flex:0 0 2.5rem;width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(135deg,#0077b6,#22bbee);color:#ffffff;font-size:1rem;}

.region_guide_faq {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr));gap:0.75rem;}
.region_guide_qa {padding:1.5rem 1.5rem 1.6rem;border-radius:24px;background-color:#ffffff;}
.region_guide_qa h4 {margin:0;font-size:1.1rem;font-weight:700;line-height:1.35;}
.region_guide_qa p {margin:0.5rem 0 0 0;font-size:1rem;line-height:1.55;color:#424245;text-wrap:pretty;}
.region_guide_qa a {color:#0077b6;}

/* On a region's page: its rating under the reviews heading (dark), and its car types as links
   above the cars rail (grey), priced like checkout. */
.hm_rating {margin:1rem 0 0 0;font-size:clamp(1rem,0.95rem + 0.3vw,1.2rem);color:#d2d2d7;}
.hm_rating i {color:#f5a623;}
.hm_rating strong {color:#f5f5f7;}
.hm_types {display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:0.6rem;margin:0 0 clamp(1.5rem,4vw,2.5rem) 0;}
.hm_type {display:flex;flex-direction:column;row-gap:0.15rem;padding:1rem 1.15rem;border-radius:1rem;background-color:#ffffff;}
/* the cards are links: ui.css colours every a/a:visited blue and bold, and underlines on hover */
a.hm_type, a.hm_type:active, a.hm_type:visited {color:#1d1d1f;font-weight:400;text-decoration:none;}
.hm_type_name {font-size:1.1rem;font-weight:700;}
a.hm_type:hover, .region_guide_pickups a:hover {text-decoration:none;}
.hm_type_price {font-size:0.95rem;text-wrap:balance;}
.hm_type_price strong {color:#0077b6;font-size:1.1rem;font-weight:700;white-space:nowrap;}
.hm_type_count {font-size:0.88rem;color:#6e6e73;}

/* An audience page (Audience_Landing, e.g. JB for Singaporeans): its pick-up points as cards, each with a
   button that fills the search form above, then a line on what is coming and the region's facts. The
   buttons are hm_btn_outline (hm_btn_light on dark), whose hover and touch twin are above, so nothing new
   needs one. The cards are a grid of equal rows, so the buttons line up and never move. */
.aud_pickups {display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:1rem;margin:0;padding:0;list-style:none;}
.aud_pickup {box-sizing:border-box;display:flex;flex-direction:column;row-gap:0.5rem;padding:1.4rem 1.4rem 1.5rem;border-radius:24px;background-color:#f5f5f7;}
.aud_pickup_name {margin:0;font-size:1.25rem;font-weight:700;line-height:1.25;letter-spacing:-0.01em;}
.aud_pickup_name i {margin-right:0.45em;font-size:0.85em;color:#0099cc;}
.aud_pickup_note {margin:0;font-size:1rem;line-height:1.45;color:#6e6e73;text-wrap:pretty;}
.aud_pickup_cars {margin:auto 0 0.5rem 0;padding-top:0.25rem;font-size:0.95rem;font-weight:600;color:#1d1d1f;}
.aud_pickup .hm_btn {width:100%;}
.aud_note {display:flex;align-items:baseline;justify-content:center;column-gap:0.6rem;margin:clamp(1.75rem,4vw,2.5rem) auto 0 auto;max-width:44rem;font-size:1rem;line-height:1.5;color:#6e6e73;text-align:center;text-wrap:pretty;}
.aud_note i {color:#0099cc;}
.aud_facts_heading {margin:clamp(2.5rem,6vw,4rem) 0 1rem 0;text-align:center;font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);font-weight:700;letter-spacing:-0.015em;}
.aud_facts {display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:0.75rem 1.5rem;margin:0 auto;padding:0;max-width:60rem;list-style:none;}
.aud_facts li {display:flex;align-items:baseline;column-gap:0.65rem;padding:0.6rem 0;border-bottom:1px solid #e5e5ea;font-size:1.05rem;line-height:1.45;}
.aud_facts i {width:1.2em;flex-shrink:0;text-align:center;color:#0099cc;}

/* The audience's section on its region's page (region_section), between the grey cars and the black
   free-cancellation statement: a dark chapter like the opening. The road photo (Rawang Bypass at dusk,
   Unsplash, ~180 KB) sits behind the heading and steps and fades into black, as the hero fades into the
   opening; the cards are the reviews' dark cards with the locations' white buttons. The statement carries
   on in the same black, so it drops its top padding, like the reviews after the opening. The photo is
   switched on near the screen (home.php), like the closing one. */
.aud_region {padding-top:clamp(6rem,14vw,10rem);}
.aud_region_bg {position:absolute;left:0;right:0;top:0;z-index:0;height:clamp(38rem,64vw,60rem);background-color:#000000;background-position:50% 75%;background-size:cover;}
.aud_region_bg.hm_photo_bg_on {background-image:url('../homepage_image/background/rawang_bypass_dusk.webp');}
.aud_region_bg::after {content:"";position:absolute;inset:0;background-image:linear-gradient(to bottom,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.4) 40%,rgba(0,0,0,0.62) 72%,#000000 100%);}
.aud_region .hm_wrap {z-index:1;}
.aud_region .hm_h {text-shadow:0 10px 40px rgba(0,0,0,0.45);}
.aud_region .hm_lead {color:rgba(255,255,255,0.78);}
.hm_dark .aud_facts_heading {color:#f5f5f7;}
.hm_dark .aud_pickup {background-color:#1c1c1e;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07);}
.hm_dark .aud_pickup_name {color:#f5f5f7;}
.hm_dark .aud_pickup_name i, .hm_dark .aud_note i {color:#22bbee;}
.hm_dark .aud_pickup_note {color:#a1a1a6;}
.hm_dark .aud_pickup_cars {color:#e5e5ea;}
.hm_dark .aud_note {color:#86868b;}
.aud_region + .hm_statement {padding-top:0;}
/* before the cars (for the audience's own visitors) it follows the black reviews, so the photo fades in from black too */
.hm_dark + .aud_region .aud_region_bg::after {background-image:linear-gradient(to bottom,#000000 0%,rgba(0,0,0,0.3) 16%,rgba(0,0,0,0.4) 40%,rgba(0,0,0,0.62) 72%,#000000 100%);}
/* On phones the pick-up cards are a row to swipe, like the cars and locations, with the next card peeking in
   at the edge: stacked, they made the section about two and a half screens tall. Swiping is native scrolling,
   so nothing here needs a touch twin. */
@media only screen and (max-width:759px)
{
	.aud_region .aud_pickups {display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--hm_gutter);margin:0 calc(-1 * var(--hm_gutter));padding:0.25rem var(--hm_gutter) 0.75rem var(--hm_gutter);scrollbar-width:none;}
	.aud_region .aud_pickups::-webkit-scrollbar {display:none;}
	.aud_region .aud_pickup {flex:0 0 min(78%,18rem);scroll-snap-align:start;}
	/* In the row the cards sit still: a card scrolled off to the side counts as off-screen, so its reveal kept it
	   24px lower, and that overflow made the row scroll vertically under a finger. */
	.hm_js .aud_region .aud_pickup.hm_reveal {opacity:1;transform:none;transition:none;}
}