/* Uniforms Love 3.0 - Figma/PDF measured page layouts. */

/* ---------- Home ---------- */
.ul-home > section { width: var(--ul-shell); max-width: var(--ul-page); margin-left: auto; margin-right: auto; }
.ul-hero {
    display: flex;
    align-items: stretch;
    height: auto;
    aspect-ratio: 1408 / 768;
    gap: var(--ul-gap);
}
.ul-hero__copy {
    position: relative;
    display: flex;
    flex: 0 0 calc((100% - 8px) * .32954545);
    flex-direction: column;
    min-width: 0;
    padding: 18px 32px 32px;
    background: var(--ul-cream);
}
.ul-hero__media {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.ul-hero__media > img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.ul-hero__categories { display: flex; align-items: center; gap: 26px; }
.ul-hero__categories a { font-size: 11px; font-weight: 500; }
.ul-hero__content { margin-top: 74px; }
.ul-hero__content h1 {
    max-width: 390px;
    margin: 0 0 22px;
    font-size: 56px;
    font-weight: 600;
    line-height: .93;
    letter-spacing: 0;
}
.ul-hero__content p { max-width: 360px; margin: 0; color: #514c48; font-size: 13px; line-height: 1.5; }
.ul-hero__buttons { display: flex; align-items: center; margin-top: auto; gap: 8px; }
.ul-hero__buttons .ul-button { min-width: 144px; }
.ul-student-badge {
    position: absolute;
    right: 32px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 18px;
    background: rgba(255,255,255,.9);
    border-radius: 5px;
    color: #000;
    font-size: 10px;
    font-weight: 500;
}

.ul-colors-section { padding: 96px 0 108px; }
.ul-section-heading--center { text-align: center; }
.ul-colors-section .ul-section-heading { max-width: 890px; margin: 0 auto 18px; }
.ul-colors-section .ul-section-heading h2 { margin: 0 0 8px; font-size: 42px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.ul-colors-section .ul-section-heading p { max-width: 840px; margin: 0 auto; color: #514c48; font-size: 12px; line-height: 1.45; }
.ul-color-slider { position: relative; width: 100%; overflow: hidden; }
.ul-color-cards { display: flex; align-items: stretch; width: 100%; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.ul-color-cards::-webkit-scrollbar { display: none; }
.ul-color-card { flex: 0 0 calc((100% - 16px) / 3); overflow: hidden; }
.ul-color-card img { width: 100%; height: auto; aspect-ratio: 928 / 1405; object-fit: cover; object-position: center top; }
.ul-slider-arrow { position: absolute; top: 50%; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; background: var(--ul-brown); border: 0; border-radius: 6px; transform: translateY(-50%); }
.ul-slider-arrow img { width: 16px; height: 16px; }
.ul-slider-arrow--left { left: 16px; }
.ul-slider-arrow--right { right: 16px; }

.ul-about { padding: 28px 16px 16px; background: var(--ul-cream); }
.ul-about__intro { display: flex; align-items: stretch; justify-content: space-between; min-height: 278px; gap: 40px; }
.ul-about__copy { flex: 1 1 auto; min-width: 0; padding: 10px 0 18px; }
.ul-about__copy h2 { max-width: 920px; margin: 0 0 18px; font-size: 44px; font-weight: 600; line-height: 1.08; letter-spacing: 0; word-spacing: .04em; }
.ul-about__copy p { max-width: 900px; margin: 0; color: #302c29; font-size: 15px; line-height: 1.72; }
.ul-about__stat { display: flex; align-items: center; justify-content: center; flex: 0 0 310px; flex-direction: column; min-height: 232px; padding: 28px 24px; background: rgba(255,255,255,.72); border: 1px solid #eadfd7; border-radius: 10px; text-align: center; }
.ul-about__stat > strong { margin-bottom: 8px; color: var(--ul-brown); font-size: 78px; font-weight: 500; line-height: 1; letter-spacing: 0; }
.ul-about__stat > span { margin-bottom: 0; font-size: 16px; line-height: 1.35; }
.ul-benefits { display: flex; align-items: stretch; width: 100%; gap: 1px; background: #ded8d2; margin-top: 10px; }
.ul-benefit { display: flex; flex: 1 1 25%; flex-direction: column; align-items: center; min-width: 0; min-height: 338px; padding: 42px 28px 34px; background: #fff; text-align: center; }
.ul-benefit__icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 84px; margin-bottom: 24px; }
.ul-benefit__icon img { max-width: 108px; max-height: 74px; object-fit: contain; object-position: center center; }
.ul-benefit h3 { margin: 0 0 18px; font-size: 22px; font-weight: 600; line-height: 1.24; letter-spacing: 0; }
.ul-benefit p { max-width: 300px; margin: 0; color: #514c48; font-size: 14px; line-height: 1.68; }

.ul-promo-cards { display: flex; align-items: stretch; padding-top: 16px; gap: 8px; }
.ul-promo-card { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; }
.ul-promo-card > img,
.ul-promo-card > video { display: block; width: 100%; height: auto; aspect-ratio: 928 / 1200; object-fit: cover; object-position: center top; }
.ul-promo-card > span:not(.ul-promo-card__play) {
    position: absolute;
    right: 28px;
    bottom: 52px;
    left: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
    gap: 8px;
    background: transparent;
    color: #ffffffbd;
    border-radius: 0;
    font-size: 50px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .18);
    text-transform: uppercase;
}

.ul-products-section { padding: 104px 0 0; }
.ul-products-section .ul-section-heading { max-width: 650px; margin: 0 auto 24px; }
.ul-products-section .ul-section-heading h2 { margin: 0 0 8px; font-size: 42px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.ul-products-section .ul-section-heading p { margin: 0; color: #514c48; font-size: 12px; line-height: 1.45; }
.ul-product-list--home { display: flex; align-items: flex-start; flex-wrap: wrap; width: 100%; gap: 8px; row-gap: 2px; }
.ul-product-list--home .ul-product-card { flex: 0 0 calc((100% - 24px) / 4); }
.ul-products-section__footer { display: flex; justify-content: center; padding-top: 30px; }

.ul-passion { display: flex; align-items: stretch; margin-top: 100px; gap: 8px; }
.ul-passion__copy { display: flex; flex: 0 0 calc((100% - 8px) * .335); flex-direction: column; justify-content: center; min-width: 0; padding: 38px 32px; background: var(--ul-cream); }
.ul-passion__copy h2 { max-width: 300px; margin: 0 0 22px; font-size: 50px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.ul-passion__copy p { max-width: 395px; margin: 0 0 28px; color: #302c29; font-size: 14px; line-height: 1.7; }
.ul-passion__copy ul { padding: 0; margin: 0 0 24px; list-style: none; }
.ul-passion__copy li { display: flex; align-items: center; margin-bottom: 16px; gap: 14px; font-size: 15px; line-height: 1.45; }
.ul-passion__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; background: #fff; border: 1px solid #ece2da; border-radius: 50%; }
.ul-passion__icon img { width: 20px; height: 20px; object-fit: contain; }
.ul-passion__copy .ul-button { align-self: flex-start; margin-top: 6px; }
.ul-passion__media { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ul-passion__media img { width: 100%; height: 100%; aspect-ratio: 1872 / 1180; object-fit: cover; object-position: center center; }

/* ---------- About ---------- */
.ul-about-page > section { width: var(--ul-shell); max-width: var(--ul-page); margin-left: auto; margin-right: auto; }
.ul-about-hero { display: flex; height: auto; aspect-ratio: 1408 / 690; gap: 8px; }
.ul-about-hero__media { position: relative; flex: 0 0 calc((100% - 8px) * .66666667); min-width: 0; overflow: hidden; }
.ul-about-hero__media > img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.ul-about-student { position: absolute; bottom: 20px; left: 32px; min-width: 290px; min-height: 31px; padding: 7px 16px; background: rgba(255,255,255,.92); border-radius: 5px; font-size: 10px; font-weight: 500; }
.ul-about-hero__copy { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 30px 32px 28px; background: var(--ul-cream); }
.ul-about-hero__copy h1 { margin: 0 0 24px; font-size: 48px; font-weight: 600; line-height: .96; letter-spacing: 0; }
.ul-about-hero__copy p { margin: 0; color: #302c29; font-size: 12px; line-height: 1.48; }
.ul-about-hero__buttons { display: flex; margin-top: auto; gap: 8px; }
.ul-about-hero__buttons .ul-button { min-width: 135px; }

.ul-about-story { min-height: 712px; padding: 20px 16px 16px; margin-top: 24px; background: var(--ul-cream); }
.ul-about-story__top { display: flex; min-height: 300px; gap: 32px; }
.ul-about-story__copy { flex: 1 1 auto; min-width: 0; padding: 6px 0 16px; }
.ul-about-story__copy h2 { margin: 0 0 16px; font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.ul-about-story__copy p { max-width: 980px; margin: 0; font-size: 12px; line-height: 1.48; }
.ul-about-story__stat { display: flex; align-items: center; justify-content: center; flex: 0 0 336px; flex-direction: column; height: 240px; padding: 20px; background: rgba(255,255,255,.65); border: 1px solid #eadfd7; }
.ul-about-story__stat > strong { color: var(--ul-brown); font-size: 70px; font-weight: 500; line-height: 1; }
.ul-about-story__stat > span { margin: 4px 0 26px; font-size: 15px; }
.ul-about-story__stat > div { display: flex; align-items: center; justify-content: center; width: 230px; height: 38px; background: #fff; gap: 8px; }
.ul-about-story__stat b { font-size: 13px; }
.ul-about-story__stat img { width: 80px; height: 16px; }
.ul-about-story__stat small { color: #8b817b; font-size: 10px; }
.ul-benefits--about { min-height: 374px; }
.ul-benefits--about .ul-benefit { min-height: 374px; }

.ul-about-mosaic { margin-top: 100px; }
.ul-about-mosaic__row { display: flex; height: auto; aspect-ratio: 1408 / 430; gap: 8px; }
.ul-about-mosaic__row + .ul-about-mosaic__row { margin-top: 8px; }
.ul-about-mosaic__copy,
.ul-about-mosaic__media--small { flex: 0 0 calc((100% - 16px) / 3); min-width: 0; }
.ul-about-mosaic__copy { padding: 30px 32px; background: var(--ul-cream); }
.ul-about-mosaic__copy h2 { margin: 0 0 18px; font-size: 38px; font-weight: 600; line-height: .98; letter-spacing: 0; }
.ul-about-mosaic__copy p { margin: 0; color: #302c29; font-size: 11px; line-height: 1.52; }
.ul-about-mosaic__copy--right { text-align: right; }
.ul-about-mosaic__media { overflow: hidden; }
.ul-about-mosaic__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ul-about-mosaic__row--bottom .ul-about-mosaic__media--small { flex: 0 0 calc((100% - 8px) * .32954545); }
.ul-about-mosaic__media--wide { flex: 1 1 auto; min-width: 0; }
.ul-about-mosaic__media--wide img { object-position: center center; }

/* ---------- Contact ---------- */
.ul-contact-page > section { width: var(--ul-shell); max-width: var(--ul-page); margin-left: auto; margin-right: auto; }
.ul-contact-panel {
    display: flex;
    align-items: stretch;
    height: auto;
    aspect-ratio: 1408 / 504;
    background-color: var(--ul-cream);
    background-image: url("../images/contact-background.webp");
    background-position: center;
    background-size: cover;
}
.ul-contact-panel__copy { display: flex; flex: 0 0 50%; flex-direction: column; min-width: 0; padding: 38px 32px 34px; }
.ul-contact-panel__copy h1 { margin: 0 0 20px; font-size: 48px; font-weight: 600; line-height: .98; letter-spacing: 0; }
.ul-contact-panel__lead { max-width: 385px; margin: 0; color: #514c48; font-size: 13px; line-height: 1.5; }
.ul-contact-methods { display: flex; flex-direction: column; margin-top: 46px; gap: 24px; }
.ul-contact-method { display: flex; align-items: center; width: max-content; max-width: 100%; gap: 18px; }
.ul-contact-method__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 54px; width: 54px; height: 54px; background: #fff; border-radius: 50%; }
.ul-contact-method__icon img { width: 30px; height: 30px; object-fit: contain; }
.ul-contact-method span:last-child { display: flex; flex-direction: column; gap: 4px; }
.ul-contact-method small { color: #5a514c; font-size: 12px; }
.ul-contact-method strong { color: var(--ul-brown); font-size: 18px; font-weight: 600; }
.ul-contact-form-card { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 auto; min-width: 0; padding: 32px 32px 32px 16px; }
.ul-contact-form { width: 100%; max-width: 652px; padding: 16px; background: #fff; border-radius: 8px; box-shadow: 0 12px 28px rgba(40,28,22,.12); }
.ul-contact-form label:not(.ul-contact-consent) { display: block; margin-bottom: 12px; }
.ul-contact-form label > span:first-child { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; }
.ul-contact-form input[type="text"],
.ul-contact-form input[type="email"],
.ul-contact-form textarea { display: block; width: 100%; padding: 0 13px; background: #fff; border: 1px solid #d8d3cd; border-radius: 6px; outline: 0; font-size: 11px; }
.ul-contact-form input[type="text"], .ul-contact-form input[type="email"] { height: 47px; }
.ul-contact-form textarea { height: 141px; padding-top: 12px; resize: vertical; }
.ul-contact-consent { display: flex; align-items: flex-start; margin: 2px 0 12px; gap: 8px; cursor: pointer; }
.ul-contact-consent input { position: absolute; opacity: 0; }
.ul-contact-consent i { position: relative; flex: 0 0 18px; width: 18px; height: 18px; border: 1px solid #a79f99; border-radius: 4px; }
.ul-contact-consent input:checked + i::after { position: absolute; top: 2px; left: 5px; width: 4px; height: 8px; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; content: ""; transform: rotate(45deg); }
.ul-contact-consent span { padding-top: 1px; font-size: 10px; line-height: 1.35; }
.ul-contact-consent b { color: #a42c24; }
.ul-contact-submit { width: 100%; height: 46px; background: #000; color: #fff; border: 1px solid #000; border-radius: 6px; font-size: 11px; }
.ul-contact-status { margin: 8px 0 0; font-size: 10px; }
.ul-contact-status.is-success { color: #1c7447; }
.ul-contact-status.is-error { color: var(--ul-danger); }
.ul-contact-story { display: flex; height: auto; aspect-ratio: 1408 / 430; margin-top: 100px; gap: 8px; }
.ul-contact-story__media { flex: 0 0 calc((100% - 8px) * .66666667); min-width: 0; overflow: hidden; }
.ul-contact-story__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.ul-contact-story__copy { flex: 1 1 auto; min-width: 0; padding: 38px 32px; background: var(--ul-cream); }
.ul-contact-story__copy h2 { margin: 0 0 84px; font-size: 38px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.ul-contact-story__copy p { margin: 0; color: #302c29; font-size: 11px; line-height: 1.48; }

/* Gift-card value section already contains the reference 100px breathing room. */
.ul-gift-page + .ul-newsletter { margin-top: 0; }

/* ---------- Gift card ---------- */
.ul-gift-page > section { width: var(--ul-shell); max-width: var(--ul-page); margin-left: auto; margin-right: auto; }
.ul-gift-hero { display: flex; height: auto; aspect-ratio: 1408 / 690; gap: 8px; }
.ul-gift-hero__copy { display: flex; flex: 0 0 35.298295%; flex-direction: column; min-width: 0; padding: 36px 32px 30px; background: var(--ul-cream); }
.ul-gift-hero__copy h1 { margin: 0 0 28px; font-size: 48px; font-weight: 600; line-height: .98; letter-spacing: 0; }
.ul-gift-hero__copy > p { max-width: 390px; margin: 0; color: #514c48; font-size: 12px; line-height: 1.48; }
.ul-gift-benefits { padding: 0; margin: 32px 0 0; list-style: none; }
.ul-gift-benefits li { display: flex; align-items: center; margin-bottom: 20px; gap: 14px; color: #514c48; font-size: 12px; }
.ul-gift-benefits img { width: 24px; height: 24px; object-fit: contain; }
.ul-gift-hero__copy .ul-button { align-self: flex-start; margin-top: auto; }
.ul-gift-hero__media { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ul-gift-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.ul-gift-steps { display: flex; align-items: stretch; height: auto; aspect-ratio: 1408 / 283; margin-top: 8px; gap: 8px; }
.ul-gift-steps article { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; padding: 26px 30px 20px; background: var(--ul-cream); }
.ul-gift-steps article > img { width: 96px; height: 72px; margin-bottom: 24px; object-fit: contain; object-position: left center; }
.ul-gift-steps h2 { margin: 0 0 10px; color: var(--ul-brown); font-size: 19px; font-weight: 600; line-height: 1.15; }
.ul-gift-steps p { max-width: 265px; margin: 0; font-size: 11px; line-height: 1.45; }
.ul-gift-values { min-height: 568px; padding-top: 94px; text-align: center; }
.ul-gift-values > h2 { margin: 0 0 10px; font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.ul-gift-values > p { margin: 0 0 42px; color: #514c48; font-size: 11px; }
.ul-gift-value-list { display: flex; align-items: stretch; width: 100%; gap: 8px; }
.ul-gift-value { display: flex; align-items: center; justify-content: center; flex: 1 1 0; flex-direction: column; height: 156px; padding: 16px; background: #fff; border: 1px solid var(--ul-brown); border-radius: 7px; color: var(--ul-brown); }
.ul-gift-value.is-active { background: var(--ul-brown); color: #fff; }
.ul-gift-value strong { font-size: 38px; font-weight: 600; line-height: 1.05; }
.ul-gift-value span { margin-top: 6px; font-size: 12px; }
.ul-gift-add { display: inline-flex; align-items: center; justify-content: center; width: calc((100% - 24px) / 4); min-width: 260px; height: 44px; margin-top: 34px; gap: 10px; background: #000; color: #fff; border: 1px solid #000; border-radius: 6px; font-size: 12px; }
.ul-gift-add:disabled { opacity: .45; cursor: not-allowed; }
.ul-gift-add img { width: 16px; height: 16px; filter: brightness(0) invert(1); }

@media (min-width: 1441px) {
    .ul-hero__content h1 { font-size: 60px; }
    .ul-about__copy h2 { font-size: 44px; }
    .ul-about-hero__copy h1,
    .ul-contact-panel__copy h1,
    .ul-gift-hero__copy h1 { font-size: 52px; }
}

@media (max-width: 1180px) {
    .ul-hero { aspect-ratio: auto; }
    .ul-hero__copy { flex-basis: 40%; min-height: 640px; }
    .ul-hero__content h1 { font-size: 46px; }
    .ul-about__intro { flex-direction: column; }
    .ul-about__stat { flex-basis: auto; width: 100%; min-height: 210px; }
    .ul-benefits { flex-wrap: wrap; gap: 1px; }
    .ul-benefit { flex-basis: calc(50% - 1px); }
    .ul-about-hero, .ul-contact-panel, .ul-gift-hero { aspect-ratio: auto; min-height: 620px; }
    .ul-about-hero__media { flex-basis: 60%; }
    .ul-contact-panel__copy { flex-basis: 42%; }
    .ul-contact-form-card { flex-basis: 58%; }
    .ul-about-mosaic__copy h2 { font-size: 32px; }
}

@media (max-width: 900px) {
    .ul-hero { flex-direction: column; }
    .ul-hero__copy, .ul-hero__media { width: 100%; flex-basis: auto; }
    .ul-hero__copy { min-height: 540px; }
    .ul-hero__media { height: 620px; }
    .ul-color-card { flex-basis: calc((100% - 8px) / 2); }
    .ul-promo-cards { flex-wrap: wrap; }
    .ul-promo-card { flex-basis: calc(50% - 4px); }
    .ul-promo-card:last-child { flex-basis: 100%; }
    .ul-product-list--home .ul-product-card { flex-basis: calc((100% - 8px) / 2); }
    .ul-passion { flex-direction: column; }
    .ul-passion__copy, .ul-passion__media { width: 100%; flex-basis: auto; }
    .ul-passion__media { aspect-ratio: 1872 / 1180; }

    .ul-about-hero { flex-direction: column; min-height: 0; aspect-ratio: auto; }
    .ul-about-hero__media, .ul-about-hero__copy { width: 100%; flex-basis: auto; }
    .ul-about-hero__media { aspect-ratio: 936 / 690; }
    .ul-about-hero__copy { min-height: 470px; }
    .ul-about-story__top { flex-direction: column; }
    .ul-about-story__stat { width: 100%; flex-basis: auto; }
    .ul-about-mosaic__row { flex-wrap: wrap; height: auto; aspect-ratio: auto; }
    .ul-about-mosaic__copy, .ul-about-mosaic__media--small { flex-basis: calc(50% - 4px); min-height: 430px; }
    .ul-about-mosaic__copy--right { flex-basis: 100%; text-align: left; }
    .ul-about-mosaic__row--bottom .ul-about-mosaic__media--small { flex-basis: calc(40% - 4px); }
    .ul-about-mosaic__media--wide { flex-basis: calc(60% - 4px); }

    .ul-contact-panel { flex-direction: column; min-height: 0; aspect-ratio: auto; background-size: auto 504px; background-repeat: no-repeat; background-position: top center; }
    .ul-contact-panel__copy, .ul-contact-form-card { width: 100%; flex-basis: auto; }
    .ul-contact-panel__copy { min-height: 460px; }
    .ul-contact-form-card { padding: 20px; }
    .ul-contact-form { max-width: none; }
    .ul-contact-story { flex-direction: column; height: auto; aspect-ratio: auto; }
    .ul-contact-story__media, .ul-contact-story__copy { width: 100%; flex-basis: auto; }
    .ul-contact-story__media { aspect-ratio: 936 / 430; }
    .ul-contact-story__copy { min-height: 360px; }

    .ul-gift-hero { flex-direction: column; min-height: 0; aspect-ratio: auto; }
    .ul-gift-hero__copy, .ul-gift-hero__media { width: 100%; flex-basis: auto; }
    .ul-gift-hero__copy { min-height: 530px; }
    .ul-gift-hero__media { aspect-ratio: 903 / 690; }
    .ul-gift-steps { flex-wrap: wrap; height: auto; aspect-ratio: auto; }
    .ul-gift-steps article { flex-basis: calc(50% - 4px); min-height: 283px; }
    .ul-gift-value-list { flex-wrap: wrap; }
    .ul-gift-value { flex-basis: calc(50% - 4px); }
    .ul-gift-add { width: calc(50% - 4px); }
}

@media (max-width: 767px) {
    .ul-hero__copy { min-height: 470px; padding: 18px 20px 24px; }
    .ul-hero__categories { gap: 18px; }
    .ul-hero__content { margin-top: 54px; }
    .ul-hero__content h1 { font-size: 40px; letter-spacing: 0; }
    .ul-hero__media { height: 500px; }
    .ul-student-badge { right: 14px; bottom: 14px; left: 14px; }
    .ul-colors-section { padding: 62px 0 66px; }
    .ul-colors-section .ul-section-heading h2,
    .ul-products-section .ul-section-heading h2 { font-size: 32px; }
    .ul-color-card { flex-basis: 86%; }
    .ul-slider-arrow { width: 38px; height: 38px; }
    .ul-about { padding: 20px 12px 12px; }
    .ul-about__copy h2 { font-size: 31px; }
    .ul-benefit { flex-basis: 100%; min-height: 300px; padding: 30px 24px; }
    .ul-benefit h3 { margin-bottom: 24px; }
    .ul-promo-card, .ul-promo-card:last-child { flex-basis: 100%; }
    .ul-products-section { padding-top: 64px; }
    .ul-product-list--home .ul-product-card { flex-basis: calc((100% - 8px) / 2); }
    .ul-product-card__content { min-height: 92px; padding: 8px 6px; }
    .ul-product-card__title, .ul-product-card__price { font-size: 13px; }
    .ul-passion { margin-top: 64px; }
    .ul-passion__copy { padding: 28px 20px; }
    .ul-passion__copy h2 { font-size: 38px; }

    .ul-about-hero__copy, .ul-gift-hero__copy, .ul-contact-panel__copy { padding: 28px 20px; }
    .ul-about-hero__copy h1, .ul-contact-panel__copy h1, .ul-gift-hero__copy h1 { font-size: 38px; letter-spacing: 0; }
    .ul-about-student { right: 14px; bottom: 14px; left: 14px; min-width: 0; text-align: center; }
    .ul-about-story { padding: 20px 12px 12px; }
    .ul-about-story__copy h2 { font-size: 31px; }
    .ul-benefits--about .ul-benefit { min-height: 300px; }
    .ul-about-mosaic { margin-top: 64px; }
    .ul-about-mosaic__copy, .ul-about-mosaic__media--small, .ul-about-mosaic__copy--right,
    .ul-about-mosaic__row--bottom .ul-about-mosaic__media--small, .ul-about-mosaic__media--wide { flex-basis: 100%; min-height: 360px; }
    .ul-about-mosaic__copy { padding: 28px 20px; }
    .ul-about-mosaic__copy h2 { font-size: 31px; }

    .ul-contact-panel__copy { min-height: 420px; }
    .ul-contact-methods { margin-top: 34px; }
    .ul-contact-story { margin-top: 64px; }
    .ul-contact-story__copy { min-height: 310px; padding: 28px 20px; }
    .ul-contact-story__copy h2 { margin-bottom: 38px; font-size: 31px; }

    .ul-gift-hero__copy { min-height: 480px; }
    .ul-gift-steps article { flex-basis: 100%; min-height: 250px; padding: 24px 20px; }
    .ul-gift-values { min-height: 0; padding-top: 64px; }
    .ul-gift-values > h2 { font-size: 32px; }
    .ul-gift-value { flex-basis: 100%; height: 120px; }
    .ul-gift-value strong { font-size: 31px; }
    .ul-gift-add { width: 100%; min-width: 0; }
}

/* 3.1 home refinements - client-approved colour order and whole silhouettes. */
.ul-color-card{position:relative}.ul-product-card--home-curated .ul-product-card__media{background:#efefef}.ul-product-card--home-curated .ul-product-card__image{object-position:center top}

/* ================================================================
   Uniforms Love 3.4.0 — production home refinements
   ================================================================ */
.ul-home .ul-hero {
    height: calc(100svh - 102px);
    min-height: 680px;
    aspect-ratio: auto;
    gap: 8px;
    overflow: hidden;
    border-radius: 7px;
}
body.admin-bar .ul-home .ul-hero {
    height: calc(100svh - 134px);
}
.ul-home .ul-hero__copy {
    flex: 0 0 calc((100% - 8px) * .32954545);
    padding: 24px 30px 28px;
    border-radius: 7px 0 0 7px;
}
.ul-home .ul-hero__media {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 0 7px 7px 0;
    background: #f1eee9;
}
.ul-home .ul-hero__media > img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
}
.ul-home .ul-hero__content {
    margin-top: 62px;
}
.ul-home .ul-hero__content h1 {
    max-width: 410px;
    margin-bottom: 24px;
    font-size: 56px;
    line-height: .96;
    letter-spacing: 0;
}
.ul-home .ul-hero__content p {
    max-width: 400px;
    color: #49433f;
    font-size: 13px;
    line-height: 1.55;
}
.ul-home .ul-student-badge {
    right: 24px;
    bottom: 22px;
    min-height: 38px;
    padding: 0 18px;
    font-size: 11px;
    box-shadow: 0 8px 28px rgba(54, 41, 34, .08);
}
@media (min-width: 1441px) {
    .ul-home .ul-hero__content h1 { font-size: 60px; }
    .ul-home .ul-hero__content p { font-size: 14px; }
}
@media (max-width: 1100px) {
    .ul-home .ul-hero { height: auto; aspect-ratio: auto; min-height: 650px; }
    .ul-home .ul-hero__copy { flex-basis: 40%; }
    .ul-home .ul-hero__content h1 { font-size: 46px; letter-spacing: 0; }
}
@media (max-width: 900px) {
    .ul-home .ul-hero { min-height: 0; border-radius: 0; }
    .ul-home .ul-hero__copy,
    .ul-home .ul-hero__media { border-radius: 7px; }
    .ul-home .ul-hero__copy { min-height: 500px; }
    .ul-home .ul-hero__media { height: 620px; }
}
@media (max-width: 767px) {
    .ul-home .ul-hero__copy { min-height: 470px; padding: 20px 20px 24px; }
    .ul-home .ul-hero__content { margin-top: 48px; }
    .ul-home .ul-hero__content h1 { font-size: 40px; line-height: .98; letter-spacing: 0; }
    .ul-home .ul-hero__content p { font-size: 12px; }
    .ul-home .ul-hero__media { height: 500px; }
    .ul-home .ul-student-badge { right: 12px; bottom: 12px; left: 12px; }
}

/* ================================================================
   Uniforms Love 3.6.0 - home art direction and responsive polish
   ================================================================ */
.ul-home .ul-hero {
    border-radius: 8px;
}
.ul-home .ul-hero__copy {
    border-radius: 8px 0 0 8px;
}
.ul-home .ul-hero__media {
    border-radius: 0 8px 8px 0;
}
.ul-home .ul-hero__media > img {
    object-position: center top;
}
.ul-home .ul-hero__categories {
    gap: 8px;
}
.ul-home .ul-hero__categories a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 4px 18px rgba(52, 39, 32, .04);
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.ul-home .ul-hero__categories a:hover,
.ul-home .ul-hero__categories a:focus-visible {
    border-color: rgba(140, 106, 93, .32);
    box-shadow: 0 7px 22px rgba(52, 39, 32, .08);
    transform: translateY(-1px);
}

.ul-home .ul-colors-section {
    padding-top: 112px;
    padding-bottom: 116px;
}
.ul-home .ul-colors-section .ul-section-heading {
    max-width: 1160px;
    margin-bottom: 30px;
}
.ul-home .ul-colors-section .ul-section-heading h2 {
    margin-bottom: 16px;
    font-size: 60px;
    line-height: .98;
    letter-spacing: 0;
}
.ul-home .ul-colors-section .ul-section-heading p {
    max-width: 1120px;
    color: #514c48;
    font-size: 18px;
    line-height: 1.5;
}
.ul-home .ul-products-section .ul-section-heading {
    max-width: 1160px;
    margin-bottom: 30px;
}
.ul-home .ul-products-section .ul-section-heading h2 {
    margin: 0 0 16px;
    font-size: 60px;
    line-height: .98;
    letter-spacing: 0;
}
.ul-home .ul-products-section .ul-section-heading p {
    max-width: 1120px;
    color: #514c48;
    font-size: 18px;
    line-height: 1.5;
}
.ul-home .ul-color-card {
    border-radius: 8px;
}
.ul-home .ul-color-card img {
    aspect-ratio: 928 / 1405;
    object-fit: cover;
    object-position: center top;
}
.ul-home .ul-color-card__label {
    position: absolute;
    right: 26px;
    bottom: 240px;
    left: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
    background: transparent;
    color: #ffffffbd;
    border-radius: 0;
    font-size: 50px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .18);
    text-transform: uppercase;
}

.ul-home .ul-promo-cards {
    gap: 8px;
}
.ul-home .ul-promo-card {
    border-radius: 8px;
    background: #ece9e6;
}
.ul-home .ul-promo-card > span:not(.ul-promo-card__play) {
    right: 26px;
    bottom: 240px;
    left: 26px;
}
.ul-home .ul-promo-card > .ul-promo-card__play {
    position: absolute;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 94px;
    height: 94px;
    padding: 0;
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(255, 255, 255, .94);
    border-radius: 50%;
    box-shadow: 0 14px 42px rgba(0, 0, 0, .16), inset 0 0 0 8px rgba(255, 255, 255, .22);
    transform: translate(-50%, -50%);
    transition: background-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.ul-home .ul-promo-card > .ul-promo-card__play:hover,
.ul-home .ul-promo-card > .ul-promo-card__play:focus-visible {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 16px 46px rgba(0, 0, 0, .2), inset 0 0 0 8px rgba(255, 255, 255, .3);
}
.ul-home .ul-promo-card__play-icon {
    width: 0;
    height: 0;
    margin-left: 6px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #111;
}
.ul-home .ul-promo-card.is-playing > .ul-promo-card__play {
    opacity: 0;
    pointer-events: none;
}

.ul-home .ul-product-card__media {
    border-radius: 8px;
}
.ul-home .ul-product-card__image,
.ul-home .ul-product-card__media > img {
    object-position: center top;
}

@media (min-width: 1441px) {
    .ul-home .ul-hero__content p { font-size: 17px; }
    .ul-home .ul-colors-section .ul-section-heading h2,
    .ul-home .ul-products-section .ul-section-heading h2 { font-size: 66px; }
    .ul-home .ul-colors-section .ul-section-heading p,
    .ul-home .ul-products-section .ul-section-heading p { font-size: 19px; }
    .ul-home .ul-color-card__label,
    .ul-home .ul-promo-card > span:not(.ul-promo-card__play) {
        font-size: 60px;
        letter-spacing: 7px;
    }
}

@media (max-width: 1180px) {
    .ul-home .ul-colors-section { padding-top: 92px; padding-bottom: 96px; }
    .ul-home .ul-colors-section .ul-section-heading h2,
    .ul-home .ul-products-section .ul-section-heading h2 { font-size: 52px; }
    .ul-home .ul-colors-section .ul-section-heading p,
    .ul-home .ul-products-section .ul-section-heading p { font-size: 17px; }
    .ul-home .ul-color-card__label { bottom: 30px; font-size: 44px; }
    .ul-home .ul-promo-card > span:not(.ul-promo-card__play) { bottom: 30px; font-size: 44px; }
}

@media (max-width: 900px) {
    .ul-home .ul-hero__copy,
    .ul-home .ul-hero__media { border-radius: 8px; }
    .ul-home .ul-hero__categories a { min-height: 38px; padding: 0 13px; font-size: 14px; }
    .ul-home .ul-colors-section { padding-top: 78px; padding-bottom: 82px; }
    .ul-home .ul-colors-section .ul-section-heading h2,
    .ul-home .ul-products-section .ul-section-heading h2 { font-size: 46px; }
    .ul-home .ul-colors-section .ul-section-heading p,
    .ul-home .ul-products-section .ul-section-heading p { font-size: 16px; }
    .ul-home .ul-color-card__label,
    .ul-home .ul-promo-card > span:not(.ul-promo-card__play) { font-size: 40px; }
}

@media (max-width: 767px) {
    .ul-home .ul-hero__categories { gap: 6px; }
    .ul-home .ul-hero__categories a { min-height: 36px; padding: 0 11px; font-size: 13px; border-radius: 9px; }
    .ul-home .ul-hero__media > img { object-position: 55% top; }
    .ul-home .ul-colors-section { padding-top: 66px; padding-bottom: 70px; }
    .ul-home .ul-colors-section .ul-section-heading,
    .ul-home .ul-products-section .ul-section-heading { padding: 0 16px; margin-bottom: 22px; }
    .ul-home .ul-colors-section .ul-section-heading h2,
    .ul-home .ul-products-section .ul-section-heading h2 { font-size: 40px; letter-spacing: 0; }
    .ul-home .ul-colors-section .ul-section-heading p,
    .ul-home .ul-products-section .ul-section-heading p { font-size: 15px; }
    .ul-home .ul-color-card__label { right: 18px; bottom: 24px; left: 18px; font-size: 38px; letter-spacing: 0; }
    .ul-home .ul-promo-card > span:not(.ul-promo-card__play) { right: 20px; bottom: 26px; left: 20px; font-size: 38px; letter-spacing: 0; }
    .ul-home .ul-promo-card > .ul-promo-card__play { width: 78px; height: 78px; }
}

@media (max-width: 520px) {
    .ul-home .ul-hero__categories a { min-height: 34px; padding: 0 10px; font-size: 12px; }
    .ul-home .ul-colors-section .ul-section-heading h2,
    .ul-home .ul-products-section .ul-section-heading h2 { font-size: 34px; letter-spacing: 0; }
    .ul-home .ul-colors-section .ul-section-heading p,
    .ul-home .ul-products-section .ul-section-heading p { font-size: 14px; }
    .ul-home .ul-color-card__label { font-size: 34px; }
    .ul-home .ul-promo-card > span:not(.ul-promo-card__play) { font-size: 34px; }
}

/* 4.9.0 - home media alignment and brand system refinements */
.ul-home .ul-promo-card--video > video {
    object-position: center 42%;
}

.ul-404 {
    width: var(--ul-shell);
    max-width: var(--ul-page);
    margin: 0 auto;
    padding: 34px 0 80px;
}
.ul-404__panel {
    display: flex;
    min-height: 620px;
    gap: 8px;
}
.ul-404__copy,
.ul-404__media {
    flex: 1 1 50%;
    min-width: 0;
    border-radius: 8px;
    overflow: hidden;
}
.ul-404__copy {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 54px 58px;
    background: var(--ul-cream);
}
.ul-404__eyebrow {
    color: var(--ul-brown);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
}
.ul-404__number {
    margin: 18px 0 2px;
    color: var(--ul-brown);
    font-size: clamp(88px, 9vw, 156px);
    font-weight: 500;
    line-height: .88;
}
.ul-404 h1 {
    max-width: 600px;
    margin: 20px 0 16px;
    font-size: clamp(36px, 4.1vw, 66px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: 0;
}
.ul-404__copy p {
    max-width: 620px;
    margin: 0;
    color: #514c48;
    font-size: 16px;
    line-height: 1.65;
}
.ul-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 34px;
}
.ul-404__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.ul-404__links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 32px;
    padding: 28px 20px 0;
}
.ul-404__links a {
    font-size: 14px;
    font-weight: 500;
}
@media (max-width: 900px) {
    .ul-404__panel { min-height: 0; flex-direction: column; }
    .ul-404__copy { padding: 38px 28px; }
    .ul-404__media { min-height: 420px; }
}