:root { color-scheme: light; font-family: "Segoe UI", Arial, sans-serif; color: #242a26; background: #f7f7f3; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible { outline: 3px solid #436c50; outline-offset: 5px; }
.gallery { width: min(100%, 1536px); padding: 30px 44px 20px; margin: auto; }
.gallery-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 25px; border-bottom: 1px solid #d5d9d0; }
.gallery-brand { font-size: 26px; line-height: 1; font-weight: 750; letter-spacing: -.07em; text-decoration: none; }
.gallery-brand span { color: #82977c; padding-inline: .04em; }
.study-label { font-size: 9px; letter-spacing: .13em; color: #8b9287; }
.gallery-intro { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 50px 0 40px; }
.eyebrow { margin: 0 0 16px; font-size: 10px; letter-spacing: .1em; color: #7c8979; }
h1 { margin: 0; font-size: clamp(45px, 5.2vw, 74px); font-weight: 550; letter-spacing: -.07em; line-height: 1.04; }
h1 span { color: #7c8979; }
.gallery-note { padding-bottom: 5px; }
.gallery-note p { font-size: 15px; margin: 0 0 20px; line-height: 1.6; color: #6d786a; }
.domain-note { display: inline-block; font-size: 10px; padding: 8px 11px; border: 1px solid #d5d9d0; border-radius: 99px; color: #737f70; }
.design-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 45px 24px; }
.new-design-link { display: block; width: fit-content; margin-bottom: 15px; font-size: 12px; color: #355d3e; }
.new-number { color: #355d3e; font-size: 8px; font-weight: 700; white-space: nowrap; }
.design-card { scroll-margin-top: 24px; }
.design-card { min-width: 0; }
.design-preview { display: block; position: relative; overflow: hidden; aspect-ratio: 1.18; border: 1px solid #242a2615; border-radius: 10px; background: #e8eae2; text-decoration: none; }
.design-preview iframe { display: block; position: absolute; inset: 0; width: 300%; height: 300%; border: 0; transform: scale(.333333333); transform-origin: top left; pointer-events: none; }
.preview-cta { display: inline-flex; align-items: center; position: absolute; bottom: 16px; right: 16px; min-height: 35px; padding: 8px 13px; border-radius: 99px; font-size: 11px; font-weight: 600; color: #242a26; background: #fff; box-shadow: 0 2px 14px #0002; opacity: 0; transform: translateY(5px); transition: opacity .16s, transform .16s; }
.design-preview:hover .preview-cta, .design-preview:focus-visible .preview-cta { opacity: 1; transform: none; }
.card-heading { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.design-number { font-size: 10px; color: #8a9485; font-variant-numeric: tabular-nums; }
h2 { font-size: 20px; font-weight: 600; letter-spacing: -.055em; margin: 0; }
.swatches { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.swatches i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #242a2620; }
.design-description { font-size: 12px; line-height: 1.8; color: #7c8576; margin: 12px 0 19px; max-width: 330px; min-height: 44px; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid #d5d9d0; }
.card-bottom > span { font-size: 8px; letter-spacing: .07em; color: #8a9485; }
.card-bottom a { display: inline-flex; align-items: center; justify-content: end; min-height: 38px; gap: 8px; font-size: 11px; text-decoration: none; white-space: nowrap; }
.card-bottom a:hover { text-decoration: underline; }
.card-bottom a span { font-size: 16px; }
.gallery-footer { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-top: 38px; padding-top: 18px; border-top: 1px solid #d5d9d0; color: #92998c; font-size: 10px; }
.gallery-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap; }
.gallery-footer a:hover { text-decoration: underline; }
@media (max-width: 1050px) and (min-width: 761px) {
  .gallery { padding-inline: 26px; }
  .design-grid { gap: 17px; }
  .card-heading { gap: 7px; }
  h2 { font-size: 17px; }
  .swatches { gap: 3px; }
  .swatches i { width: 9px; height: 9px; }
  .card-bottom { flex-wrap: wrap; }
  .design-description { min-height: 66px; }
}
@media (max-width: 760px) {
  .gallery { padding: 24px 22px 20px; max-width: 580px; }
  .gallery-header { padding-bottom: 22px; }
  .gallery-brand { font-size: 25px; }
  .study-label { font-size: 7px; letter-spacing: .06em; }
  .gallery-intro { display: block; padding: 36px 0; }
  h1 { font-size: clamp(47px, 11vw, 65px); }
  .gallery-note { display: flex; justify-content: space-between; align-items: end; gap: 15px; padding: 24px 0 0; }
  .gallery-note p { margin: 0; font-size: 12px; }
  .domain-note { font-size: 8px; padding: 7px 9px; }
  .design-grid { grid-template-columns: 1fr; gap: 38px; }
  .design-preview { aspect-ratio: 1.28; }
  .preview-cta { opacity: 1; transform: none; bottom: 12px; right: 12px; }
  .card-heading { margin-top: 17px; }
  .design-description { margin: 10px 0 13px; min-height: 0; max-width: none; }
  .card-bottom { padding-top: 10px; }
  .gallery-footer { font-size: 9px; margin-top: 27px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }