@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@300;400;500;600;700&family=Exo+2:wght@400;500;600;700;800&display=swap');

/* TOKENS — colors */

/* TOKENS — sizes (desktop defaults; bands override below) */

/* utility: accent-coloured text */
.rv-accent { color: var(--rv-accent); }

/* THEME GUARD */
.rv-header a,
.rv-hero a,
.rv-about a,
.rv-cta a,
.rv-faq a,
.rv-connect a,
.rv-footer a {
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* stop theme wrappers from constraining the full-bleed sections */
.rv-header, .rv-hero, .rv-bleed, .rv-footer { max-width: none !important; }

/* SHARED PIECES */

html { overflow-x: hidden; }

/* One button style, used everywhere. Hover is CSS, not inline JS. */
.rv-btn {
  display: inline-block;
  background: linear-gradient(230deg, var(--rv-accent) 0%, var(--rv-grey-text) 100%);
  color: var(--accent-foreground);
  padding: var(--rv-btn-pad);
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--rv-font);
  font-weight: 600;
  font-size: var(--rv-btn-size);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(var(--rv-accent-rgb), 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* HEADER */

html, body { background-color: var(--rv-dark-bg); }

/* HERO */
.rv-hero {
  position: relative;
  width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--rv-dark-bg);
  margin-top: calc(var(--rv-hdr-h) * -1);   /* header floats over the video */
}

.rv-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

.rv-hero__bg video,
.rv-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* optional darkening for legibility — raise --rv-hero-scrim to taste */
.rv-hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 18, 1);
  opacity: var(--rv-hero-scrim);
  pointer-events: none;
}

.rv-hero__panels {
  position: relative;
  z-index: 2;
}

.rv-hero__panel {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--rv-gutter);
  box-sizing: border-box;
}

/* ---- headline ---- */
.rv-hero__title {
  font-family: var(--rv-hero-display);
  font-weight: 400;
  font-size: var(--rv-hero-h1);
  letter-spacing: var(--rv-hero-h1-track);
  line-height: var(--rv-hero-h1-lh);
  max-width: 15ch;
  margin: 0;
  background: linear-gradient(180deg,
              rgba(126, 138, 142, 0.92) 0%,
              rgba(196, 205, 208, 0.95) 48%,
              rgba(248, 250, 250, 0.98) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.rv-hero-br { display: none; }

/* ---- lead paragraph ---- */
.rv-hero__lead {
  font-family: var(--rv-hero-body);
  font-weight: 500;
  font-size: var(--rv-hero-lead);
  line-height: 1.55;
  color: #D9EFEC;
  max-width: 40ch;
  margin: 0;
}

/* ---- three service columns ---- */
.rv-hero__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rv-hero-cgap);
  width: 100%;
  max-width: 1400px;
  align-items: start;
}

.rv-hero__card { text-align: center; }

.rv-hero__cards > .rv-hero__card:nth-child(2) {
  transform: translateX(var(--rv-hero-c2-nudge));
}

.rv-hero__card svg {
  width: var(--rv-hero-cicon);
  height: var(--rv-hero-cicon);
  fill: var(--rv-accent);
  display: block;
  margin: 0 auto 26px;
}

.rv-hero__card h3 {
  font-family: var(--rv-hero-body);
  font-weight: 600;
  font-size: var(--rv-hero-ctitle);
  line-height: 1.15;
  color: var(--rv-accent);
  margin: 0 0 28px;
}

.rv-hero__card p {
  font-family: var(--rv-hero-body);
  font-weight: 400;
  font-size: var(--rv-hero-cbody);
  line-height: 1.55;
  color: #E8EDEC;
  margin: 0;
}

.rv-hero__panel--lead {
  transform: translateY(var(--rv-hero-lead-shift));
}

.rv-hero__panel--btn {
  min-height: 0;                                   /* panel is sized by its padding */
  justify-content: flex-start;
  padding-top: var(--rv-hero-btn-top);
  padding-bottom: var(--rv-hero-btn-bot);
}

/* ---- hero button ---- */
.rv-hero__btn {
  display: inline-block;
  background: linear-gradient(230deg, var(--rv-accent) 0%, var(--rv-grey-text) 100%);
  color: var(--accent-foreground);
  font-family: var(--rv-hero-body);
  font-weight: 700;
  font-size: var(--rv-hero-btn);
  padding: var(--rv-hero-btn-pad);
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(var(--rv-accent-rgb), 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rv-hero__btn:hover,
.rv-hero__btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--rv-accent-rgb), 0.4);
}

