@import './tokens/fonts.css';
@import './tokens/colors.css';
@import './tokens/typography.css';
@import './tokens/spacing.css';
@import './tokens/shapes.css';
@import './tokens/elevation.css';

:root {
  --brand-navy: #082a63;
  --brand-navy-elevated: #0d377e;
  --brand-blue: #0b63ce;
  --brand-blue-hover: #084b9b;
  --brand-blue-soft: #eaf3ff;
  --brand-red: #c91f2d;
  --brand-green: #68b92e;
  --brand-yellow: #f2c94c;
  --ink: #122033;
  --body: #526071;
  --canvas: #fff;
  --surface: #f4f7fb;
  --line: #e2e9f1;
  --shadow-sm: 0 8px 28px rgba(8, 42, 99, .08);
  --shadow-md: 0 18px 50px rgba(8, 42, 99, .14);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
}

html {
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
}

h1,
h2,
h3,
h4 {
  color: inherit;
  font-family: var(--font-display) !important;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.75rem, 6vw, 5rem) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}

h2 {
  font-size: clamp(2.15rem, 4vw, 3.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -.038em !important;
}

h3 {
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
}

h4 {
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
}

p {
  text-wrap: pretty;
}

a,
button,
input,
select,
textarea {
  font-family: var(--font-ui);
}

a {
  text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(11, 99, 206, .28) !important;
  outline-offset: 3px;
}

section {
  isolation: isolate;
}

section > div[style*="max-width"] {
  padding-left: clamp(20px, 4vw, 48px) !important;
  padding-right: clamp(20px, 4vw, 48px) !important;
}

section[style*="background:#fff"] {
  background-color: var(--canvas) !important;
}

section[style*="background:#f4f7fb"],
section[style*="background:#edf2f7"] {
  background-color: var(--surface) !important;
}

section[style*="background:#082a63"] {
  background-color: var(--brand-navy) !important;
}

section[style*="background:#0d377e"] {
  background-color: var(--brand-navy-elevated) !important;
}

section[style*="padding:96px 0"],
section[style*="padding:88px 0"],
section[style*="padding:80px 0"],
section[style*="padding:100px 0"] {
  padding-top: clamp(72px, 8vw, 112px) !important;
  padding-bottom: clamp(72px, 8vw, 112px) !important;
}

section p[style*="text-transform:uppercase"][style*="letter-spacing"] {
  color: var(--brand-blue) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
}

section[style*="background:#082a63"] p[style*="text-transform:uppercase"],
section[style*="background:#0d377e"] p[style*="text-transform:uppercase"] {
  color: #9fcaff !important;
}

.site-header {
  background: linear-gradient(100deg, rgba(8,42,99,.98), rgba(13,55,126,.97)) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 32px rgba(5,25,61,.18);
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-red) 0 25%, var(--brand-blue) 25% 55%, var(--brand-green) 55% 78%, var(--brand-yellow) 78% 100%);
}

.site-nav-shell {
  height: 76px !important;
  padding-left: clamp(18px, 3vw, 36px) !important;
  padding-right: clamp(18px, 3vw, 36px) !important;
}

.site-brand {
  gap: 12px !important;
  margin-right: 28px !important;
}

.site-brand img {
  width: 52px !important;
  height: 52px !important;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(4,22,53,.22);
}

.site-brand div > div:first-child {
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: .015em !important;
}

.nav-a {
  border-radius: var(--radius-pill);
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .045em !important;
  padding: 8px 11px !important;
}

.nav-a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.09);
}

.nav-cta {
  color: var(--brand-navy) !important;
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: var(--radius-pill) !important;
  padding: 10px 18px !important;
  box-shadow: 0 8px 20px rgba(4,22,53,.16);
}

.mobile-menu {
  background: rgba(8,42,99,.985) !important;
  border-bottom-color: rgba(255,255,255,.14) !important;
}

.mob-link.active {
  border-left-color: var(--brand-red) !important;
  background: rgba(255,255,255,.08) !important;
}

.btn-lime,
.btn-d,
.submit-btn,
.nl-btn,
.help-cta-lime,
.sic-cta {
  color: #fff !important;
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 10px 24px rgba(11,99,206,.22);
}

.btn-lime:hover,
.btn-d:hover,
.submit-btn:hover,
.nl-btn:hover,
.help-cta-lime:hover,
.sic-cta:hover {
  background: var(--brand-blue-hover) !important;
  border-color: var(--brand-blue-hover) !important;
}

.btn-p,
.btn-g,
.btn-v,
.btn-outline-d,
.btn-ghost-w,
.help-cta-primary,
.help-cta-sm {
  border-radius: var(--radius-pill) !important;
}

