/* =========================================================
   Mamed Fudarizi — main stylesheet
   1. Design tokens   2. Base   3. Buttons & helpers
   4. Header / nav    5. Hero   6. Stats   7. Featured
   8. Footer          9. WhatsApp button   10. Animations
   11. Responsive
   12. Shared parts (Privacy banner, section titles)
   13. About section   14. Clients section (logos, gallery, lightbox)
   15. Modules section   16. Services section (incl. FAQ)
   17. Contact section (form)   18. Privacy page   19. One-page layout
   ========================================================= */

/* 1. Design tokens — change brand colours/fonts here */
:root {
  --navy: #0d1b33;
  --navy-2: #13284a;
  --navy-3: #1d3a66;
  --navy-deep: #08132a;
  --gold: #b8873b;
  --gold-light: #d9ac5f;
  --cream: #f6f2ec;
  --ink: #1b2333;
  --muted: #5d6676;
  --line: #e3dacb;
  --white: #ffffff;

  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Great Vibes", cursive;

  --container: 1200px;
  --gutter: 24px;
  --header-h: 96px;
}

/* 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, p, figure { margin: 0; }
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* 3. Buttons & helpers */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .04em;
  border-radius: 2px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: 12px 22px; }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy);
}
.btn-gold:hover { box-shadow: 0 10px 24px rgba(184, 135, 59, .35); }
.btn-ghost { border: 1px solid rgba(255, 255, 255, .45); color: var(--white); }
.btn-ghost:hover { background: var(--white); color: var(--navy); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.eyebrow::before { content: ""; width: 40px; height: 1px; background: currentColor; }

/* 4. Header / nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--navy);
  transition: height .25s ease, box-shadow .25s ease;
}
.site-header.scrolled { --header-h: 76px; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand img { width: 224px; height: auto; }

.main-nav ul { display: flex; gap: 36px; }
.main-nav ul a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #cfd6e3;
  padding: 6px 0;
  transition: color .2s ease;
}
.main-nav ul a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gold-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.main-nav ul a:hover, .main-nav ul a.active { color: var(--white); }
.main-nav ul a:hover::after, .main-nav ul a.active::after { transform: scaleX(1); }
.nav-cta-mobile { display: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid rgba(217, 172, 95, .5);
  border-radius: 2px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav-toggle span { width: 20px; height: 2px; background: var(--gold-light); transition: transform .25s ease, opacity .25s ease; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 5. Hero */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 820px;
  color: var(--white);
  background: radial-gradient(ellipse at 75% 40%, var(--navy-3) 0%, var(--navy) 60%);
}
.hero-lines {
  position: absolute; inset: 0;
  opacity: .12;
  background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(255, 255, 255, .4) 40px 41px);
}
.hero-stripe {
  position: absolute;
  right: 37%;
  top: -100px;
  width: 26px;
  height: 1100px;
  background: linear-gradient(var(--gold-light), var(--gold));
  transform: rotate(22deg);
  opacity: .9;
}
.hero-stripe.thin { right: 41%; width: 8px; opacity: .5; }

