@charset "utf-8";
/* ==========================================================================
   Road Kings Ha Giang — black-first rebuild

   Reference DNA:
   · vietnammotorcycletours.com — heavy uppercase sans, black grounds, tour
     cards carrying hard metrics, an "Our Bikes" block, tyre-track dividers,
     FAQ, credibility pillars.
   · hagiangmotorventures.com — the wall of customer photos. Theirs carries no
     attribution, so it reads as decoration; this build adds the metadata.

   TYPOGRAPHY — the second pass. The first attempt reached for "rugged" by
   condensing the display face and blowing the hero up to 90px over 11px mono
   captions. That is the wrong instinct twice over: narrowing a face thins its
   strokes, so condensed reads elegant rather than tough, and a huge-hero /
   tiny-caption scale is a fashion-magazine move that makes every small element
   look precious. Strength comes from MASS and UNIFORMITY, not from drama.

   So: wide and heavy instead of narrow and huge (width 112%, weight 900).
   Positive tracking on caps so letters stand with their feet apart, never
   negative. A hard floor of 16px — nothing on the page is allowed to be
   dainty. A compressed scale, roughly 4x from smallest to largest instead of
   8x, so the page reads like a spec board where everything matters equally.
   And no monospace anywhere: hairline mono labels were the single most
   delicate thing in the previous pass.

   Black is the brand, so there is no light theme on purpose. Tokens stay
   role-named, so adding one later means redefining this block.

   If this is ever translated into Vietnamese, raise every heading
   line-height — stacked diacritics need roughly 1.2em minimum.
   ========================================================================== */

:root {
  /* asphalt near-blacks, cooled slightly so green hills sit warm against them */
  --ink-0:      #0C0D0F;
  --ink-1:      #15171A;
  --ink-2:      #1E2126;
  --line:       rgba(255, 255, 255, .14);
  --line-2:     rgba(255, 255, 255, .28);

  --text:       #F3F4F5;
  --text-2:     #B6BCC4;
  --text-3:     #949BA4;

  /* hi-vis orange, taken from the safety gear the business actually sells */
  --accent:     #F0601F;
  --accent-hi:  #FF7C42;
  --on-accent:  #0C0D0F;

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* compressed scale — the floor is 1rem and nothing may go under it */
  --s--1: 1rem;          /* 16px — smallest permitted */
  --s-0:  1.1875rem;     /* 19px — body */
  --s-1:  1.3125rem;     /* 21px */
  --s-2:  clamp(1.4rem, 1.24rem + .5vw, 1.75rem);    /* card titles ~28px */
  --s-3:  clamp(1.7rem, 1.42rem + .9vw, 2.25rem);    /* ~36px */
  --s-4:  clamp(2rem, 1.62rem + 1.25vw, 2.75rem);    /* section heads ~44px */
  --s-5:  clamp(2.5rem, 1.95rem + 2.2vw, 4rem);      /* hero ~64px */

  --gutter: clamp(1.25rem, .5rem + 3vw, 4rem);
  --band:   clamp(3.5rem, 2rem + 5vw, 7rem);
  --maxw:   1300px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--s-0);
  font-weight: 450;              /* more ink than a default 400 */
  font-stretch: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }

/* wide + black, tracked open. mass, not drama */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 900;
  font-stretch: 112%;
  line-height: 1.08;
  letter-spacing: .012em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
::selection { background: var(--accent); color: var(--on-accent); }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--on-accent);
  font-size: var(--s--1); font-weight: 800; padding: .8em 1.2em;
}
.skip:focus { left: 0; }

/* every small label is heavy and tracked, never light and tiny */
.eyebrow {
  font-size: var(--s--1);
  font-weight: 800;
  font-stretch: 108%;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .8rem;
}

/* ------------------------------------------------------------------ BUTTONS */

.btn {
  font-family: var(--sans);
  font-size: var(--s--1); font-weight: 800; font-stretch: 106%;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 1em 1.9em; border: 2px solid transparent;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-hi); }
