.hero { padding: 66px 0 57px; }
.hero-grid { display: grid; grid-template-columns: 1.06fr 1fr; gap: 42px; align-items: center; }
.hero-copy { padding: 22px 0; }
.hero h1 { font-size: clamp(50px, 5.5vw, 81px); line-height: 1.055; letter-spacing: -.065em; }
.hero h1 span { color: var(--blue); display: block; }
.hero-copy > p:not(.eyebrow) { color: var(--muted); max-width: 350px; font-size: 14px; line-height: 1.85; margin: 27px 0 30px; }
.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-actions .text-link { border: none; padding: 14px 0; gap: 15px; }
.hero-note { border-top: 1px solid var(--line); margin-top: 42px; padding-top: 19px; display: flex; align-items: center; gap: 18px; }
.hero-note strong { font-size: 28px; font-weight: 450; letter-spacing: -.05em; }
.hero-note span { font-size: 10px; color: var(--muted); max-width: 120px; line-height: 1.5; }
.hero-gallery { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 235px 225px; gap: 13px; position: relative; }
.hero-frame { overflow: hidden; position: relative; background: var(--pale); }
.hero-frame:first-child { grid-row: span 2; }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.hero-frame:hover img { transform: scale(1.035); }
.hero-frame.is-focused img { transform: scale(1.035); }
.hero-frame:nth-child(2) img { object-fit: contain; background: #f1eee8; }
.hero-frame:nth-child(3) img { object-fit: contain; background: white; }
.frame-label { position: absolute; bottom: 13px; left: 13px; right: 13px; background: rgb(255 255 255 / 94%); padding: 10px 12px; font-size: 10px; display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.hero-foot { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 46px; padding-top: 18px; font-size: 9px; text-transform: uppercase; letter-spacing: .17em; color: var(--muted); }
.trade-strip { background: var(--navy); color: white; }
.trade-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 27px; }
.trade-strip p { font-size: 11px; color: #b7c8e8; }
.trade-words { display: flex; gap: 34px; align-items: center; font-size: 20px; letter-spacing: -.025em; }
.trade-words i { font-style: normal; font-size: 10px; color: #77b8eb; }
.home-collections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px 26px; }
.home-collections .collection-cover { aspect-ratio: 1.18; }
.more-collections { margin-top: 42px; display: flex; justify-content: center; }
.company-section { background: var(--pale); }
.company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.company-grid h2 { max-width: 460px; }
.company-copy > p { color: var(--muted); font-size: 15px; line-height: 1.95; margin-bottom: 28px; }
.activity-list { padding: 0; margin: 0 0 32px; list-style: none; }
.activity-list li { display: flex; gap: 22px; border-top: 1px solid #d5dde2; padding: 16px 0; font-size: 13px; }
.activity-list span { color: var(--blue); font-size: 10px; padding-top: 2px; }
.collection-directory { margin-top: 45px; border-top: 1px solid var(--line); padding-top: 25px; display: flex; gap: 12px 24px; flex-wrap: wrap; }
.collection-directory a { color: var(--muted); font-size: 11px; }
.collection-directory a:hover { color: var(--blue); }
@media (max-width: 1050px) { .hero-grid { gap: 25px; } .hero-gallery { grid-template-rows: 210px 210px; } .hero h1 { font-size: 59px; } .company-grid { gap: 45px; } }
@media (max-width: 800px) { .hero { padding-top: 30px; } .hero-grid { grid-template-columns: 1fr; gap: 32px; } .hero h1 { font-size: clamp(51px, 9vw, 76px); } .hero-copy > p:not(.eyebrow) { max-width: 450px; } .hero-note { margin-top: 27px; } .hero-gallery { grid-template-rows: 220px 220px; } .hero-foot { margin-top: 28px; } .trade-strip .wrap { align-items: start; flex-direction: column; gap: 12px; } .home-collections { grid-template-columns: repeat(2, minmax(0, 1fr)); } .company-grid { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 480px) { .hero-gallery { grid-template-rows: 168px 168px; gap: 8px; } .frame-label { bottom: 8px; left: 8px; right: 8px; font-size: 9px; padding: 8px; } .hero-foot { font-size: 8px; gap: 18px; } .trade-words { gap: 18px; font-size: 18px; } .home-collections { gap: 27px 15px; } .cover-count { left: 9px; top: 9px; font-size: 8px; } .cover-open { right: 9px; bottom: 9px; width: 30px; height: 30px; } .collection-info { gap: 7px; } }