:root{
  --bg:#070707;
  --bg-2:#101010;
  --panel:#151515;
  --panel-2:#1c1c1c;
  --text:#f4efe8;
  --muted:#c9c2b6;
  --muted-2:#a69c8f;
  --gold:#d8b26a;
  --gold-2:#f0d8a3;
  --gold-3:#b88d43;
  --line:rgba(255,255,255,.08);
  --shadow:0 26px 80px rgba(0,0,0,.5);
  --container:min(1360px, calc(100vw - 48px));
  --radius:22px;
  --radius-lg:30px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
html,body{scrollbar-width:none; -ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 18% 18%, rgba(216,178,106,.11), transparent 26%),
    radial-gradient(circle at 82% 10%, rgba(255,255,255,.08), transparent 18%),
    linear-gradient(180deg,#070707 0%, #0b0b0b 40%, #101010 100%);
  color:var(--text);
  overflow-x:hidden;
}

h1,h2,h3,.brand__text strong,.section-heading__sub,.hero__label{
  font-family:"Noto Serif Thai",serif;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:var(--container); margin-inline:auto; position:relative; z-index:2;}

.ambient{
  position:fixed; inset:0;
  z-index:-2;
  pointer-events:none;
  overflow:hidden;
}
.ambient::before,
.ambient::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(50px);
  opacity:.7;
}
.ambient::before{
  width:48vw;height:48vw;
  left:-12vw;top:-12vw;
  background:radial-gradient(circle, rgba(216,178,106,.18), transparent 60%);
}
.ambient::after{
  width:42vw;height:42vw;
  right:-10vw;bottom:-10vw;
  background:radial-gradient(circle, rgba(255,255,255,.1), transparent 62%);
}
.noise{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:.07;
  mix-blend-mode:soft-light;
}
.particles span{
  position:absolute;
  width:5px;height:5px;border-radius:50%;
  background:rgba(240,216,163,.85);
  box-shadow:0 0 18px rgba(240,216,163,.8);
  animation: floatUp 18s linear infinite;
}
.particles span:nth-child(1){left:10%;top:85%;animation-delay:0s}
.particles span:nth-child(2){left:17%;top:72%;animation-delay:2s}
.particles span:nth-child(3){left:26%;top:90%;animation-delay:4s}
.particles span:nth-child(4){left:39%;top:78%;animation-delay:1.2s}
.particles span:nth-child(5){left:52%;top:88%;animation-delay:5s}
.particles span:nth-child(6){left:63%;top:74%;animation-delay:3s}
.particles span:nth-child(7){left:77%;top:89%;animation-delay:6s}
.particles span:nth-child(8){left:88%;top:76%;animation-delay:1.6s}
@keyframes floatUp{
  0%{transform:translateY(0) scale(.85);opacity:0}
  10%{opacity:1}
  100%{transform:translateY(-120vh) scale(1.2);opacity:0}
}

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(18px);
  background:rgba(6,6,6,.82);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar__inner{
  height:90px;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
}
.brand{display:flex; align-items:center; gap:14px}
.brand__mark{
  width:44px;height:44px;color:var(--gold);
  filter:drop-shadow(0 0 10px rgba(216,178,106,.18));
  flex:none;
}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__text strong{
  letter-spacing:.26em; font-size:1.02rem; font-weight:900;
}
.brand__text span{
  margin-top:5px; letter-spacing:.5em; font-size:.7rem; color:#ddd;
}
/* nav ชิดขวา */
.nav{ margin-left:auto; }
.nav{
  display:flex; align-items:center; gap:42px;
}
.nav a{
  font-size:.98rem;
  font-weight:700;
  color:#f2ede6;
  opacity:.95;
  transition:.25s ease;
  position:relative;
}
/* ─── Dropdown ─── */
.nav__dropdown{
  position:relative;
}
.nav__dropdown > a{
  display:inline-flex; align-items:center; gap:5px;
}
.nav__dropdown > a::before{
  content:"▾";
  font-size:.7rem;
  order:2;
  transition:transform .22s ease;
}
.nav__dropdown:hover > a::before{ transform:rotate(-180deg) }
.nav__submenu{
  position:absolute; top:100%; right:0;
  min-width:210px;
  padding-top:14px;
  display:none;
  z-index:60;
}
.nav__submenu__inner{
  background:rgba(12,12,12,.97);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  padding:8px 0;
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  position:relative;
}
.nav__submenu__inner::before{
  content:"";
  position:absolute; top:-6px; right:24px;
  width:12px; height:12px;
  background:rgba(12,12,12,.97);
  border-left:1px solid rgba(255,255,255,.09);
  border-top:1px solid rgba(255,255,255,.09);
  transform:rotate(45deg);
}
.nav__dropdown:hover .nav__submenu{ display:block }
.nav__submenu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 18px;
  font-size:.9rem;
  font-weight:600;
  color:#d5cfc6;
  opacity:1;
  transition:.18s ease;
  border-bottom:none;
}
.nav__submenu a::after{ display:none }
.nav__submenu a:hover{
  color:var(--gold);
  background:rgba(216,178,106,.08);
}
.nav__submenu a span{
  font-size:.75rem;
  color:var(--gold-3);
  font-weight:800;
  min-width:22px;
}
.nav a::after{
  content:"";
  position:absolute; left:0; bottom:-8px;
  width:100%; height:2px;
  transform:scaleX(0);
  transform-origin:center;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transition:.28s ease;
}
.nav a:hover{color:var(--gold)}
.nav a:hover::after{transform:scaleX(1)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:999px;
  font-size:1rem;
  font-weight:800;
  transition:.28s ease;
  border:1px solid transparent;
  white-space:nowrap;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn--gold{
  background:linear-gradient(180deg,#f1d9a0 0%, #d7b06a 100%);
  color:#171515;
  box-shadow:0 12px 30px rgba(216,178,106,.24);
}
.btn--gold:hover{box-shadow:0 18px 42px rgba(216,178,106,.33)}
.btn--dark{
  background:#111;
  color:#fff;
  border-color:#2a2a2a;
  box-shadow:0 12px 26px rgba(0,0,0,.28);
}
.btn--light{
  background:#f3ede4;
  color:#111;
  border-color:#d7d0c4;
  box-shadow:0 12px 26px rgba(0,0,0,.09);
}
.btn--small{padding:11px 18px;font-size:.92rem}

.btn-lang{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:30px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  color:#f0ece5;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.06em;
  cursor:pointer;
  transition:.22s ease;
  flex:none;
}
.btn-lang:hover{
  background:rgba(216,178,106,.14);
  border-color:rgba(216,178,106,.4);
  color:var(--gold);
}

.hero{
  position:relative;
  min-height:760px;
  padding:42px 0 32px;
  overflow:hidden;
  background:none;
  color:#f4efe8;
}
/* ─── รูปพื้นหลัง luxury ─── */
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:url("img/background.png") center 30%/cover no-repeat;
  filter:saturate(1.25) brightness(0.88) contrast(1.1);
}
/* ─── overlay gradient ซ้ายเข้ม → ขวาจาง ─── */
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    to right,
    rgba(5,5,5,.78) 0%,
    rgba(5,5,5,.55) 38%,
    rgba(5,5,5,.25) 65%,
    rgba(5,5,5,.08) 100%
  );
  pointer-events:none;
}
.hero__overlay{ display:none; }
.hero__inner{
  display:grid;
  grid-template-columns:1.28fr .82fr;
  gap:54px;
  align-items:center;
  min-height:680px;
}
.hero__label{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--gold-2);
  font-size:1rem;
  font-weight:600;
  margin:0 0 18px;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.hero h1{
  margin:0;
  font-size:clamp(3.3rem, 6vw, 6.2rem);
  line-height:.92;
  letter-spacing:-.05em;
  color:#ffffff;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.hero h1 span{
  display:block;
  margin-top:30px;
  color:var(--gold-2);
  text-shadow:0 2px 20px rgba(0,0,0,.4);
}
.hero__desc{
  margin:28px 0 0;
  max-width:580px;
  font-size:1.18rem;
  line-height:1.65;
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.hero__actions{
  display:flex;
  gap:14px;
  margin-top:30px;
  flex-wrap:wrap;
}
.hero__features{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:18px;
  margin-top:44px;
  max-width:920px;
}
.mini-feature{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.mini-feature__icon{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(216,178,106,.12);
  border:1px solid rgba(184,141,67,.35);
  color:var(--gold-3);
  flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.mini-feature h3{
  margin:0 0 6px;
  font-size:1rem;
  color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.mini-feature p{
  margin:0;
  font-size:.88rem;
  color:rgba(255,255,255,.75);
  line-height:1.42;
}

.service-card{
  justify-self:end;
  width:min(410px,100%);
  margin-top:60px;
}

/* ── Scroll Indicator (Desktop Only) ── */
.scroll-indicator{
  position:fixed;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:999;
  opacity:1;
  transition:opacity .5s ease, visibility .5s ease;
  visibility:visible;
  pointer-events:none;
}
.scroll-indicator.is-hidden{
  opacity:0;
  visibility:hidden;
}
.scroll-indicator__mouse{
  width:26px;
  height:42px;
  border:2px solid rgba(255,255,255,.55);
  border-radius:13px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:7px;
  box-shadow:0 0 12px rgba(0,0,0,.35);
}
.scroll-indicator__wheel{
  width:3px;
  height:7px;
  background:var(--gold);
  border-radius:2px;
  animation:scroll-wheel 1.6s ease-in-out infinite;
}
.scroll-indicator__text{
  font-size:0.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  margin:0;
  white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
@keyframes scroll-wheel{
  0%  {opacity:1; transform:translateY(0)}
  60% {opacity:.4; transform:translateY(9px)}
  100%{opacity:0; transform:translateY(9px)}
}
@media(hover:none),(max-width:1024px){
  .scroll-indicator{ display:none !important; }
}

/* ── Card Slider ── */
.card-slider{
  position:relative;
  border-radius:28px;
  overflow:hidden;
}
.card-slider__track{
  position:relative;
}
.card-slide{
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.card-slide.is-active{
  opacity:1;
  pointer-events:auto;
}
.card-slide--photo{
  position:absolute;
  inset:0;
  border-radius:28px;
  overflow:hidden;
}
.card-slide--photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:28px;
}
.card-tabs{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.card-dot{
  flex:1;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,.15);
  border:none;
  cursor:pointer;
  padding:0;
  transition:.3s ease;
}
.card-dot.active{
  background:var(--gold);
}
.service-card__inner{
  background:linear-gradient(180deg, rgba(22,22,22,.96), rgba(11,11,11,.96));
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  padding:28px 26px 26px;
  color:#f7f3ed;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;
  overflow:hidden;
}
.service-card__inner::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(circle at 30% 10%, rgba(216,178,106,.16), transparent 30%),
    linear-gradient(135deg, rgba(216,178,106,.12), transparent 35%, transparent 66%, rgba(216,178,106,.12));
  pointer-events:none;
  opacity:.95;
}
.service-card__title{
  font-size:1.22rem;
  font-weight:800;
  margin-bottom:18px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.1);
  position:relative;
  z-index:1;
}
.service-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 0;
  position:relative;
  z-index:1;
}
.service-item__icon{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(216,178,106,.08);
  border:1px solid rgba(216,178,106,.35);
  color:var(--gold);
  flex:none;
  font-size:1.05rem;
}
.service-item strong{display:block; margin-bottom:4px; font-size:1rem}
.service-item p{margin:0; color:#c8c1b5; line-height:1.45; font-size:.92rem}
.service-card__cta{width:100%; margin-top:16px; position:relative; z-index:1;}

.services{
  padding: 28px 0 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,246,242,.99));
  color:#111;
}
.section-heading{
  text-align:center;
  margin-bottom:24px;
}
.section-heading__sub{
  display:block;
  color:var(--gold-3);
  letter-spacing:.24em;
  font-size:.9rem;
  margin-bottom:8px;
}
.section-heading h2{
  margin:0;
  font-size:clamp(2rem, 3vw, 3rem);
  line-height:1.1;
  color:#111;
}
.section-heading::after{
  content:"";
  display:block;
  width:64px;height:2px;
  margin:16px auto 0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ─── Services Grid — 4+3 Layout ─── */
.services-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
}
/* 4 ใบบน */
.service-tile:nth-child(-n+4){ grid-column:span 3 }
/* 3 ใบล่าง — centered */
.service-tile:nth-child(5),
.service-tile:nth-child(6),
.service-tile:nth-child(7){ grid-column:span 3 }
.service-tile:nth-child(5){ grid-column:3 / span 3 }
.service-tile:nth-child(6){ grid-column:6 / span 3 }
.service-tile:nth-child(7){ grid-column:9 / span 3 }

.service-tile{
  min-height:215px;
  border-radius:14px;
  overflow:hidden;
  position:relative;
  background:#0c0c0c;
  box-shadow:0 8px 28px rgba(0,0,0,.38);
}
/* bottom 3 cards — shorter for visual depth */
.service-tile:nth-child(n+5){ min-height:155px }

.service-tile__image{
  position:absolute; inset:0;
  background-size:cover;
  background-position:65% center;
  transition:transform .72s ease;
  transform:scale(1.04);
}
.service-tile:hover .service-tile__image{ transform:scale(1.1) }

/* Dark left → transparent right — text left, image right */
.service-tile::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to right,
    rgba(4,4,4,.97) 0%,
    rgba(4,4,4,.93) 32%,
    rgba(4,4,4,.64) 55%,
    rgba(4,4,4,.14) 100%
  );
}

