/**
 * Student Car Hire Perth - Complete Page Stylesheet
 * Pixel-perfect match to design reference.
 * 100% responsive. Uses theme design tokens.
 *
 * @package Horizontal_Traders
 */

/* ==========================================================================
   1. HERO - Student Car Hire
   ========================================================================== */
.ht-stu-hero {
  position: relative;
  min-height: clamp(520px, 72vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ht-navy-950);
}
.ht-stu-hero__bg { position: absolute; inset: 0; z-index: 0; }
.ht-stu-hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ht-stu-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(0,21,46,.92) 0%, rgba(0,21,46,.78) 35%, rgba(0,21,46,.45) 60%, rgba(0,21,46,.15) 100%);
}
.ht-stu-hero > .ht-container { position: relative; z-index: 2; width: 100%; }
.ht-stu-hero__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px,4vw,64px); align-items: center;
  padding: clamp(40px,6vw,80px) 0;
}
.ht-stu-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ht-font-sans); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ht-teal-400); margin-bottom: 16px;
}
.ht-stu-hero__title {
  font-family: var(--ht-font-heading); font-size: clamp(36px,5vw,58px);
  font-weight: 800; line-height: 1.1; color: var(--ht-white); margin-bottom: 12px; letter-spacing: -.02em;
}
.ht-stu-hero__highlight { display: block; position: relative; }
.ht-stu-hero__highlight::after {
  content: ''; display: block; width: 60px; height: 3px;
  background: var(--ht-teal-400); border-radius: var(--ht-radius-pill); margin-top: 12px;
}
.ht-stu-hero__tagline { font-size: clamp(16px,1.3vw,20px); font-weight: 600; color: var(--ht-white); margin-bottom: 12px; opacity: .95; }
.ht-stu-hero__desc { font-size: clamp(14px,1.1vw,16px); color: #b5c6d4; line-height: 1.7; margin-bottom: 28px; max-width: 520px; }
.ht-stu-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
.ht-stu-hero__trust-row { display: flex; flex-wrap: wrap; gap: clamp(16px,2vw,28px); }
.ht-stu-hero__trust-item { display: flex; align-items: center; gap: 8px; }
.ht-stu-hero__trust-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: rgba(6,193,213,.12);
  border-radius: 50%; color: var(--ht-teal-400); flex-shrink: 0;
}
.ht-stu-hero__trust-text { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.85); white-space: nowrap; }
.ht-stu-hero__visual { position: relative; display: flex; align-items: flex-end; justify-content: flex-end; min-height: 300px; }
.ht-stu-hero__script {
  position: absolute; top: clamp(20px,8%,60px); right: clamp(10px,5%,40px);
  font-family: 'Caveat', cursive; color: var(--ht-white); text-align: right; z-index: 3; line-height: 1.2;
}
.ht-stu-hero__script span { display: block; font-size: clamp(24px,3vw,38px); font-weight: 600; }
.ht-stu-hero__script em { display: block; font-style: italic; font-size: clamp(20px,2.5vw,32px); color: var(--ht-teal-300); }
.ht-stu-hero__location-card {
  position: absolute; bottom: clamp(20px,8%,40px); right: clamp(10px,3%,30px);
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,21,46,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--ht-radius-sm); padding: 12px 16px; z-index: 3;
}
.ht-stu-hero__location-icon { display: flex; color: var(--ht-teal-400); }
.ht-stu-hero__location-text { display: flex; flex-direction: column; }
.ht-stu-hero__location-text strong { font-size: 12px; font-weight: 700; color: var(--ht-white); letter-spacing: .06em; }
.ht-stu-hero__location-text span { font-size: 10px; color: rgba(255,255,255,.6); letter-spacing: .04em; }


/* ==========================================================================
   2. WHY STUDENTS CHOOSE US - Split Photo + 4 Cards Overlay
   ========================================================================== */
