/* Combined stylesheet for Atlas Échecs multi‑page site */
 
/* Root variables */
:root {
  --color-background: #0b1624;
  --color-gold: #E3B341;
  --color-primary: #1d2e55;
  --color-primary-dark: #122347;
  --color-text: #FFFFFF;
  --color-text-subtle: rgba(255,255,255,0.92);
  --header-height: 72px;
  --max-width: 1200px;
}
 
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* Utiliser uniquement des polices système pour garantir l'affichage sans dépendre d'Internet. */
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-background);
  color: var(--color-text);
}
 
/* Headings use Playfair Display for elegance */
h1, h2, h3 {
  /* Utiliser une police de caractères classique avec empattements pour les titres. */
  font-family: Georgia, 'Times New Roman', Times, serif;
  margin: 0;
  color: var(--color-text);
}
h1 { font-weight: 700; line-height: 1.1; }
h2 { font-weight: 400; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
 
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand .logo {
  display: block;
  height: 32px;
  width: auto;
}
@media (max-width: 768px) {
  .brand .logo { height: 26px; }
}
.wordmark {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  color: #0d1a2a;
  letter-spacing: .2px;
  font-size: 1.5rem;
}
nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
nav a {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  color: #0d1a2a;
  transition: color 0.2s ease;
}
nav a:hover,
nav a:focus { color: var(--color-primary); }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; }
.menu-toggle svg { width: 24px; height: 24px; fill: #0d1a2a; }
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 999;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  width: 80%;
  max-width: 320px;
  overflow: hidden;
}
.mobile-nav li { border-bottom: 1px solid #e5e7eb; }
.mobile-nav li:last-child { border-bottom: none; }
.mobile-nav a {
  display: block;
  padding: 16px;
  font-family: "Playfair Display", Georgia, serif;
  color: #0d1a2a;
}
.mobile-nav a:hover,
.mobile-nav a:focus { background: #f3f4f6; }
 
/* Hero section */
.hero {
  position: relative;
  width: 100%;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Overlay + image : plus clair, détails visibles */
  background-image:
    linear-gradient(to bottom, rgba(6,14,24,.48), rgba(6,14,24,.72)),
    radial-gradient(120% 120% at 50% 30%, rgba(13,26,42,.12) 0%, rgba(13,26,42,.55) 60%, rgba(13,26,42,.92) 100%),
    url("../hero.png");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  filter: brightness(1.08) contrast(1.06) saturate(1.08);
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 70% at 50% 80%, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.28) 100%);
  z-index: -1;
}
.hero h1 {
  font-size: clamp(48px, 7vw, 84px);
  margin-bottom: 0.5rem;
}
.hero h2 {
  font-size: clamp(24px, 3.2vw, 36px);
  color: var(--color-gold);
  margin-bottom: 1.5rem;
}
.hero p {
  font-size: clamp(14px, 2.2vw, 20px);
  color: var(--color-text-subtle);
  line-height: 1.6;
  max-width: 820px;
  margin-bottom: 2rem;
}
.hero .buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.btn {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 24px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn-primary { background: var(--color-primary); color: #ffffff; }
.btn-primary:hover { background: #162344; }
.btn-secondary { background: var(--color-primary-dark); color: #ffffff; }
.btn-secondary:hover { background: #0e1a37; }
.btn-light { background: #ffffff; color: #111827; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.btn-light:hover { background: #f9fafb; }
.btn:focus-visible,
nav a:focus-visible,
.menu-toggle:focus-visible,
.mobile-nav a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
 
@media (max-width:1024px){ nav { gap: 24px; } }
@media (max-width:768px){ nav { display:none; } .menu-toggle { display:block; } }
@media (max-width:480px){ .hero .buttons { flex-direction: column; gap: 12px; } .btn { width: 100%; } }
 
/* Schools section styles */
#schools {
  color: var(--bg-light);
  background-color: var(--bg-dark);
}
#schools .hero-video {
  position: relative;
  width: 100%;
  min-height: 60vh;
  overflow: hidden;
}
#schools .hero-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#schools .hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.75));
  z-index: 1;
}
#schools .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 3rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
#schools h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--bg-light);
}
#schools p.lead {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 400;
  color: var(--color-gold);
  margin-bottom: 2rem;
}
#schools .intro {
  max-width: 800px;
  margin: 0 auto 3rem auto;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(245,241,232,0.95);
  padding: 0 1rem;
}
#schools .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
#schools .card {
  background-color: #11171d;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
#schools .card h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--color-gold);
}
#schools .card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(245,241,232,0.88);
}
#schools .cta-section {
  max-width: 800px;
  margin: 4rem auto 0 auto;
  text-align: center;
  padding: 0 1rem;
}
#schools .cta-section p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(245,241,232,0.95);
  margin-bottom: 2rem;
}
#schools .cta-section .btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 24px;
  font-size: 1rem;
  font-weight: 500;
  background: var(--color-gold);
  color: var(--bg-dark);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