.service-tile__content{
  position:relative; z-index:1;
  padding:20px 22px 18px;
  color:#f4efe8;
  display:flex; flex-direction:column;
  height:100%;
  max-width:58%;
}

.service-tile__num{
  font-size:1.75rem;
  font-weight:900;
  color:var(--gold);
  line-height:1;
  margin-bottom:8px;
  letter-spacing:-.01em;
}

.service-tile h3{
  margin:0 0 6px;
  font-size:1.06rem;
  line-height:1.28;
  font-weight:700;
  color:#f0ece5;
}

.service-tile p{
  margin:0;
  color:#a8a09a;
  font-size:.82rem;
  line-height:1.58;
}

.service-tile__link{
  margin-top:auto;
  padding-top:13px;
  color:var(--gold);
  font-weight:700;
  font-size:.88rem;
  transition:color .22s, gap .22s;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.service-tile:hover .service-tile__link{ color:var(--gold-2) }
/* 01 ท่องเที่ยวภูเก็ต */
.image-a{background-image:url("img/1.png"); background-position:center center}
/* 02 รถ TAXI */
.image-b{background-image:url("img/2.png"); background-position:center center}
/* 03 รถเช่า */
.image-c{background-image:url("img/3.png"); background-position:center center}
/* 04 สบู่ Buja */
.image-d{background-image:url("img/4.png"); background-position:center center}
/* 05 รับสร้างแบรนด์สินค้า */
.image-e{background-image:url("img/5.png"); background-position:center center}
/* 06 รับทำเว็บไซต์ */
.image-f{background-image:url("img/6.png"); background-position:center center}
/* 07 ส่งพัสดุทั่วไทย-ต่างประเทศ */
.image-g{background-image:url("img/7.png"); background-position:center center}

.stats{
  background:linear-gradient(180deg, #0f0f0f, #141414);
  color:#fff;
  padding: 28px 0 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.stats__inner{
  display:grid;
  grid-template-columns:1.1fr 1.4fr;
  gap:28px;
  align-items:center;
  padding-bottom:26px;
}
.stats__lead h2{
  margin:0 0 10px;
  font-size:clamp(1.8rem, 2.8vw, 2.6rem);
}
.stats__lead p{
  margin:0;
  color:#d5d0c7;
  line-height:1.6;
  max-width:420px;
}
.stats__numbers{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.stat{
  text-align:center;
  padding:16px 10px;
  border-left:1px solid rgba(255,255,255,.08);
}
.stat:first-child{border-left:none}
.stat strong{
  display:block;
  font-size:clamp(2rem, 3vw, 3rem);
  color:var(--gold);
  line-height:1;
  margin-bottom:8px;
}
.stat span{color:#ddd;font-size:.95rem}

.footer{
  background:#080808;
  padding-top:48px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* ── Brand strip ── */
.footer__brand{
  display:flex;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
  padding-bottom:28px;
}
.brand--footer .brand__text strong{font-size:1rem}
.footer__tagline{
  margin:0;
  color:#c8c1b8;
  font-size:1.05rem;
  font-weight:700;
  text-align:center;
  flex:1;
  min-width:160px;
}
.socials{
  display:flex;
  gap:14px;
  margin-left:auto;
  flex-wrap:wrap;
}
.socials a{
  width:42px !important;height:42px !important;border-radius:50% !important;
  display:grid !important;place-items:center !important;
  border:none;
  overflow:hidden;
  font-size:1.1rem;
  font-weight:800;
  transition:.28s cubic-bezier(.34,.1,.64,.9);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  text-decoration:none;
  cursor:pointer;
  padding:6px;
  flex-shrink:0 !important;
}

/* Facebook */
.social-fb{
  background:linear-gradient(135deg, #1877f2 0%, #0a66c2 100%) !important;
  color:#fff !important;
}
.social-fb:hover{
  transform:translateY(-3px) scale(1.1);
  box-shadow:0 8px 24px rgba(24,119,242,.45);
}

/* LINE */
.social-line{
  background:linear-gradient(135deg, #00c300 0%, #00a800 100%) !important;
  color:#fff !important;
}
.social-line:hover{
  transform:translateY(-3px) scale(1.1);
  box-shadow:0 8px 24px rgba(0,195,0,.45);
}

/* TikTok */
.social-tiktok{
  background:linear-gradient(135deg, #010101 0%, #1a1a2e 100%) !important;
  color:#fff !important;
  position:relative;
  overflow:hidden;
}
.social-tiktok::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(105,201,208,.35) 0%, rgba(238,29,82,.35) 100%);
}
.social-tiktok svg{ position:relative; z-index:1; }
.social-tiktok:hover{
  transform:translateY(-3px) scale(1.1);
  box-shadow:0 8px 24px rgba(238,29,82,.5);
}

/* WhatsApp */
.social-wa{
  background:linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  color:#fff !important;
}
.social-wa:hover{
  transform:translateY(-3px) scale(1.1);
  box-shadow:0 8px 24px rgba(37,211,102,.45);
}

/* SVG icon size */
.socials a svg{
  width:100% !important;
  height:100% !important;
  flex-shrink:0 !important;
  display:block !important;
}

/* ── Horizontal rule ── */
.footer__rule{
  height:1px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.09) 20%, rgba(255,255,255,.09) 80%, transparent);
  margin-bottom:36px;
}

/* ── Info columns ── */
.footer__cols{
  display:grid;
  grid-template-columns:1.1fr 1fr 0.9fr;
  gap:32px;
  padding-bottom:40px;
}
.footer__col-title{
  margin:0 0 16px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-3);
}

/* Services list — 2 per row */
.footer__list{
  list-style:none;
  padding:0; margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 10px;
}
.footer__list li{
  font-size:.86rem;
  color:#9e978e;
  line-height:1.45;
  padding-left:12px;
  position:relative;
}
.footer__list li::before{
  content:"·";
  position:absolute; left:0;
  color:var(--gold-3);
}

/* Contact list — 1 col with icon */
.footer__list--contact{
  grid-template-columns:1fr;
  gap:10px;
}
.footer__list--contact li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding-left:0;
  color:#b0a9a0;
}
.footer__list--contact li::before{display:none}
.footer__icon{
  flex:none;
  font-size:.95rem;
  line-height:1.45;
}
.footer__cta{
  display:inline-flex;
  margin-top:20px;
}

/* ── Agency America card ── */
.agency-card{
  background:linear-gradient(135deg, rgba(216,178,106,.10) 0%, rgba(216,178,106,.04) 100%);
  border:1px solid rgba(216,178,106,.22);
  border-radius:16px;
  padding:22px 20px 20px;
  position:relative;
  overflow:hidden;
}
.agency-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.agency-card__badge{
  display:inline-block;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-3);
  background:rgba(216,178,106,.1);
  border:1px solid rgba(216,178,106,.2);
  border-radius:999px;
  padding:3px 10px;
  margin-bottom:14px;
}
.agency-card__name{
  font-family:"Noto Serif Thai",serif;
  font-size:1.1rem;
  font-weight:700;
  color:var(--gold-2);
  margin-bottom:4px;
}
.agency-card__person{
  font-size:.88rem;
  color:#b0a9a0;
  margin-bottom:14px;
}
.agency-card__phone{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.95rem;
  font-weight:700;
  color:#f4efe8;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  padding:8px 16px;
  transition:.22s ease;
}
.agency-card__phone::before{content:"📞"; font-size:.85rem}
.agency-card__phone:hover{
  background:rgba(216,178,106,.12);
  border-color:rgba(216,178,106,.35);
  color:var(--gold-2);
}

.footer__bottom{
  text-align:center;
  padding:16px 0 22px;
  color:#5c5650;
  border-top:1px solid rgba(255,255,255,.05);
  font-size:.85rem;
}
.footer__bottom a{
  color:#7a7269;
  transition:.2s ease;
}
.footer__bottom a:hover{color:var(--gold-3)}

/* ── Scroll Track (right side) ── */
.scroll-track{
  position:fixed;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:55vh;
  background:rgba(255,255,255,.1);
  border-radius:3px;
  z-index:998;
  cursor:pointer;
  overflow:visible;
}
.scroll-thumb{
  width:100%;
  background:var(--gold);
  border-radius:3px;
  position:absolute;
  top:0;
  min-height:24px;
  cursor:grab;
  transition:width .2s ease, left .2s ease, background .2s ease;
}
.scroll-thumb:active{
  cursor:grabbing;
  background:var(--gold-2);
  width:5px;
  left:-1px;
}
.scroll-thumb:hover{
  width:5px;
  left:-1px;
  background:var(--gold-2);
}
@media(hover:none),(max-width:1024px){
  .scroll-track{ display:none !important; }
}

.back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  width:46px;height:46px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(20,20,20,.92);
  color:#fff;
  border-radius:50%;
  box-shadow:0 16px 34px rgba(0,0,0,.32);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:.25s ease;
  z-index:100;
}
.back-to-top.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ─── Hamburger Menu ─── */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px;height:44px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  cursor:pointer;
  padding:0;
  flex:none;
}
.nav-toggle span{
  display:block;
  width:22px;height:2px;
  background:#f4efe8;
  border-radius:2px;
  transition:.28s ease;
  transform-origin:center;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(3px);
  z-index:48;
}
.nav-overlay.is-open{display:block}

