.skip-link { position: fixed; z-index: 1000; inset: 0 auto auto 0; transform: translateY(-120%); background: var(--color-text); color: var(--color-white); padding: 0.75rem 1rem; }
.skip-link:focus { transform: translateY(0); }
.eyebrow { margin-bottom: var(--space-4); color: var(--color-highlight); font-size: var(--font-size-100); font-weight: 700; letter-spacing: var(--letter-spacing-label); line-height: 1.4; text-transform: uppercase; }
.icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.button { position: relative; display: inline-flex; min-height: 3.25rem; align-items: center; justify-content: center; gap: 0.65rem; border: 1px solid transparent; border-radius: var(--radius-small); padding: 0.8rem 1.4rem; font-size: var(--font-size-200); font-weight: 650; letter-spacing: 0.02em; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.button--primary { background: var(--color-primary); color: var(--color-white); }
.button--primary:hover { background: var(--color-primary-hover); }
.button--primary:active { background: var(--color-primary-active); }
.button--secondary { border-color: var(--color-text); background: transparent; color: var(--color-text); }
.button--secondary:hover { background: var(--color-text); color: var(--color-white); }
.button--compact { min-height: 2.75rem; padding: 0.65rem 1.1rem; }
.button--full { width: 100%; }
.button:disabled, .button[aria-disabled="true"] { border-color: var(--color-border); background: var(--color-surface-deep); color: var(--color-text-muted); cursor: not-allowed; transform: none; opacity: 0.7; }
.button.is-loading { pointer-events: none; }
.button.is-loading [data-button-label], .button.is-loading > .icon { visibility: hidden; }
.spinner { position: absolute; display: none; width: 1.25rem; height: 1.25rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
.button.is-loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.text-link { display: inline-flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid currentColor; color: var(--color-primary); font-size: var(--font-size-200); font-weight: 700; letter-spacing: 0.04em; text-decoration: none; }
.text-link .icon { transition: transform var(--transition-fast); }
.text-link:hover .icon { transform: translateX(0.25rem); }
.text-link--disabled { color: var(--color-text-muted); cursor: not-allowed; }
.icon-button { display: inline-grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid transparent; background: transparent; cursor: pointer; }
.icon-button:hover { border-color: currentColor; }
.wordmark { display: inline-flex; flex-direction: column; align-items: center; color: var(--color-text); line-height: 1; text-decoration: none; }
.wordmark__name { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.08em; white-space: nowrap; }
.wordmark__descriptor { margin-top: 0.38rem; font-size: 0.55rem; letter-spacing: 0.23em; text-transform: uppercase; white-space: nowrap; }
.wordmark--light { color: var(--color-white); }
.image-placeholder { position: relative; display: flex; min-height: 18rem; align-items: flex-end; justify-content: space-between; overflow: hidden; background-color: #d6cfc2; background-image: linear-gradient(125deg, transparent 48%, rgba(38,37,34,0.06) 48% 52%, transparent 52%); color: var(--color-text); }
.image-placeholder::before { content: ""; position: absolute; inset: 1rem; border: 1px solid rgba(38, 37, 34, 0.25); pointer-events: none; }
.image-placeholder__index { align-self: flex-start; padding: 1.5rem; font-family: var(--font-display); font-size: 3rem; line-height: 1; opacity: 0.5; }
.image-placeholder__label, .image-placeholder figcaption { position: relative; z-index: 1; max-width: 85%; padding: 1.25rem 1.5rem; font-size: var(--font-size-200); font-weight: 650; line-height: 1.4; }
.image-placeholder__label small { font-weight: 400; }
.image-placeholder--dark { background-color: #4a3a36; color: var(--color-white); }
.image-placeholder--dark::before { border-color: rgba(255,255,255,0.35); }
.image-credit { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; background: rgba(23,23,21,0.7); color: var(--color-white); padding: 0.35rem 0.55rem; font-size: 0.625rem; line-height: 1.3; }
.feature-list { display: grid; gap: 0.8rem; list-style: none; }
.feature-list li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--color-text-muted); font-size: var(--font-size-200); line-height: 1.5; }
.feature-list .icon { width: 1rem; height: 1rem; margin-top: 0.2rem; color: var(--color-success); }
.form-field { display: grid; min-width: 0; gap: 0.45rem; margin: 0; border: 0; padding: 0; }
.form-field label, .form-field legend { font-size: var(--font-size-200); font-weight: 650; }
.form-field legend { margin-bottom: 0.55rem; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 3.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-white); color: var(--color-text); padding: 0.75rem 0.9rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.form-field textarea { resize: vertical; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--color-text-muted); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--color-focus); outline: none; box-shadow: var(--shadow-focus); }
.form-field input:disabled, .form-field select:disabled, .form-field textarea:disabled { background: var(--color-surface-deep); color: var(--color-text-muted); cursor: not-allowed; }
.form-field.is-error input, .form-field.is-error select, .form-field.is-error textarea { border-color: var(--color-error); background: var(--color-error-bg); }
.form-field.is-success input, .form-field.is-success select, .form-field.is-success textarea { border-color: var(--color-success); }
.form-field__hint, .form-field__error { min-height: 1.1em; font-size: var(--font-size-100); line-height: 1.4; }
.form-field__hint { color: var(--color-text-muted); }
.form-field__error { color: var(--color-error); font-weight: 600; }
.label-optional { float: right; color: var(--color-text-muted); font-size: var(--font-size-100); font-weight: 400; }
.choice-group { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.choice { position: relative; display: inline-flex; align-items: center; gap: 0.65rem; cursor: pointer; }
.choice input { width: 1.15rem; height: 1.15rem; min-height: 0; margin: 0; accent-color: var(--color-primary); }
.choice-group .choice { min-height: 2.8rem; border: 1px solid var(--color-border); padding: 0.6rem 0.9rem; }
.choice-group .choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-surface-deep); }
.choice--checkbox { align-items: flex-start; font-weight: 400 !important; line-height: 1.5; }
.choice--checkbox input { margin-top: 0.2rem; }
.form-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.form-status { border-left: 3px solid currentColor; padding: 0.85rem 1rem; font-size: var(--font-size-200); line-height: 1.5; }
.form-status--success { background: var(--color-success-bg); color: var(--color-success); }
.form-status--error { background: var(--color-error-bg); color: var(--color-error); }
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .button { min-height: 3.5rem; }
}