.hero-inner {
  position: relative;
  min-height: 820px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
}
.hero-text { position: relative; z-index: 2; padding: 80px 0 140px; }
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  margin: 22px 0 10px;
}
.hero h1 span { display: block; color: var(--gold-light); }
.hero-role { font-size: 19px; color: #cdd5e2; margin: 26px 0 8px; max-width: 600px; }
.hero-role strong { color: var(--white); font-weight: 600; }
.hero-tagline { font-family: var(--font-script); font-size: 32px; color: var(--gold-light); margin: 16px 0 26px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }

.hero-photo {
  position: relative;
  align-self: end;
  height: 760px;
}
.hero-photo img {
  position: absolute;
  right: -40px;
  bottom: 0;
  width: 540px;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18%);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(217, 172, 95, .4);
  border-radius: 4px;
}
.hero-badge strong { font-family: var(--font-serif); font-size: 30px; color: var(--gold-light); }
.hero-badge span { font-size: 12px; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; color: #d6dbe5; }

/* 6. Stats */
.stats-wrap { position: relative; z-index: 3; margin-top: -70px; }
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--white);
  box-shadow: 0 20px 50px rgba(13, 27, 51, .12);
}
.stats li { padding: 38px 34px; border-right: 1px solid var(--line); }
.stats li:last-child { border-right: 0; }
.stats strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 46px;
  line-height: 1;
  color: var(--navy);
}
.stats strong .plus { color: var(--gold); }
.stats li { min-width: 0; }
.stats li > span {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 7. Featured */
.featured { padding: 60px 0 90px; text-align: center; }
.featured-title { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.featured-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 70px;
  margin-top: 20px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: #8a8f99;
}
.featured-list li { position: relative; }
.featured-list li + li::before {
  content: "\00B7";
  position: absolute;
  left: -40px;
}
/* Media logos: grey until hovered, so they sit quietly with the brand colours */
.featured-logos { align-items: center; gap: 24px 90px; margin-top: 28px; }
.featured-logos li + li::before { display: none; }
.featured-logos img {
  display: block;
  width: auto;
  height: 76px;
  filter: grayscale(1);
  opacity: .6;
  mix-blend-mode: multiply;
  transition: filter .3s ease, opacity .3s ease;
}
.featured-logos li:hover img { filter: none; opacity: 1; }

/* 8. Footer */
.site-footer { background: var(--navy-deep); color: #9aa5b8; font-size: 14px; padding: 70px 0 30px; }
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.3fr;
  gap: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer-brand img { width: 224px; height: auto; }
.footer-brand p { margin-top: 20px; max-width: 340px; }
.footer-heading {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
}
.footer-links li { padding: 5px 0; }
.footer-links a:hover { color: var(--gold-light); }
.social { display: flex; gap: 10px; margin-top: 20px; }
.social a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(217, 172, 95, .5);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-light);
  transition: background .2s ease, color .2s ease;
}
.social a:hover { background: var(--gold-light); color: var(--navy); }
.footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 26px; font-size: 13px; }

/* 9. WhatsApp floating button */
.whatsapp-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: transform .2s ease;
}
.whatsapp-fab:hover { transform: scale(1.08); }

/* 10. Animations (JS adds .is-visible) */
/* Text and cards rise up; photos also zoom in slightly. Change 0.9s to make it faster or slower. */
.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1);
}
.js figure.reveal { transform: translateY(40px) scale(.94); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js figure.reveal { opacity: 1; transform: none; transition: none; }
}

/* 11. Responsive */
@media (max-width: 1180px) {
  .main-nav ul { gap: 24px; }
  .nav-cta { display: none; }
}