@media (max-width: 1180px){
  .nav{gap:26px}
  .hero__inner{grid-template-columns:1fr; gap:24px; min-height:auto; padding-top:14px}
  .service-card{justify-self:start; margin-top:0; width:min(520px,100%)}
  .hero__features{grid-template-columns:repeat(2,1fr)}
  /* Services: 2 columns at tablet */
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .service-tile:nth-child(-n+4),
  .service-tile:nth-child(n+5){ grid-column:auto; min-height:190px }
  .stats__inner{grid-template-columns:1fr}
  .stats__numbers{grid-template-columns:repeat(2,1fr)}
  .footer__cols{grid-template-columns:1fr 1fr}
}

@media (max-width: 780px){
  /* Topbar */
  .topbar__inner{height:64px; padding:0}
  .topbar__cta{display:none}
  .nav-toggle{display:flex}

  /* Mobile nav — slide-in panel */
  .nav{
    position:fixed;
    top:0; left:0;
    width:min(300px, 82vw);
    height:100dvh;
    background:rgba(8,8,8,.98);
    backdrop-filter:blur(24px);
    border-right:1px solid rgba(255,255,255,.08);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:80px 24px 36px;
    overflow-y:auto;
    z-index:49;
    transform:translateX(-110%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    will-change:transform;
  }
  .nav.is-open{transform:translateX(0)}

  .nav a{
    font-size:1.1rem;
    font-weight:700;
    padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
    white-space:normal;
    display:block;
  }
  .nav a::after{display:none}
  .nav a:last-of-type{border-bottom:none}

  .nav__mobile-cta{
    display:block !important;
    margin-top:28px;
    text-align:center;
  }

  /* Hero — mobile centered layout */
  .hero{padding:36px 0 28px; min-height:auto}
  .hero__inner{text-align:center}
  .hero__label{justify-content:center}
  .hero h1{font-size:clamp(2.6rem, 11vw, 4rem)}
  .hero__desc{font-size:1rem; max-width:100%; margin-inline:auto}
  .hero__actions{
    gap:10px;
    justify-content:center;
    flex-direction:row;
    flex-wrap:nowrap;
  }
  .hero__actions .btn{
    flex:1;
    min-width:0;
    padding:14px 12px;
    font-size:.92rem;
  }
  .hero__features{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    max-width:100%;
    text-align:left;
  }

  /* Service card */
  .service-card{width:100%}

  /* Services: 1 column mobile */
  .services{padding:32px 0 20px}
  .services-grid{grid-template-columns:1fr; gap:10px}
  .service-tile:nth-child(-n+4),
  .service-tile:nth-child(n+5){ grid-column:auto; min-height:190px }
  .service-tile__content{ max-width:62% }

  /* Stats */
  .stats{padding:32px 0 0}
  .stats__numbers{grid-template-columns:1fr 1fr}

  /* Footer */
  .footer{padding-top:32px}
  .footer__brand{flex-direction:column; align-items:center; gap:14px}
  .footer__tagline{text-align:center; width:100%}
  .socials{margin-left:0}
  .footer__cols{grid-template-columns:1fr; gap:24px}
  .footer__list{grid-template-columns:1fr 1fr}

  /* ── Mobile font-size boosts (readability) ── */
  .section-heading__sub{ font-size:1rem }
  .service-tile p{ font-size:.92rem }
  .stat span{ font-size:1.05rem }
  .footer__list li{ font-size:.94rem }
  .footer__bottom{ font-size:.9rem }
  .mini-feature p{ font-size:.94rem }
  .hero__desc{ font-size:1.05rem }
}

@media (max-width: 480px){
  .hero h1{font-size:clamp(2.2rem, 10vw, 3.2rem)}
  .hero__features{grid-template-columns:1fr; gap:12px}
  .hero__actions{flex-direction:row; flex-wrap:nowrap; gap:8px}
  .hero__actions .btn{flex:1; width:auto; min-width:0; padding:13px 10px; font-size:.88rem}
  .stats__numbers{grid-template-columns:1fr 1fr}
  .footer__list{grid-template-columns:1fr}

  /* Extra boost on small phones */
  .service-tile p{ font-size:.95rem }
  .footer__list li{ font-size:.96rem }
  .stat span{ font-size:1.08rem }
  .section-heading__sub{ font-size:1.02rem }
}

@media (max-width: 400px){
  :root{--container:calc(100vw - 24px)}
  .stats__numbers{grid-template-columns:1fr}
  .stat{border-left:none; border-top:1px solid rgba(255,255,255,.08)}
  .stat:first-child{border-top:none}
}

/* ══ Gallery ══ */
.gallery{padding:80px 0 60px}

.section-heading{position:relative}
.gallery__toggle{position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.2rem;color:var(--muted);cursor:pointer;transition:.3s ease;padding:8px;font-weight:700}
.gallery__toggle:hover{color:var(--gold);transform:translateY(-50%) scale(1.15)}
.gallery__toggle.collapsed{transform:translateY(-50%) rotate(180deg)}

.gallery__grid{
  columns:4;
  column-gap:10px;
  margin-top:40px;
  max-height:none;
  overflow:hidden;
  transition:max-height .4s ease;
}
.gallery__grid.collapsed{max-height:0}
.gallery__item{
  break-inside:avoid;
  margin-bottom:10px;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
}
.gallery__item::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(216,178,106,0);
  transition:.28s ease;
}
.gallery__item:hover::after{background:rgba(216,178,106,.12)}
.gallery__item img{
  width:100%;
  display:block;
  transition:transform .38s ease;
}
.gallery__item:hover img{transform:scale(1.05)}