.rv-hero__btn:focus-visible {
  outline: 2px solid var(--rv-accent);
  outline-offset: 4px;
}

/* SECTION */
.rv-about {
  background: linear-gradient(135deg, var(--rv-card-bg) 0%, var(--rv-dark-bg) 100%);
  margin-top: -2px;
  text-align: center;
}

.rv-about__title {
  font-size: var(--rv-about-h2);
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.2;
  margin: 0 0 32px;
}

.rv-about__body {
  font-size: var(--rv-about-p);
  color: var(--muted-foreground);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.7;
  overflow-wrap: break-word;
}

/* --- ambient circles --- */
.rv-circle {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  opacity: var(--rv-circle-op);
  pointer-events: none;
}

.rv-circle--1 { width: var(--c1); height: var(--c1); border: 1px solid rgba(var(--rv-accent-rgb), 0.50); animation: rvDrift1 66s ease-in-out infinite; }

.rv-circle--3 { width: var(--c3); height: var(--c3); border: 1px solid rgba(var(--rv-accent-rgb), 0.40); animation: rvDrift3 66s ease-in-out infinite; }

.rv-circle--5 { width: var(--c5); height: var(--c5); border: 1px solid rgba(var(--rv-accent-rgb), 0.35); animation: rvDrift5 57s ease-in-out infinite; }

.rv-circle--4 { width: var(--c4); height: var(--c4); background: radial-gradient(circle, rgba(var(--rv-accent-rgb), 0.25) 0%, transparent 70%); animation: rvDrift4 63s ease-in-out infinite; }

.rv-circle--6 { width: var(--c6); height: var(--c6); background: radial-gradient(circle, rgba(var(--rv-accent-rgb), 0.12) 0%, transparent 80%); animation: rvDrift6 72s ease-in-out infinite; }

.rv-circle--8 { width: var(--c8); height: var(--c8); background: radial-gradient(circle, rgba(var(--rv-accent-rgb), 0.20) 0%, transparent 60%); animation: rvDrift8 51s ease-in-out infinite; }

@keyframes rvDrift1 {
  0%   { top: 20%; left: 5%;  transform: translate(0, 0) rotate(0deg); }
  25%  { top: 70%; left: 85%; transform: translate(-30px, 40px) rotate(90deg); }
  50%  { top: 30%; left: 60%; transform: translate(20px, -20px) rotate(180deg); }
  75%  { top: 80%; left: 15%; transform: translate(-40px, 30px) rotate(270deg); }
  100% { top: 20%; left: 5%;  transform: translate(0, 0) rotate(360deg); }
}

@keyframes rvDrift3 {
  0%   { top: 45%; left: 80%; transform: translate(0, 0); }
  30%  { top: 10%; left: 15%; transform: translate(-50px, 60px); }
  60%  { top: 70%; left: 45%; transform: translate(40px, -30px); }
  90%  { top: 25%; left: 90%; transform: translate(-25px, 45px); }
  100% { top: 45%; left: 80%; transform: translate(0, 0); }
}

@keyframes rvDrift4 {
  0%   { top: 25%; left: 35%; transform: translate(0, 0) rotate(0deg); }
  25%  { top: 65%; left: 5%;  transform: translate(35px, -25px) rotate(120deg); }
  50%  { top: 50%; left: 95%; transform: translate(-45px, 15px) rotate(240deg); }
  75%  { top: 15%; left: 70%; transform: translate(20px, 35px) rotate(300deg); }
  100% { top: 25%; left: 35%; transform: translate(0, 0) rotate(360deg); }
}

@keyframes rvDrift5 {
  0%   { top: 80%; left: 25%; transform: translate(0, 0); }
  20%  { top: 35%; left: 90%; transform: translate(-30px, 40px); }
  40%  { top: 65%; left: 10%; transform: translate(45px, -20px); }
  60%  { top: 20%; left: 60%; transform: translate(-35px, 25px); }
  80%  { top: 90%; left: 80%; transform: translate(25px, -40px); }
  100% { top: 80%; left: 25%; transform: translate(0, 0); }
}

