/* ==========================================================================
   Yujverse — Components
   Editorial rhythm: eyebrow → display heading → kicker → body → CTA
   ========================================================================== */

/* ---------- Eyebrow (uppercase, bindi bullet + short underline) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bindi);
  box-shadow: 0 0 0 4px rgba(192,57,43,.14);
  flex: none;
}
.section--dark .eyebrow { color: var(--mint); }

/* ---------- Kicker (serif resonance line under the heading) ---------- */
.kicker {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-style: italic;
  color: var(--brick);
  margin-top: .5rem;
}
.section--dark .kicker { color: var(--gold); }

/* ---------- Section header block ---------- */
.section-head { max-width: 760px; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head .lead { font-size: var(--fs-lead); color: var(--ink-soft); margin-top: 1rem; max-width: var(--measure); }
.section-head.center .lead { margin-inline: auto; }

/* Number anchor (structural device: 01 / 02 / 03) */
.num-anchor {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  color: var(--clay);
  line-height: 1;
  opacity: .9;
}

/* ---------- Buttons ---------- */
.btn {
  --_bg: var(--brick);
  --_fg: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.6rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn .btn-arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn--primary { --_bg: var(--brick); --_fg: var(--cream); }
.btn--primary:hover { --_bg: var(--brick-deep); }
.btn--accent  { --_bg: var(--teal-deep); --_fg: #fff; }
.btn--accent:hover { --_bg: var(--teal-ink); }
.btn--ghost {
  --_bg: transparent; --_fg: var(--brick);
  border-color: color-mix(in srgb, var(--brick) 35%, transparent);
}
.btn--ghost:hover { --_bg: var(--brick); --_fg: var(--cream); box-shadow: var(--shadow-sm); }
.btn--on-dark {
  --_bg: var(--gold); --_fg: var(--brick);
}
.btn--on-dark:hover { --_bg: #fff; }
.btn--lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn--sm { padding: .6rem 1.1rem; font-size: .85rem; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--clay) 55%, transparent); }
.card__icon {
  width: 56px; height: 56px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--mint) 18%, transparent);
  color: var(--teal-ink);
  margin-bottom: 1rem;
}
.card__title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; color: var(--brick); margin-bottom: .5rem; }
.card__text { color: var(--ink-soft); font-size: .98rem; }

/* Value card (core values) */
.value-card { text-align: left; }
.value-card .value-num { font-family: var(--font-display); color: var(--clay); font-size: 1.5rem; }

/* ---------- Badge / pill ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .8rem; border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  background: color-mix(in srgb, var(--clay) 22%, transparent);
  color: var(--brick);
}

/* ---------- Forms ---------- */
.field { margin-bottom: 1.1rem; }
.field label {
  display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: .45rem;
}
.field label .req { color: var(--bindi); }
.input, .textarea, .select {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-mute); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.textarea { min-height: 140px; resize: vertical; }
.field .err-msg { color: var(--bindi); font-size: var(--fs-xs); margin-top: .35rem; }
.field.has-error .input, .field.has-error .textarea { border-color: var(--bindi); }

/* ---------- Flash / alerts ---------- */
.alert { padding: .9rem 1.2rem; border-radius: var(--radius-md); font-size: .95rem; margin-bottom: 1rem; border: 1px solid transparent; }
.alert--ok   { background: color-mix(in srgb, var(--mint) 18%, white); border-color: var(--mint); color: var(--teal-ink); }
.alert--err  { background: color-mix(in srgb, var(--bindi) 12%, white); border-color: color-mix(in srgb, var(--bindi) 40%, transparent); color: var(--brick); }

/* ==========================================================================
   Navbar
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  background: transparent;
  border-bottom: 1px solid transparent;
}
.nav__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.nav__brand { display: inline-flex; align-items: center; gap: .65rem; }
.nav__brand img { height: 46px; width: auto; }
.nav__brand .wordmark {
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .04em;
  color: var(--brick); line-height: 1;
}
.nav__brand .wordmark small { display:block; font-family: var(--font-accent); font-size: .62rem; letter-spacing:.18em; color: var(--accent); text-transform: uppercase; }

.nav__links { display: flex; align-items: center; gap: .1rem; list-style: none; }
.nav__links a {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .5rem .6rem; border-radius: var(--radius-full);
  font-size: .85rem; font-weight: 600; color: var(--ink);
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.nav__links a:hover { color: var(--brick); background: color-mix(in srgb, var(--clay) 22%, transparent); }
.nav__links a.is-active { color: var(--brick); }
.nav__links a.is-active::after {
  content:""; width:5px; height:5px; border-radius:50%; background: var(--bindi); margin-left:.1rem;
}

/* Dropdown */
.nav__drop { position: relative; }
.nav__drop > button {
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  padding: .5rem .6rem; border-radius: var(--radius-full);
  font-size: .85rem; font-weight: 600; color: var(--ink);
}
.nav__drop > button:hover { color: var(--brick); background: color-mix(in srgb, var(--clay) 22%, transparent); }
.nav__drop .caret { transition: transform var(--dur) var(--ease-out); font-size:.7rem; }
.nav__drop[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + .5rem); left: 0; min-width: 200px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: .4rem; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.nav__drop[aria-expanded="true"] .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a { display: block; padding: .6rem .8rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem; }
.nav__menu a:hover { background: color-mix(in srgb, var(--clay) 22%, transparent); color: var(--brick); }