/* ══ Lightbox ══ */
.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,.96);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox__img{
  max-width:min(90vw,1200px);
  max-height:88vh;
  border-radius:12px;
  object-fit:contain;
  box-shadow:0 32px 80px rgba(0,0,0,.7);
  transition:opacity .18s ease;
}
.lightbox__close{
  position:absolute;
  top:20px;right:24px;
  font-size:1.1rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  width:42px;height:42px;
  border-radius:50%;
  cursor:pointer;
  display:grid;place-items:center;
  transition:.2s;
  line-height:1;
}
.lightbox__close:hover{background:rgba(255,255,255,.18)}
.lightbox__prev,.lightbox__next{
  position:absolute;
  top:50%;transform:translateY(-50%);
  font-size:1.8rem;line-height:1;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  width:52px;height:52px;
  border-radius:50%;
  cursor:pointer;
  display:grid;place-items:center;
  transition:.2s;
  font-family:system-ui,sans-serif;
}
.lightbox__prev:hover,.lightbox__next:hover{
  background:rgba(216,178,106,.22);
  border-color:rgba(216,178,106,.4);
}
.lightbox__prev{left:20px}
.lightbox__next{right:20px}
.lightbox__counter{
  position:absolute;
  bottom:20px;left:50%;transform:translateX(-50%);
  font-size:.82rem;color:rgba(255,255,255,.45);
  background:rgba(0,0,0,.5);
  padding:4px 14px;border-radius:999px;
  font-family:"Inter",sans-serif;
  letter-spacing:.04em;
  white-space:nowrap;
}

