:root {
  font-family: Aptos, 'Segoe UI', Calibri, Arial, sans-serif;
  color: #1d2739;
  background: #f6faff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(110deg, #fbfdff, #f1f7fe); }
a { color: #2167a8; text-underline-offset: 5px; }
a:focus-visible { outline: 3px solid #2167a8; outline-offset: 6px; }
.skip-link { position: fixed; left: 20px; top: -100px; z-index: 10; padding: 12px; background: white; }
.skip-link:focus { top: 16px; }
.page { width: min(1200px, calc(100% - 96px)); margin: auto; min-height: 100svh; display: flex; flex-direction: column; }
header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 36px; }
.brand { display: block; flex-shrink: 0; }
.brand img { display: block; width: 190px; height: auto; }
main { flex: 1; display: grid; grid-template-columns: .88fr 1.12fr; gap: 70px; align-items: center; padding-block: 70px 90px; }
.artwork { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.artwork::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; background: radial-gradient(circle, #deebf9 0%, #eef5fb66 55%, transparent 72%); }
.logo-puzzle { position: relative; width: 76%; aspect-ratio: 1; }
.logo-puzzle img { position: absolute; inset: 0; width: 100%; height: auto; }
.logo-complete { animation: complete 80s linear forwards; }
.piece { animation-duration: 80s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-timing-function: linear; }
/* Assemble at 0–10s, 35–45s and 70–80s; hold 20s between cycles.
   After the third assembly, keep the original full PNG permanently visible. */
@keyframes complete {
  0%, 12.499% { opacity: 0; }
  12.5%, 37.499% { opacity: 1; }
  37.5%, 56.249% { opacity: 0; }
  56.25%, 81.249% { opacity: 1; }
  81.25%, 99.999% { opacity: 0; }
  100% { opacity: 1; }
}
.piece-1 { clip-path: polygon(35% 0%, 50% 0%, 50% 34%, 35% 34%); animation-name: chunk-1; }
@keyframes chunk-1 {
  0%, 0.00000% { transform: translate(-11.5%, -30%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  3.50000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 43.75000% { transform: translate(-11.5%, -30%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  47.25000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 87.50000% { transform: translate(-11.5%, -30%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  91.00000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.piece-2 { clip-path: polygon(0% 34%, 35% 34%, 35% 50%, 0% 50%); animation-name: chunk-2; }
@keyframes chunk-2 {
  0%, 0.60000% { transform: translate(-34.5%, -10%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  4.10000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 44.35000% { transform: translate(-34.5%, -10%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  47.85000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 88.10000% { transform: translate(-34.5%, -10%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  91.60000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.piece-3 { clip-path: polygon(50% 50%, 65% 50%, 65% 66%, 50% 66%); animation-name: chunk-3; }
@keyframes chunk-3 {
  0%, 1.20000% { transform: translate(11.5%, 10%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  4.70000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 44.95000% { transform: translate(11.5%, 10%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  48.45000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 88.70000% { transform: translate(11.5%, 10%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  92.20000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.piece-4 { clip-path: polygon(35% 66%, 50% 66%, 50% 100%, 35% 100%); animation-name: chunk-4; }
@keyframes chunk-4 {
  0%, 1.80000% { transform: translate(-11.5%, 30%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  5.30000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 45.55000% { transform: translate(-11.5%, 30%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  49.05000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 89.30000% { transform: translate(-11.5%, 30%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  92.80000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.piece-5 { clip-path: polygon(65% 34%, 100% 34%, 100% 50%, 65% 50%); animation-name: chunk-5; }
@keyframes chunk-5 {
  0%, 2.40000% { transform: translate(34.5%, -10%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  5.90000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 46.15000% { transform: translate(34.5%, -10%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  49.65000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 89.90000% { transform: translate(34.5%, -10%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  93.40000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.piece-6 { clip-path: polygon(0% 50%, 35% 50%, 35% 66%, 0% 66%); animation-name: chunk-6; }
@keyframes chunk-6 {
  0%, 3.00000% { transform: translate(-34.5%, 10%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  6.50000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 46.75000% { transform: translate(-34.5%, 10%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  50.25000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 90.50000% { transform: translate(-34.5%, 10%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  94.00000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.piece-7 { clip-path: polygon(50% 0%, 65% 0%, 65% 34%, 50% 34%); animation-name: chunk-7; }
@keyframes chunk-7 {
  0%, 3.60000% { transform: translate(11.5%, -30%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  7.10000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 47.35000% { transform: translate(11.5%, -30%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  50.85000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 91.10000% { transform: translate(11.5%, -30%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  94.60000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.piece-8 { clip-path: polygon(0% 66%, 35% 66%, 35% 100%, 0% 100%); animation-name: chunk-8; }
@keyframes chunk-8 {
  0%, 4.20000% { transform: translate(-34.5%, 30%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  7.70000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 47.95000% { transform: translate(-34.5%, 30%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  51.45000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 91.70000% { transform: translate(-34.5%, 30%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  95.20000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.piece-9 { clip-path: polygon(35% 34%, 50% 34%, 50% 50%, 35% 50%); animation-name: chunk-9; }
@keyframes chunk-9 {
  0%, 4.80000% { transform: translate(-11.5%, -10%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  8.30000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 48.55000% { transform: translate(-11.5%, -10%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  52.05000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 92.30000% { transform: translate(-11.5%, -10%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  95.80000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.piece-10 { clip-path: polygon(65% 50%, 100% 50%, 100% 66%, 65% 66%); animation-name: chunk-10; }
@keyframes chunk-10 {
  0%, 5.40000% { transform: translate(34.5%, 10%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  8.90000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 49.15000% { transform: translate(34.5%, 10%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  52.65000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 92.90000% { transform: translate(34.5%, 10%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  96.40000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.piece-11 { clip-path: polygon(50% 66%, 65% 66%, 65% 100%, 50% 100%); animation-name: chunk-11; }
@keyframes chunk-11 {
  0%, 6.00000% { transform: translate(11.5%, 30%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  9.50000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 49.75000% { transform: translate(11.5%, 30%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  53.25000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 93.50000% { transform: translate(11.5%, 30%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  97.00000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.piece-12 { clip-path: polygon(50% 34%, 65% 34%, 65% 50%, 50% 50%); animation-name: chunk-12; }
@keyframes chunk-12 {
  0%, 6.60000% { transform: translate(11.5%, -10%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  10.10000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 50.35000% { transform: translate(11.5%, -10%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  53.85000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 94.10000% { transform: translate(11.5%, -10%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  97.60000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.piece-13 { clip-path: polygon(35% 50%, 50% 50%, 50% 66%, 35% 66%); animation-name: chunk-13; }
@keyframes chunk-13 {
  0%, 7.20000% { transform: translate(-11.5%, 10%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  10.70000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 50.95000% { transform: translate(-11.5%, 10%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  54.45000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 94.70000% { transform: translate(-11.5%, 10%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  98.20000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.piece-14 { clip-path: polygon(0% 0%, 35% 0%, 35% 34%, 0% 34%); animation-name: chunk-14; }
@keyframes chunk-14 {
  0%, 7.80000% { transform: translate(-34.5%, -30%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  11.30000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 51.55000% { transform: translate(-34.5%, -30%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  55.05000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 95.30000% { transform: translate(-34.5%, -30%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  98.80000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.piece-15 { clip-path: polygon(65% 0%, 100% 0%, 100% 34%, 65% 34%); animation-name: chunk-15; }
@keyframes chunk-15 {
  0%, 8.40000% { transform: translate(34.5%, -30%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  11.90000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 52.15000% { transform: translate(34.5%, -30%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  55.65000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 95.90000% { transform: translate(34.5%, -30%) rotate(-12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  99.40000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.piece-16 { clip-path: polygon(65% 66%, 100% 66%, 100% 100%, 65% 100%); animation-name: chunk-16; }
@keyframes chunk-16 {
  0%, 9.00000% { transform: translate(34.5%, 30%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  12.50000%, 12.499% { transform: none; opacity: 1; }
  12.5%, 37.499% { transform: none; opacity: 0; }
  37.5% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42.5%, 52.75000% { transform: translate(34.5%, 30%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  56.25000%, 56.249% { transform: none; opacity: 1; }
  56.25%, 81.249% { transform: none; opacity: 0; }
  81.25% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86.25%, 96.50000% { transform: translate(34.5%, 30%) rotate(12deg); opacity: .15; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  100.00000%, 99.999% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-complete { animation: none; }
  .piece { display: none; animation: none; }
  .animation-control { display: none; }
}
.orbit { position: absolute; border: 1px solid #d8e5f199; border-radius: 50%; }
.orbit-outer { inset: 0; }
.orbit-inner { inset: 10%; border-style: dashed; }
.eyebrow { color: #275a91; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; line-height: 1.6; margin: 0 0 25px; }
h1 { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.17; letter-spacing: -.045em; margin: 0 0 26px; font-weight: 750; }
h1 span { color: #326cb0; }
.lead { font-size: 18px; line-height: 1.55; color: #456080; margin: 0; max-width: 545px; }
.notice { margin-top: 34px; border-left: 2px solid #4180c1; padding-left: 20px; }
h2 { font-size: 18px; line-height: 1.4; margin: 0 0 8px; font-weight: 650; letter-spacing: -.015em; }
.notice p { font-size: 15px; line-height: 1.65; color: #52647c; margin: 0; }
.contact { display: inline-flex; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; padding: 14px 22px; border-radius: 5px; background: #2167a8; color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1.5; }
.contact:hover { background: #174e82; }
footer { border-top: 1px solid #d8e5f1; display: flex; justify-content: space-between; gap: 20px; padding-block: 24px; color: #52647c; font-size: 12px; line-height: 1.6; }
footer strong { color: #1d2739; font-weight: 600; }
@media (min-width: 1600px) { main { gap: 95px; } }
@media (max-width: 900px) {
  .page { width: calc(100% - 56px); }
  main { gap: 30px; grid-template-columns: .65fr 1fr; padding-block: 55px 70px; }
  h1 { font-size: 44px; }
  .lead { font-size: 17px; }
  .desktop-break { display: none; }
}
@media (max-width: 640px) {
  .page { width: calc(100% - 40px); }
  header { padding-block: 24px; gap: 12px; flex-wrap: wrap; }
  .brand img { width: 140px; }
  main { grid-template-columns: 1fr; gap: 48px; padding-block: 20px 52px; }
  .artwork { width: 145px; justify-self: center; }
  .eyebrow { font-size: 10px; margin-bottom: 19px; letter-spacing: .16em; }
  h1 { font-size: clamp(34px, 8.8vw, 52px); margin-bottom: 22px; }
  .lead { font-size: 17px; }
  .notice { margin-top: 27px; padding-left: 16px; }
  .contact { max-width: 100%; font-size: 14px; padding-inline: 17px; gap: 12px; }
  footer { flex-direction: column; gap: 6px; padding-block: 20px; }
}