.btn-v,
.btn-outline-d {
  color: var(--brand-blue) !important;
  border-color: rgba(11,99,206,.34) !important;
}

.ch,
.help-card,
.news-card,
.rev-card,
.ev-card,
.tm-card,
.tl-card,
.snap-card,
.ploc-card,
.hotel-card,
.svc-img-card,
.sic-card,
.study-card,
.article-card,
.plogo {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

.ch:hover,
.help-card:hover,
.news-card:hover,
.rev-card:hover,
.ev-card:hover,
.tl-card:hover,
.snap-card:hover,
.ploc-card:hover,
.hotel-card:hover,
.svc-img-card:hover,
.sic-card:hover,
.study-card:hover,
.article-card:hover,
.plogo:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(11,99,206,.3) !important;
}

.news-tag,
.ev-tag,
.art-modal-tag,
.help-tag,
.badge-pill {
  color: var(--brand-blue) !important;
  background: var(--brand-blue-soft) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 700 !important;
}

.fd-photo,
.news-card-img,
.ev-slide,
.ploc-img,
.hotel-img {
  border-radius: var(--radius-lg) !important;
}

.stats-strip {
  background: linear-gradient(115deg, var(--brand-navy), #0c3d87) !important;
}

.stat-item:nth-child(3n+1) .stat-icon {
  border-color: rgba(201,31,45,.52) !important;
  background: rgba(201,31,45,.14) !important;
}

.stat-item:nth-child(3n+2) .stat-icon {
  border-color: rgba(104,185,46,.52) !important;
  background: rgba(104,185,46,.14) !important;
}

.stat-item:nth-child(3n+3) .stat-icon {
  border-color: rgba(242,201,76,.52) !important;
  background: rgba(242,201,76,.14) !important;
}

input,
select,
textarea,
.nl-input {
  border: 1px solid #d6e0eb !important;
  border-radius: var(--radius-sm) !important;
  min-height: 48px;
}

input:focus,
select:focus,
textarea:focus,
.nl-input:focus {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 4px rgba(11,99,206,.12) !important;
}

.site-footer {
  background: linear-gradient(145deg, #061d46, var(--brand-navy)) !important;
  border-top: 3px solid var(--brand-blue) !important;
}

.site-footer .foot-link:hover {
  color: #b9d8ff !important;
}

.site-footer .social-btn:hover {
  color: #fff !important;
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
}

.hhc-progress {
  height: 3px !important;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-blue), var(--brand-green), var(--brand-yellow)) !important;
  box-shadow: none !important;
}

.hhc-progress::after {
  background: #fff !important;
  box-shadow: 0 0 10px rgba(255,255,255,.8) !important;
}

@media (max-width: 1024px) {
  .site-nav-shell { height: 70px !important; }
  .site-brand img { width: 46px !important; height: 46px !important; }
}

@media (max-width: 640px) {
  h1 { font-size: clamp(2.35rem, 11vw, 3.2rem) !important; }
  h2 { font-size: clamp(1.9rem, 8.5vw, 2.55rem) !important; }

  section > div[style*="max-width"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  section[style*="padding:96px 0"],
  section[style*="padding:88px 0"],
  section[style*="padding:80px 0"],
  section[style*="padding:100px 0"] {
    padding-top: 68px !important;
    padding-bottom: 68px !important;
  }

  .site-brand div > div:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

/* Refinement pass: clarity, contrast, touch targets, and brand accents. */
.hhc-hero-grid {
  max-width: 1200px !important;
}

.hhc-hero-grid > div {
  max-width: 700px;
}

.hhc-hero-veil {
  background: linear-gradient(100deg, rgba(8,42,99,.96) 0%, rgba(8,42,99,.86) 42%, rgba(8,42,99,.54) 72%, rgba(8,42,99,.72) 100%) !important;
}

.btn-p,
.btn-g,
.btn-v,
.btn-d,
.btn-lime,
.btn-outline-d,
.btn-ghost-w,
.nav-cta,
.help-cta-primary,
.help-cta-sm,
.sic-cta,
.submit-btn,
.nl-btn {
  min-height: 46px;
  align-items: center;
  justify-content: center;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .045em !important;
}

.btn-p {
  color: var(--brand-navy) !important;
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.8) !important;
  box-shadow: 0 10px 26px rgba(4,22,53,.2);
}

.btn-p:hover {
  color: var(--brand-blue-hover) !important;
  background: #f6faff !important;
}

.btn-g,
.btn-ghost-w {
  color: #fff !important;
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.26) !important;
  backdrop-filter: blur(10px);
}