@media (max-width: 960px) {
  :root { --header-h: 76px; }
  .brand img { width: 180px; }
  .nav-toggle { display: flex; }

  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0; bottom: 0;
    padding: 32px var(--gutter);
    background: var(--navy);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    overflow-y: auto;
  }
  .nav-open .main-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .main-nav ul a { display: block; padding: 18px 0; font-size: 16px; }
  .main-nav ul a::after { display: none; }
  .main-nav ul a.active { color: var(--gold-light); }
  .nav-cta-mobile { display: flex; margin-top: 28px; width: 100%; }

  .hero, .hero-inner { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-text { padding: 64px 0 32px; }
  .hero-stripe { right: 18%; top: 200px; }
  .hero-stripe.thin { right: 24%; }
  .hero-photo { height: 520px; margin: 0 calc(var(--gutter) * -1); }
  .hero-photo img {
    right: 0;
    width: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
            mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  }
  .hero-badge { padding: 12px 16px; }
  .hero-badge strong { font-size: 24px; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats li:nth-child(2) { border-right: 0; }
  .stats li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .eyebrow { font-size: 11px; letter-spacing: .16em; gap: 10px; }
  .eyebrow::before { width: 24px; }
  .hero-role { font-size: 17px; }
  .hero-tagline { font-size: 28px; }
  .hero-ctas .btn { width: 100%; }
  .hero-photo { height: 440px; }
  .stats li { padding: 26px 18px; }
  .stats strong { font-size: 34px; }
  .stats li > span { font-size: 11px; letter-spacing: .08em; }
  .featured-list { flex-direction: column; gap: 10px; font-size: 20px; }
  .featured-list li + li::before { display: none; }
  .footer-top { grid-template-columns: 1fr; }
  .whatsapp-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}

/* 12. Shared inner-page parts */
.page-banner {
  position: relative;
  overflow: hidden;
  padding: 90px 0 100px;
  color: var(--white);
  background: radial-gradient(ellipse at 80% 30%, var(--navy-3) 0%, var(--navy) 65%);
}
.banner-stripe {
  position: absolute;
  right: 14%;
  top: -60px;
  width: 22px;
  height: 520px;
  background: linear-gradient(var(--gold-light), var(--gold));
  transform: rotate(22deg);
  opacity: .85;
}
.page-banner .container { position: relative; }
.breadcrumb { display: flex; gap: 10px; font-size: 13px; letter-spacing: .08em; color: #9fb0c8; }
.breadcrumb a:hover { color: var(--gold-light); }
.breadcrumb [aria-current] { color: var(--gold-light); }
.page-banner h1 {
  margin: 18px 0 14px;
  font-family: var(--font-serif);
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.05;
}
.page-banner h1 span { color: var(--gold-light); }
.banner-lead { max-width: 560px; font-size: 19px; color: #cdd5e2; }
.banner-lead em { font-family: var(--font-script); font-style: normal; font-size: 1.6em; color: var(--gold-light); line-height: 1; }

.section { padding: 110px 0; }
.section-white { background: var(--white); }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-title {
  margin: 18px 0 20px;
  font-family: var(--font-serif);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy);
}
.section-title em { font-style: normal; color: var(--gold); }
.section-title.light { color: var(--white); }
.section-title.light em { color: var(--gold-light); }
.section-lead { font-size: 18px; color: var(--muted); }
.eyebrow-dark { color: var(--gold); }
.eyebrow-center { justify-content: center; }
.eyebrow-center::after { content: ""; width: 40px; height: 1px; background: currentColor; }

.featured-tight { padding: 70px 0; }


/* 13. About page */
.about-grid { display: grid; grid-template-columns: 460px 1fr; gap: 90px; align-items: center; }
.about-photo { position: relative; height: 620px; }
.about-frame { position: absolute; left: 30px; top: 30px; right: -30px; bottom: -30px; border: 2px solid var(--gold); }
.about-photo img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.about-signature {
  position: absolute;
  left: -30px;
  bottom: 40px;
  padding: 20px 28px;
  background: var(--navy);
  color: var(--white);
}
.about-signature .script { display: block; font-family: var(--font-script); font-size: 36px; line-height: 1.1; color: var(--gold-light); }
.about-signature small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #c8cfdc; }
.about-copy > p:not(.eyebrow) { margin-bottom: 16px; font-size: 17px; color: var(--muted); }
.about-copy strong { color: var(--navy); }

.creds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 30px 0 34px; }
.cred { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--white); border: 1px solid var(--line); }
.cred img { flex: none; width: 40px; height: 40px; object-fit: contain; }
.cred strong { display: block; font-size: 14px; color: var(--navy); }
.cred div span { display: block; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.cred-badge {
  flex: none;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 700;
}
.quote {
  margin: 0;
  padding: 6px 0 6px 22px;
  border-left: 3px solid var(--gold);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  color: var(--navy);
}
.quote strong { color: var(--gold); }

.career { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); }
.career li { padding: 34px 26px; border-right: 1px solid var(--line); background: var(--cream); transition: background .2s ease; }
.career li:last-child { border-right: 0; }
.career li:hover { background: var(--white); }
.career-no { display: block; font-family: var(--font-serif); font-size: 34px; line-height: 1; color: var(--gold); margin-bottom: 18px; }
.career strong { display: block; font-family: var(--font-serif); font-size: 21px; color: var(--navy); }
.career li > span:last-child { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.philosophy { background: var(--navy); color: var(--white); }
.philo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.philo-copy > p:not(.eyebrow) { font-size: 17px; color: #b9c3d3; }
.abc { margin-top: 34px; display: grid; gap: 22px; }
.abc li { display: flex; gap: 20px; align-items: flex-start; }
.abc-letter {
  flex: none;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(217, 172, 95, .55);
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--gold-light);
}
.abc strong { display: block; font-family: var(--font-serif); font-size: 21px; margin-bottom: 4px; }
.abc p { font-size: 15px; color: #b9c3d3; }
.philo-photo { position: relative; }
.philo-photo::before {
  content: "";
  position: absolute;
  left: -20px; top: -20px;
  width: 120px; height: 120px;
  border-top: 2px solid var(--gold-light);
  border-left: 2px solid var(--gold-light);
}
.philo-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.philo-photo figcaption { margin-top: 14px; font-size: 13px; color: #9fb0c8; }

@media (max-width: 1180px) {
  .about-grid { grid-template-columns: 400px 1fr; gap: 64px; }
  .creds { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .section { padding: 80px 0; }
  .page-banner { padding: 64px 0 72px; }
  .banner-stripe { right: 4%; }
  .about-grid { grid-template-columns: 1fr; gap: 72px; }
  .about-photo { max-width: 420px; height: 540px; margin-right: 30px; }
  .about-signature { left: -12px; }
  .career { grid-template-columns: repeat(2, 1fr); }
  .career li { border-bottom: 1px solid var(--line); }
  .career li:nth-child(2n) { border-right: 0; }
  .philo-grid { grid-template-columns: 1fr; gap: 56px; }
  .philo-photo { margin-left: 20px; }
}

@media (max-width: 560px) {
  .banner-stripe { right: -40px; opacity: .45; }
  .about-photo { height: 460px; }
  .about-signature { padding: 14px 18px; }
  .about-signature .script { font-size: 28px; }
  .creds { grid-template-columns: 1fr; }
  .quote { font-size: 18px; }
  .career { grid-template-columns: 1fr; }
  .career li { border-right: 0; padding: 24px 20px; }
  .career-no { font-size: 26px; margin-bottom: 10px; }
}

/* 14. Clients page */
.section-lead.light { color: #b9c3d3; }

.filter-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px; }
.filter-btn {
  padding: 10px 18px;
  border: 1px solid #d9d3c8;
  background: transparent;
  font: 500 14px var(--font-sans);
  color: var(--muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-btn:hover { border-color: var(--navy); color: var(--navy); }
.filter-btn.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }

.logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.logo-grid li {
  height: 130px;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.logo-grid li:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(13, 27, 51, .1); }
.logo-grid li.is-hidden { display: none; }
.logo-grid img { max-width: 100%; max-height: 74px; object-fit: contain; }

.gallery-section { background: var(--navy); color: var(--white); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 16px; }
.gallery li { position: relative; overflow: hidden; }
.gallery .g-wide { grid-column: span 2; }
.gallery .g-tall { grid-row: span 2; }
.gallery .g-full { grid-column: 1 / -1; }
.gallery .g-full img { object-position: center 35%; }
.gallery button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery button::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid rgba(217, 172, 95, 0);
  transition: border-color .3s ease;
}
.gallery button:hover img { transform: scale(1.05); }
.gallery button:hover::after { border-color: var(--gold-light); }

.testis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.testi { position: relative; padding: 34px; background: var(--cream); }
.testi::before {
  content: "\201C";
  position: absolute;
  top: -10px; left: 26px;
  font-family: var(--font-serif);
  font-size: 90px;
  line-height: 1;
  color: var(--gold);
}
.testi > p { margin-top: 40px; color: var(--ink); }
.stars { margin-top: 10px; font-size: 14px; letter-spacing: 3px; color: var(--gold); }
.who { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.avatar {
  flex: none;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--navy-3);
  color: var(--gold-light);
  font-weight: 700;
}
.who strong { display: block; font-size: 14px; color: var(--navy); }
.who div span { font-size: 12px; color: var(--muted); }

.impact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.impact li { padding: 34px 28px; background: var(--white); border-top: 3px solid var(--gold); box-shadow: 0 10px 30px rgba(13, 27, 51, .06); }
.impact-ic {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--navy);
}
.impact-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--gold-light); stroke-width: 1.6; }
.impact strong { display: block; margin-bottom: 8px; font-family: var(--font-serif); font-size: 20px; color: var(--navy); }
.impact p { font-size: 15px; color: var(--muted); }

/* Lightbox (photo viewer) */
.lightbox {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 80px;
  background: rgba(8, 19, 42, .94);
}
.lightbox[hidden] { display: none; }
.lightbox figure { max-width: 1100px; text-align: center; }
.lightbox img { max-width: 100%; max-height: 78vh; margin: 0 auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lightbox figcaption { margin-top: 16px; color: #cdd5e2; font-size: 15px; }
.lightbox button {
  position: absolute;
  width: 52px; height: 52px;
  border: 1px solid rgba(217, 172, 95, .5);
  background: rgba(13, 27, 51, .6);
  color: var(--gold-light);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.lightbox button:hover { background: var(--gold-light); color: var(--navy); }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }

@media (max-width: 1180px) {
  .impact { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .testis { grid-template-columns: 1fr; }
  .lightbox { padding: 70px 16px; }
  .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; }
  .lb-prev { left: calc(50% - 60px); }
  .lb-next { right: calc(50% - 60px); }
}

@media (max-width: 560px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .logo-grid li { height: 100px; padding: 16px; }
  .logo-grid img { max-height: 56px; }
  .filter-btn { padding: 8px 12px; font-size: 13px; }
  .gallery { grid-auto-rows: 140px; gap: 10px; }
  .impact { grid-template-columns: 1fr; }
}

/* 15. Modules page */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid rgba(184, 135, 59, .55);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.chip-light { border-color: rgba(217, 172, 95, .5); color: var(--gold-light); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-3); box-shadow: 0 10px 24px rgba(13, 27, 51, .25); }

.module-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(13, 27, 51, .05);
  transition: top .25s ease;
}
.site-header.scrolled ~ main .module-nav { top: 76px; }
.module-nav ul { display: flex; overflow-x: auto; scrollbar-width: none; }
.module-nav ul::-webkit-scrollbar { display: none; }
.module-nav li { flex: 1 0 auto; }
.module-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.module-nav a b { font-family: var(--font-serif); font-size: 18px; color: var(--gold); }
.module-nav a:hover, .module-nav a.is-current { color: var(--navy); border-bottom-color: var(--gold); }


.module-detail { padding: 100px 0; scroll-margin-top: 150px; background: var(--cream); }
.module-detail.alt { background: var(--white); }
.md-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
.module-detail.alt .md-photo { order: 2; }
.md-photo { position: relative; }
.md-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.md-photo::before {
  content: "";
  position: absolute;
  left: 24px; top: 24px; right: -24px; bottom: -24px;
  border: 2px solid var(--gold);
  z-index: -1;
}
.module-detail { position: relative; z-index: 0; }
.md-no {
  position: absolute;
  left: -14px; bottom: 30px;
  padding: 10px 22px;
  background: var(--navy);
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 1;
  color: var(--gold-light);
}
.md-title { margin: 16px 0 18px; font-family: var(--font-serif); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; color: var(--navy); }
.md-copy > p:not(.eyebrow) { font-size: 17px; color: var(--muted); }
.md-sub { margin: 28px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.tick-list li { position: relative; padding: 6px 0 6px 30px; color: var(--ink); }
.tick-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 12px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.md-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 30px 0 0; background: var(--line); border: 1px solid var(--line); }
.md-meta div { padding: 16px 18px; background: var(--white); }
.module-detail.alt .md-meta div { background: var(--cream); }
.md-meta dt { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.md-meta dd { margin: 6px 0 0; font-size: 14.5px; color: var(--ink); }
.md-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }

.custom-section { background: var(--navy); color: var(--white); }
.custom-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: center; }
.custom-lead { font-size: 18px; color: #b9c3d3; }
.steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; }
.steps li { display: flex; gap: 16px; }
.steps b { font-family: var(--font-serif); font-size: 30px; line-height: 1; color: var(--gold-light); }
.steps strong { display: block; margin-bottom: 4px; font-size: 16px; }
.steps p { font-size: 14.5px; color: #b9c3d3; }
.hrd-card { padding: 40px 36px; background: var(--white); color: var(--ink); border-top: 3px solid var(--gold); }
.hrd-card img { width: 120px; height: auto; margin-bottom: 22px; }
.hrd-card h3 { margin: 0 0 12px; font-family: var(--font-serif); font-size: 26px; color: var(--navy); }
.hrd-card p { margin-bottom: 26px; color: var(--muted); }

@media (max-width: 1180px) {
}

@media (max-width: 960px) {
  .module-nav { top: var(--header-h); }
  .module-nav li { flex: 0 0 auto; }
  .module-detail { padding: 72px 0; }
  .md-grid { grid-template-columns: 1fr; gap: 56px; }
  .module-detail.alt .md-photo { order: 0; }
  .md-photo { margin-right: 24px; }
  .md-photo img { aspect-ratio: 16 / 11; }
  .custom-grid { grid-template-columns: 1fr; gap: 56px; }
}

@media (max-width: 560px) {
  .module-nav a { padding: 14px 12px; font-size: 13px; }
  .md-meta { grid-template-columns: 1fr; }
  .md-actions .btn { width: 100%; }
  .steps { grid-template-columns: 1fr; }
  .hrd-card { padding: 30px 22px; }
  .hrd-card .btn { width: 100%; }
}

/* 16. Services page */

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.svc {
  display: flex;
  flex-direction: column;
  padding: 40px 34px 34px;
  background: var(--white);
  border-top: 3px solid var(--gold);
  box-shadow: 0 10px 30px rgba(13, 27, 51, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.svc:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(13, 27, 51, .12); }
.svc-ic {
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  border-radius: 50%;
  background: var(--navy);
}
.svc-ic svg { width: 30px; height: 30px; fill: none; stroke: var(--gold-light); stroke-width: 1.6; }
.svc h3 { margin: 0 0 10px; font-family: var(--font-serif); font-size: 24px; line-height: 1.2; color: var(--navy); }
.svc > p { color: var(--muted); font-size: 15px; }
.svc-for { display: block; margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

.svc-feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 520px 1fr;
  padding: 0;
  background: var(--navy);
  border-top-color: var(--gold-light);
  color: var(--white);
}
.svc-feature:hover { transform: none; }
.svc-feature-photo { position: relative; min-height: 380px; }
.svc-feature-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% center; }
.svc-new {
  position: absolute;
  left: 24px; top: 24px;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
}
.svc-feature-body { padding: 44px 48px; }
.svc-feature .svc-ic { background: rgba(217, 172, 95, .15); border: 1px solid rgba(217, 172, 95, .5); }
.svc-feature h3 { color: var(--white); font-size: 30px; }
.svc-feature-body > p { max-width: 560px; color: #c8cfdc; }
.svc-points { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin-top: 18px; font-size: 14.5px; color: #dfe5ee; }
.svc-points li { position: relative; padding-left: 22px; }
.svc-points li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 1px; background: var(--gold-light); }
.svc-feature .svc-for { color: var(--gold-light); margin-bottom: 26px; }

.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--cream); }
.process li { padding: 34px 30px; border-right: 1px solid var(--line); }
.process li:last-child { border-right: 0; }
.process b { display: block; font-family: var(--font-serif); font-size: 40px; line-height: 1; color: var(--gold); }
.process strong { display: block; margin: 12px 0 6px; font-size: 16px; color: var(--navy); }
.process p { font-size: 14px; color: var(--muted); }

.faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
.faq-grid .section-lead { margin-bottom: 28px; }
.faq details { background: var(--white); border: 1px solid var(--line); margin-bottom: 14px; }
.faq summary {
  position: relative;
  padding: 22px 60px 22px 26px;
  list-style: none;
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--navy);
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 24px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 300;
  color: var(--gold);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details[open] { border-color: var(--gold); }
.faq details p { padding: 0 26px 24px; color: var(--muted); }

@media (max-width: 1180px) {
  .svc-feature { grid-template-columns: 420px 1fr; }
}

@media (max-width: 960px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-feature { grid-template-columns: 1fr; }
  .svc-feature-photo { min-height: 300px; }
  .process { grid-template-columns: repeat(2, 1fr); }
  .process li:nth-child(2) { border-right: 0; }
  .process li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .faq-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc { padding: 32px 24px 28px; }
  .svc-feature { padding: 0; }
  .svc-feature-photo { min-height: 240px; }
  .svc-feature-body { padding: 30px 22px; }
  .svc-feature h3 { font-size: 26px; }
  .svc-points { grid-template-columns: 1fr; }
  .svc-feature .btn { width: 100%; }
  .process { grid-template-columns: 1fr; }
  .process li { border-right: 0; border-bottom: 1px solid var(--line); }
  .faq summary { font-size: 17px; padding: 18px 52px 18px 20px; }
  .faq details p { padding: 0 20px 20px; }
}