.btn-line { border-color: var(--line-2); color: var(--text); }
.btn-line:hover { border-color: var(--text); }
.btn-sm { padding: .8em 1.4em; }

/* --------------------------------------------------------------- TOP / NAV */

.topbar {
  background: #000;
  color: var(--text-2);
  font-size: var(--s--1);
  font-weight: 600;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: .7rem var(--gutter);
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.topbar a { text-decoration: none; }
.topbar a:hover { color: var(--text); }
.topbar-alert { color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.topbar-right { margin-left: auto; display: flex; gap: 1.2rem; }

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(12, 13, 15, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: 1rem var(--gutter);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
}
.logo { text-decoration: none; display: grid; gap: .1rem; }
.logo b {
  font-weight: 900; font-stretch: 118%;
  font-size: 1.6rem; line-height: 1; letter-spacing: .01em; text-transform: uppercase;
}
.logo small {
  font-size: var(--s--1); font-weight: 800;
  letter-spacing: .26em; text-transform: uppercase; color: var(--text-3); line-height: 1.3;
}
.nav { display: flex; gap: clamp(1rem, 2vw, 2rem); margin-left: auto; }
.nav a {
  font-size: var(--s--1); font-weight: 800; font-stretch: 104%;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--text-2); padding: .35em 0; border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--text); border-bottom-color: var(--accent); }
@media (max-width: 1100px) {
  .nav { display: none; }
  .masthead-in .btn { margin-left: auto; }
}