.btn-g:hover,
.btn-ghost-w:hover {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.38) !important;
}

.ham-btn,
.mob-lang-btn,
.social-btn {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

section[style*="background:#082a63"] p[style*="color:rgba(255,255,255"],
section[style*="background:#0d377e"] p[style*="color:rgba(255,255,255"] {
  color: rgba(255,255,255,.76) !important;
}

.site-footer [style*="color:rgba(255,255,255,.15)"],
.site-footer [style*="color:rgba(255,255,255,.2)"],
.site-footer [style*="color:rgba(255,255,255,.22)"],
.site-footer [style*="color:rgba(255,255,255,.28)"],
.site-footer [style*="color:rgba(255,255,255,.3)"],
.site-footer [style*="color:rgba(255,255,255,.32)"],
.site-footer [style*="color:rgba(255,255,255,.42)"] {
  color: rgba(255,255,255,.68) !important;
}

.help-sm-bar {
  background: linear-gradient(90deg, var(--brand-red), var(--brand-blue), var(--brand-green), var(--brand-yellow)) !important;
}

.stat-icon svg {
  stroke: currentColor !important;
}

.stat-item:nth-child(3n+1) .stat-icon { color: #ff7b88; }
.stat-item:nth-child(3n+2) .stat-icon { color: #9ee16e; }
.stat-item:nth-child(3n+3) .stat-icon { color: #ffe28a; }

.study-card:nth-child(4n+1) .study-card-line { background: var(--brand-red) !important; }
.study-card:nth-child(4n+2) .study-card-line { background: var(--brand-blue) !important; }
.study-card:nth-child(4n+3) .study-card-line { background: var(--brand-green) !important; }
.study-card:nth-child(4n+4) .study-card-line { background: var(--brand-yellow) !important; }

.tl-fill {
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-green), var(--brand-yellow)) !important;
}

.pulse-wrap {
  background: rgba(201,31,45,.16) !important;
}

.pulse-wrap svg {
  stroke: #ff7b88 !important;
}

.news-card,
.ev-card,
.rev-card {
  position: relative;
}

.news-card::before,
.ev-card::before,
.rev-card::before {
  content: '';
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-blue), var(--brand-green), var(--brand-yellow));
}

@media (max-width: 700px) {
  body {
    min-width: 0 !important;
  }

  h1,
  .ha2 {
    font-size: clamp(2rem, 9vw, 2.55rem) !important;
    line-height: 1.12 !important;
  }

  h2,
  section h2,
  .apm-h,
  .art-modal-h {
    font-size: clamp(1.65rem, 7vw, 2.15rem) !important;
    line-height: 1.18 !important;
  }

  h3 {
    font-size: clamp(1.1rem, 5.4vw, 1.45rem) !important;
    line-height: 1.25 !important;
  }

  section > div[style*="max-width"],
  footer > div[style*="max-width"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  [style*="position:absolute"][style*="radial-gradient"],
  [style*="position: absolute"][style*="radial-gradient"] {
    display: none !important;
  }

  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns:repeat(2,1fr)"],
  div[style*="grid-template-columns: repeat(2, 1fr)"],
  div[style*="grid-template-columns:1.4fr 1fr"],
  div[style*="grid-template-columns: 1.4fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1.2fr"],
  div[style*="grid-template-columns: 1fr 1.2fr"],
  div[style*="grid-template-columns:1fr 1.1fr"],
  div[style*="grid-template-columns: 1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="gap:72px"],
  div[style*="gap:64px"],
  div[style*="gap:60px"],
  div[style*="gap:44px"] {
    gap: 26px !important;
  }

  div[style*="padding:88px 64px 88px 40px"] {
    padding: 52px 20px !important;
  }

  div[style*="padding:44px"],
  div[style*="padding:40px"] {
    padding: 24px !important;
  }

  .hhc-input,
  .hhc-label,
  textarea,
  select,
  input {
    font-size: 16px !important;
  }

  .cat-pill {
    flex: 0 0 auto;
  }

  .art-photo-header {
    height: 180px !important;
  }

  .sic-card {
    min-width: 0 !important;
  }

  .hhc-hero-grid {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .hhc-hero-grid > div {
    max-width: none;
  }

  .hhc-hero-grid .ha4 {
    gap: 12px !important;
  }

  .hhc-hero-grid .ha4 .btn-p,
  .hhc-hero-grid .ha4 .btn-g {
    flex: 1 1 100%;
    min-height: 50px;
  }

  .stats-strip {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .stat-item {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }
}