.ht-stu-why {
  position: relative;
  padding: clamp(60px,8vw,100px) 0 clamp(80px,10vw,140px);
  overflow: hidden;
}
.ht-stu-why__bg { position: absolute; inset: 0; z-index: 0; }
.ht-stu-why__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ht-stu-why__bg-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 45%, rgba(255,255,255,.40) 100%);
}
.ht-stu-why > .ht-container { position: relative; z-index: 2; }
.ht-stu-why__grid { margin-bottom: clamp(30px,4vw,50px); }
.ht-stu-why__content { max-width: 560px; }
.ht-stu-why__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ht-font-sans); font-size: var(--ht-small); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ht-teal-700); margin-bottom: 16px;
}
.ht-stu-why__title {
  font-family: var(--ht-font-heading); font-size: clamp(32px,4vw,48px);
  font-weight: 800; color: var(--ht-navy-950); margin-bottom: 16px; line-height: 1.1; letter-spacing: -.02em;
}
.ht-stu-why__desc {
  font-size: var(--ht-body); color: var(--ht-text-muted);
  line-height: var(--ht-line-height-loose); margin-bottom: 20px;
}
.ht-stu-why__script {
  font-family: 'Caveat', cursive; line-height: 1.2;
}
.ht-stu-why__script span { display: block; font-size: clamp(24px,3vw,36px); font-weight: 600; color: var(--ht-navy-950); }
.ht-stu-why__script em { display: block; font-style: italic; font-size: clamp(22px,2.5vw,32px); color: var(--ht-teal-700); }

/* 4 Feature Cards */
.ht-stu-why__cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px,2vw,24px);
}
.ht-stu-why__card {
  text-align: center; padding: clamp(24px,3vw,36px) clamp(14px,1.5vw,20px);
  border-radius: var(--ht-radius-md); background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(210,227,235,.6);
  box-shadow: var(--ht-shadow-sm); transition: all var(--ht-transition-base);
}
.ht-stu-why__card:hover {
  transform: translateY(-6px); box-shadow: var(--ht-shadow-md);
  border-color: var(--ht-teal-400);
}
.ht-stu-why__card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ht-teal-100); color: var(--ht-teal-700); margin-bottom: 18px;
}
.ht-stu-why__card-title {
  font-family: var(--ht-font-heading); font-size: clamp(15px,1.2vw,17px);
  font-weight: 700; color: var(--ht-navy-950); margin-bottom: 8px;
}
.ht-stu-why__card-desc { font-size: var(--ht-small); color: var(--ht-text-muted); line-height: 1.6; margin-bottom: 16px; }
.ht-stu-why__card-line {
  width: 28px; height: 3px; background: var(--ht-teal-400);
  border-radius: var(--ht-radius-pill); margin: 0 auto;
}


/* ==========================================================================
   3. STUDENT DISCOUNT - ID Card Visual + Benefits
   ========================================================================== */
.ht-stu-discount {
  position: relative; padding: clamp(60px,8vw,100px) 0;
  overflow: hidden; background: var(--ht-navy-950);
}
.ht-stu-discount__bg { position: absolute; inset: 0; z-index: 0; }
.ht-stu-discount__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ht-stu-discount__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(0,21,46,.92) 0%, rgba(0,21,46,.82) 35%, rgba(0,21,46,.50) 65%, rgba(0,21,46,.25) 100%);
}
.ht-stu-discount > .ht-container { position: relative; z-index: 2; }
.ht-stu-discount__grid {
  display: grid; grid-template-columns: 1fr 1.1fr 1fr;
  gap: clamp(24px,4vw,48px); align-items: center;
}
.ht-stu-discount__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ht-teal-400); margin-bottom: 12px;
}
.ht-stu-discount__title {
  font-family: var(--ht-font-heading); font-size: clamp(32px,4vw,48px);
  font-weight: 800; color: var(--ht-white); margin-bottom: 16px; line-height: 1.1;
}
.ht-stu-discount__title-accent { display: block; color: var(--ht-teal-400); }
.ht-stu-discount__desc {
  font-size: clamp(14px,1.1vw,16px); color: #b5c6d4;
  line-height: 1.7; margin-bottom: 28px; max-width: 360px;
}