@media(max-width:1000px){.gallery__grid{columns:3}}
@media(max-width:680px){
  .gallery__grid{columns:2;column-gap:8px}
  .gallery__item{margin-bottom:8px;border-radius:10px}
  .lightbox__prev{left:10px}
  .lightbox__next{right:10px}
}
@media(max-width:400px){.gallery__grid{columns:2}}

/* ══════════════════════════════════════════════════
   Reviews / Testimonials Section
══════════════════════════════════════════════════ */
.reviews{
  padding:90px 0 80px;
  background:#0d0d0d;
  position:relative;
}
.reviews::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(216,178,106,.06),transparent);
  pointer-events:none;
}

/* ── Section heading override for dark bg ── */
.reviews .section-heading h2{color:#fff}
.reviews .section-heading__sub{color:var(--gold)}
.reviews .section-heading::after{background:var(--gold)}
/* force visible — ป้องกัน reveal class ค้างที่ opacity:0 */
.reviews .section-heading,
.reviews .reviews-grid,
.reviews .reviews-footer{opacity:1!important;transform:none!important}

/* ── Cards grid (homepage — 5 per row) ── */
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-top:44px;
}

/* ── Review Card ── */
.review-card{
  background:var(--panel);
  border:1px solid rgba(216,178,106,.15);
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .28s ease,transform .28s ease,box-shadow .28s ease;
  display:flex;
  flex-direction:column;
}
.review-card:hover{
  border-color:rgba(216,178,106,.45);
  transform:translateY(-4px);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
}

