*{box-sizing:border-box}body{margin:0;background:#242628;color:#e5e1d8;font:16px system-ui,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}header{display:flex;align-items:center;justify-content:space-between;padding:14px 5vw;border-bottom:1px solid #ffffff20;gap:14px}.brand{display:flex;align-items:center;gap:12px;font:600 20px Georgia;letter-spacing:.15em}.brand img{width:42px}header>a:last-child{font-size:14px}.hero{overflow:hidden;background:radial-gradient(ellipse at 60% 55%,#565656,#343638 58%,#252729)}.intro{text-align:center;padding:28px 20px 0}small{font-size:10px;letter-spacing:.18em;color:#c3bba9}h1{font:normal clamp(48px,5.5vw,80px)/1.06 Georgia;margin:10px 0;letter-spacing:-.04em}.intro p{font-size:clamp(15px,1.4vw,19px);line-height:1.5;margin:12px auto 0;color:#cfcbc3}.stage{position:relative;max-width:1600px;margin:auto;height:clamp(540px,47vw,760px);isolation:isolate}.deck{position:absolute;left:2%;top:8%;width:49%;height:64%;perspective:1400px;touch-action:pan-y}.card{position:absolute;left:40%;top:48%;width:48%;aspect-ratio:4/5;padding:0;border-radius:14px;background:#46423c;border:1px solid #d6ccaf80;overflow:hidden;transform:translate(-50%,-50%) translateX(calc(var(--i)*48%)) rotateY(calc(var(--i)*-18deg)) scale(var(--size));transition:transform .8s ease,filter .8s;filter:brightness(var(--light)) saturate(.83);box-shadow:0 16px 35px #0006}.card img{width:100%;height:100%;object-fit:cover;display:block}.card[aria-current=true]{border-color:#e7dcc5;box-shadow:0 18px 45px #0007,0 0 25px #dad5c114}.figure{position:absolute;width:51%;height:auto;right:0;top:2%;pointer-events:none;filter:saturate(.77);z-index:2}nav{position:absolute;left:4%;bottom:7%;width:44%;text-align:center}nav small{display:block;margin-bottom:14px}#countries{display:flex;gap:9px;justify-content:center;position:relative;padding-bottom:10px}#countries:before{content:'';position:absolute;inset:-18px 0 -2px;border-bottom:1px solid #cdc5b044;border-radius:50%;pointer-events:none}#countries button{flex:1;max-width:92px;height:78px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;border:1px solid #c6bda45c;border-radius:14px;background:linear-gradient(145deg,#66645f55,#282a2c);box-shadow:0 8px 18px #0003;transition:transform .2s,background .2s;font-size:13px}#countries button:nth-child(2),#countries button:nth-child(4){transform:translateY(12px)}#countries button:nth-child(3){transform:translateY(18px)}.country-code{font:normal 22px Georgia;color:#e8dcc0;letter-spacing:.06em}button:hover,button:focus-visible,a:focus-visible{outline:2px solid #d6c9a9;outline-offset:3px}#countries button:hover{background:#666259}h2{font:normal 26px Georgia;margin:4px 0}.contact{padding:32px 6vw 40px;display:flex;gap:28px;justify-content:space-between;align-items:center;border-top:1px solid #ffffff20;background:linear-gradient(130deg,#303232,#232526)}.contact h2{line-height:1.25;font-size:clamp(24px,3vw,36px);margin-top:12px}.contact-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;max-width:440px}.contact-actions a,.contact-actions button{border:1px solid #b2aa9666;border-radius:30px;padding:14px 19px;background:transparent;color:inherit;font:inherit}.contact-actions .primary{background:#dcd6c7;color:#222525;border:0}.contact-actions span{font-size:12px;min-height:18px;width:100%;color:#d8d0b9}.controls{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px}.controls button,.close{border:1px solid #99978e77;border-radius:24px;background:#343535ed;padding:8px 13px;min-height:44px;min-width:44px}dialog{background:#28292a;color:inherit;border:1px solid #817f77;border-radius:16px;padding:20px;max-width:95vw;max-height:96dvh}dialog::backdrop{background:#0e1011ed}.close{position:absolute;top:6px;right:6px;z-index:1}#large{display:block;max-width:100%;height:auto;max-height:78dvh;object-fit:contain;margin:auto}#viewer{width:max-content;max-width:96vw}#title{max-width:55vw;text-align:center;font-size:14px}#market{min-width:min(400px,90vw);text-align:center;padding-top:35px}.blank{background:radial-gradient(ellipse,#535250,#303031);padding:25px;border-radius:12px}.blank img{width:130px}.blank p{color:#d1cec5}
@media(max-width:700px){header{padding:12px 4vw}.brand{font-size:15px;letter-spacing:.06em}.brand img{width:32px}header>a:last-child{font-size:12px}.intro{padding-top:24px}.intro h1{font-size:48px}.stage{height:auto;display:flex;flex-direction:column;padding:0 0 28px}.deck{position:relative;left:0;top:auto;width:100%;height:330px;margin-top:8px}.card{width:42%;left:39%;top:50%}.figure{position:relative;right:auto;top:auto;width:90%;align-self:flex-end;margin-top:-8px}nav{position:relative;left:auto;bottom:auto;width:auto;margin:12px 5% 20px}#countries{gap:7px}#countries button{height:70px;font-size:12px}.country-code{font-size:20px}.contact{flex-direction:column;align-items:flex-start;padding:30px 5vw}.contact-actions{gap:8px}.contact-actions a,.contact-actions button{font-size:14px;padding:12px 14px}}
@media(prefers-reduced-motion:reduce){.card,#countries button{transition:none}}
@media(min-width:701px){.stage{height:clamp(580px,51vw,820px)}.deck{left:6%;width:42%;height:64%;top:5%}.card{width:45%;left:38%;top:45%}.figure{width:48%;right:0;top:0}nav{left:6%;width:40%;bottom:13%}}
/* Tighter edge-cropped hero composition */
@media(min-width:701px){.stage{height:clamp(470px,39vw,630px);overflow:hidden}.deck{left:7%;width:51%;height:80%;top:-2%}.card{width:42%;left:39%;top:42%}.figure{width:64%;right:-13%;top:-10%;max-width:none}nav{left:7%;width:43%;bottom:10%}}
@media(max-width:700px){.stage{display:block;height:620px;padding:0;overflow:hidden}.deck{position:absolute;left:0;top:2%;width:78%;height:280px;margin:0}.card{width:47%;left:37%;top:43%}.figure{position:absolute;width:116%;max-width:none;right:-25%;top:105px;margin:0;z-index:2}nav{position:absolute;left:5%;right:5%;bottom:26px;width:auto;margin:0;z-index:3}.intro{padding-top:20px}.intro p{margin-top:8px}.contact{padding-top:25px}}
@media(max-width:700px){.stage{height:calc(100vw + 240px)}.deck{top:24px;height:50vw;width:78%;left:3%}.card{top:50%;width:45%;left:37%}.figure{width:100%;right:-17%;top:110px;mask-image:linear-gradient(#000 78%,transparent 98%)}nav{bottom:32px}}
@media(min-width:701px){.figure{top:0}.deck{top:2%}.card{top:45%;width:39%}}
/* Single-screen digital business card */
body{height:100svh;min-height:600px;display:flex;flex-direction:column;overflow-x:hidden}header{height:90px;flex:none;padding:10px 4%;position:relative;z-index:10;background:#242628}header nav{position:static;width:auto;margin:0;flex:1;max-width:520px;text-align:center}header nav small{display:none}#countries{padding:0;gap:8px}#countries:before{display:none}#countries button{height:60px;max-width:84px;transform:none!important;border-radius:12px;gap:3px}#countries .country-code{font-size:18px}main{flex:1;min-height:0}.hero{height:100%;position:relative;isolation:isolate}.intro{position:relative;z-index:4;padding:15px 15px 0;pointer-events:none}h1{font-size:clamp(42px,4.7vw,68px);margin:6px 0}.intro p{font-size:16px;line-height:1.35;margin:7px auto 0}.intro>small{font-size:9px}.stage{position:absolute;inset:145px 0 0;height:auto!important;max-width:none;overflow:hidden;display:block;padding:0;margin:0}.stage:before{content:'';position:absolute;inset:53% 0 0;background:linear-gradient(180deg,transparent,#76736614 25%,#181b1e85);border-radius:50% 50% 0 0/8% 8% 0 0;z-index:-1}.stage:after{content:'';position:absolute;width:57%;height:15%;right:-6%;bottom:0;background:radial-gradient(ellipse,#000c 5%,#0009 28%,#d9d1ac25 52%,transparent 72%);filter:blur(10px);transform:scaleY(.65);z-index:1}.deck{position:absolute;left:6%;top:0;width:51%;height:70%;margin:0}.card{width:min(39%,29vh);left:39%;top:48%}.figure{position:absolute;width:auto;height:122%;max-width:none;right:-11%;top:-4%;margin:0;z-index:2;mask-image:linear-gradient(#000 87%,#0009 95%,transparent);filter:saturate(.77) drop-shadow(-12px 17px 12px #0006)}.contact{position:absolute;left:6%;bottom:13px;width:49%;padding:12px 8px 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;background:none;border:0;z-index:5}.contact small{font-size:9px}.contact h2{font-size:clamp(20px,2vw,29px);line-height:1.15;margin:5px 0 0}.contact-actions{justify-content:center;gap:8px;max-width:none;width:100%;position:relative}.contact-actions a,.contact-actions button{padding:12px 14px;border-radius:12px;font-size:12px;background:linear-gradient(145deg,#66645f66,#282a2c);box-shadow:0 7px 15px #0003;min-height:45px}.contact-actions .primary{background:linear-gradient(145deg,#e4dece,#bdb59f);color:#242628}.contact-actions span{position:absolute;top:100%;font-size:10px;min-height:0}
@media(max-width:800px){header{padding:8px 3%;height:110px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.brand{font-size:15px}.brand img{width:28px}header>a:last-child{text-align:right;font-size:12px}header nav{grid-column:1/-1;grid-row:2;width:100%;max-width:none}#countries{gap:6px}#countries button{height:45px;max-width:none;flex-direction:row;gap:6px;font-size:11px}#countries .country-code{font-size:13px}.intro{padding-top:12px}.intro h1{font-size:42px}.intro p{font-size:13px}.intro>small{display:none}.stage{inset:116px 0 0}.deck{left:3%;width:71%;height:48%;top:0}.card{width:46%;left:36%;top:49%}.figure{height:90%;width:auto;right:-34%;top:15%;mask-image:linear-gradient(#000 75%,transparent 98%)}.stage:after{width:90%;right:-20%;bottom:12%;height:16%}.contact{left:3%;width:70%;bottom:16px;gap:8px;padding:0;align-items:center}.contact h2{font-size:19px}.contact-actions{gap:5px;flex-wrap:nowrap}.contact-actions a,.contact-actions button{font-size:10px;padding:9px 8px;min-height:42px}.contact small{display:none}}
@media(max-width:450px){.figure{right:-55%;height:88%;top:15%}.contact{width:94%;left:3%;bottom:20px}.contact h2{font-size:19px}.contact-actions a,.contact-actions button{font-size:11px;padding:10px 12px}.stage:after{bottom:17%}.card{width:45%}}
@media(min-width:801px){.figure{right:-3%}}
@media(max-width:450px){.figure{right:-24%}}
@media(max-width:800px){.contact{padding:14px 0 0;background:linear-gradient(180deg,transparent,#242628e8 30%,#242628fa);border-radius:16px}.figure{height:78%;top:16%}.deck{top:-3%}.contact-actions a,.contact-actions button{background:linear-gradient(145deg,#555550,#282a2c)}.contact-actions .primary{background:linear-gradient(145deg,#e4dece,#bdb59f)}}

.mobile-flags{display:none}@media(max-width:800px){header .brand{display:none}header .mobile-flags{display:flex;grid-area:1/1;align-items:center;gap:4px}.mobile-flags img{width:clamp(18px,5vw,25px);height:auto;border-radius:2px}}

/* Office portrait and foreground gallery */
.hero{display:grid;grid-template-columns:54% 46%;grid-template-rows:auto 1fr auto;background:#262827}
.stage{inset:0;pointer-events:none}
.stage::before,.stage::after{display:none}
.office{position:absolute;right:0;top:0;width:48%;height:100%;object-fit:contain;object-position:center;background:#292b29;mask-image:linear-gradient(90deg,transparent,#000 10%)}
.intro,.contact{grid-column:1;position:relative;left:auto;bottom:auto;width:100%;align-self:center}
.intro{grid-row:1;padding-top:clamp(14px,3vh,38px)}
.contact{grid-row:3;padding:10px 12px 22px}
.deck{left:2%;top:27%;width:48%;height:46%;z-index:1;pointer-events:auto}
.card{left:42%;top:50%;width:min(38%,25vh)}
@media(max-width:800px){
 .hero{display:grid;grid-template-columns:100%;grid-template-rows:auto minmax(0,1fr) auto}
 .intro{padding:5px 10px 8px}.intro h1{font-size:32px;margin:0}.intro p{font-size:12px;margin:3px 0}
 .stage{position:relative;inset:auto;grid-row:2;min-height:0}
 .office{width:100%;height:100%;object-position:center top;background:#272928;mask-image:linear-gradient(#000 82%,transparent)}
 .deck{left:0;top:auto;bottom:0;height:24%;width:100%;display:flex;align-items:end;justify-content:center;gap:2%;padding:0 4%}
 .deck .card{position:relative;left:auto;top:auto;width:auto;height:85%;max-width:21%;transform:none;flex:0 1 auto;border-radius:7px}
 .deck .card[aria-current=true]{height:100%}
 .contact{padding:5px 4px 12px;gap:5px;background:#262827}.contact h2{font-size:17px}
 .hero:has(.glass-layout) .deck{justify-content:flex-start;background:linear-gradient(transparent,#2228);gap:1.5%}
 .glass-layout .card{background:#38393477;opacity:.78}.glass-layout .card[aria-current=true],.glass-layout .card:focus-visible{opacity:1}
}

#viewer[open] {
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  border: 0;
  border-radius: 0;
  background: #111;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
#viewer #large {width:100%;height:100%;max-height:none;object-fit:contain}
#viewer .controls {margin:0;padding:3px 54px;min-height:50px}
#viewer .close {
  top: auto;
  bottom: calc(100% + 3px);
  right: 0;
  width: 44px;
  height: 44px;
  background: #25282b;
}
#viewer .banner-dismiss {
  border-radius: inherit;
  overflow: hidden;
  mask-image: var(--poster-mask);
}

#countries button, #countries button:hover {
  background: linear-gradient(rgb(10 14 19 / 57%), rgb(10 14 19 / 70%)), var(--flag) center / 100% 100% no-repeat;
  color: white;
  font-weight: 600;
  text-shadow: 0 1px 3px #000;
}

.intro .delivery{display: inline-block;position:relative;max-width:calc(100% - 90px)}
.delivery picture{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);line-height:0}
.delivery img{width:clamp(32px,6vw,48px);height:auto}
#viewer[open]{position:fixed;inset:auto;background:transparent;padding:0;border-radius:8px;overflow:visible}
#viewer::backdrop{background:rgba(14,16,17,.16)}
#viewer #large {
  object-fit: cover;
  object-position: center top;
  /* Crop the baked-in contact strip at the bottom of each poster. */
  height: var(--cropped-height, 127%);
  max-height: none;
  opacity: .8;
}
#viewer .controls{background:#222525f5;font-size:12px}
@media(max-width:420px){#viewer .controls{padding-inline:4px 45px}#viewer #title{font-size:11px}}

#viewer[open]{display:block}
.banner-dismiss{width:100%;height:100%;display:block;border:0;padding:0;background:transparent;touch-action:pan-y}
.banner-dismiss:focus:not(:focus-visible){outline:0}
.delivery img{width:clamp(48px,14vw,72px)}
.intro .delivery{min-height:48px;align-content:center}
header a[href^="tel:"]{justify-self:end;padding:6px 9px;border-radius:20px;color:#fff0cf;border:1px solid #cbb88870;background:#393731;box-shadow:0 0 13px #ebc37426;white-space:nowrap}
@media(max-width:360px){.intro .delivery{margin-left:35px}}

.contact .contact-actions {
  display:grid;
  grid-template-columns:1fr 1.4fr 1fr;
  width:min(100%,440px);
  gap:6px;
}
.contact .contact-actions :is(a,button) {
  display:grid;
  place-items:center;
  min-width:0;
  min-height:44px;
  padding:8px 4px;
  font:600 clamp(11px,2.9vw,14px)/1.2 system-ui,sans-serif;
  text-align:center;
  color:#f7f2e8;
  border:1px solid #817b6c;
  border-radius:11px;
  background:linear-gradient(160deg,#464748,#292c30);
  box-shadow:inset 0 1px #ffffff15,0 3px 8px #0003;
}
.contact .contact-actions .primary {
  color:#28251f;
  border-color:#ddcda9;
  background:linear-gradient(145deg,#fff5df,#d7c8a9);
}
.contact .contact-actions :is(a,button):active {transform:translateY(1px)}

/* Shared photographic crop and signature for thumbnails and enlarged posters. */
.poster-frame {position:relative;display:block;width:100%;height:100%;margin:0;overflow:hidden}
[data-poster] {
  container-type:inline-size;
  --label-left:25.5%; --label-top:81%; --label-bottom:4.4%;
}
[data-poster="heavy"] {--label-top:82.4%;--label-bottom:3.4%}
[data-poster="warranty"] {--label-top:83%;--label-bottom:3.4%}
[data-poster]::after {
  content:"Менеджер VAN AVTO";
  position:absolute;inset:var(--label-top) 4.1% var(--label-bottom) var(--label-left);
  display:grid;place-items:center;
  border:1px solid #ae884e;border-radius:2.1cqw;
  background:linear-gradient(116deg,#ecdfca,#fff9ec 44%,#e4d4b8);
  box-shadow:inset 0 0 0 .28cqw #fff6df,inset 0 0 1.3cqw #bc9b69;
  color:#251b12;text-shadow:0 .12cqw #fff8df;
  font:600 5.4cqw/1.1 Georgia,serif;
  white-space:nowrap;pointer-events:none;
}.portrait-frame{position:absolute;top:0;right:0;width:min(48%,75cqh);height:auto;aspect-ratio:3/4;--orb:clamp(50px,10cqh,78px)}
.stage{container-type:size}
.portrait-frame .office{inset:0;width:100%;height:100%;mask-image:radial-gradient(circle at calc(var(--orb)*.36) calc(var(--orb)*.36),transparent calc(var(--orb)*.5 + 3px),black calc(var(--orb)*.5 + 4px))}
.portrait-frame picture{position:absolute;width:var(--orb);left:calc(var(--orb)*-.14);top:calc(var(--orb)*-.14);line-height:0}
.portrait-frame picture img{width:100%;height:auto}
.intro .delivery{margin-left:0}
@media(max-width:800px){.portrait-frame{width:min(95%,75cqh);left:50%;right:auto;transform:translateX(-50%)}}
.portrait-frame{--orb:clamp(56px,11.5cqh,86px);--orb-x:min(calc(var(--orb)*.22),5%)}
.portrait-frame .office{border-radius:18px;filter:brightness(.64);mask-image:radial-gradient(circle at var(--orb-x) 6%,transparent calc(var(--orb)*.5 + 3px),black calc(var(--orb)*.5 + 4px))}
.portrait-frame picture{left:var(--orb-x);top:6%;transform:translate(-50%,-50%)}

.intro h1 {
  position: relative;
  isolation: isolate;
  width: fit-content;
  margin-inline: auto;
}
.intro h1::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22% -32%;
  pointer-events: none;
  background: linear-gradient(to bottom, #fff 0 33.33%, #356bd0 33.33% 66.67%, #c43447 66.67%);
  mask-image: radial-gradient(ellipse, black 28%, transparent 76%);
  filter: blur(4px);
  opacity: .2875;
}

/* The globe straddles the portrait edge; the light stays inside the photo. */
.portrait-frame {
  --orb: clamp(62px, 12.6cqh, 94px);
  --orb-x: min(4%, 14px);
  --orb-y: 2px;
  --corner-cut: radial-gradient(circle at var(--orb-x) var(--orb-y),
    transparent calc(var(--orb) / 2 + 1px), black calc(var(--orb) / 2 + 2px));
}
.stage:has(.portrait-frame) { overflow: visible; }
.portrait-frame .office { mask-image: var(--corner-cut); }
.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  mask-image: var(--corner-cut);
  pointer-events: none;
  background:
    radial-gradient(ellipse 29% 11% at 56% 22%, rgb(255 242 219 / 19%), transparent 100%),
    radial-gradient(ellipse at 48% 49%, rgb(255 229 192 / 9.68%), transparent 24%),
    radial-gradient(ellipse at 20% 16%, rgb(255 229 192 / 15.73%), transparent 44%),
    conic-gradient(from 125deg at var(--orb-x) var(--orb-y),
      transparent, rgb(255 233 201 / 10.89%) 19deg, transparent 43deg);
}
.portrait-frame picture { top: var(--orb-y); z-index: 1; }

.portrait-frame .deck {
  inset: auto 0 0;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 2%;
  padding: 0;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  z-index: 2;
}
.portrait-frame .deck .card {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: none;
  height: auto;
  transform: none;
  border-radius: 7px;
}
.portrait-frame .deck .card:first-child { border-bottom-left-radius: 18px; }
.portrait-frame .deck .card:last-child { border-bottom-right-radius: 18px; }

#viewer [data-poster="heavy"], #viewer [data-poster="warranty"] {
  --cropped-height: 125%;
}
#viewer .poster-frame::after { content: none; }
#viewer .poster-frame { background-color: #292b29; }

[data-poster="minivans"]::after, [data-poster="crossovers"]::after { content: none; }
#viewer :is([data-poster="minivans"], [data-poster="crossovers"]) #large {
  height: 100%;
  object-fit: contain;
  opacity: 1;
}
.card:is([data-poster="minivans"], [data-poster="crossovers"]) img { object-fit: contain; background: #ece6dc; }

.hero::before {content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; background: url("assets/world-map.png") center / min(1250px, 135%) auto no-repeat;}

#viewer[open] { display: grid; grid-template-rows: minmax(0, 1fr) 44px; gap: 3px; }
#viewer .banner-dismiss { min-height: 0; }
.viewer-corners { display: flex; align-items: center; justify-content: space-between; }
#viewer .viewer-corners .close { position: static; padding: 0; margin: 0; }
#viewer .poster-frame:is([data-poster="minivans"], [data-poster="crossovers"]) {
  background: radial-gradient(circle at center, #74333c 0 19%, transparent 19.4%), #646566;
}
.card:is([data-poster="minivans"], [data-poster="crossovers"]) img {
  background: transparent;
}