/* Center: Real Student Photo Visual Box */
.ht-stu-discount__photo-box { display: flex; justify-content: center; align-items: center; }
.ht-stu-photo-frame {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: var(--ht-radius-md);
  overflow: hidden;
  box-shadow: var(--ht-shadow-lg);
  border: 3px solid rgba(255, 255, 255, 0.2);
  transform: rotate(-2deg);
  transition: transform var(--ht-transition-base);
}
.ht-stu-photo-frame:hover {
  transform: rotate(0deg) scale(1.02);
}
.ht-stu-photo-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.ht-stu-photo-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 21, 46, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: var(--ht-radius-sm);
  color: var(--ht-teal-400);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Benefits List */
.ht-stu-discount__benefits { display: flex; flex-direction: column; gap: 18px; }
.ht-stu-discount__benefit {
  display: flex; align-items: center; gap: 12px;
}
.ht-stu-discount__benefit-icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(6,193,213,.12); color: var(--ht-teal-400); flex-shrink: 0;
}
.ht-stu-discount__benefit strong {
  font-size: clamp(14px,1.1vw,16px); font-weight: 700; color: var(--ht-white);
}
.ht-stu-discount__script {
  font-family: 'Caveat', cursive; line-height: 1.2; margin-top: 16px;
}
.ht-stu-discount__script span { display: block; font-size: clamp(24px,3vw,36px); font-weight: 600; color: var(--ht-white); }
.ht-stu-discount__script em { display: block; font-style: italic; font-size: clamp(20px,2.5vw,30px); color: var(--ht-teal-300); }


/* ==========================================================================
   4. STUDENT VEHICLES - Carousel
   ========================================================================== */
.ht-stu-vehicles {
  padding: var(--section-lg) 0;
  background: var(--ht-surface);
}
.ht-stu-vehicles__header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px,4vw,48px);
}
.ht-stu-vehicles__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ht-font-sans); font-size: var(--ht-small); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ht-teal-700); margin-bottom: 10px;
}
.ht-stu-vehicles__title {
  font-family: var(--ht-font-heading); font-size: var(--ht-h2);
  font-weight: 800; color: var(--ht-navy-950); margin-bottom: 8px;
}
.ht-stu-vehicles__desc { font-size: var(--ht-body); color: var(--ht-text-muted); }
.ht-stu-vehicles__header-actions { display: flex; align-items: center; gap: 16px; }
.ht-stu-vehicles__slider-nav { display: flex; gap: 8px; }
.ht-stu-vehicles__nav {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ht-white); border: 1.5px solid var(--ht-border);
  color: var(--ht-navy-950); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--ht-shadow-xs); transition: all var(--ht-transition-fast);
}
.ht-stu-vehicles__nav:hover:not(.is-disabled) { background: var(--ht-teal-700); color: var(--ht-white); border-color: var(--ht-teal-700); }
.ht-stu-vehicles__nav.is-disabled { opacity: .35; cursor: not-allowed; }
.ht-stu-vehicles__view-all {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--ht-teal-700);
  padding: 10px 20px; border: 1.5px solid var(--ht-teal-700);
  border-radius: var(--ht-radius-sm); text-decoration: none;
  transition: all var(--ht-transition-fast); white-space: nowrap;
}
.ht-stu-vehicles__view-all:hover { background: var(--ht-teal-700); color: var(--ht-white); }
.ht-stu-vehicles__view-all svg { transition: transform var(--ht-transition-fast); }
.ht-stu-vehicles__view-all:hover svg { transform: translateX(3px); }

/* Slider Track */
.ht-stu-vehicles__track {
  display: flex; gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 8px 4px;
}
.ht-stu-vehicles__track::-webkit-scrollbar { display: none; }