#schools .cta-section .btn:hover {
  background: #b7962b;
}
#schools .contact-form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
#schools .contact-form label {
  font-weight: 500;
  color: var(--color-gold);
}
#schools .contact-form input,
#schools .contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #2c3a4d;
  border-radius: 4px;
  background: #0F1928;
  color: var(--bg-light);
font-family: 'Open Sans', sans-serif;
}
#schools .contact-form input::placeholder,
#schools .contact-form textarea::placeholder {
  color: rgba(245,241,232,0.6);
}
#schools .contact-form button {
  align-self: start;
  padding: 0.75rem 1.5rem;
  border-radius: 24px;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  background: var(--color-gold);
  color: var(--bg-dark);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
#schools .contact-form button:hover {
  background: #b7962b;
}
#schools .contact-form button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
 
/* Styles for the private lessons page */
#private {
  color: var(--bg-light);
  background-color: var(--bg-dark);
}
#private .video-hero {
  position: relative;
  width: 100%;
  min-height: 60vh;
  overflow: hidden;
}
#private .video-hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#private .video-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.75));
  z-index: 1;
}
#private .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 3rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
#private h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--bg-light);
}
#private p.lead {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 400;
  color: var(--color-gold);
  margin-bottom: 2rem;
}
#private .intro {
  max-width: 800px;
  margin: 0 auto 3rem auto;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(245,241,232,0.95);
}
#private .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
#private .card {
  background-color: #11171d;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
#private .card h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--color-gold);
}
#private .card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(245,241,232,0.88);
}
#private .cta-section {
  max-width: 800px;
  margin: 4rem auto 0 auto;
  text-align: center;
}
#private .cta-section p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(245,241,232,0.95);
  margin-bottom: 2rem;
}
#private .cta-section .btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 24px;
  font-size: 1rem;
  font-weight: 500;
  background: var(--color-gold);
  color: var(--bg-dark);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
#private .cta-section .btn:hover {
  background: #b7962b;
}
#private .contact-form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
#private .contact-form label {
  font-weight: 500;
  color: var(--color-gold);
}
#private .contact-form input,
#private .contact-form textarea,
#private .contact-form select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #2c3a4d;
  border-radius: 4px;
  background: #0F1928;
  color: var(--bg-light);
font-family: 'Open Sans', sans-serif;
}
#private .contact-form input::placeholder,
#private .contact-form textarea::placeholder {
  color: rgba(245,241,232,0.6);
}
#private .contact-form button {
  align-self: start;
  padding: 0.75rem 1.5rem;
  border-radius: 24px;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  background: var(--color-gold);
  color: var(--bg-dark);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
#private .contact-form button:hover {
  background: #b7962b;
}
#private .contact-form button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
/* === FAQ START ========================================================= */
/* Section wrapper */
.faq-section .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
 
/* Sommaire ancré */
.faq-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 12px 0 18px;
}
.faq-index a {
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(227,179,65,.35);
  background: rgba(227,179,65,.06);
  color: var(--color-gold);
  text-decoration: none;
}
.faq-index a:hover,
.faq-index a:focus-visible {
  background: rgba(227,179,65,.12);
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
 
/* Accordéon */
.faq-accordion {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
 
/* Carte FAQ */
.faq-item {
  background: rgba(245, 241, 232, 0.04);
  border: 1px solid var(--color-gold);
  border-radius: 12px;
  overflow: hidden;
}
 
/* Summary (tête cliquable) */
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 1rem 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  transition: background-color .2s ease, color .2s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
 
.faq-item > summary:hover {
  color: var(--color-gold);
  background-color: rgba(227,179,65,0.06);
}
.faq-item > summary:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 10px;
}
 
/* Chevron via pseudo-élément (pas d’asset externe) */
.faq-item > summary::after {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-left: 10px;
  transform: rotate(0deg);
  transition: transform .25s ease;
  /* chevron bas en SVG (doré), encodé en data URI */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23E3B341'><path d='M6.7 8.7a1 1 0 0 1 1.4 0L12 12.6l3.9-3.9a1 1 0 1 1 1.4 1.4l-4.6 4.6a1.5 1.5 0 0 1-2.1 0L6.7 10.1a1 1 0 0 1 0-1.4z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
.faq-item[open] > summary::after {
  transform: rotate(180deg);
}
 
/* Panneau */
.faq-item > p {
  /* si tu as <p> directement dans <details> (comme ici) */
  margin: 0;
  padding: 0 1rem;
  max-height: 0;
  opacity: 0;
  transition: max-height .28s ease, opacity .28s ease, padding .28s ease;
  color: var(--color-text-subtle);
  line-height: 1.65;
}
.faq-item[open] > p {
  max-height: 500px;
  opacity: 1;
  padding: 0 1rem 1rem;
}
 
/* Mobile tweaks */
@media (max-width: 520px) {
  .faq-item > summary { font-size: 1rem; padding: .9rem; }
  .faq-item > p { padding: 0 .9rem; }
}
/* === FAQ END =========================================================== */
 
/* === FAQ HERO BACKGROUND START ======================================== */
/* Spécifie une image de fond différente pour le bandeau de la FAQ.  */
.faq-hero::before {
  /* Image stockée dans le dossier assets à la racine du site. */
  background-image: url('../faq-background.png');
}
/* === FAQ HERO BACKGROUND END ========================================== */
 
/* === FAQ LAYOUT TUNING =============================================== */
/* Ajustements de mise en page et typographie pour la page FAQ. */
.faq-page .faq-section {
  padding-top: 2rem;
}
 
.faq-page .faq-section h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 4vw, 42px);
  text-align: center;
  margin: 0 auto 1.5rem;
  color: var(--color-text);
}
 