/* 17. Contact page */
.contact-grid { display: grid; grid-template-columns: 440px 1fr; gap: 70px; align-items: start; }
.info-list { margin: 30px 0; }
.info-list li { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.info-ic {
  flex: none;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--navy);
}
.info-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--gold-light); stroke-width: 1.7; }
.info-list small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.info-list a, .info-strong { font-size: 18px; font-weight: 600; color: var(--navy); word-break: break-word; }
.info-list a:hover { color: var(--gold); }
.info-muted { font-size: 13px; color: var(--muted); }


.next-steps { margin-top: 30px; padding: 26px 26px 20px; background: var(--white); border-left: 3px solid var(--gold); }
.next-steps h3 { margin: 0 0 14px; font-family: var(--font-serif); font-size: 20px; color: var(--navy); }
.next-steps ol { list-style: none; margin: 0; padding: 0; }
.next-steps li { display: flex; gap: 14px; padding: 7px 0; font-size: 15px; color: var(--muted); }
.next-steps b {
  flex: none;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--navy);
  font-size: 12px;
  color: var(--gold-light);
}

.form-card { padding: 48px; background: var(--white); border-top: 3px solid var(--gold); box-shadow: 0 20px 50px rgba(13, 27, 51, .08); }
.form-card h3 { margin: 0; font-family: var(--font-serif); font-size: 30px; color: var(--navy); }
.form-intro { margin: 6px 0 26px; color: var(--muted); }
.req { color: #b4232c; }
.fg { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field.full { grid-column: 1 / -1; }
.field label, .field legend {
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy);
}
.field legend { margin-bottom: 7px; }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid #cfc8bb;
  border-radius: 0;
  background: #fbf9f6;
  font: 400 15px var(--font-sans);
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8d94a0; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(184, 135, 59, .25);
}
.field .is-invalid, .pills.is-invalid .pill span { border-color: #b4232c; }
.field-error { min-height: 0; font-size: 13px; color: #b4232c; }
.field-error:empty { display: none; }
.char-count { align-self: flex-end; font-size: 12px; color: var(--muted); }

.pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field .pill { position: relative; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 11px 14px 11px 42px;
  border: 1px solid #cfc8bb;
  font-size: 14px;
  color: var(--muted);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
/* tick box inside each option */
.pill span::before {
  content: "";
  position: absolute;
  left: 14px; top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  border: 1.5px solid #b9b1a3;
  background: var(--white);
}
.pill input:checked + span::before { border-color: var(--gold-light); background: var(--gold-light); }
.pill input:checked + span::after {
  content: "";
  position: absolute;
  left: 19px; top: 50%;
  width: 6px; height: 10px;
  margin-top: -7px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(45deg);
}
.pill:hover span { border-color: var(--navy); color: var(--navy); }
.pill input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.consent { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; font-size: 14px !important; color: var(--muted) !important; }
.consent input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--navy); }
.consent input.is-invalid { outline: 2px solid #b4232c; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error-summary { margin-bottom: 22px; padding: 16px 18px; background: #fdf0f0; border-left: 3px solid #b4232c; font-size: 14px; color: #7d1a20; }
.form-error-summary ul { margin: 6px 0 0; padding-left: 18px; }

.btn-block { width: 100%; margin-top: 28px; }
.btn .spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.btn.is-busy .btn-label { opacity: .6; }
.btn.is-busy .spinner { display: inline-block; }
.btn:disabled { cursor: wait; transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-success { padding: 30px 10px; text-align: center; outline: none; }
.success-ic {
  width: 74px; height: 74px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--navy);
}
.success-ic svg { width: 34px; height: 34px; fill: none; stroke: var(--gold-light); stroke-width: 2.2; }
.form-success p { max-width: 460px; margin: 12px auto 26px; color: var(--muted); }

@media (max-width: 1180px) {
  .contact-grid { grid-template-columns: 380px 1fr; gap: 48px; }
  .form-card { padding: 36px; }
}

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; gap: 56px; }
  .contact-info { order: 2; }
}