/* Card image */
.review-card__img-wrap{
  height:140px;
  overflow:hidden;
  position:relative;
  background:linear-gradient(135deg,#181818,#1e1e1e);
  flex-shrink:0;
}
.review-card__img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.review-card:hover .review-card__img{transform:scale(1.07)}
.review-card__img-overlay{
  position:absolute;inset:0;
  background:rgba(216,178,106,0);
  transition:background .28s ease;
  display:flex;align-items:center;justify-content:center;
}
.review-card:hover .review-card__img-overlay{background:rgba(216,178,106,.14)}
.review-card__img-overlay::after{
  content:"⊕";
  font-size:1.8rem;color:var(--gold-2);
  opacity:0;transition:opacity .28s ease;line-height:1;
}
.review-card:hover .review-card__img-overlay::after{opacity:1}

/* Multi-image badge */
.review-card__img-count{
  position:absolute;bottom:8px;right:8px;
  background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:2px 8px;
  font-size:.68rem;font-weight:700;
  color:rgba(255,255,255,.8);
  line-height:1.5;
}

/* No-image placeholder */
.review-card__img-wrap--no-img{display:flex;align-items:center;justify-content:center}
.review-card__img-wrap--no-img::before{content:"✦";font-size:2rem;color:rgba(216,178,106,.2)}

/* Card body */
.review-card__body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column}
.review-card__stars{
  color:var(--gold);letter-spacing:1px;
  margin-bottom:8px;font-size:.85rem;line-height:1;
}
.review-card__text{
  color:var(--muted);font-size:.8rem;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:10px;flex:1;
}
.review-card__meta{display:flex;justify-content:space-between;align-items:flex-end;gap:6px;margin-top:auto}
.review-card__name{font-weight:700;font-size:.78rem;color:var(--text);line-height:1.3}
.review-card__date{font-size:.7rem;color:var(--muted-2);white-space:nowrap}

