/* KEYLAB — manufacturer photo cards. Scoped to the existing brands section. */
#brands{--champagne:#dec493;--ease:cubic-bezier(.22,.68,0,1.01);background:#101c20;overflow:hidden;padding:90px 0 72px}
#brands .brands-layout{display:block}
#brands .brands-intro{position:relative;display:grid;grid-template-columns:1.25fr 1fr;column-gap:80px;padding:0 0 38px}
#brands .brands-intro .eyebrow{grid-column:1/-1;margin-bottom:24px;font-size:9px;letter-spacing:2.5px}
#brands .brands-intro h2{font-size:clamp(36px,3.6vw,52px);line-height:1.08;letter-spacing:-1.5px}
#brands .brands-intro h2 em{color:var(--champagne)}
#brands .brands-intro>p:not(.eyebrow){align-self:center;max-width:360px;margin:0 0 0 auto;color:#aeb9b8;font-size:13px;line-height:1.9}
#brands .brands-intro .small-label{grid-column:1/-1;display:flex;align-items:center;gap:20px;margin-top:39px;font-size:8px;letter-spacing:2px;color:#b7a483}
#brands .brands-intro .small-label:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,#8a795c66,#8a795c12)}
#brands .brand-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;perspective:1400px}
#brands .brand-buttons button{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;isolation:isolate;display:block;min-width:0;height:254px;min-height:0;padding:0;overflow:hidden;text-align:left;border:1px solid #78929330;border-radius:3px;background:#1b2a2e;color:#f7f3ea;transform:translateY(0) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .55s var(--ease),border-color .45s,box-shadow .55s,background .45s;box-shadow:0 8px 24px #00000010}
#brands .brand-buttons button:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at var(--mx) var(--my),#fff5d51c,transparent 65%);opacity:0;transition:opacity .5s}
#brands .brand-buttons button:after{content:'';position:absolute;z-index:3;inset:0;pointer-events:none;border:1px solid #f8e0ac00;box-shadow:inset 0 0 0 5px #101b2000;transition:border-color .45s,box-shadow .45s}
#brands .brand-photo{display:block;position:absolute;z-index:-3;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--photo-position,50% 58%);filter:saturate(.62);opacity:.81;transform:scale(1.005);transition:transform 1.1s var(--ease),filter .7s,opacity .7s}
#brands .brand-shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,#0c171e40 0%,#0c171e05 24%,#0c171e15 42%,#0b171cdb 82%,#0a151bf5 100%);pointer-events:none}
#brands .brand-topline{position:absolute;inset:17px 19px auto;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:8px;line-height:1;letter-spacing:1.8px;color:#eee3ce;text-shadow:0 1px 8px #0009}
#brands .brand-status{display:grid;place-items:center;width:22px;height:22px;border:1px solid #ffffff45;border-radius:50%;color:transparent;background:#10202525;transition:color .4s,border-color .4s,background .4s}
#brands .brand-status svg{width:11px;height:11px;stroke-width:1.7}
#brands .brand-caption-wrap{position:absolute;inset:auto 20px 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;transition:transform .6s var(--ease)}
#brands .brand-name{display:block;font-size:23px;font-weight:400;letter-spacing:-.5px;line-height:1.15;text-shadow:0 2px 16px #0005}
#brands [data-brand="Mercedes-Benz"] .brand-name{font:400 23px/1.15 Georgia,'Times New Roman',serif;letter-spacing:-.7px}
#brands [data-brand="Porsche"] .brand-name{font-size:19px;letter-spacing:2px;text-transform:uppercase}
#brands [data-brand="Zeekr"] .brand-name,#brands [data-brand="Avatr"] .brand-name,#brands [data-brand="Hongqi"] .brand-name,#brands [data-brand="AITO"] .brand-name,#brands [data-brand="VOYAH"] .brand-name{letter-spacing:2px;font-size:22px}
#brands .brand-buttons button[data-brand="Другая марка"]{grid-column:1/-1;height:132px}
#brands [data-brand="Другая марка"] .brand-name{font-size:21px}
#brands .brand-detail{display:block;margin-top:8px;font-size:9px;line-height:1.5;letter-spacing:.55px;color:#b8c3c0}
#brands .brand-arrow{display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px;border:1px solid #c3b38e65;border-radius:50%;color:#dcc79c;transition:background .45s,transform .6s var(--ease),color .45s}
#brands .brand-arrow svg{width:13px;height:13px;transform:rotate(-40deg)}
#brands .brand-buttons button[aria-pressed=true]{border-color:#dcc493;background:#1b2a2e;color:#f7f3ea;box-shadow:0 10px 30px #0003,0 0 20px #dec4930c}
#brands .brand-buttons button[aria-pressed=true]:after{border-color:#dec49380;box-shadow:inset 0 0 0 4px #0b171c35}
#brands .brand-buttons button[aria-pressed=true] .brand-status{background:var(--champagne);border-color:var(--champagne);color:#19272a}
#brands .brand-buttons button[aria-pressed=true] .brand-photo{filter:saturate(.95);opacity:.98}
#brands .brand-buttons button[aria-pressed=true] .brand-name{color:#f3dcb2}
#brands .brand-buttons button[aria-pressed=true] .brand-arrow{background:var(--champagne);color:#162329;border-color:var(--champagne)}
#brands .brand-buttons button:focus-visible{outline:2px solid #f3dcb2;outline-offset:4px;z-index:5}
#brands .brand-monogram{position:absolute;inset:38px 0 auto;text-align:center;font-size:72px;font-weight:400;letter-spacing:8px;color:#dec49318;line-height:1.5;transition:transform 1s var(--ease)}
#brands .brand-abstract{background:radial-gradient(ellipse at 70% 20%,#48656355,transparent 70%),linear-gradient(130deg,#28373a,#101c21)!important}
#brands .brand-abstract .brand-shade{background:repeating-linear-gradient(125deg,transparent 0 48px,#d6be9020 49px,transparent 50px 105px),linear-gradient(0deg,#0d191ee6,transparent)}
#brands .brand-abstract .brand-monogram svg{width:86px;height:86px;stroke-width:.5;transform:rotate(-25deg);color:#dcc4945c}
#brands .brand-result{position:relative;gap:28px;margin-top:33px;padding:26px;border:1px solid #b5a17c66;border-radius:3px;background:#dec49308;min-height:118px;align-items:center;scroll-margin-block:24px}
#brands .brand-result:focus-visible{outline:2px solid var(--champagne);outline-offset:4px}
#brands .brand-result>div{flex:1;display:grid;grid-template-columns:.8fr 1.2fr;column-gap:45px;align-items:center}
#brands .brand-result .small-label{grid-column:1;font-size:8px;letter-spacing:1.8px;color:#b8a482}
#brands .brand-result h3{grid-column:1;grid-row:2;margin:9px 0 0;font:400 29px/1.2 Georgia,'Times New Roman',serif;color:#f4ecd9}
#brands .brand-result p{grid-column:2;grid-row:1/3;min-height:0;max-width:530px;color:#b4bfbb;font-size:12px;line-height:1.85}
#brands .circle-button{width:54px;height:54px;transition:background .3s,transform .4s}
#brands .circle-button:hover{transform:translateX(3px)}
#brands #brand-consult{display:flex;align-items:center;justify-content:center;gap:16px;flex-shrink:0;width:auto;min-height:48px;height:auto;margin:0;padding:15px 20px;border:1px solid var(--champagne);border-radius:2px;background:var(--champagne);color:#162329;font-size:11px;line-height:1.4;white-space:nowrap;transition:background .25s,transform .25s}
#brands #brand-consult svg{width:18px;height:18px;flex-shrink:0}
#brands #brand-consult:hover{background:#efdbb6;transform:translateY(-2px)}
#brands #brand-consult:active{transform:translateY(1px)}
#brands #brand-consult:focus-visible{outline:2px solid #f3dcb2;outline-offset:4px}
#brands .brand-disclaimer{margin-top:20px;color:#8e9e9c;font-size:9px;letter-spacing:.1px}
#brands .reveal-ready{opacity:0;translate:0 24px}
#brands .reveal-ready.is-visible{opacity:1;translate:0 0;transition:opacity .75s var(--ease),translate .85s var(--ease);transition-delay:var(--reveal-delay,0ms)}
@media(hover:hover) and (pointer:fine){
 #brands .brand-buttons button:hover{z-index:4;transform:translateY(-5px) rotateX(var(--rx)) rotateY(var(--ry));border-color:#cdb58a;box-shadow:0 20px 38px #0005}
 #brands .brand-buttons button:hover:before{opacity:1}
 #brands .brand-buttons button:hover .brand-photo{transform:scale(1.075);filter:saturate(1);opacity:1}
 #brands .brand-buttons button:hover .brand-caption-wrap{transform:translateY(-3px)}
 #brands .brand-buttons button:hover .brand-arrow{background:#dec493;color:#172327;transform:rotate(40deg)}
 #brands .brand-buttons button:hover .brand-monogram{transform:scale(1.07)}
}
@media(min-width:1600px){#brands .brand-buttons button{height:294px}}
@media(max-width:1100px){#brands .brands-intro{column-gap:45px}#brands .brand-buttons{gap:12px}#brands .brand-buttons button{height:235px}#brands .brand-name{font-size:21px}#brands [data-brand="Mercedes-Benz"] .brand-name{font-size:20px}#brands .brand-caption-wrap{inset:auto 15px 17px}#brands .brand-topline{inset:15px 15px auto}}
@media(max-width:900px){#brands .brand-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}#brands .brands-intro{grid-template-columns:1fr 1fr}#brands .brands-intro h2{font-size:39px}#brands .brands-intro>p:not(.eyebrow){font-size:12px}#brands .brand-result>div{column-gap:24px}}
@media(max-width:700px){
 #brands{padding:55px 0 49px}
 #brands .brands-intro{display:block;padding-bottom:25px}
 #brands .brands-intro .eyebrow{font-size:8px;margin-bottom:22px}
 #brands .brands-intro h2{font-size:clamp(31px,8.5vw,44px);letter-spacing:-1px}
 #brands .brands-intro>p:not(.eyebrow){max-width:420px;margin:22px 0 0;font-size:12px;line-height:1.8}
 #brands .brands-intro .small-label{margin-top:27px;font-size:7px;letter-spacing:1.5px;gap:13px}
 #brands .brand-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #brands .brand-buttons button{height:218px}
 #brands .brand-topline{inset:12px 12px auto;font-size:7px;letter-spacing:1px}
 #brands .brand-status{width:19px;height:19px}
 #brands .brand-caption-wrap{inset:auto 12px 17px;gap:5px}
 #brands .brand-name{font-size:21px}
 #brands [data-brand="Mercedes-Benz"] .brand-name{font-size:18px;letter-spacing:-.8px}
 #brands [data-brand="Range Rover"] .brand-name{font-size:19px}
 #brands [data-brand="Porsche"] .brand-name{font-size:16px;letter-spacing:1.2px}
 #brands [data-brand="Zeekr"] .brand-name,#brands [data-brand="Avatr"] .brand-name,#brands [data-brand="Hongqi"] .brand-name,#brands [data-brand="AITO"] .brand-name,#brands [data-brand="VOYAH"] .brand-name{font-size:19px;letter-spacing:1.5px}
 #brands [data-brand="Другая марка"] .brand-name{font-size:17px}
 #brands .brand-detail{font-size:8px;letter-spacing:.1px;margin-top:7px}
 #brands .brand-arrow{display:none}
 #brands .brand-monogram{font-size:52px;letter-spacing:3px;top:41px}
 #brands .brand-result{flex-direction:column;gap:20px;align-items:stretch;padding:22px 20px;margin-top:24px;scroll-margin-bottom:90px}
 #brands .brand-result>div{display:block}
 #brands .brand-result h3{font-size:26px;margin-top:8px}
 #brands .brand-result p{font-size:11px;line-height:1.8;margin-top:13px}
 #brands .circle-button{width:43px;height:43px;margin-top:19px}
 #brands .brand-disclaimer{font-size:8px;line-height:1.7;margin-top:18px}
}
@media(max-width:370px){#brands .brand-buttons{gap:8px}#brands .brand-buttons button{height:194px}#brands .brand-caption-wrap{left:10px;right:10px}#brands [data-brand="Mercedes-Benz"] .brand-name{font-size:17px}#brands .brand-detail{font-size:7px}}
@media(prefers-reduced-motion:reduce){#brands .brand-buttons button{transform:none!important}#brands .brand-photo{transform:none!important}#brands .reveal-ready{opacity:1;translate:none}#brands *{scroll-behavior:auto}}

/* Customer photos preserve the whole key; the caption has its own space. */
#brands .brand-buttons button{height:340px}
#brands .brand-key-photo .brand-photo{inset:0 0 65px;height:calc(100% - 65px);object-fit:cover;object-position:50% 100%;background:#152226;opacity:.96;filter:saturate(.9)}
#brands [data-brand="Lincoln"] .brand-photo{filter:brightness(1.3) saturate(.9)}
#brands .brand-key-photo .brand-shade{background:linear-gradient(180deg,#08131688,transparent 28%,transparent 70%,#0b171c22)}
#brands .brand-key-photo .brand-caption-wrap{inset:auto 17px 14px}
#brands .brand-key-photo .brand-name{font-size:21px}
#brands .brand-key-photo .brand-detail{margin-top:5px}
#brands .brand-key-photo:hover .brand-photo{transform:scale(1.025)}
#brands .brand-motorcycles{margin-top:40px;padding-top:30px;border-top:1px solid #b5a17c40}
#brands .brand-moto-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:22px}
#brands .brand-moto-heading .small-label{margin-bottom:10px;color:#b8a482;font-size:8px;letter-spacing:1.8px}
#brands .brand-moto-heading h3{font:400 30px/1.2 Georgia,'Times New Roman',serif;color:#f4ecd9}
#brands .brand-moto-heading>p{font-size:12px;color:#b4bfbb;line-height:1.8;margin:0}
#brands .brand-moto-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}
#brands .brand-moto-buttons button{height:300px}
#brands .brand-moto-buttons .brand-photo{inset:0;width:52%;height:100%;object-fit:cover;object-position:50% 72%}
#brands .brand-moto-buttons .brand-caption-wrap{inset:auto 20px 30px 57%}
#brands .brand-moto-buttons .brand-shade{right:48%}
@media(max-width:700px){
 #brands .brand-buttons button{height:clamp(245px,58vw,360px)}
 #brands .brand-key-photo .brand-photo{bottom:64px;height:calc(100% - 64px)}
 #brands .brand-key-photo .brand-caption-wrap{inset:auto 12px 13px}
 #brands .brand-key-photo .brand-name{font-size:18px;letter-spacing:-.5px}
 #brands .brand-moto-heading{display:block}
 #brands .brand-moto-heading h3{font-size:27px}
 #brands .brand-moto-heading>p{margin-top:14px;font-size:11px}
 #brands .brand-moto-buttons .brand-name{font-size:16px}
 #brands .brand-moto-buttons button{height:clamp(245px,58vw,360px)}
 #brands .brand-moto-buttons .brand-photo{inset:0 0 64px;width:100%;height:calc(100% - 64px);object-fit:cover;object-position:50% 100%}
 #brands .brand-moto-buttons .brand-caption-wrap{inset:auto 12px 13px}
 #brands .brand-moto-buttons .brand-shade{right:0}
}