@media (max-width: 560px) {
  .form-card { padding: 28px 18px; margin: 0 calc(var(--gutter) * -1); }
  .form-card h3 { font-size: 26px; }
  .fg { grid-template-columns: 1fr; }
  .pills { grid-template-columns: 1fr; gap: 8px; }
  .info-list a, .info-strong { font-size: 16px; }
}

/* 18. Privacy page */
.page-banner-sm { padding: 70px 0 76px; }
.updated { display: inline-block; margin-top: 10px; font-size: 13px; letter-spacing: .06em; color: #9fb0c8; }
.policy-grid { display: grid; grid-template-columns: 260px 1fr; gap: 70px; align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 30px); padding: 26px 24px; background: var(--white); border-top: 3px solid var(--gold); }
.toc-title { margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.toc ol { margin: 0; padding: 0 0 0 20px; font-size: 14px; color: var(--muted); }
.toc li { padding: 5px 0; }
.toc li::marker { color: var(--gold); font-weight: 600; }
.toc a { transition: color .2s ease; }
.toc a:hover, .toc a.is-current { color: var(--navy); font-weight: 600; }

.policy { max-width: 780px; }
.policy-intro { padding-bottom: 26px; margin-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 18px; color: var(--ink); }
.policy section { padding: 30px 0 10px; scroll-margin-top: calc(var(--header-h) + 20px); }
.policy h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font-family: var(--font-serif); font-size: 28px; color: var(--navy); }
.policy h2 span { font-size: 18px; color: var(--gold); }
.policy p { margin-bottom: 14px; color: var(--muted); }
.policy p strong, .policy td:first-child { color: var(--navy); }
.policy p a, .policy-contact a { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.policy .tick-list { margin-bottom: 14px; }
.policy .tick-list li { color: var(--muted); }

.policy-contact { display: flex; flex-wrap: wrap; gap: 12px 40px; padding: 18px 22px; background: var(--white); border-left: 3px solid var(--gold); }
.policy-contact li { display: flex; flex-direction: column; }
.policy-contact b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.table-wrap { overflow-x: auto; margin-bottom: 14px; border: 1px solid var(--line); }
.policy table { width: 100%; border-collapse: collapse; background: var(--white); font-size: 14.5px; }
.policy th { padding: 12px 16px; background: var(--navy); color: var(--white); text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.policy td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.policy td:first-child { width: 30%; font-weight: 600; }

.rights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.rights li { padding: 16px 18px; background: var(--white); border: 1px solid var(--line); }
.rights strong { display: block; margin-bottom: 4px; font-family: var(--font-serif); font-size: 18px; color: var(--navy); }
.rights span { font-size: 14px; color: var(--muted); }

.policy-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; padding: 26px 28px; background: var(--navy); }
.policy-cta p { margin: 0; color: #c8cfdc; }
.policy-cta p strong { color: var(--white); }
.policy-cta .btn-navy { background: var(--gold-light); color: var(--navy); }

.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--gold-light); }
.consent a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) {
  .policy-grid { grid-template-columns: 1fr; gap: 30px; }
  .toc { position: static; }
  .toc ol { columns: 2; column-gap: 30px; }
}

