/* Shared labels, buttons, cards, disclosure panels and dialogs. */
.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -.125em; }
.menu { align-items: center; justify-content: center; gap: 8px; }
.menu .icon { width: 16px; height: 16px; }
.menu .menu-icon-close { display: none; }
.menu[aria-expanded="true"] .menu-icon-open { display: none; }
.menu[aria-expanded="true"] .menu-icon-close { display: inline-block; }
.values > span { display: inline-flex; align-items: center; gap: 6px; }
.essence-mark .icon, .closing-mark .icon { display: block; }
.kicker, .eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.kicker { color: var(--muted); }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--accent); }
.dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--accent); }
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 17px 24px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: inherit;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  transition: background .25s, transform .25s var(--ease), box-shadow .25s;
}
.pill span { font-size: 19px; line-height: 1; }
.pill.primary { background: var(--accent-gradient); color: var(--ink); border-color: var(--accent); }
.pill:hover { transform: translateY(-3px); background: var(--surface); }
.pill.primary:hover { background: var(--accent-hover); box-shadow: 0 8px 30px rgb(255 95 56 / 18%); }
.textlink {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  font-size: 12px;
  font-weight: 500;
}
.textlink span { transition: transform .25s; font-size: 19px; }
.textlink:hover span { transform: translate(3px, -3px); }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo { width: 260px; height: auto; max-height: 68px; object-fit: contain; }
.nav .brand-logo { width: 220px; }
.card { position: relative; isolation: isolate; height: 470px; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); transition: transform .8s var(--ease); }
.card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgb(26 16 10 / 92%)); z-index: -1; }
.card img { position: relative; z-index: -2; }
.card:hover img { transform: scale(1.06); }
.card-text { position: absolute; inset: auto 28px 26px; color: var(--paper); }
.card-num { display: inline-block; padding: 8px 11px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 99px; background: rgb(255 255 255 / 8%); font-size: 9px; letter-spacing: 1.3px; backdrop-filter: blur(8px); }
.card-text h3 { margin: 20px 0 12px; font-size: 26px; font-weight: 500; letter-spacing: -1px; line-height: 1.25; }
.card-text p { color: #eee0d5; font-size: 13px; line-height: 1.8; max-width: 270px; }
.card-arrow { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #ffffff70; border-radius: 50%; transition: background .25s, color .25s; }
.card:hover .card-arrow { background: var(--accent); color: var(--ink); border-color: var(--accent); }
details { border-bottom: 1px solid var(--line); padding: 24px 0; }
details:first-child { border-top: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; gap: 24px; list-style: none; font-size: 14px; cursor: pointer; font-weight: 500; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ''; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; background: linear-gradient(var(--accent), var(--accent)) center / 14px 2px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 2px 14px no-repeat; }
details[open] summary::after { background-size: 14px 2px, 0 0; }
details p { margin: 18px 0 0; font-size: 13px; line-height: 1.9; color: var(--muted); }
dialog { width: min(500px, calc(100% - 32px)); padding: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--paper); box-shadow: 0 30px 100px #0005; }
dialog::backdrop { background: #0009; backdrop-filter: blur(8px); }
dialog h2 { font-size: 28px; }
dialog p { color: var(--muted); font-size: 14px; line-height: 1.9; }
dialog button { margin-top: 16px; }
#info{padding:28px;width:min(500px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow-y:auto;border-radius:22px}
#info h2{font-size:25px;letter-spacing:-1px;margin:10px 40px 16px 0;line-height:1.3}
#info #dialog-copy{font-size:13px;line-height:1.7;margin:0 0 20px}
.info-eyebrow{color:var(--accent);font-size:9px;letter-spacing:1.6px}
#info .info-close-form{position:absolute;top:18px;right:18px;margin:0}
#info .info-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;margin:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted)}
.info-close svg{width:16px;height:16px}
#info :focus-visible{outline-width:2px;outline-offset:3px}
.info-schedule{list-style:none;padding:0;margin:0 0 22px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.info-schedule li{display:grid;gap:6px;padding:14px 16px;font-size:12px;line-height:1.5}
.info-schedule li+li{border-top:1px solid var(--line)}
.info-schedule strong{font-size:12px;font-weight:600}.info-schedule span{color:var(--accent-soft)}.info-schedule small{color:var(--muted);font-size:10px}
.info-actions{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.info-actions form{margin:0}.info-actions .pill{min-height:44px;font-size:12px;padding:12px 18px;gap:16px}
#info .info-dismiss{min-height:44px;padding:10px 15px;margin:0;background:transparent;border:0;color:var(--muted);font-size:12px;border-radius:8px}
.info-dismiss:hover{color:var(--paper)}
#dialog-schedule[hidden]{display:none}
@media(max-width:600px){#info{padding:24px 20px;max-height:calc(100dvh - 32px);border-radius:20px}#info h2{font-size:23px}.info-actions .pill{font-size:11px}.info-schedule li{padding:12px 14px}}
.js-motion .reveal { opacity: 0; transform: translateY(25px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js-motion .reveal.visible { opacity: 1; transform: none; }