@keyframes rvDrift6 {
  0%   { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); }
  16%  { top: 20%; left: 85%; transform: translate(-50%, -50%) scale(1.1); }
  32%  { top: 80%; left: 75%; transform: translate(-50%, -50%) scale(0.9); }
  48%  { top: 30%; left: 15%; transform: translate(-50%, -50%) scale(1.2); }
  64%  { top: 70%; left: 95%; transform: translate(-50%, -50%) scale(0.8); }
  80%  { top: 40%; left: 5%;  transform: translate(-50%, -50%) scale(1.05); }
  100% { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); }
}

@keyframes rvDrift8 {
  0%   { top: 75%; left: 60%; transform: translate(0, 0) scale(1); }
  25%  { top: 25%; left: 20%; transform: translate(-25px, 35px) scale(1.3); }
  50%  { top: 90%; left: 90%; transform: translate(30px, -25px) scale(0.7); }
  75%  { top: 40%; left: 80%; transform: translate(-40px, 20px) scale(1.1); }
  100% { top: 75%; left: 60%; transform: translate(0, 0) scale(1); }
}

/* SECTION */
.rv-cta {
  background: linear-gradient(135deg, var(--rv-dark-bg) 0%, var(--rv-card-bg) 100%);
  text-align: center;
}

.rv-cta__title {
  font-size: var(--rv-cta-h2);
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.2;
  margin: 0 0 24px;
}

.rv-cta__body {
  font-size: var(--rv-cta-p);
  color: var(--muted-foreground);
  max-width: 800px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.rv-cta__pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(var(--rv-accent-rgb), 0.10) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(var(--rv-accent-rgb), 0.05) 0%, transparent 50%);
}

/* SECTION */
.rv-faq {
  background: linear-gradient(135deg, var(--rv-card-bg) 0%, var(--rv-dark-bg) 100%);
}

.rv-faq__content {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 var(--rv-gutter);
  box-sizing: border-box;
}

.rv-faq__header {
  text-align: center;
  margin-bottom: 4rem;
}

.rv-faq__title {
  font-size: var(--rv-faq-title);
  font-weight: 700;
  line-height: 1.2;
  color: var(--foreground);
  margin: 0 0 1rem;
}

.rv-faq__subtitle {
  font-size: var(--rv-faq-sub);
  line-height: 1.6;
  color: var(--muted-foreground);
  max-width: 32rem;
  margin: 0 auto;
}

.rv-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rv-faq__item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.rv-faq__item:hover {
  border-color: rgba(var(--rv-accent-rgb), 0.5);
  box-shadow: 0 10px 30px rgba(var(--rv-accent-rgb), 0.1);
}

.rv-faq__q {
  padding: var(--rv-faq-pad);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--rv-faq-q);
  font-weight: 600;
  color: var(--foreground);
  text-align: left;
  transition: color 0.2s ease;
}

.rv-faq__q:hover { color: var(--rv-accent); }

.rv-faq__q::-webkit-details-marker { display: none; }

.rv-faq__q:focus-visible {
  outline: 2px solid var(--rv-accent);
  outline-offset: -2px;
}