/* ── View All button ── */
.reviews-footer{
  display:flex;
  justify-content:center;
  margin-top:40px;
}
.reviews-view-all{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 32px;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(216,178,106,.4);
  color:var(--gold);
  font-size:.9rem;font-weight:700;
  font-family:inherit;
  cursor:pointer;
  text-decoration:none;
  transition:.25s ease;
  letter-spacing:.04em;
}
.reviews-view-all:hover{
  background:rgba(216,178,106,.1);
  border-color:rgba(216,178,106,.7);
  color:var(--gold-2);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(216,178,106,.15);
}
.reviews-view-all svg{transition:transform .25s ease}
.reviews-view-all:hover svg{transform:translateX(4px)}

/* Empty state */
.reviews-empty{text-align:center;padding:56px 24px;color:var(--muted-2);font-size:.95rem}

/* ══════════════════════════════════════════════════
   Review Modal (shared — index + reviews.html)
══════════════════════════════════════════════════ */
.review-modal{
  position:fixed;inset:0;z-index:210;
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.review-modal.is-open{opacity:1;pointer-events:auto}
.review-modal__backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(8px);
  cursor:pointer;
}
.review-modal__box{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.95);
  width:min(720px,calc(100vw - 24px));
  max-height:92vh;overflow-y:auto;
  background:var(--panel);
  border:1px solid rgba(216,178,106,.2);
  border-radius:24px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  scrollbar-width:none;
}
.review-modal__box::-webkit-scrollbar{display:none}
.review-modal.is-open .review-modal__box{transform:translate(-50%,-50%) scale(1)}

/* Image gallery inside modal */
.review-modal__gallery{
  position:relative;
  background:#111;
  border-radius:24px 24px 0 0;
  overflow:hidden;
}
.review-modal__gallery-main{
  width:100%;height:360px;
  position:relative;overflow:hidden;
}
.review-modal__gallery-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s ease;
  display:block;
}
.review-modal__gallery-img.active{opacity:1}
.review-modal__gallery-placeholder{
  width:100%;height:260px;
  background:linear-gradient(135deg,#141414,#1e1e1e);
  border-radius:24px 24px 0 0;
  display:flex;align-items:center;justify-content:center;
  font-size:4rem;color:rgba(216,178,106,.18);
}

/* Gallery nav arrows */
.review-modal__gprev,.review-modal__gnext{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15);
  color:#fff;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.2s;z-index:2;font-family:system-ui,sans-serif;line-height:1;
}
.review-modal__gprev:hover,.review-modal__gnext:hover{background:rgba(216,178,106,.3)}
.review-modal__gprev{left:12px}
.review-modal__gnext{right:12px}

/* Gallery thumbnails */
.review-modal__thumbs{
  display:flex;gap:6px;padding:10px 12px;
  background:rgba(0,0,0,.4);overflow-x:auto;scrollbar-width:none;
}
.review-modal__thumbs::-webkit-scrollbar{display:none}
.review-modal__thumb{
  flex-shrink:0;width:56px;height:44px;
  border-radius:8px;object-fit:cover;cursor:pointer;
  border:2px solid transparent;
  transition:.2s ease;opacity:.55;
}
.review-modal__thumb.active{border-color:var(--gold);opacity:1}
.review-modal__thumb:hover{opacity:.85}