.faq-page footer {
  max-width: var(--max-width);
  margin: 2rem auto 0 auto;
  padding: 0 24px 2rem;
  color: var(--color-text-subtle);
  font-size: 0.875rem;
  text-align: center;
}
 
.faq-page footer a {
  color: var(--color-gold);
}
/* === END FAQ LAYOUT TUNING =========================================== */
 
/* === MISSION AND CONTACT CARDS ====================================== */
/* Cartes stylisées pour la mission et le formulaire de contact. Ces styles
   apportent un aspect épuré et premium en utilisant un fond légèrement
   contrasté, une bordure dorée et des coins arrondis. */
 
.mission-card {
  background: rgba(245, 241, 232, 0.05);
  border: 1px solid var(--color-gold);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
 
.mission-card h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(32px, 4.5vw, 40px);
  margin-bottom: 1rem;
  color: var(--color-gold);
}
 
.mission-card p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text-subtle);
}
 
.contact-card {
  background: rgba(245, 241, 232, 0.05);
  border: 1px solid var(--color-gold);
  border-radius: 12px;
  padding: 2rem;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
 
.contact-card h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 4vw, 36px);
  margin-bottom: 1rem;
  text-align: center;
  color: var(--color-gold);
}
 
.contact-card form label {
  font-weight: 600;
  margin-top: 0.75rem;
  display: block;
  color: var(--color-gold);
}
 
.contact-card form input,
.contact-card form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #2c3a4d;
  border-radius: 6px;
  background: #0F1928;
  color: var(--color-text);
  margin-bottom: 1rem;
  font-family: Arial, Helvetica, sans-serif;
}
 
.contact-card form input::placeholder,
.contact-card form textarea::placeholder {
  color: rgba(245,241,232,0.6);
}
 
.contact-card form button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 24px;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  background: var(--color-gold);
  color: var(--color-background);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: background 0.2s ease;
}
 
.contact-card form button:hover {
  background: #b7962b;
}
 
.contact-card form button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
 
/* === SERVICES BLOCK ================================================= */
/* A centered container for the 'Nos services' title and two feature cards */
.services-block {
  max-width: var(--max-width);
  margin: 2.5rem auto;
  padding: 2rem 1rem;
  text-align: center;
}
.services-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 4.5vw, 36px);
  color: var(--color-gold);
  margin-bottom: 1.25rem;
}
.services-grid {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.service-card {
  background: rgba(245,241,232,0.03);
  border: 1px solid rgba(227,179,65,0.08);
  border-radius: 12px;
  padding: 1.75rem;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 6px 18px rgba(2,6,12,0.45);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.service-card h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem;
  color: var(--color-gold);
  margin: 0;
}
.service-card p {
  color: var(--color-text-subtle);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}
.service-card .btn {
  margin-top: auto; /* push CTA to the bottom */
  align-self: start;
}
 
@media (max-width: 780px) {
  .services-grid { flex-direction: column; gap: 1rem; }
  .service-card { max-width: 100%; }
}
 
/* === END SERVICES BLOCK ============================================= */
 
/* === END MISSION AND CONTACT CARDS ================================== */
 
/* === TESTIMONIALS (WORK IN PROGRESS) ================================= */
.testimonials-block {
  max-width: var(--max-width);
  margin: 2.5rem auto;
  padding: 2rem 1rem 1.25rem;
  text-align: center;
}
.testimonials-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(26px, 4vw, 34px);
  color: var(--color-gold);
  margin-bottom: 1rem;
}
.testimonials-title .wip {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.65rem;
  color: var(--color-text-subtle);
  margin-left: 0.5rem;
  font-weight: 400;
}
.testimonials-grid {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}
.testimonial-card {
  background: rgba(245,241,232,0.03);
  border: 1px solid rgba(227,179,65,0.06);
  border-radius: 12px;
  padding: 1.5rem;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 6px 18px rgba(2,6,12,0.42);
  text-align: left;
}
.testimonial-card blockquote {
  margin: 0 0 0.75rem 0;
  font-style: italic;
  color: var(--color-text-subtle);
  font-size: 1.05rem;
  line-height: 1.6;
}
.testimonial-card .author {
  margin: 0;
  color: var(--color-gold);
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
}
.testimonials-note {
  color: var(--color-text-subtle);
  margin-top: 1rem;
  font-size: 0.95rem;
}
 
@media (max-width: 780px) {
  .testimonials-grid { flex-direction: column; gap: 1rem; }
  .testimonial-card { max-width: 100%; }
}
 
/* === END TESTIMONIALS ============================================== */