.rv-faq__chevron {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.rv-faq__item[open] .rv-faq__chevron { transform: rotate(180deg); }

.rv-faq__a {
  padding: 0 32px 24px 32px;
  font-size: var(--rv-faq-a);
  color: var(--rv-light-text);
  line-height: 1.7;
  text-align: left;
}

.rv-faq__a p { margin: 0 0 1rem; }

.rv-faq__a p:last-child { margin-bottom: 0; }

.rv-faq__a ul { margin: 0 0 1rem; padding-left: 1.25rem; }

.rv-faq__a li { margin-bottom: 0.4rem; }

.rv-faq__a strong { color: var(--foreground); }

/* SECTION */
.rv-final {
  background: linear-gradient(135deg, var(--rv-card-bg) 50%, #080808 65%);
  border: 1px solid var(--border);
  border-radius: 2rem;
  margin-top: 6rem;
  padding: 4rem var(--rv-gutter);
  text-align: center;
}

.rv-final__title {
  font-size: var(--rv-final-h2);
  font-weight: 700;
  line-height: 1.2;
  color: var(--foreground);
  margin: 0 0 24px;
}

.rv-final__body {
  font-size: var(--rv-final-p);
  line-height: 1.6;
  color: rgba(170, 170, 170, 0.8);
  max-width: 36rem;
  margin: 0 auto 2rem;
}

/* SECTION */
.rv-connect { background: var(--rv-dark-bg); }

.rv-connect__title {
  font-size: var(--rv-connect-h2);
  font-weight: 700;
  line-height: 1.2;
  color: var(--foreground);
  margin: 0 0 16px;
  text-align: left;
}

.rv-connect__subtitle {
  font-size: var(--rv-connect-sub);
  line-height: 1.6;
  color: var(--foreground);
  margin: 0 0 var(--rv-connect-gap);
  text-align: left;
}

.rv-connect__grid {
  display: grid;
  grid-template-columns: var(--rv-connect-cols);
  gap: var(--rv-connect-gap);
  align-items: start;
}

/* ---- live map ---- */
.rv-map {
  width: 100%;
  height: var(--rv-map-h);
  border: 0;
  border-radius: 4px;
  display: block;
  background: var(--rv-grey-accent);
}

/* ---- contact cards ---- */
.rv-cards {
  display: grid;
  grid-template-columns: var(--rv-cards-cols);
  gap: var(--rv-cards-gap);
}

.rv-card { text-align: left; }

.rv-card__head {
  display: block;
  text-decoration: none;
  color: var(--rv-accent);
  transition: opacity 0.2s ease;
}

.rv-card__head:hover,
.rv-card__head:focus-visible { opacity: 0.7; }

.rv-card__head:focus-visible {
  outline: 2px solid var(--rv-accent);
  outline-offset: 4px;
}

.rv-card__icon {
  width: var(--rv-card-icon);
  height: var(--rv-card-icon);
  fill: var(--rv-accent);
  display: block;
  margin-bottom: 14px;
}

.rv-card__title {
  font-size: var(--rv-card-title);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rv-accent);
  display: block;
}

.rv-card__desc {
  font-size: var(--rv-card-desc);
  line-height: 1.5;
  color: var(--rv-accent);
  margin: 10px 0 0;
}

.rv-card__value {
  display: inline-block;
  margin-top: 18px;
  font-size: var(--rv-card-desc);
  font-weight: 700;
  line-height: 1.4;
  color: var(--rv-accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.rv-card__value:hover,
.rv-card__value:focus-visible { opacity: 0.7; }

.rv-card__value:focus-visible {
  outline: 2px solid var(--rv-accent);
  outline-offset: 3px;
}

/* ---- social row ---- */
.rv-social {
  display: flex;
  gap: 18px;
  margin-top: 18px;
  align-items: center;
}

.rv-social a {
  display: inline-flex;
  color: var(--rv-accent);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.rv-social a:hover,
.rv-social a:focus-visible {
  opacity: 0.7;
  transform: translateY(-2px);
}

.rv-social a:focus-visible {
  outline: 2px solid var(--rv-accent);
  outline-offset: 4px;
}

.rv-social svg {
  width: var(--rv-social-icon);
  height: var(--rv-social-icon);
  fill: currentColor;
  display: block;
}

@media (min-width: 900px) and (max-width: 1023px) {
.rv-final { margin-top: 4.5rem; padding: 3rem var(--rv-gutter); }
.rv-faq__header { margin-bottom: 3rem; }
}

@media (min-width: 768px) and (max-width: 899px) {
.rv-hero__cards { grid-template-columns: repeat(3, 1fr); gap: 28px; }
.rv-final { margin-top: 4rem; padding: 3rem var(--rv-gutter); }
.rv-faq__header { margin-bottom: 2.5rem; }
.rv-faq__a { padding: 0 24px 20px 24px; }
}

@media (min-width: 481px) and (max-width: 767px) {
.rv-hero-br { display: initial; }
.rv-hero__cards { grid-template-columns: 1fr; gap: 40px; max-width: 520px; }
.rv-hero__panel { padding: 80px var(--rv-gutter); }
.rv-final { margin-top: 3.5rem; padding: 2.5rem var(--rv-gutter); }
.rv-faq__header { margin-bottom: 2rem; }
.rv-faq__a { padding: 0 20px 18px 20px; }
}

@media (max-width: 480px) {
.rv-hero-br { display: initial; }
.rv-hero__cards { grid-template-columns: 1fr; gap: 36px; max-width: 460px; }
.rv-hero__panel { padding: 70px var(--rv-gutter); }
.rv-final { margin-top: 3rem; padding: 2rem var(--rv-gutter); border-radius: 1.25rem; }
.rv-faq__header { margin-bottom: 2rem; }
.rv-faq__a { padding: 0 18px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
.rv-circle { animation: none; }
}