/* Gallery counter badge */
.review-modal__gcounter{
  position:absolute;bottom:10px;right:12px;
  background:rgba(0,0,0,.6);border-radius:999px;
  padding:3px 10px;font-size:.72rem;color:rgba(255,255,255,.7);
  font-family:"Inter",sans-serif;z-index:2;
}

/* Modal body */
.review-modal__body{padding:26px 30px 32px}
.review-modal__stars{color:var(--gold);font-size:1.25rem;letter-spacing:3px;margin-bottom:14px;line-height:1}
.review-modal__text{color:var(--muted);line-height:1.85;font-size:.95rem;margin-bottom:22px;white-space:pre-wrap}
.review-modal__meta{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:16px;border-top:1px solid var(--line);gap:12px;flex-wrap:wrap;
}
.review-modal__name{font-weight:700;color:var(--gold-2);font-size:.93rem}
.review-modal__date{color:var(--muted-2);font-size:.83rem}
.review-modal__close{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.14);
  color:var(--text);font-size:.95rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.22s ease;z-index:5;line-height:1;
}
.review-modal__close:hover{background:rgba(255,255,255,.18)}

/* ── Admin link (hidden dot in footer) ── */
.footer__admin-link{
  opacity:.14;color:var(--muted-2);font-size:1.1rem;
  transition:opacity .3s ease;text-decoration:none;
}
.footer__admin-link:hover{opacity:.5}

/* ── Responsive Reviews ── */
@media(max-width:1100px){
  .reviews-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:860px){
  .reviews-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .reviews{padding:60px 0 50px}
  .reviews-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .review-card__img-wrap{height:120px}
  .review-modal__body{padding:20px 20px 26px}
  .review-modal__gallery-main{height:240px}
}
@media(max-width:380px){
  .reviews-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════
   Reviews Full Page (reviews.html)
══════════════════════════════════════════════════ */
.rp-hero{
  padding:80px 0 50px;
  text-align:center;
  background:#0a0a0a;
  position:relative;
  overflow:hidden;
}
.rp-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 60% at 50% 0%,rgba(216,178,106,.08),transparent);
  pointer-events:none;
}
.rp-hero__label{
  display:inline-block;
  font-size:.78rem;font-weight:700;
  letter-spacing:.18em;color:var(--gold);
  text-transform:uppercase;margin-bottom:14px;
}
.rp-hero h1{
  font-family:"Noto Serif Thai",serif;
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:800;color:var(--text);
  margin-bottom:14px;line-height:1.2;
}
.rp-hero__desc{color:var(--muted);font-size:1rem;max-width:480px;margin:0 auto 28px;line-height:1.7}
.rp-stats-row{
  display:flex;align-items:center;justify-content:center;gap:32px;
  flex-wrap:wrap;margin-top:8px;
}
.rp-stat{text-align:center}
.rp-stat strong{display:block;font-size:1.6rem;font-weight:800;color:var(--gold-2);font-family:"Noto Serif Thai",serif}
.rp-stat span{font-size:.78rem;color:var(--muted-2);letter-spacing:.06em}

/* Rating breakdown */
.rp-breakdown{
  max-width:340px;margin:0 auto;
  background:rgba(216,178,106,.05);
  border:1px solid rgba(216,178,106,.14);
  border-radius:16px;padding:18px 20px;
  margin-top:28px;
}
.rp-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.rp-bar-row:last-child{margin-bottom:0}
.rp-bar-label{width:22px;text-align:right;font-size:.78rem;color:var(--muted-2)}
.rp-bar-track{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.rp-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-3),var(--gold));transition:width .6s ease}
.rp-bar-count{width:24px;font-size:.72rem;color:var(--muted-2)}

/* Reviews page grid */
.rp-content{padding:50px 0 80px;background:#0d0d0d}
.rp-filter{
  display:flex;align-items:center;gap:10px;
  margin-bottom:32px;flex-wrap:wrap;
}
.rp-filter-btn{
  padding:7px 18px;border-radius:999px;font-size:.82rem;font-weight:600;
  border:1px solid rgba(255,255,255,.1);background:transparent;
  color:var(--muted);cursor:pointer;font-family:inherit;transition:.2s ease;
}
.rp-filter-btn:hover,.rp-filter-btn.active{
  border-color:rgba(216,178,106,.5);color:var(--gold);
  background:rgba(216,178,106,.08);
}
.rp-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.rp-grid .review-card__img-wrap{height:160px}
.rp-grid .review-card__body{padding:16px 18px 18px}
.rp-grid .review-card__text{-webkit-line-clamp:4}
.rp-grid .review-card__stars{font-size:.9rem}
.rp-grid .review-card__name{font-size:.82rem}
.rp-empty{text-align:center;padding:80px 24px;color:var(--muted-2);font-size:1rem}
.rp-back{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 20px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:var(--muted);font-size:.88rem;font-weight:600;
  text-decoration:none;transition:.22s ease;margin-bottom:32px;
}
.rp-back:hover{background:rgba(216,178,106,.1);border-color:rgba(216,178,106,.3);color:var(--gold)}

@media(max-width:1000px){.rp-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.rp-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:440px){.rp-grid{grid-template-columns:1fr}}