/* Vehicle Card */
.ht-stu-vehicles__card {
  flex: 0 0 calc(33.333% - 14px); min-width: 260px;
  background: var(--ht-white); border-radius: var(--ht-radius-md);
  border: 1px solid var(--ht-border); overflow: hidden;
  scroll-snap-align: start; transition: all var(--ht-transition-base);
}
.ht-stu-vehicles__card:hover { box-shadow: var(--ht-shadow-md); transform: translateY(-4px); border-color: var(--ht-teal-400); }
.ht-stu-vehicles__card-media {
  position: relative; padding: 16px 16px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #f0f4f8 100%);
}
.ht-stu-vehicles__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--ht-radius-pill);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
}
.ht-stu-vehicles__badge--student { background: #eef2ff; color: #4338ca; }
.ht-stu-vehicles__badge--popular { background: #fef9c3; color: #854d0e; }
.ht-stu-vehicles__card-img-box { display: flex; justify-content: center; }
.ht-stu-vehicles__card-img {
  width: 100%; height: auto; object-fit: contain; aspect-ratio: 5/3;
  transition: transform var(--ht-transition-base);
}
.ht-stu-vehicles__card:hover .ht-stu-vehicles__card-img { transform: scale(1.04); }
.ht-stu-vehicles__card-body { padding: 16px; }
.ht-stu-vehicles__card-title {
  font-family: var(--ht-font-heading); font-size: clamp(15px,1.1vw,17px);
  font-weight: 700; color: var(--ht-navy-950); margin-bottom: 4px;
}
.ht-stu-vehicles__card-title a { color: inherit; text-decoration: none; }
.ht-stu-vehicles__card-title a:hover { color: var(--ht-teal-700); }
.ht-stu-vehicles__card-subtitle { font-size: 12px; color: var(--ht-text-muted); margin-bottom: 10px; }
.ht-stu-vehicles__card-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ht-stu-vehicles__spec {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--ht-text-muted); background: var(--ht-surface);
  padding: 3px 8px; border-radius: var(--ht-radius-pill);
}
.ht-stu-vehicles__spec svg { color: var(--ht-teal-700); flex-shrink: 0; }
.ht-stu-vehicles__card-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 14px; }
.ht-stu-vehicles__price-from { font-size: 12px; color: var(--ht-text-muted); }
.ht-stu-vehicles__price-val {
  font-family: var(--ht-font-heading); font-size: clamp(22px,2vw,28px);
  font-weight: 800; color: var(--ht-navy-950);
}
.ht-stu-vehicles__price-period { font-size: 14px; color: var(--ht-text-muted); font-weight: 500; }

/* Card Dual Actions */
.ht-stu-vehicles__card-actions { display: flex; gap: 8px; }
.ht-stu-vehicles__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  border-radius: var(--ht-radius-sm); text-decoration: none;
  transition: all var(--ht-transition-fast); text-align: center;
}
.ht-stu-vehicles__btn--outline {
  background: transparent; color: var(--ht-teal-700);
  border: 1.5px solid var(--ht-teal-700);
}
.ht-stu-vehicles__btn--outline:hover { background: var(--ht-teal-700); color: var(--ht-white); }
.ht-stu-vehicles__btn--solid {
  background: var(--ht-btn-primary-bg); color: var(--ht-white);
  border: 1.5px solid var(--ht-teal-700);
}
.ht-stu-vehicles__btn--solid:hover { background: var(--ht-navy-950); border-color: var(--ht-navy-950); color: var(--ht-white); }


/* ==========================================================================
   5. HOW IT WORKS - 4 Steps
   ========================================================================== */