/* ------------------------------------------------------------------- HERO */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(84vh, 720px);
  display: grid; align-items: end;
  background: #000;
}
.hero-photo {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("https://images.unsplash.com/photo-1653279407924-ffcf70cf43a6?auto=format&fit=crop&w=2400&q=80");
  background-size: cover; background-position: 50% 50%;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(8,9,10,.94) 0%, rgba(8,9,10,.55) 40%, rgba(8,9,10,.25) 75%),
    linear-gradient(to right, rgba(8,9,10,.6) 0%, rgba(8,9,10,0) 60%);
}
.hero-in {
  max-width: var(--maxw); margin-inline: auto; width: 100%;
  padding: clamp(5rem, 14vh, 8rem) var(--gutter) clamp(2rem, 5vh, 3rem);
}
.hero h1 { font-size: var(--s-5); font-stretch: 116%; line-height: 1.02; max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub {
  margin-top: 1.4rem; max-width: 44ch;
  font-size: var(--s-1); font-weight: 500; color: #fff;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: 2.5rem; border-top: 2px solid var(--line-2);
}
.hero-stats div {
  padding: 1.2rem 2rem 0 0; margin-right: 2rem;
  border-right: 2px solid var(--line-2);
  display: grid; gap: .25rem;
}
.hero-stats div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-stats dt {
  font-size: var(--s--1); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}
.hero-stats dd {
  margin: 0; font-weight: 900; font-stretch: 112%;
  font-size: 1.6rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em;
}

/* ---------------------------------------------------------------- SECTIONS */

.band { padding-block: var(--band); }
.band-1 { background: var(--ink-1); }

.sechead {
  display: flex; align-items: flex-end; gap: 1.75rem; flex-wrap: wrap;
  padding-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.sechead h2 { font-size: var(--s-4); max-width: 19ch; }
.sechead .sechead-note {
  margin-left: auto; max-width: 34ch;
  color: var(--text-2); font-size: var(--s--1); font-weight: 500;
}

.tread { display: block; width: 100%; height: 26px; opacity: .55; }
.tread rect { fill: var(--text-3); }

/* ------------------------------------------------------- RIDE MODE SWITCH */

/* The real buying decision on this route is not the number of days, it is who
   is holding the handlebars — and the price moves with it. */
.ridebar {
  border: 2px solid var(--line);
  background: var(--ink-1);
  padding: 1.25rem 1.4rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.ridebar-label {
  font-size: var(--s--1); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}
.modes { display: flex; flex-wrap: wrap; gap: .5rem; }
.mode {
  font-family: var(--sans); font-size: var(--s--1); font-weight: 800;
  font-stretch: 104%; letter-spacing: .06em; text-transform: uppercase;
  padding: .75em 1.35em; cursor: pointer;
  background: none; border: 2px solid var(--line-2); color: var(--text-2);
  transition: background-color .18s, color .18s, border-color .18s;
}
.mode:hover { border-color: var(--text); color: var(--text); }
.mode[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ridebar-hint { margin-left: auto; font-size: var(--s--1); font-weight: 500; color: var(--text-2); max-width: 42ch; }

/* -------------------------------------------------------------- TOUR CARDS */

.tours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
}
.tour {
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--ink-1);
  border: 2px solid var(--line);
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.tour:hover { border-color: var(--accent); transform: translateY(-3px); }

.tour-media { position: relative; display: block; }
.tour-photo {
  display: block; aspect-ratio: 4 / 3;
  background: var(--ink-2); background-size: cover; background-position: center;
}
.tour-days {
  position: absolute; top: 0; left: 0;
  background: var(--accent); color: var(--on-accent);
  font-weight: 900; font-stretch: 112%;
  font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .4em .8em;
}

.tour-body { padding: 1.4rem 1.4rem .6rem; display: grid; gap: .95rem; align-content: start; }
.tour-body h3 { font-size: var(--s-2); }
.tour-spec { margin: 0; display: grid; gap: .55rem; }
.tour-spec div { display: flex; justify-content: space-between; gap: 1rem; }
.tour-spec dt { font-size: var(--s--1); font-weight: 500; color: var(--text-3); }
.tour-spec dd {
  margin: 0; font-size: var(--s--1); font-weight: 800;
  color: var(--text); text-align: right; letter-spacing: .02em;
}

.tour-foot {
  padding: 1.1rem 1.4rem 1.4rem;
  border-top: 2px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* the price reads like a number on a gauge, not a line of code */
.tour-price {
  font-weight: 900; font-stretch: 116%;
  font-size: 2.4rem; line-height: .95; color: var(--accent);
  letter-spacing: -.005em; font-variant-numeric: tabular-nums;
}
.tour-price small {
  display: block; font-weight: 700; font-stretch: 100%;
  font-size: var(--s--1); line-height: 1.3; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); margin-top: .5rem;
}
.tour-cta {
  font-size: var(--s--1); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text);
  border-bottom: 3px solid var(--accent); padding-bottom: .2em;
}

/* ----------------------------------------------------------------- GEAR */

.gear {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 2px; background: var(--line); border: 2px solid var(--line);
}
.gear-item { background: var(--ink-0); padding: 1.8rem 1.6rem; display: grid; gap: .65rem; align-content: start; }
.gear-item h3 { font-size: var(--s-1); }
.gear-item .gear-copy { color: var(--text-2); font-size: var(--s--1); font-weight: 500; }
.gear-tag {
  font-size: var(--s--1); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}

/* ----------------------------------------------------------------- BIKES */

.bikes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 900px) { .bikes { grid-template-columns: 1fr; } }
.bikes-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bikes h2 { font-size: var(--s-3); }
.bikes .bikes-copy { color: var(--text-2); margin-top: 1.1rem; max-width: 44ch; font-weight: 500; }
.bike-list { margin: 1.6rem 0 0; display: grid; gap: 0; }
.bike-row {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: 1rem 0; border-top: 2px solid var(--line);
}
.bike-row:last-child { border-bottom: 2px solid var(--line); }
.bike-row b { font-weight: 900; font-stretch: 108%; text-transform: uppercase; letter-spacing: .03em; }
.bike-row span { font-size: var(--s--1); font-weight: 600; color: var(--text-2); text-align: right; }

/* ------------------------------------------------------------ RIDER WALL */

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50% - .5rem, 210px), 1fr));
  gap: .75rem;
}
.wall-tile { position: relative; display: block; overflow: hidden; background: var(--ink-2); }
.wall-tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .4s, filter .4s; filter: grayscale(.15); }
.wall-tile:hover img { transform: scale(1.05); filter: grayscale(0); }
.wall-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2rem .9rem .8rem;
  background: linear-gradient(to top, rgba(8,9,10,.94), rgba(8,9,10,0));
  font-size: var(--s--1); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.wall-tall { grid-row: span 2; }