.nav__cta { margin-left: .4rem; }

/* Solid (scrolled) state */
.nav.is-solid {
  background: color-mix(in srgb, var(--cream-bg) 92%, transparent);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
/* Over-hero (transparent) light treatment */
.nav.is-over-hero:not(.is-solid) .nav__links a,
.nav.is-over-hero:not(.is-solid) .nav__drop > button { color: var(--on-dark); }
.nav.is-over-hero:not(.is-solid) .nav__brand .wordmark { color: var(--cream); }
.nav.is-over-hero:not(.is-solid) .nav__links a:hover,
.nav.is-over-hero:not(.is-solid) .nav__drop > button:hover { background: rgba(255,255,255,.12); color:#fff; }

/* Hamburger */
.nav__burger { display: none; background: none; border: none; cursor: pointer; padding: .5rem; }
.nav__burger span { display:block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur) var(--ease-out), opacity var(--dur); }
.nav__burger span + span { margin-top: 5px; }
.nav.is-over-hero:not(.is-solid) .nav__burger span { background: var(--cream); }

/* Mobile drawer */
.nav__drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: linear-gradient(160deg, var(--dark), var(--dark-2));
  color: var(--on-dark);
  display: flex; flex-direction: column; padding: calc(var(--nav-h) + 1rem) var(--gutter) 2rem;
  transform: translateX(100%); transition: transform var(--dur) var(--ease-out);
  overflow-y: auto;
}
.nav__drawer.is-open { transform: none; }
.nav__drawer a, .nav__drawer .drawer-sub-label {
  font-family: var(--font-display); font-size: 1.5rem; color: var(--on-dark);
  padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav__drawer .drawer-sub a { font-size: 1.1rem; padding-left: 1rem; color: var(--on-dark-mute); }
.nav__drawer .btn { margin-top: 1.4rem; align-self: flex-start; }

@media (max-width: 1080px) {
  .nav__links, .nav__cta.desktop-only { display: none; }
  .nav__burger { display: block; }
}
body.no-scroll { overflow: hidden; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: linear-gradient(165deg, var(--dark), var(--dark-2));
  color: var(--on-dark-mute);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem;
  position: relative;
}
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 2.5rem; }
.footer__brand img { height: 88px; margin-bottom: 1rem; }
.footer__brand p { color: var(--on-dark-mute); max-width: 34ch; }
.footer__tag { font-family: var(--font-serif); font-style: italic; color: var(--gold); margin-top: .8rem; }
.footer h4 {
  font-family: var(--font-accent); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.1rem;
}
.footer__links { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer__links a { color: var(--on-dark-mute); transition: color var(--dur) var(--ease-out); width: fit-content; }
.footer__links a:hover { color: var(--cream); }
.footer__contact { font-style: normal; line-height: 1.8; color: var(--on-dark-mute); }
.footer__contact a:hover { color: var(--cream); }
.footer__social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.footer__social a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: var(--cream);
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.footer__social a:hover { background: var(--brick); transform: translateY(-3px); }
.footer__news { display: flex; gap: .5rem; margin-top: 1rem; }
.footer__news input {
  flex: 1; padding: .7rem .9rem; border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: var(--cream);
}
.footer__news input::placeholder { color: var(--on-dark-mute); }
.footer__news-msg { margin-top: .55rem; font-size: .85rem; line-height: 1.4; }
.footer__news-msg.is-ok  { color: var(--mint); }
.footer__news-msg.is-err { color: color-mix(in srgb, var(--bindi) 70%, white); }
.footer__bar {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--on-dark-mute);
}
.footer__bar a:hover { color: var(--cream); }
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }

/* ==========================================================================
   Pattern divider (brand infinity/leaf motif)
   ========================================================================== */
.pattern-divider { height: 38px; width: 100%; background-repeat: repeat-x; background-position: center; background-size: auto 100%; opacity: .5; }