@media (max-width: 560px) {
  .toc ol { columns: 1; }
  .policy h2 { font-size: 23px; }
  .rights { grid-template-columns: 1fr; }
  .policy td:first-child { width: 38%; }
  .policy-cta .btn { width: 100%; }
}

/* 19. One-page layout */
.page-part { scroll-margin-top: 76px; }
#home { scroll-margin-top: 96px; }
.main-nav ul a.is-current { color: var(--white); }
.main-nav ul a.is-current::after { transform: scaleX(1); }
.modules-head { padding-bottom: 50px; }
.modules-head .section-head { margin-bottom: 0; }
.md-tags { margin-top: 26px; }
.hrd-card h4 { margin: 0 0 12px; font-family: var(--font-serif); font-size: 26px; color: var(--navy); }
.hrd-card p { margin-bottom: 0; }
.faq-grid .section-lead { margin-bottom: 0; }
.footer-cta { margin-top: 22px; }
.form-success { padding: 40px 10px; }

@media (max-width: 960px) {
  .main-nav ul a.is-current { color: var(--gold-light); }
}

/* Social links in Contact Us */
.info-social { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 2px; }
.info-list .info-social a { font-size: 15px; font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.info-list .info-social a:hover { color: var(--gold); }
.hero-badge { margin-top: 4px; }

/* Language switch on the Privacy pages */
.lang-switch { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 14px; color: #9fb0c8; }
.lang-switch a { padding: 6px 14px; border: 1px solid rgba(217, 172, 95, .45); color: #cdd5e2; transition: background .2s ease, color .2s ease; }
.lang-switch a:hover { color: var(--gold-light); }
.lang-switch a[aria-current="page"] { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy); font-weight: 600; }
.main-nav ul a, .nav-cta { white-space: nowrap; }
/* Malay page: menu words are longer, so tighten spacing a little */
html[lang="ms"] .main-nav ul { gap: 24px; }
html[lang="ms"] .main-nav ul a { font-size: 13px; letter-spacing: .04em; }
@media (max-width: 960px) {
  html[lang="ms"] .main-nav ul a { font-size: 16px; }
}

/* Clients: note under the logo grid */
.clients-more { margin-top: 34px; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--muted); }

/* Brochure downloads */
.download-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 28px 0 0; }
.download-row-center { justify-content: center; }
.download-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.download-meta { font-size: 13px; color: var(--muted); }

/* Home: HRD badge + luxury brochure button */
.hero-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }
.hero-actions .hero-badge { margin-top: 0; }
.btn-lux {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px 14px 16px;
  color: var(--navy);
  background: linear-gradient(135deg, #f0d293 0%, var(--gold-light) 30%, var(--gold) 68%, #94672a 100%);
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(184, 135, 59, .32), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .15);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-lux::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(13, 27, 51, .28);
  border-radius: 2px;
  pointer-events: none;
}
.btn-lux::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
  pointer-events: none;
}
.btn-lux:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(184, 135, 59, .45), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .15); }
.btn-lux:hover::after { left: 130%; }
.btn-lux:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.btn-lux-ic {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}
.btn-lux-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--gold-light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-lux-text { display: flex; flex-direction: column; line-height: 1.2; }
.btn-lux-text strong { font-family: var(--font-serif); font-size: 19px; font-weight: 700; letter-spacing: .01em; }
.btn-lux-text small { margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(13, 27, 51, .72); }
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; align-items: stretch; max-width: 300px; }
  .btn-lux { padding: 12px 24px 12px 14px; }
  .btn-lux-text strong { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-lux, .btn-lux::after { transition: none; }
}