* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 1rem/1.55 var(--font-sans); }
button { font: inherit; } a { color: inherit; } :focus-visible { outline: 3px solid var(--hup-web); outline-offset: 3px; }
.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }
.skip-link { position: fixed; inset: .5rem auto auto .5rem; transform: translateY(-200%); z-index: 10; padding: var(--space-2) var(--space-3); background: var(--hup-brand); border-radius: var(--radius-sm); font-weight: 700; }.skip-link:focus { transform: translateY(0); }
.site-header { border-bottom: 1px solid var(--line); }.header-shell, .footer-shell { min-height: 4.75rem; display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; }.header-shell p, .site-footer p { margin: 0; font-size: .8125rem; }.wordmark { font-size: 1.75rem; line-height: 1; font-weight: 850; text-decoration: none; letter-spacing: -.08em; }.wordmark span { color: var(--hup-brand); }
.hero { padding: clamp(4rem, 10vw, 8rem) 0; background: var(--hup-black); color: var(--hup-white); }.hero h1 { max-width: 13ch; margin: var(--space-4) 0; font-size: clamp(2.75rem, 8vw, 6.5rem); line-height: .94; letter-spacing: -.07em; }.hero p { max-width: 40rem; margin: 0; font-size: clamp(1rem, 2vw, 1.25rem); }.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.button { min-height: 2.875rem; padding: .65rem 1rem; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-weight: 750; }.button--primary { background: var(--hup-brand); color: var(--hup-black); }.button--secondary { background: transparent; color: currentColor; border-color: currentColor; }.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.badge { display: inline-flex; align-items: center; width: max-content; border-radius: 999px; padding: .3rem .6rem; background: var(--hup-brand); color: var(--hup-black); font-size: .6875rem; line-height: 1; font-weight: 800; letter-spacing: .09em; }.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }.section--muted { background: var(--surface); }.section-header { max-width: 43rem; margin-bottom: var(--space-6); }.section-header h2, .type-sample h2 { margin: var(--space-3) 0 var(--space-2); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.055em; }.section-header p, .type-sample p { margin: 0; color: #51514c; }
.swatches { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }.swatch { min-height: 4.5rem; display: grid; grid-template-columns: 3rem minmax(8rem, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); font-size: .875rem; }.swatch code { color: #666660; font-size: .75rem; }.swatch__color { height: 2.5rem; border: 1px solid rgb(0 0 0 / .12); border-radius: var(--radius-sm); }.swatch__color--brand { background: var(--hup-brand); }.swatch__color--black { background: var(--hup-black); }.swatch__color--white { background: var(--hup-white); }.swatch__color--pdv { background: var(--hup-pdv); }.swatch__color--web { background: var(--hup-web); }.swatch__color--food { background: var(--hup-food); }.swatch__color--pet { background: var(--hup-pet); }.swatch__color--clinics { background: var(--hup-clinics); }.swatch__color--agenda { background: var(--hup-agenda); }
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }.card { min-height: 12rem; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-sm); }.card h3 { margin: 0 0 var(--space-2); font-size: 1.25rem; }.card p { margin: 0; color: #51514c; }.type-sample { display: grid; gap: var(--space-6); }.type-sample dl { display: grid; gap: var(--space-3); margin: 0; }.type-sample dl div { padding-top: var(--space-3); border-top: 1px solid var(--line); }.type-sample dt { font-weight: 800; }.type-sample dd { margin: 0; color: #51514c; }.site-footer { border-top: 1px solid var(--line); background: var(--surface); }.modal { width: min(calc(100% - 2rem), 32rem); padding: 0; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }.modal::backdrop { background: rgb(0 0 0 / .54); }.modal__content { padding: var(--space-6); }.modal__content h2 { margin: var(--space-2) 0; }.modal__content p { margin: var(--space-2) 0 var(--space-5); }.modal__eyebrow { color: #666660; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 48rem) { .container { width: min(calc(100% - 4rem), var(--container)); }.swatches { grid-template-columns: repeat(2, 1fr); }.card-grid { grid-template-columns: repeat(3, 1fr); }.type-sample { grid-template-columns: 1.2fr 1fr; align-items: end; }.site-footer .footer-shell { flex-direction: row; } }
@media (min-width: 90rem) { .hero { min-height: 38rem; display: grid; align-items: center; }.swatches { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.button { transition: none; } }