.wall-tall img { aspect-ratio: 1 / 2.06; }

/* --------------------------------------------------------------- REVIEWS */

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.review { background: var(--ink-1); border: 2px solid var(--line); padding: 1.6rem; display: grid; gap: .9rem; align-content: start; }
.stars { color: var(--accent); letter-spacing: .16em; font-size: 1.2rem; }
.review .review-text { color: var(--text-2); font-weight: 500; }
.review footer { display: flex; align-items: center; gap: .8rem; margin-top: .3rem; }
.review-who { font-size: var(--s--1); font-weight: 900; font-stretch: 106%; text-transform: uppercase; letter-spacing: .04em; }
.review-src {
  font-size: var(--s--1); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
  border: 2px solid var(--line-2); padding: .3em .7em; margin-left: auto;
}

/* -------------------------------------------------------------------- FAQ */

.faq { display: grid; gap: 0; max-width: 64rem; }
.faq details { border-top: 2px solid var(--line); }
.faq details:last-of-type { border-bottom: 2px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.4rem 3rem 1.4rem 0; position: relative;
  font-weight: 900; font-stretch: 110%;
  font-size: var(--s-1); text-transform: uppercase; line-height: 1.2; letter-spacing: .012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .3rem; top: 1.05rem;
  font-size: 2rem; font-weight: 700; color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq p { color: var(--text-2); font-weight: 500; padding-bottom: 1.5rem; max-width: 62ch; }

/* ------------------------------------------------------------------- NOTE */

.note {
  margin-top: 1.6rem;
  font-size: var(--s--1); font-weight: 600; line-height: 1.6;
  color: var(--accent); border-left: 3px solid var(--accent);
  padding-left: 1rem; max-width: 68ch;
}

/* -------------------------------------------------------------------- CTA */

.cta { background: var(--accent); color: var(--on-accent); }
.cta-in { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.cta h2 { font-size: var(--s-3); max-width: 18ch; }
.cta-in p { max-width: 34ch; font-weight: 600; }
.cta .btn-dark { background: var(--on-accent); color: #fff; margin-left: auto; }
.cta .btn-dark:hover { background: #000; }
@media (max-width: 860px) { .cta .btn-dark { margin-left: 0; } }

/* ----------------------------------------------------------------- FOOTER */

.foot { background: #000; color: var(--text-2); border-top: 2px solid var(--line); }
.foot-top {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(3rem, 5vw, 4.5rem) var(--gutter) 2.5rem;
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}
.foot h4 {
  font-size: var(--s--1); font-weight: 900; font-stretch: 106%;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text); margin-bottom: 1.1rem; line-height: 1.4;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.foot a { text-decoration: none; font-size: var(--s--1); font-weight: 600; }
.foot a:hover { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.foot-brand { display: grid; gap: 1.1rem; align-content: start; }
.foot-brand p { font-size: var(--s--1); font-weight: 500; max-width: 34ch; }
.foot-wa {
  font-size: 1.5rem; font-weight: 900; font-stretch: 112%;
  color: var(--accent); text-decoration: none; letter-spacing: .01em;
}
.foot-legal { border-top: 2px solid var(--line); }
.foot-legal-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: 1.4rem var(--gutter) 2.2rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; align-items: center;
  font-size: var(--s--1); font-weight: 600; color: var(--text-3);
}

/* ----------------------------------------------------------------- MOTION */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}