.ht-stu-hiw { padding: var(--section-lg) 0; background: var(--ht-white); }
.ht-stu-hiw__header { text-align: center; max-width: 640px; margin: 0 auto clamp(40px,5vw,60px); }
.ht-stu-hiw__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ht-font-sans); font-size: var(--ht-small); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ht-teal-700); margin-bottom: 16px;
}
.ht-stu-hiw__title { font-family: var(--ht-font-heading); font-size: var(--ht-h2); font-weight: 800; color: var(--ht-navy-950); margin-bottom: 12px; }
.ht-stu-hiw__desc { font-size: var(--ht-body); color: var(--ht-text-muted); line-height: var(--ht-line-height-loose); }
.ht-stu-hiw__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px,2vw,28px); }
.ht-stu-hiw__step {
  text-align: center; padding: clamp(24px,3vw,36px) clamp(16px,2vw,24px);
  border-radius: var(--ht-radius-md); background: var(--ht-surface);
  border: 1px solid var(--ht-border); transition: all var(--ht-transition-base);
}
.ht-stu-hiw__step:hover { transform: translateY(-4px); box-shadow: var(--ht-shadow-md); border-color: var(--ht-teal-400); }
.ht-stu-hiw__step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--ht-radius-xs);
  background: linear-gradient(135deg, var(--ht-teal-700), var(--ht-teal-500));
  color: var(--ht-white); font-family: var(--ht-font-heading);
  font-size: 13px; font-weight: 800; margin-bottom: 12px;
}
.ht-stu-hiw__step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ht-white); border: 1.5px solid var(--ht-border);
  color: var(--ht-teal-700); margin-bottom: 16px;
}
.ht-stu-hiw__step-title { font-family: var(--ht-font-heading); font-size: clamp(15px,1.2vw,17px); font-weight: 700; color: var(--ht-navy-950); margin-bottom: 8px; }
.ht-stu-hiw__step-desc { font-size: var(--ht-small); color: var(--ht-text-muted); line-height: 1.6; }


/* ==========================================================================
   6. CTA BANNER
   ========================================================================== */
.ht-stu-cta {
  position: relative; padding: clamp(60px,8vw,100px) 0;
  overflow: hidden; background: var(--ht-navy-950);
}
.ht-stu-cta__bg { position: absolute; inset: 0; z-index: 0; }
.ht-stu-cta__bg-img { width: 100%; height: 100%; object-fit: cover; }
.ht-stu-cta__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,21,46,.85) 0%, rgba(0,21,46,.65) 100%);
}
.ht-stu-cta > .ht-container { position: relative; z-index: 2; }
.ht-stu-cta__inner { text-align: center; max-width: 700px; margin: 0 auto; }
.ht-stu-cta__eyebrow {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ht-teal-400); margin-bottom: 12px;
}
.ht-stu-cta__title {
  font-family: var(--ht-font-heading); font-size: clamp(32px,4vw,48px);
  font-weight: 800; color: var(--ht-white); margin-bottom: 16px; line-height: 1.1;
}
.ht-stu-cta__desc { font-size: clamp(15px,1.2vw,18px); color: #b5c6d4; line-height: 1.7; margin-bottom: 28px; }
.ht-stu-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }


/* ==========================================================================
   7. FAQ
   ========================================================================== */
