:root{
  color-scheme:dark;
  --ink:#221f20;
  --wine:#981918;
  --white:#fff;
  --sans:'Manrope',Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-height:100%;margin:0;background:var(--ink);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--white);outline-offset:5px}

.brand-choice{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:max(100svh,640px);padding:clamp(28px,6vh,64px) clamp(18px,7vw,112px) 18px;background:var(--ink);color:var(--white)}
.brand-choice__main{display:grid;align-content:center;gap:clamp(28px,5vh,52px);width:min(1120px,100%);margin:0 auto}
.brand-choice__heading{text-align:center}
.brand-choice__heading h1{margin:0;font:500 clamp(32px,4vw,52px)/1 var(--sans);letter-spacing:-.055em}
.brand-choice__heading p{margin:13px 0 0;color:rgba(255,255,255,.76);font:500 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.brand-choice__options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3)}
.brand-choice__option{position:relative;display:flex;min-width:0;min-height:clamp(245px,38vh,340px);flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:28px 20px;text-align:center;transition:color .18s ease}
.brand-choice__option+.brand-choice__option{border-left:1px solid rgba(255,255,255,.3)}
.brand-choice__option::after{position:absolute;right:50%;bottom:0;left:50%;height:3px;background:var(--wine);content:"";transition:left .18s ease,right .18s ease}
.brand-choice__option:hover::after,.brand-choice__option:focus-visible::after{right:22%;left:22%}
.brand-choice__option img{display:block;width:clamp(118px,14vw,186px);height:clamp(118px,14vw,186px);max-width:100%;flex:0 0 auto;object-fit:contain;object-position:center}
.brand-choice__option-name{color:var(--white);font:700 clamp(12px,1.15vw,15px)/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.brand-choice__option-detail{color:rgba(255,255,255,.82);font:500 10px/1.35 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.brand-choice__option-address{display:block;max-width:24ch;color:rgba(255,255,255,.82);font:500 13px/1.4 var(--sans);letter-spacing:.01em;text-transform:none}
.brand-choice__legal{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 24px;width:min(1120px,100%);margin:0 auto;color:rgba(255,255,255,.8);font:500 10px/1.45 var(--sans);letter-spacing:.025em}
.brand-choice__legal p{margin:0}
.brand-choice__legal a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.brand-choice__skip{position:fixed;z-index:10;top:-100px;left:16px;padding:12px 16px;background:var(--white);color:var(--ink);font:700 13px/1 var(--sans)}
.brand-choice__skip:focus{top:16px}

@media(max-width:760px){
  .brand-choice{min-height:max(100svh,640px);padding:calc(env(safe-area-inset-top) + 28px) 16px calc(env(safe-area-inset-bottom) + 14px)}
  .brand-choice__main{gap:clamp(26px,5vh,40px)}
  .brand-choice__heading h1{font-size:clamp(29px,8vw,36px)}
  .brand-choice__heading p{margin-top:10px;font-size:12px;letter-spacing:.08em}
  .brand-choice__option{min-height:224px;gap:15px;padding:20px 8px}
  .brand-choice__option img{width:min(100%,116px);height:116px;max-width:100%;object-fit:contain;object-position:center}
  .brand-choice__option-name{font-size:12px;letter-spacing:.04em}
  .brand-choice__option-address{max-width:18ch;font-size:13px}
  .brand-choice__legal{display:grid;gap:5px;font-size:9px}
}

@media(max-height:560px) and (min-width:761px){
  .brand-choice{min-height:max(100svh,390px);padding:18px 5vw 12px}
  .brand-choice__main{gap:14px}
  .brand-choice__heading h1{font-size:28px}
  .brand-choice__heading p{margin-top:6px}
  .brand-choice__option{min-height:150px;gap:10px;padding:12px}
  .brand-choice__option img{width:90px;height:90px;max-width:100%;object-fit:contain;object-position:center}
  .brand-choice__legal{font-size:8px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .brand-choice__option,.brand-choice__option::after{transition:none}
}
