/* Human Kind Intelligence — static site styles */
@import url('tokens.css');
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--brand-cream);font-family:var(--font-body);color:var(--brand-charcoal)}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700}
a{color:var(--brand-terracotta);text-decoration:none}
a:hover{color:var(--brand-moss)}
.page{max-width:1280px;margin:0 auto;background:var(--brand-cream)}
img{max-width:100%}
details summary::-webkit-details-marker{display:none}
details summary{list-style:none}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Montserrat',-apple-system,sans-serif;font-weight:600;letter-spacing:0.01em;border-radius:999px;border:none;cursor:pointer;overflow:hidden;text-decoration:none;transition:transform 200ms cubic-bezier(0.22,1,0.36,1),background-color 200ms,box-shadow 200ms;-webkit-font-smoothing:antialiased}
.btn:hover{transform:scale(1.03)}
.btn-sm{height:36px;padding:0 16px;font-size:13px}
.btn-md{height:44px;padding:0 22px;font-size:15px}
.btn-lg{height:52px;padding:0 30px;font-size:16px}
.btn-primary{background:#5b754b;color:#fdfcf8}
.btn-primary:hover{color:#fdfcf8;box-shadow:0 8px 20px -8px rgba(0,0,0,0.3)}
.btn-accent{background:#d67052;color:#fdfcf8}
.btn-accent:hover{color:#fdfcf8;box-shadow:0 8px 20px -8px rgba(0,0,0,0.3)}
.btn-dark{background:#333;color:#fdfcf8}
.btn-outline{background:transparent;color:#333;border:2px solid #333}
.btn-outline-on-dark{background:transparent;color:#fdfcf8;border:2px solid #fdfcf8}
.btn-outline-on-dark:hover{color:#fdfcf8}
.has-menu{position:relative;display:flex;align-items:center;gap:5px}
.has-menu .menu{position:absolute;top:100%;left:0;margin-top:10px;padding:12px 18px;background:var(--brand-white);border:1px solid rgb(51 51 51/0.10);border-radius:14px;box-shadow:0 12px 28px -14px rgba(22,25,14,0.28);opacity:0;pointer-events:none;transition:opacity 120ms cubic-bezier(0.2,0.7,0.2,1)}
.has-menu:hover .menu,.has-menu:focus-within .menu{opacity:1;pointer-events:auto}
.more-reviews{display:none;grid-template-columns:repeat(3,1fr);gap:18px}
.more-reviews.open{display:grid}
@media (max-width:1320px){.page{max-width:100%}}
/* Prevent horizontal scrolling */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Make media fit the screen */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* Mobile layout */
@media (max-width: 700px) {
  body {
    font-size: 16px;
    line-height: 1.6;
  }

  h1 {
    font-size: 2.1rem;
    line-height: 1.1;
  }

  h2 {
    font-size: 1.7rem;
    line-height: 1.2;
  }

  h3 {
    font-size: 1.25rem;
  }

  section {
    padding: 48px 20px;
  }

  .container,
  .wrapper {
    width: 100%;
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
  }

  .row,
  .grid,
  .cards,
  .columns {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  nav ul {
    flex-direction: column;
    gap: 12px;
    padding-left: 0;
  }

  nav a,
  .button,
  button {
    display: inline-block;
    min-height: 44px;
    padding: 12px 18px;
  }
}
/* =========================================================
   Human Kind Intelligence, mobile layout improvements
   ========================================================= */

@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: 16px;
    line-height: 1.6;
  }

  .page {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  /* Header */
  .page > header {
    height: auto !important;
    min-height: 78px;
    padding: 16px 20px !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .page > header nav {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px !important;
  }

  .page > header nav > a,
  .page > header nav .has-menu {
    font-size: 13px !important;
  }

  .page > header nav > a:last-child {
    grid-column: 1 / -1;
    width: 100%;
  }

  .page > header nav .btn {
    width: 100%;
  }

  .has-menu .menu {
    left: auto;
    right: 0;
  }

  /* Hero section */
  .page > header + div {
    padding: 52px 20px 56px !important;
  }

  .page > header + div > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 34px !important;
  }

  .page > header + div h1 {
    max-width: none !important;
    font-size: clamp(2.25rem, 10vw, 3.25rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
  }

  .page > header + div p {
    max-width: none !important;
  }

  .page > header + div > div > div:first-child > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .page > header + div .btn {
    width: 100%;
  }

  .page > header + div > div > div:last-child {
    width: 100%;
    height: auto !important;
    aspect-ratio: 4 / 3;
  }

  .page > header + div > div > div:last-child img {
    object-fit: cover !important;
  }

  /* Upcoming event strip */
  .page > header + div + div {
    padding: 18px 20px !important;
    align-items: flex-start !important;
    flex-wrap: wrap;
    gap: 14px !important;
  }

  .page > header + div + div > div {
    min-width: 0;
  }

  .page > header + div + div p {
    overflow-wrap: anywhere;
  }

  .page > header + div + div > a {
    width: 100%;
  }

  /* Main sections */
  .page > header + div + div + div {
    padding: 56px 20px !important;
  }

  .page > header + div + div + div h2 {
    font-size: clamp(1.85rem, 8vw, 2.5rem) !important;
    line-height: 1.12 !important;
  }

  /* Four service cards */
  .page > header + div + div + div > div[style*="grid-template-columns:repeat(4"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .page > header + div + div + div > div[style*="grid-template-columns:repeat(4"] > div {
    width: 100% !important;
  }

  /* General content protection */
  img,
  video,
  iframe,
  svg {
    max-width: 100%;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  a {
    overflow-wrap: break-word;
  }

  .btn,
  button {
    min-height: 46px;
    white-space: normal;
    text-align: center;
  }

  /* Make reviews and multi-column content stack */
  .more-reviews,
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  /* Improve FAQ readability */
  details {
    padding: 16px 0 !important;
  }

  details summary {
    padding-right: 24px;
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
}

@media (min-width: 701px) and (max-width: 1050px) {
  .page > header {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .page > header nav {
    gap: 14px !important;
  }

  .page > header + div {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .page > header + div h1 {
    font-size: 44px !important;
  }
}