.ht-stu-faq { padding: var(--section-lg) 0; background: var(--ht-white); }
.ht-stu-faq__header { margin-bottom: clamp(32px,4vw,48px); }
.ht-stu-faq__eyebrow {
  display: block; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ht-text-muted); margin-bottom: 8px;
}
.ht-stu-faq__header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 8px;
}
.ht-stu-faq__title { font-family: var(--ht-font-heading); font-size: clamp(26px,3vw,38px); font-weight: 800; color: var(--ht-navy-950); }
.ht-stu-faq__view-all {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--ht-teal-700);
  padding: 10px 20px; border: 1.5px solid var(--ht-teal-700);
  border-radius: var(--ht-radius-sm); text-decoration: none; transition: all var(--ht-transition-fast); white-space: nowrap;
}
.ht-stu-faq__view-all:hover { background: var(--ht-teal-700); color: var(--ht-white); }
.ht-stu-faq__view-all svg { transition: transform var(--ht-transition-fast); }
.ht-stu-faq__view-all:hover svg { transform: translateX(3px); }
.ht-stu-faq__subtitle { font-size: var(--ht-body); color: var(--ht-text-muted); }
.ht-stu-faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ht-stu-faq__item {
  background: var(--ht-surface); border: 1px solid var(--ht-border);
  border-radius: var(--ht-radius-md); overflow: hidden; transition: all var(--ht-transition-base);
}
.ht-stu-faq__item:hover { border-color: var(--ht-teal-400); }
.ht-stu-faq__item.is-active { border-color: var(--ht-teal-700); box-shadow: 0 0 0 1px var(--ht-teal-700); }
.ht-stu-faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 18px 20px; font-family: var(--ht-font-sans);
  font-size: clamp(14px,1vw,16px); font-weight: 600; color: var(--ht-navy-950);
  text-align: left; cursor: pointer; background: none; border: none;
  transition: color var(--ht-transition-fast);
}
.ht-stu-faq__question:hover { color: var(--ht-teal-700); }
.ht-stu-faq__icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ht-white); border: 1.5px solid var(--ht-border);
  color: var(--ht-teal-700); transition: all var(--ht-transition-fast);
}
.ht-stu-faq__item.is-active .ht-stu-faq__icon { background: var(--ht-teal-700); border-color: var(--ht-teal-700); color: var(--ht-white); }
.ht-stu-faq__icon-v { transition: transform var(--ht-transition-fast); }
.ht-stu-faq__item.is-active .ht-stu-faq__icon-v { transform: rotate(90deg); opacity: 0; }
.ht-stu-faq__answer { padding: 0 20px 18px; }
.ht-stu-faq__answer[hidden] { display: none; }
.ht-stu-faq__answer p { font-size: var(--ht-small); color: var(--ht-text-muted); line-height: 1.7; }


/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .ht-stu-hero__grid { grid-template-columns: 1fr; }
  .ht-stu-hero__visual { display: none; }
  .ht-stu-hero { min-height: auto; }
  .ht-stu-why__cards { grid-template-columns: repeat(2, 1fr); }
  .ht-stu-discount__grid { grid-template-columns: 1fr; gap: 32px; }
  .ht-stu-discount__id-card { order: -1; }
  .ht-stu-discount__benefits { flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .ht-stu-vehicles__card { flex: 0 0 calc(50% - 10px); }
  .ht-stu-hiw__steps { grid-template-columns: repeat(2, 1fr); }
  .ht-stu-faq__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ht-stu-hero__title { font-size: clamp(30px,8vw,42px); }
  .ht-stu-hero__trust-row { flex-direction: column; gap: 10px; }
  .ht-stu-hero__actions { flex-direction: column; }
  .ht-stu-hero__actions .ht-btn { width: 100%; text-align: center; }
  .ht-stu-why__cards { grid-template-columns: 1fr; }
  .ht-stu-discount__title { font-size: clamp(26px,7vw,36px); }
  .ht-stu-id-card { width: 240px; }
  .ht-stu-discount__benefits { flex-direction: column; }
  .ht-stu-vehicles__card { flex: 0 0 calc(85vw - 40px); min-width: 260px; }
  .ht-stu-vehicles__header { flex-direction: column; align-items: flex-start; }
  .ht-stu-vehicles__nav { display: none; }
  .ht-stu-hiw__steps { grid-template-columns: 1fr; }
  .ht-stu-cta__actions { flex-direction: column; }
  .ht-stu-cta__actions .ht-btn { width: 100%; text-align: center; }
  .ht-stu-faq__header-row { flex-direction: column; align-items: flex-start; }
  .ht-stu-faq__question { padding: 14px 16px; font-size: 14px; }
  .ht-stu-faq__answer { padding: 0 16px 14px; }
}

@media (max-width: 400px) {
  .ht-stu-hero__title { font-size: 28px; }
  .ht-stu-vehicles__card { flex: 0 0 calc(100vw - 60px); }
  .ht-stu-id-card { width: 220px; padding: 14px; }
}