/* 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 once. 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;}
.hm_final_bg {position:absolute;inset:0;z-index:0;background-image:url('../homepage_image/background/russel_road_bottom_up.webp');background-position:50% 90%;background-size:cover;}
.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;}
}